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

package/dist/collection/components/datetime/datetime.js

@@ -2,30 +2,6 @@ import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsDatetime {
     constructor() {
-        /** Sets an input type */
-        this.type = 'datetime-local';
-        /** Value of the input text */
-        this.value = '';
-        /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM */
-        this.defaultValue = 'none';
-        /** Set input in disabled state */
-        this.disabled = false;
-        /** Size of the input */
-        this.size = 'lg';
-        /** Resets min width rule */
-        this.noMinWidth = false;
-        /** Set the variant of the Datetime component. */
-        this.modeVariant = null;
-        /** Name property. Uses a unique ID as fallback if not specified. */
-        this.name = `datetime-${generateUniqueId()}`;
-        /** Autofocus for input */
-        this.autofocus = false;
-        /** Label text for the component */
-        this.label = '';
-        /** Position of the label */
-        this.labelPosition = 'no-label';
-        /** Helper text for the component */
-        this.helper = '';
         this.getDefaultValue = () => {
             const dateTimeObj = {
                 year: this.defaultValue.slice(0, 4),
@@ -50,6 +26,23 @@ export class TdsDatetime {
                     throw new Error('Invalid type.');
             }
         };
+        this.type = 'datetime-local';
+        this.value = '';
+        this.min = undefined;
+        this.max = undefined;
+        this.defaultValue = 'none';
+        this.disabled = false;
+        this.size = 'lg';
+        this.noMinWidth = false;
+        this.modeVariant = null;
+        this.name = `datetime-${generateUniqueId()}`;
+        this.state = undefined;
+        this.autofocus = false;
+        this.label = '';
+        this.labelPosition = 'no-label';
+        this.helper = '';
+        this.tdsAriaLabel = undefined;
+        this.focusInput = undefined;
     }
     /** Method that resets the value of the Datetime, using defaultValue if is not 'none' */
     async reset() {
@@ -127,10 +120,12 @@ export class TdsDatetime {
             [`tds-form-datetime-${this.size}`]: ['md', 'sm'].includes(this.size),
             [`tds-form-datetime-${this.state}`]: ['error', 'success'].includes(this.state),
             [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            'tds-datetime-container-label-inside': this.label && this.labelPosition === 'inside' && this.size !== 'sm',
+            'tds-datetime-container-label-inside': !!(this.label &&
+                this.labelPosition === 'inside' &&
+                this.size !== 'sm'),
         };
         const iphone = navigator.userAgent.toLowerCase().includes('iphone');
-        return (h("div", { key: 'f397a4fc034fb7cd4dcb8ed7b0cbf2ab2e51177a', class: classNames, onKeyDown: (e) => {
+        return (h("div", { key: 'd5c1a6a02eef9a48075bb06f57fd7efbca3b33c6', class: classNames, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
                     if (browserIsChrome) {
@@ -138,9 +133,10 @@ export class TdsDatetime {
                         this.textInput.showPicker();
                     }
                 }
-            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'e5dd50563ed2d464983016bc608d81b77c379add', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'b2c01f96bb7d8fa7279ac27048328204cc249547', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'e7002fc416e62d2c93c337aee1869aa817997df9', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '3fdf8d55b15f5a00d4fb0755d5774fee93f100b9', ref: (inputEl) => {
-                this.textInput = inputEl;
-            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '48d096356ad9f547bacbf407af12c4411d5dd45f', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '0ea83c4003923ffed9b11ef22131000bb696a80f', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6ab6fde60c3d8ce0ad212c0d248c597a23cc6ce7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4c304db3c9e6159a7827b6a83c6f81d04cbf0d19', class: "datetime-icon icon-time" }, h("tds-icon", { key: '2a91a579dc5307d35ffbd47aa67616e2e692dd1c', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '4883298ade40b2177450f1af3cda0b02a9c24786', class: "tds-datetime-helper" }, h("div", { key: '5baaf00b0372f50341f1995c713e3cbece2c8a4d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'a8d4aedbbba2e083578825efadbeaede47d83055', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
+            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '30f29256642ecdb857eb3700be1d6850f32a95fb', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '42858766f669b1e9f3cbb922de51139dcd4b6c03', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'df2c6079d1b3fd4f50c8c43ed00148026e150f3b', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '15f5687892371cc4468216ca85e25b8feec1362e', ref: (inputEl) => {
+                if (inputEl)
+                    this.textInput = inputEl;
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '845c8faa7b9bba9baedac94592bc9ef3a04495f5', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: 'd3ab45afc2da768ab182245e58d56f88c5ecf286', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '92f32c21d4643b660786c5f9eb5a6889469b21e9', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '5a5b47ea4d8b7d435d6e65f2e7395b137aaa8f6e', class: "datetime-icon icon-time" }, h("tds-icon", { key: '24cc148cf1969332b12354e577f8c0bdc31f98ed', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '211926f3e05fb368ca2dc649e0a632b6cc7faf64', class: "tds-datetime-helper" }, h("div", { key: 'c240b1ef620fbee828542ab1fe8c13604958c7b6', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'e6797a489fedff6fbd3081bf8e8354d13632389c', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -170,10 +166,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Sets an input type"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "type",
+                "reflect": true,
                 "defaultValue": "'datetime-local'"
             },
             "value": {
@@ -190,10 +184,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Value of the input text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "value",
+                "reflect": true,
                 "defaultValue": "''"
             },
             "min": {
@@ -210,10 +202,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min"
+                "attribute": "min",
+                "reflect": false
             },
             "max": {
                 "type": "string",
@@ -229,10 +219,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
+                "attribute": "max",
+                "reflect": false
             },
             "defaultValue": {
                 "type": "string",
@@ -248,10 +236,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "default-value",
+                "reflect": false,
                 "defaultValue": "'none'"
             },
             "disabled": {
@@ -268,10 +254,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Set input in disabled state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
@@ -288,10 +272,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Size of the input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "noMinWidth": {
@@ -308,18 +290,16 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Resets min width rule"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "no-min-width",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -328,10 +308,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Set the variant of the Datetime component."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "name": {
@@ -348,10 +326,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Name property. Uses a unique ID as fallback if not specified."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "name",
+                "reflect": false,
                 "defaultValue": "`datetime-${generateUniqueId()}`"
             },
             "state": {
@@ -368,10 +344,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Error state of input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "state"
+                "attribute": "state",
+                "reflect": false
             },
             "autofocus": {
                 "type": "boolean",
@@ -387,10 +361,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Autofocus for input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "autofocus",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
@@ -407,10 +379,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Label text for the component"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "labelPosition": {
@@ -427,10 +397,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Position of the label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label-position",
+                "reflect": false,
                 "defaultValue": "'no-label'"
             },
             "helper": {
@@ -447,10 +415,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Helper text for the component"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "helper",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "tdsAriaLabel": {
@@ -467,10 +433,8 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Value for the aria-label attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/divider/divider.js

@@ -1,9 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Divider {
     constructor() {
-        /** Orientation of the Divider, horizontal if not specified. */
         this.orientation = 'horizontal';
-        /** Variant of the Divider, subtle if not specified. */
         this.variant = 'subtle';
     }
     render() {
@@ -46,10 +44,8 @@ export class Divider {
                     "tags": [],
                     "text": "Orientation of the Divider, horizontal if not specified."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "orientation",
+                "reflect": false,
                 "defaultValue": "'horizontal'"
             },
             "variant": {
@@ -66,10 +62,8 @@ export class Divider {
                     "tags": [],
                     "text": "Variant of the Divider, subtle if not specified."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "variant",
+                "reflect": false,
                 "defaultValue": "'subtle'"
             }
         };

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -1,48 +1,35 @@
 import { Host, h, } from "@stencil/core";
 import { convertToString } from "../../../utils/convertToString";
-import { closestByTag, isTag } from "../../../utils/dom";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */
 export class TdsDropdownOption {
     constructor() {
-        /** Sets the option as disabled. */
-        this.disabled = false;
-        this.selected = false;
-        this.multiselect = false;
-        this.size = 'lg';
         this.parentElement = null;
         // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
-            var _a, _b;
-            if (!this.host.parentElement)
+            var _a, _b, _c;
+            if (!this.host.parentElement) {
                 return;
-            const directParent = this.host.parentElement;
-            if (isTag(directParent, 'tds-dropdown')) {
-                this.parentElement = directParent;
-            }
-            else {
-                const root = this.host.getRootNode();
-                if (root instanceof ShadowRoot) {
-                    this.parentElement = closestByTag(root.host, 'tds-dropdown');
-                }
-                else {
-                    this.parentElement = null;
-                }
             }
+            this.parentElement =
+                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
+                    ? this.host.parentElement
+                    : this.host.getRootNode().host;
             if (this.parentElement) {
-                this.multiselect = (_a = this.parentElement.multiselect) !== null && _a !== void 0 ? _a : false;
+                this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
                 this.size = this.parentElement.size || 'lg';
             }
-            this.label = ((_b = this.host.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
         };
         this.handleSingleSelect = () => {
+            var _a, _b;
             if (!this.disabled) {
                 this.selected = true;
-                this.parentElement.appendValue(this.internalValue);
-                this.parentElement.close();
+                (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
+                (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.close();
                 this.tdsSelect.emit({
                     value: this.internalValue,
                     selected: this.selected,
@@ -50,9 +37,10 @@ export class TdsDropdownOption {
             }
         };
         this.handleMultiselect = (event) => {
+            var _a, _b;
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.internalValue);
+                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -60,7 +48,7 @@ export class TdsDropdownOption {
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.internalValue);
+                    (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -84,6 +72,13 @@ export class TdsDropdownOption {
                 this.tdsBlur.emit(event);
             }
         };
+        this.value = undefined;
+        this.internalValue = undefined;
+        this.disabled = false;
+        this.tdsAriaLabel = undefined;
+        this.selected = false;
+        this.multiselect = false;
+        this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
@@ -96,13 +91,14 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: '9fa5bfe8a6dc4596c0181c3319cba2e4101b7502' }, h("div", { key: 'b160e2007f01dfa6b13b633408125cd32159bb95', class: `dropdown-option
+        return (h(Host, { key: 'c073be0f228d93964e103da392ef7609878f9d0c' }, h("div", { key: 'bb4349fa2c32884bfafc80cd3c58a0e9fe738e53', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
           ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
+                var _a;
                 if (event.key === 'Escape') {
-                    this.parentElement.close();
+                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.close();
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
@@ -143,10 +139,8 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Value of the dropdown option"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
+                "attribute": "value",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -162,10 +156,8 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Sets the option as disabled."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -182,10 +174,8 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Defines aria-label attribute for the option"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }