@scania/tegel 1.40.0 → 1.41.0-beta.0

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

@@ -4,6 +4,17 @@ import { Host, h, } from "@stencil/core";
  */
 export class TdsFolderTabs {
     constructor() {
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = null;
+        /** 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';
+        this.buttonWidth = 0;
+        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
@@ -57,14 +68,6 @@ export class TdsFolderTabs {
                 }
             });
         };
-        this.modeVariant = null;
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.buttonWidth = 0;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
@@ -162,9 +165,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '8c8c4916fe50279d530f99d21fef8f4ceb89fe55', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '5850bbcf52dfadf7a08dbe420916d98ed6d14b41', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '654c328d868d1f8d4e835aa3e953813415d9162d', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '294e02bcd45d662f556498b8f79179c98d5a9899', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '9506486a1d6a2415bc8213cf1c0ab8c7789ad82c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'e721ba34d2d703bd0ee2fe833e7859f282b6b332', name: "chevron_left", size: "20px" })), h("slot", { key: 'ee2558c4a7d35d8d6355df59b735344151742884', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6ac20fbd52634a08bd6ef369a45fe0ebb7de9d5d', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '20a1096cec8ef7e121200f469761fac9a2a5086d', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'e079f0d843342d1aac64cacfbacefed6151f9059', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '747aa96f5385c04699168bae31c3942044725a10', name: "chevron_left", size: "20px" })), h("slot", { key: '08d6bb2da6f3edf676b35f7e032d901acff9f10e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '2a4b75885039d6410a69e34e4c56d46882461e43', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'a85ec055d4f485db7d64ce536438ade9d3988fab', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -194,8 +197,10 @@ export class TdsFolderTabs {
                     "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": "null"
             },
             "defaultSelectedIndex": {
@@ -212,8 +217,10 @@ export class TdsFolderTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "attribute": "default-selected-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-selected-index",
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -230,8 +237,10 @@ export class TdsFolderTabs {
                     "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",
@@ -247,8 +256,10 @@ export class TdsFolderTabs {
                     "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": {
@@ -265,8 +276,10 @@ export class TdsFolderTabs {
                     "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/tabs/inline-tabs/inline-tab/inline-tab.js

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

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
@@ -57,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) {
@@ -169,9 +173,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: '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: '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: '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"; }
@@ -201,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": {
@@ -219,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": {
@@ -237,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",
@@ -254,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": {
@@ -272,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": {
@@ -290,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
@@ -57,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) {
@@ -169,15 +173,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: '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: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "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: '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: '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: '26f84d67bc4b1eb04668464a74b655db1953d999', 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"; }
@@ -207,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": {
@@ -225,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": {
@@ -243,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",
@@ -260,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": {
@@ -278,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": {
@@ -296,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'"
             }
         };