telekom · christopherGdynia · Jan 12, 2022 · Jan 12, 2022 · Jan 12, 2022 · Jan 12, 2022
@@ -28,11 +28,11 @@ export class Accordion {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   /** If `true`, only one scale-collapsible within the accordion can be open at a time */
-  @Prop() dependent: boolean = false;
+  @Prop() dependent?: boolean = false;
   /** If `true`, scale-collapsibles within the accordion will all be open initially, unless this is dependant */
-  @Prop() expanded: boolean = false;
+  @Prop() expanded?: boolean = false;
   /** Heading level for scale-collapsible descendants */
-  @Prop() headingLevel: number | null = null;
+  @Prop() headingLevel?: number | null = null;
 
   /**
    * Handle `dependent`

@@ -42,7 +42,7 @@ export class Collapsible {
   /** Set to `true` to expand */
   @Prop({ mutable: true, reflect: true }) expanded: boolean;
   /** Default aria-level for heading */
-  @Prop() headingLevel: number = 2;
+  @Prop() headingLevel?: number = 2;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 

@@ -100,7 +100,7 @@ export class DataGrid {
   /** (optional) Set to true to add selection column */
   @Prop() selectable?: boolean = false;
   /** Read-only selection array - populated with raw data from selected rows */
-  @Prop() selection: string[] = [];
+  @Prop() selection?: string[] = [];
   /** (optional) Shade every second row darker */
   @Prop() shadeAlternate?: boolean = true;
   /** (optional) Injected css styles */

@@ -56,10 +56,10 @@ export class DatePicker {
   /**
    * Name of the date picker input.
    */
-  @Prop() name: string = 'date';
+  @Prop() name?: string = 'date';
 
   /** @deprecated in v3 in favor of localization.calendarHeading */
-  @Prop() popupTitle: string = 'Pick a date';
+  @Prop() popupTitle?: string = 'Pick a date';
 
   /**
    * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
@@ -82,12 +82,12 @@ export class DatePicker {
    * This setting can be useful when the input is smaller than the opening date picker
    * would be as by default the picker always opens towards right.
    */
-  @Prop() direction: DuetDatePickerDirection = 'right';
+  @Prop() direction?: DuetDatePickerDirection = 'right';
 
   /**
    * Should the input be marked as required?
    */
-  @Prop() required: boolean = false;
+  @Prop() required?: boolean = false;
 
   /**
    * Date value. Must be in IS0-8601 format: YYYY-MM-DD.
@@ -98,13 +98,13 @@ export class DatePicker {
    * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
    * This setting can be used alone or together with the max property.
    */
-  @Prop() min: string = '';
+  @Prop() min?: string = '';
 
   /**
    * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
    * This setting can be used alone or together with the min property.
    */
-  @Prop() max: string = '';
+  @Prop() max?: string = '';
 
   /**
    * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
@@ -138,7 +138,7 @@ export class DatePicker {
   @Prop() invalid?: boolean;
 
   /** (optional) Label */
-  @Prop() label: string = '';
+  @Prop() label?: string = '';
 
   /** (optional) Size */
   @Prop() size?: string = '';

@@ -30,7 +30,7 @@ export class ListItem {
   /** Index number, useful only for styling the `ordered` type */
   @Prop({ mutable: true }) index?: number;
   /** If `false`, no marker or left padding will be visible */
-  @Prop() marker: boolean = true;
+  @Prop() marker?: boolean = true;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 

@@ -9,10 +9,10 @@ let i = 0;
   shadow: true,
 })
 export class LoadingSpinner {
-  @Prop() variant: 'white' | 'primary' = 'primary';
-  @Prop() alignment: 'horizontal' | 'vertical' = 'horizontal';
+  @Prop() variant?: 'white' | 'primary' = 'primary';
+  @Prop() alignment?: 'horizontal' | 'vertical' = 'horizontal';
   @Prop() text: string;
-  @Prop() size: 'small' | 'large' = 'small';
+  @Prop() size?: 'small' | 'large' = 'small';
 
   componentWillLoad() {
     i++;

@@ -54,7 +54,7 @@ export class MenuFlyoutList {
   /**  */
   @Prop({ reflect: true, mutable: true }) active: boolean = false;
   /** (optional) Determines whether the flyout should close when a menu item is selected */
-  @Prop() closeOnSelect = true;
+  @Prop() closeOnSelect?: boolean = true;
   /** (optional) Injected styles */
   @Prop() styles?: string;
 

@@ -33,7 +33,7 @@ export class MenuFlyout {
   @Element() hostElement: HTMLElement;
 
   /** (optional) Determines whether the flyout should close when a menu item is selected */
-  @Prop() closeOnSelect = true;
+  @Prop() closeOnSelect?: boolean = true;
   /** (optional) Set preference for where the menu appears, space permitting */
   @Prop() direction:
     | 'bottom-right'

@@ -23,9 +23,9 @@ export class NotificationBadge {
   /** (optional) Text that is displayed in the badge */
   @Prop() label: number;
   /** (optional) Maximal number of characters displayed in the badge */
-  @Prop() maxCharacters: number = 3;
+  @Prop() maxCharacters?: number = 3;
   /** (optional) Setting/Slotcontent in which the badge is used */
-  @Prop() type: 'icon' | 'text' | 'nav-icon' = 'icon';
+  @Prop() type?: 'icon' | 'text' | 'nav-icon' = 'icon';
   /** (optional) Handle click on the badge and surroundet slot elements */
   @Prop() clickHandler: any;
 

@@ -61,17 +61,17 @@ export class Pagination {
   /** (optional) Injected styles */
   @Prop() styles?: string;
   /** @deprecated - size should replace small */
-  @Prop() small: boolean = false;
+  @Prop() small?: boolean = false;
   /** (optional) size  */
-  @Prop() size: 'small' | 'large' = 'large';
+  @Prop() size?: 'small' | 'large' = 'large';
   /** (optional) translation to 'Go to first page'  */
-  @Prop() ariaLabelFirstPage = 'Go to first page';
+  @Prop() ariaLabelFirstPage?: string = 'Go to first page';
   /** (optional) translation to 'Go to next page'  */
-  @Prop() ariaLabelNextPage = 'Go to next page';
+  @Prop() ariaLabelNextPage?: string = 'Go to next page';
   /** (optional) translation to 'Go to previous page'  */
-  @Prop() ariaLabelPreviousPage = 'Go to previous page';
+  @Prop() ariaLabelPreviousPage?: string = 'Go to previous page';
   /** (optional) translation to 'Go to last page'  */
-  @Prop() ariaLabelLastPage = 'Go to last page';
+  @Prop() ariaLabelLastPage?: string = 'Go to last page';
 
   /* 4. Events (alphabetical) */
   /** Event triggered every time the data is edited, changing original rows data */

@@ -25,7 +25,7 @@ export class ProgressBar {
   /** (optional) Progress bar busy switch */
   @Prop() busy?: boolean = false;
   /** (required) Progress bar percentage */
-  @Prop() percentage: number = 0;
+  @Prop() percentage?: number = 0;
   /** @deprecated - (optional) Progress bar customColor */
   @Prop() customColor?: string;
   /** (optional) Progress bar stroke width */

@@ -44,13 +44,13 @@ export class RatingStars {
   ratingStarId = `scale-rating-star-${ratingStarCount++}`;
 
   /** @deprecated; size should be used instead of starSize */
-  @Prop() starSize: 'small' | 'large' = 'large';
+  @Prop() starSize?: 'small' | 'large' = 'large';
   /** size of the stars  */
   @Prop({ reflect: true, mutable: true }) size: 'small' | 'large' = 'large';
   /** @deprecated; The lower limit of the rating */
-  @Prop() minRating = 0;
+  @Prop() minRating?: number = 0;
   /** @deprecated; max should be used instead of maxRating */
-  @Prop() maxRating = 5;
+  @Prop() maxRating?: number = 5;
   /** The upper limit of the rating */
   @Prop({ reflect: true, mutable: true }) max = 5;
   /** Represents the current value of the rating */
@@ -60,7 +60,7 @@ export class RatingStars {
   /** disables input  */
   @Prop({ reflect: true }) disabled = false;
   /** a11y text for getting meaningful value. `$rating` and `$max` (deprecated `$maxRating`) are template variables and will be replaces by their corresponding properties.  */
-  @Prop() ariaLabelTranslation = '$rating out of $max stars';
+  @Prop() ariaLabelTranslation?:string = '$rating out of $max stars';
   /** (optional) rating label */
   @Prop({ reflect: true }) label = 'Rating';
   /** (optional) info text */

@@ -25,17 +25,17 @@ export class SidebarNavCollapsible {
   /** The text for the button */
   @Prop() label: string;
   /** The URL where the link should point to */
-  @Prop() href: string = '#';
+  @Prop() href?: string = '#';
   /** Set this to `true` to expand */
   @Prop({ mutable: true, reflect: true }) expanded: boolean;
   /** Label and icon get the active color */
   @Prop() active?: boolean = false;
   /** Bold label and icon */
-  @Prop() bold: boolean = false;
+  @Prop() bold?: boolean = false;
   /** Used normally for third level items */
-  @Prop() condensed: boolean = false;
+  @Prop() condensed?: boolean = false;
   /** Nesting level within the <scale-sidebar-nav> parent, gets set automatically */
-  @Prop() nestingLevel: number;
+  @Prop() nestingLevel?: number;
   /** (optional) Extra styles */
   @Prop() styles?: string;
 

@@ -49,16 +49,16 @@ export class SidebarNavItem {
   @Element() el: HTMLElement;
 
   /** Used normally for third level items, remove the bottom border */
-  @Prop() condensed: boolean = false;
+  @Prop() condensed?: boolean = false;
   /** Bold text */
-  @Prop() bold: boolean = false;
+  @Prop() bold?: boolean = false;
   /** Text gets the active color */
   @Prop({ mutable: true, reflect: true }) active: boolean = false;
   /**
    * Mark the child link as "current" with `aria-current=page`.
    * Provide the text hint if needed, default is: "Zurzeit aktiv"
    */
-  @Prop() current: string | null | boolean = null;
+  @Prop() current?: string | null | boolean = null;
   /** Nesting level within the <scale-sidebar-nav> parent, gets set automatically */
   @Prop() nestingLevel: number;
   /** (optional) Extra styles */

@@ -34,9 +34,9 @@ export class TabHeader {
   @Prop() disabled?: boolean = false;
   /** True for smaller height and font size */
   // DEPRECATED - size should replace small
-  @Prop() small: boolean = false;
+  @Prop() small?: boolean = false;
   /** (optional) size  */
-  @Prop() size: 'small' | 'large' = 'large';
+  @Prop() size?: 'small' | 'large' = 'large';
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   @Prop() selected: boolean;

@@ -40,9 +40,9 @@ export class TabNav {
 
   /** True for smaller height and font size in tab headers. */
   /** @deprecated - size should replace small */
-  @Prop() small: boolean = false;
+  @Prop() small?: boolean = false;
   /** (optional) size  */
-  @Prop() size: 'small' | 'large' = 'large';
+  @Prop() size?: 'small' | 'large' = 'large';
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 

@@ -26,9 +26,9 @@ export class TabPanel {
   @Element() el: HTMLElement;
   /** True for smaller height and font size */
   // DEPRECATED - size should replace small
-  @Prop() small: boolean = false;
+  @Prop() small?: boolean = false;
   /** (optional) size  */
-  @Prop() size: 'small' | 'large' = 'large';
+  @Prop() size?: 'small' | 'large' = 'large';
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 

@@ -18,10 +18,10 @@ import { Component, h, Prop } from '@stencil/core';
 export class Logo {
   @Prop() href?: string = 'javascript:void(0);';
   @Prop() logoTitle?: string = 'Telekom Logo';
-  @Prop() color: string = '#fff';
-  @Prop() claim: boolean = false;
+  @Prop() color?: string = '#fff';
+  @Prop() claim?: boolean = false;
   @Prop() claimLang: string;
-  @Prop() focusable: boolean = true;
+  @Prop() focusable?: boolean = true;
 
   render() {
     if (!this.claim) {

@@ -20,9 +20,9 @@ import classNames from 'classnames';
 export class Logo {
   @Element() hostElement: HTMLElement;
   /** (optional) Variant/color of the logo text and logo */
-  @Prop() variant: 'magenta' | 'white' = 'magenta';
+  @Prop() variant?: 'magenta' | 'white' = 'magenta';
   /** (optional) Set transparent background */
-  @Prop() transparent: boolean = false;
+  @Prop() transparent?: boolean = false;
   /** (optional) Language of the logo text/ claimOff showes just the T Logo */
   @Prop() language:
     | 'de'
@@ -37,9 +37,9 @@ export class Logo {
     | 'sk'
     | '' = 'en';
   /** (optional) The height in pixels */
-  @Prop() size: number = 36;
+  @Prop() size?: number = 36;
   /** (optional) Set a link */
-  @Prop() href: string = '';
+  @Prop() href?: string = '';
   /** (optional) Possibility for adding a onClick Event */
   @Prop() clickHandler: any;
   /** (optional) When using the icon standalone, make it meaningful for accessibility */

@@ -34,7 +34,7 @@ export class NavIcon {
   @Prop() refMobileMenuToggle?: any;
   @Prop() refMobileUserMenuToggle?: any;
   @Prop() refUserMenuToggle?: any;
-  @Prop() badge: boolean = false;
+  @Prop() badge?: boolean = false;
   @Prop() badgeLabel: number;
 
   componentWillRender() {

@@ -57,7 +57,7 @@ export class ToggleButton {
   /** (optional) set the border-radius left, right or both */
   @Prop() hideBorder: false;
   /** (optional) set the border-radius left, right or both */
-  @Prop() radius: 'left' | 'right' | 'both' | 'neither' | null = null;
+  @Prop() radius?: 'left' | 'right' | 'both' | 'neither' | null = null;
   /** (optional) toggle button's id */
   @Prop({ reflect: true }) toggleButtonId?: string;
   /** (optional) aria-label attribute needed for icon-only buttons */
@@ -71,7 +71,7 @@ export class ToggleButton {
   /** (optional) translation of 'deselected */
   @Prop() ariaLangDeselected? = 'deselected';
   /** a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties.  */
-  @Prop() ariaDescriptionTranslation = '$selected';
+  @Prop() ariaDescriptionTranslation?: string = '$selected';
   /** Emitted when button is clicked */
   @Event({ eventName: 'scale-click' }) scaleClick!: EventEmitter<{
     id: string;

@@ -55,7 +55,7 @@ export class ToggleGroup {
   /** (optional) If `true`, the group has a border */
   @Prop() hideBorder?: boolean = false;
   /** (optional) more than one button selected possible */
-  @Prop() singleSelect: boolean = false;
+  @Prop() singleSelect?: boolean = false;
   /** (optional) aria-label attribute needed for icon-only buttons */
   @Prop()
   ariaLabelTranslation = `toggle button group with $slottedButtons buttons`;

@@ -40,7 +40,7 @@ export class Tooltip {
 
   @Element() host: HTMLElement;
   /** (optional) The content of the Tooltip supporting Text only */
-  @Prop() content = '';
+  @Prop() content?: string = '';
   /** (optional) Position of the Tooltip on the Object */
   @Prop() placement:
     | 'top'
@@ -56,21 +56,21 @@ export class Tooltip {
     | 'left-start'
     | 'left-end' = 'top';
   /** (optional) Disable Tooltip */
-  @Prop() disabled = false;
+  @Prop() disabled?:boolean = false;
   /** (optional) Distance of the Tooltip from the Target Object (related to the `placement`) */
-  @Prop() distance = 5;
+  @Prop() distance?:number = 5;
   /** (optional) Set the Tooltip to open per default (will still be closed on closing Events) */
   @Prop({ mutable: true, reflect: true }) open = false;
   /** (optional) skidding moves the tooltip of the element in dependence of its `placement` to the element either
    * on an x-axis (at `placement` top/down) or on a y-axis (for output `placement` left/right)
    */
   @Prop() skidding = 0;
   /** (optional) Set custom trigger Event selection */
-  @Prop() trigger: string = 'hover focus';
+  @Prop() trigger?: string = 'hover focus';
   /** (optional) Switching the flip option of the tooltip on and off */
-  @Prop() flip: boolean = true;
+  @Prop() flip?: boolean = true;
   /** (optional) Switching the preventOverflow option of the tooltip on and off */
-  @Prop() preventOverflow: boolean = false;
+  @Prop() preventOverflow?: boolean = false;
   @State() mouseOverTooltip: boolean = false;
 
   @Event({ eventName: 'scale-before-show' }) tooltipBeforeShow: EventEmitter;