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

package/dist/collection/components/block/block.js

@@ -9,7 +9,9 @@ import { h } from "@stencil/core";
  */
 export class TdsBlock {
     constructor() {
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Specifies the HTML tag to be used for the component wrapper. */
         this.componentTag = 'div';
     }
     getNestingLevel() {
@@ -35,7 +37,7 @@ export class TdsBlock {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: 'd5d08c72dcca1716e58f21bd231912ad17a72b08', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: 'a7884e78c4e569d4b55782b16b73c670aabe8390' })));
+        return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }
@@ -55,8 +57,8 @@ export class TdsBlock {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | null",
-                    "resolved": "\"primary\" | \"secondary\" | null",
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
@@ -65,8 +67,10 @@ export class TdsBlock {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "componentTag": {
@@ -83,8 +87,10 @@ export class TdsBlock {
                     "tags": [],
                     "text": "Specifies the HTML tag to be used for the component wrapper."
                 },
-                "attribute": "component-tag",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "component-tag",
                 "defaultValue": "'div'"
             }
         };

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.js

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsBreadcrumb {
     constructor() {
+        /** Boolean for the current link */
         this.current = false;
     }
     render() {
@@ -37,8 +38,10 @@ export class TdsBreadcrumb {
                     "tags": [],
                     "text": "Boolean for the current link"
                 },
-                "attribute": "current",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "current",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -3,9 +3,6 @@ import { h } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the breadcrumb elements.
  */
 export class TdsBreadcrumbs {
-    constructor() {
-        this.tdsAriaLabel = undefined;
-    }
     render() {
         var _a;
         (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
@@ -39,8 +36,10 @@ export class TdsBreadcrumbs {
                     "tags": [],
                     "text": "The value to be used for the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

package/dist/collection/components/button/button.js

@@ -6,29 +6,30 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsButton {
     constructor() {
-        this.text = undefined;
+        /** Button's type */
         this.type = 'button';
+        /** Variation of Button's design */
         this.variant = 'primary';
+        /** Size of a Button */
         this.size = 'lg';
+        /** Control for disabled state of a component */
         this.disabled = false;
+        /** When enabled, the Button takes 100% width */
         this.fullbleed = false;
+        /** Set the mode variant of the Button. */
         this.modeVariant = null;
+        /** Determines if and how the button should animate. */
         this.animation = 'none';
-        this.tdsAriaLabel = undefined;
-        this.name = undefined;
-        this.value = undefined;
         this.onlyIcon = false;
     }
     handleKeyDown(event) {
-        var _a;
         if (event.key === 'Enter' && !this.disabled) {
-            (_a = this.host.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.add('active');
+            this.host.querySelector('button').classList.add('active');
         }
     }
     handleKeyUp(event) {
-        var _a;
         if (event.key === 'Enter' && !this.disabled) {
-            (_a = this.host.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.remove('active');
+            this.host.querySelector('button').classList.remove('active');
         }
     }
     render() {
@@ -37,11 +38,11 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '21f6dc31ba1b823cb16f9fe305ae25787e19a30b', class: {
+        return (h(Host, { key: '7358240d76e1b7a6df238b2a1e5f1702f9cd33d7', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: 'bd728c9a035b0625ac1aad1fd6c3b95bff1968ef', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '971f814b0b832e9b161c77812fb7668ed34312ab', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -55,7 +56,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '91fd005e481049141b0a34f654f1a3f2c7ff8c20', name: "label" }), hasIconSlot && h("slot", { key: '52a6ae5066c89b72f953026bdb49037274005e75', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '2dc9400b032af40765d7ba1add85c09249dea64b', name: "label" }), hasIconSlot && h("slot", { key: '01af3eeaa00abc5dc824f4fa4633b2460fb4fe46', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -85,8 +86,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Text displayed inside the Button"
                 },
-                "attribute": "text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
             },
             "type": {
                 "type": "string",
@@ -102,8 +105,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Button's type"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "variant": {
@@ -120,8 +125,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Variation of Button's design"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'primary'"
             },
             "size": {
@@ -138,8 +145,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Size of a Button"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "disabled": {
@@ -156,8 +165,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Control for disabled state of a component"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "fullbleed": {
@@ -174,16 +185,18 @@ export class TdsButton {
                     "tags": [],
                     "text": "When enabled, the Button takes 100% width"
                 },
-                "attribute": "fullbleed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "fullbleed",
                 "defaultValue": "false"
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | null",
-                    "resolved": "\"primary\" | \"secondary\" | null",
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
@@ -192,8 +205,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Set the mode variant of the Button."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "animation": {
@@ -210,8 +225,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Determines if and how the button should animate."
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'none'"
             },
             "tdsAriaLabel": {
@@ -228,8 +245,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "The value to be used for the aria-label attribute if onlyIcon is set to true"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             },
             "name": {
                 "type": "string",
@@ -245,8 +264,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "The name attribute allows for different ways of accessing the button element"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
@@ -262,8 +283,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "The value attribute can be used when handling a form submission"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }

package/dist/collection/components/card/card.js

@@ -11,6 +11,30 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsCard {
     constructor() {
+        /** Variant of the Card based on the theme used. */
+        this.modeVariant = null;
+        /** Placement of the header */
+        this.imagePlacement = 'below-header';
+        /** Divider for the body */
+        this.bodyDivider = false;
+        /** Makes the Card clickable. */
+        this.clickable = false;
+        this.stretch = false;
+        /** ID for the Card, must be unique.
+         *
+         * **NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,
+         * as the default ID is random and will be different every time.
+         */
+        this.cardId = generateUniqueId();
+        /**
+         * Enables expandable behaviour.
+         * When true, clicking the header toggles content visibility.
+         */
+        this.expandable = false;
+        /**
+         * Tracks the current expanded state when expandable is enabled.
+         */
+        this.expanded = false;
         this.toggleExpand = () => {
             if (this.expandable) {
                 this.expanded = !this.expanded;
@@ -32,20 +56,8 @@ export class TdsCard {
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
             const bodyId = `body-${this.cardId}`;
-            return (h("div", { class: { 'stretch': this.stretch }, "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
-        this.modeVariant = null;
-        this.imagePlacement = 'below-header';
-        this.header = undefined;
-        this.subheader = undefined;
-        this.bodyImg = undefined;
-        this.bodyImgAlt = undefined;
-        this.bodyDivider = false;
-        this.clickable = false;
-        this.stretch = false;
-        this.cardId = generateUniqueId();
-        this.expandable = false;
-        this.expanded = false;
     }
     render() {
         const cardStyle = {
@@ -55,7 +67,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '5f10ed76bc6c8da39e0316eaaf1d39047e4c1936', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '14e4d2ece54e021a186661c8dfef2dae78791782', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -75,8 +87,8 @@ export class TdsCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | null",
-                    "resolved": "\"primary\" | \"secondary\" | null",
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
@@ -85,8 +97,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Variant of the Card based on the theme used."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "imagePlacement": {
@@ -103,8 +117,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Placement of the header"
                 },
-                "attribute": "image-placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "image-placement",
                 "defaultValue": "'below-header'"
             },
             "header": {
@@ -121,8 +137,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Text in the header"
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "subheader": {
                 "type": "string",
@@ -138,8 +156,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Subheader text in the header"
                 },
-                "attribute": "subheader",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheader"
             },
             "bodyImg": {
                 "type": "string",
@@ -155,8 +175,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Body image src"
                 },
-                "attribute": "body-img",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "body-img"
             },
             "bodyImgAlt": {
                 "type": "string",
@@ -172,8 +194,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Alt text for the body image"
                 },
-                "attribute": "body-img-alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "body-img-alt"
             },
             "bodyDivider": {
                 "type": "boolean",
@@ -189,8 +213,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Divider for the body"
                 },
-                "attribute": "body-divider",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "body-divider",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -207,8 +233,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Makes the Card clickable."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "clickable",
                 "defaultValue": "false"
             },
             "stretch": {
@@ -225,8 +253,10 @@ export class TdsCard {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "stretch",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "stretch",
                 "defaultValue": "false"
             },
             "cardId": {
@@ -243,8 +273,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "ID for the Card, must be unique.\n\n**NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "card-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "card-id",
                 "defaultValue": "generateUniqueId()"
             },
             "expandable": {
@@ -261,8 +293,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Enables expandable behaviour.\nWhen true, clicking the header toggles content visibility."
                 },
-                "attribute": "expandable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "expandable",
                 "defaultValue": "false"
             },
             "expanded": {
@@ -279,8 +313,10 @@ export class TdsCard {
                     "tags": [],
                     "text": "Tracks the current expanded state when expandable is enabled."
                 },
-                "attribute": "expanded",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "expanded",
                 "defaultValue": "false"
             }
         };