@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

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

@@ -4,18 +4,6 @@ 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
@@ -38,7 +26,8 @@ export class TdsInlineTabs {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -69,6 +58,14 @@ 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) {
@@ -100,16 +97,22 @@ 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;
@@ -173,9 +176,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'f33abd9071c85c0651a3ab93e3996ec44717e325', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8a5233b2a941a3a1e72dc45f93015b5e606663a8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '0983f0230e29f70eb94c0c964a0ee21e2b0eb3ee', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'caad52caccbc0e284330e6ee76d98b5dd289f257', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f2a8051863cfa93f8b2a5c562fc5ebefcc36b195', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a93d1cb8ddc5486bbb15449c328a25f6e8e2b4cd', name: "chevron_left", size: "20px" })), h("slot", { key: 'e5b096420d72d12c861730fd9829baeba7cce625', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'f154a7b6553fe77e3f09da314403db5326df8e21', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6832c693ab8a446a629788894f792f571c09cbe3', name: "chevron_right", size: "20px" })))));
+            }, 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" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -205,10 +208,8 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "'primary'"
             },
             "defaultSelectedIndex": {
@@ -225,10 +226,8 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "default-selected-index",
+                "reflect": false,
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -245,10 +244,8 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "selected-index"
+                "attribute": "selected-index",
+                "reflect": true
             },
             "tdsScrollLeftAriaLabel": {
                 "type": "string",
@@ -264,10 +261,8 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-scroll-left-aria-label",
+                "reflect": false,
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -284,10 +279,8 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-scroll-right-aria-label",
+                "reflect": false,
                 "defaultValue": "'Scroll right'"
             },
             "leftPadding": {
@@ -304,10 +297,8 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Custom left padding value for the wrapper element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "left-padding",
+                "reflect": true,
                 "defaultValue": "32"
             }
         };

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

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

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

@@ -4,18 +4,6 @@ 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
@@ -38,7 +26,8 @@ export class TdsNavigationTabs {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -69,6 +58,14 @@ 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) {
@@ -98,16 +95,22 @@ 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;
@@ -173,15 +176,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'cdf0eff9acca827e372a58f5721ff9279b0360f4', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a8fafbc680fbdb0450db591e7f3ffda864946684', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '3e4eb6108e33a2adb56334746c7ba9d264c493fe', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'adbc2c78468d0edb2a3cdca6f5218dfb7eead4cf', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '682437d69fbcfece6fbb7fb5add8f02b0f9e42ea', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2849a2da7c6ef133d173756778400baa2a51d58d', name: "chevron_left", size: "20px" })), h("slot", { key: '64081b7518abde00c8f1d80ff414849bccd1cb0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '916ba6b9107982f8b8763920bdf4e2bd99127943', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, 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: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '26f84d67bc4b1eb04668464a74b655db1953d999', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '953912a65fa7e4f67633c8ea0e30e8883f5af641', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -211,10 +214,8 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "'primary'"
             },
             "defaultSelectedIndex": {
@@ -231,10 +232,8 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "default-selected-index",
+                "reflect": false,
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -251,10 +250,8 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "selected-index"
+                "attribute": "selected-index",
+                "reflect": true
             },
             "leftPadding": {
                 "type": "number",
@@ -270,10 +267,8 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Custom left padding value for the wrapper element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "left-padding",
+                "reflect": true,
                 "defaultValue": "32"
             },
             "tdsScrollLeftAriaLabel": {
@@ -290,10 +285,8 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-scroll-left-aria-label",
+                "reflect": false,
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -310,10 +303,8 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "tds-scroll-right-aria-label",
+                "reflect": false,
                 "defaultValue": "'Scroll right'"
             }
         };

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

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