@scania/tegel 1.27.0 → 1.28.0

package/dist/collection/components/textarea/textarea.js

@@ -11,11 +11,13 @@ export class TdsTextarea {
         this.value = '';
         this.disabled = false;
         this.readOnly = false;
+        this.hideReadOnlyIcon = false;
         this.state = 'default';
         this.maxLength = undefined;
         this.modeVariant = null;
         this.autofocus = false;
         this.noMinWidth = false;
+        this.tdsAriaLabel = undefined;
         this.focusInput = undefined;
     }
     handleChange(event) {
@@ -27,8 +29,10 @@ export class TdsTextarea {
     }
     // Data input event in value prop
     handleInput(event) {
-        this.value = event.target.value;
-        this.tdsInput.emit(event);
+        if (event.target instanceof HTMLInputElement) {
+            this.value = event.target.value;
+            this.tdsInput.emit(event);
+        }
     }
     /* Set the input as focus when clicking the whole textarea with suffix/prefix */
     handleFocus(event) {
@@ -36,21 +40,35 @@ export class TdsTextarea {
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
+    setModeVariant(modeVariant) {
+        if (this.readOnly && modeVariant === 'primary') {
+            return 'secondary';
+        }
+        if (this.readOnly && modeVariant === 'secondary') {
+            return 'primary';
+        }
+        return modeVariant;
+    }
+    connectedCallback() {
+        if (!this.tdsAriaLabel && !this.label) {
+            console.warn('Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility');
+        }
+    }
     render() {
         var _a;
-        return (h("div", { key: 'ad924c149590d14fe1f35a57b430186c743d715c', class: {
+        return (h("div", { key: 'b50538b818f0e82cca94db22f91a8ee73e009ca7', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
                 'textarea-disabled': this.disabled,
-                'textarea-readonly': this.readOnly,
-                [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
+                'textarea-readonly': !this.disabled && this.readOnly,
+                [`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]: true,
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && h("span", { key: '4c2759ed5e3ba6bae9f1175628d0e5b21110f2f6', class: 'textarea-label' }, this.label), h("div", { key: '7b9987a019997bf13af684cb6fd822af2a4e327f', class: "textarea-wrapper" }, h("textarea", { key: '8589c0e3e0faf00f48c1ec35926b354b0734bb2a', class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'f96e68827795a3402d4261ffab997e5c9292fd20', htmlFor: "textarea-element", class: 'textarea-label' }, this.label)), h("div", { key: '0ed06e68cc15d78d4afead9404e89040229edb6e', class: "textarea-wrapper" }, h("textarea", { key: 'a15b5762cc8288e0b0e9631707055091062d0e95', id: "textarea-element", class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
-            }, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+            }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -58,7 +76,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '26e66224d7a3981de049870774d62f8f09cc1b4a', class: "textarea-resizer-icon" }, h("svg", { key: '7922eb0ec64601f7e97279badca76ca40e2ab2f4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '486d91034b0c17328eee9677054b94b5b795b4d0', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '68beff246389edc7970aab014dd84747eecf91fa', class: "textarea-icon__readonly" }, h("tds-icon", { key: '50f46d667cef9b5c6bcf54af14a8b5acc690932c', name: "edit_inactive" })), h("span", { key: '7e02c5f24fccfedbcbcb3863593ea6400828dcb7', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: '426207b0db106f44fc9075b9a0de765b43cae519', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '3cb35ce4804432f5cc46eb90c779cbd2076f07c5', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '78130caa7cdc0c419b47539cd455adb2a5a33f10', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'a52c798f87eb16c79bbd2605956aff48336e4169', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": "textarea-helper-element" }), h("span", { key: '904e38bce9b98c8ea06428c26083bc3d7476b845', class: "textarea-resizer-icon" }, h("svg", { key: '59e3404d79da1dfad42788e5f6e90e47752d603e', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8e91b396a4337c0c56b0e8131d96aae5595506d9', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '4c4629c89b4b2545a8482a0cd6c59b7c57888aa8', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'cae2de2a71c2891067303188f54d7c1b186886ff', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'a09a265f4684d2356886a23cdef4a570d8323c04', id: "readonly-tooltip", name: "edit_inactive" })))), h("span", { key: '5862f0cb512faf37724629642c6560bdde90e47e', class: 'textarea-helper', "aria-live": "assertive", id: "textarea-helper-element" }, this.state === 'error' && !this.readOnly && h("tds-icon", { key: 'cc0202e6e28daf0664fb3446fd4118e453e89cff', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '6e1c683c4036b8aa9924ca69d4dda6b2b3a5fd8a', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '2eb15f11eb7b8abe3741bc9d4dde13ba2fa02d8a', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -251,6 +269,24 @@ export class TdsTextarea {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "hideReadOnlyIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the readonly icon"
+                },
+                "attribute": "hide-read-only-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "state": {
                 "type": "string",
                 "mutable": false,
@@ -339,6 +375,23 @@ export class TdsTextarea {
                 "attribute": "no-min-width",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/toast/toast.js

@@ -45,6 +45,8 @@ export class TdsToast {
         this.hidden = false;
         this.closable = true;
         this.toastRole = 'alert';
+        this.tdsCloseAriaLabel = undefined;
+        this.tdsAriaLive = 'polite';
     }
     /** Hides the Toast. */
     async hideToast() {
@@ -54,16 +56,21 @@ export class TdsToast {
     async showToast() {
         this.hidden = false;
     }
+    connectedCallback() {
+        if (!this.tdsCloseAriaLabel) {
+            console.warn('tds-toast: tdsCloseAriaLabel is required');
+        }
+    }
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '0fbdb9e7e9495399272925957c3930bfa7c6d8aa', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '57126c13e4498e7862026978aab347dbe7e24d63', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '91d24fc7670e387748e995d649c11e627d119289', class: `
+            } }, h("div", { key: '099c769d8f2e54b76eada969978e641b3f5c18ea', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '9e671027166b02eb4297c512a7c9d8e981edad83', name: this.getIconName(), size: "20px" }), h("div", { key: '5700c75533f321a86feb06e7354fadc8f79b04ee', class: `content` }, h("div", { key: 'af17cd657ea83a7c4c82da3818405cd02da73b32', class: "header-subheader" }, this.header && h("div", { key: '0c300bd28b2ea677a673b6904a49d0cf7f4dd08c', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c3389bd852aafc9bcc71e2c0742b5b8e13d55e19', name: "header" }), this.subheader && h("div", { key: '8fd6596be6134ad42569bd1081391093e1d3288a', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'ddd4b0cfbd2500a0dcd87a9ceda819297e699341', name: "subheader" })), usesActionsSlot && (h("div", { key: '9417c00cf6e9ee091ee09a82543d290de9641347', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'a773f53a0f481c0a925e744d259e8b2704c00768', name: "actions" })))), this.closable && (h("button", { key: '3ae5d113a9eefec9127cf2000bc50ab6c4788be7', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '747c8c570819b2af5041ca7f1b369ec587e121d6', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '60fe4a91c42741be76f882fd82daa4ae3f5de545', name: this.getIconName(), size: "20px" }), h("div", { key: '5c5f4221726b14a38a6fb440a7f15570bb17b3cf', class: `content` }, h("div", { key: '2b53199e99ab3417160af38d81301a61e66eaef0', class: "header-subheader" }, this.header && h("div", { key: 'c98f680755ba45a8661ca46f6064c696ee61b6bb', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '5420edf38e156a811187eb6f5838bd8611818673', name: "header" }), this.subheader && h("div", { key: '9dc6d054f0f2ee3d179f25a8e75134d73ab426e2', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '726eec99d5f05bea48b5a30bf7e91a71099960f8', name: "subheader" })), usesActionsSlot && (h("div", { key: '1cb83584cdb4cc8e3d383ebdf5d470135f7573ab', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '0950f174a2e62ffbec229ef24e4a999a318798cd', name: "actions" })))), this.closable && (h("button", { key: 'ee90c96c48a11e38f17acd8cb66a1619bd770e83', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '632aefc906f17bd0993c832f9c4c5a1ec8db1ccc', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -202,6 +209,41 @@ export class TdsToast {
                 "attribute": "toast-role",
                 "reflect": false,
                 "defaultValue": "'alert'"
+            },
+            "tdsCloseAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides an accessible name for the components close button"
+                },
+                "attribute": "tds-close-aria-label",
+                "reflect": false
+            },
+            "tdsAriaLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'polite' | 'assertive'",
+                    "resolved": "\"assertive\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA live for the Toast."
+                },
+                "attribute": "tds-aria-live",
+                "reflect": false,
+                "defaultValue": "'polite'"
             }
         };
     }

package/dist/collection/components/toggle/toggle.js

@@ -38,10 +38,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '99809ab8c95f98930769fde49bb128c866fb4288', class: "tds-toggle" }, this.headline && (h("div", { key: '679f7488d0d0ec41e8c1c31234ffcc02fb7c811f', class: {
+        return (h("div", { key: '8f8a77827f524c049aa004d15372a78e7fad41e2', class: "tds-toggle" }, this.headline && (h("div", { key: '8e254412e80362807046a893fc3f7c42a0c376ba', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'f08284dc8c171da0694a3b86c6ffb206861080cd', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: 'f5d7e6e3ac11cbc7b2eac4fcb2cebcd6f015c2bc', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '686d693e4ec91573fe9c40eba7a67e7933f37dde', name: "label" })))));
+            } }, this.headline)), h("input", { key: '47ed1307b67b61b1594006449fb1b4ccf6d031b8', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '75964d686710d6b4f8bbe365cc51c8aab3234d26', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'aeeaed1f37a160ce792df3f5115c75eaa0fd2c0a', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -58,7 +58,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '366a9ef9c61be66f0bd4559df61959e66df7ccde', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'a3e941deb73b41565f82bfcd972e88f3b3a9a4cc' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '59eff46fa8b6f26ac7b43fff50f8f388d45d16a7', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'b6fb24abddaa4d7a804876891993b463a36e8610' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -71,7 +71,7 @@ export class TdsTooltip {
             // @ts-ignore
             onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '33b71eda3f8d5e3c5f711edac7ed7974b09843a8' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'a1b4e5f08a1239a6a0d522b4057f6d529c9e79d9' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/{p-2d93a742.js → p-1c606f82.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { c as convertToString } from './p-a1181b1f.js';
 import { d as defineCustomElement$2 } from './p-14ab9663.js';
-import { d as defineCustomElement$1 } from './p-4487c541.js';
+import { d as defineCustomElement$1 } from './p-92fb75a7.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
 const TdsDropdownOptionStyle0 = dropdownOptionCss;