@scania/tegel 1.40.0-ts-strict-mode-beta.0 → 1.41.0-beta.0

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -4,6 +4,18 @@ import { Host, h, } from "@stencil/core";
  */
 export class TdsInlineTabs {
     constructor() {
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
@@ -26,8 +38,7 @@ export class TdsInlineTabs {
                     this.updateScrollButtons();
                 });
             });
-            if (this.navWrapperElement)
-                resizeObserver.observe(this.navWrapperElement);
+            resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -58,14 +69,6 @@ export class TdsInlineTabs {
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.leftPadding = 32;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Selects a Tab based on tabindex, will not select a disabled Tab. */
     async selectTab(tabIndex) {
@@ -97,22 +100,16 @@ export class TdsInlineTabs {
         this.children[this.selectedIndex].setSelected(true);
     }
     scrollRight() {
-        if (!this.navWrapperElement)
-            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
-        if (!this.navWrapperElement)
-            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
-        if (!this.navWrapperElement)
-            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -176,9 +173,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '0983f0230e29f70eb94c0c964a0ee21e2b0eb3ee', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'caad52caccbc0e284330e6ee76d98b5dd289f257', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '305a1bd0998686df8e69d6f06e9d767c86ba20e0', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8d59508b84bea296d97e27cf3da3817ed2014f49', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f8b74dc2751a33696f02b407fbb7fa87df9c5929', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2f0e128a9e9195f972fa991266fd0aa14264125d', name: "chevron_left", size: "20px" })), h("slot", { key: 'dc120e26f2558ce75bdb57b56031ebd320805a53', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '590495e6463a4c6d0118b9a32acb23f361a23071', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '5d0470213d023c65d911acced266d962f3b7e109', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '7d302c8197a96537d25d2a881c5ecb2a3a28e849', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '8050bf7f62240241d415c909500b27c1ceb199ee', name: "chevron_left", size: "20px" })), h("slot", { key: '6818de93a8757534f6244e6208a7dbdb8a83c144', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ebfa34fab49cd5931e355acb5adf154ac548a9c0', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '24183941036df17810a990c3972393efbf031e03', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -208,8 +205,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "'primary'"
             },
             "defaultSelectedIndex": {
@@ -226,8 +225,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "attribute": "default-selected-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-selected-index",
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -244,8 +245,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "attribute": "selected-index",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected-index"
             },
             "tdsScrollLeftAriaLabel": {
                 "type": "string",
@@ -261,8 +264,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "attribute": "tds-scroll-left-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-left-aria-label",
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -279,8 +284,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "attribute": "tds-scroll-right-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-right-aria-label",
                 "defaultValue": "'Scroll right'"
             },
             "leftPadding": {
@@ -297,8 +304,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Custom left padding value for the wrapper element."
                 },
-                "attribute": "left-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "left-padding",
                 "defaultValue": "32"
             }
         };

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -4,6 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class TdsNavigationTab {
     constructor() {
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
     }
@@ -61,8 +62,10 @@ export class TdsNavigationTab {
                     "tags": [],
                     "text": "Disables the Tab."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -4,6 +4,18 @@ import { Host, h, } from "@stencil/core";
  */
 export class TdsNavigationTabs {
     constructor() {
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
@@ -26,8 +38,7 @@ export class TdsNavigationTabs {
                     this.updateScrollButtons();
                 });
             });
-            if (this.navWrapperElement)
-                resizeObserver.observe(this.navWrapperElement);
+            resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -58,14 +69,6 @@ export class TdsNavigationTabs {
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.leftPadding = 32;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
@@ -95,22 +98,16 @@ export class TdsNavigationTabs {
         this.children[this.selectedIndex].setSelected(true);
     }
     scrollRight() {
-        if (!this.navWrapperElement)
-            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
-        if (!this.navWrapperElement)
-            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
-        if (!this.navWrapperElement)
-            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -176,15 +173,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '3e4eb6108e33a2adb56334746c7ba9d264c493fe', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'adbc2c78468d0edb2a3cdca6f5218dfb7eead4cf', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '6e532a0645718391624017452e1d8bd253868af3', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a1a7d5dcf07187d85bed5c193422328202331125', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '682437d69fbcfece6fbb7fb5add8f02b0f9e42ea', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'a9bd22bc8abec2e7b1237884402349d63a930043', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f1635b2bea58e6a19942fc2477db1eee441585c8', name: "chevron_left", size: "20px" })), h("slot", { key: '7bf40f08d61ee18cf3db5e8862a4e748efef3108', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '74be9b7aa445732e570dddac73df434ce3815a44', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '222fc93851ab026162c9ed02a64c02247582e886', name: "chevron_left", size: "20px" })), h("slot", { key: '7dfff9f0ec4453e5499e83b0806563769364bbeb', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'bc75394c414ea6d8f276db8f119545ac4f91cf1f', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '953912a65fa7e4f67633c8ea0e30e8883f5af641', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '42abd91c08e7fb44b3432bfa71b09ba2b0f1c40d', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -214,8 +211,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "'primary'"
             },
             "defaultSelectedIndex": {
@@ -232,8 +231,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "attribute": "default-selected-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-selected-index",
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -250,8 +251,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "attribute": "selected-index",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected-index"
             },
             "leftPadding": {
                 "type": "number",
@@ -267,8 +270,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Custom left padding value for the wrapper element."
                 },
-                "attribute": "left-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "left-padding",
                 "defaultValue": "32"
             },
             "tdsScrollLeftAriaLabel": {
@@ -285,8 +290,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "attribute": "tds-scroll-left-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-left-aria-label",
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -303,8 +310,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "attribute": "tds-scroll-right-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-right-aria-label",
                 "defaultValue": "'Scroll right'"
             }
         };

package/dist/collection/components/tag/tag.js

@@ -5,8 +5,9 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsTag {
     constructor() {
-        this.text = undefined;
+        /** Sets the size of the tag */
         this.size = 'lg';
+        /** Sets the variant mode of the tag */
         this.variant = 'Neutral';
     }
     render() {
@@ -45,8 +46,10 @@ export class TdsTag {
                     "tags": [],
                     "text": "The title text to display in the tag"
                 },
-                "attribute": "text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
             },
             "size": {
                 "type": "string",
@@ -62,8 +65,10 @@ export class TdsTag {
                     "tags": [],
                     "text": "Sets the size of the tag"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "variant": {
@@ -80,8 +85,10 @@ export class TdsTag {
                     "tags": [],
                     "text": "Sets the variant mode of the tag"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'Neutral'"
             }
         };