@duetds/components 10.0.0-alpha.31 → 10.0.0-alpha.32

package/lib/collection/components/duet-link/duet-link.js

@@ -152,7 +152,7 @@ export class DuetLink {
         return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
     renderBlockContent() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary" }))));
     }
     renderButtonCardContent() {
         const iconWrapStyle = {
@@ -181,10 +181,10 @@ export class DuetLink {
         const Tag = !this.url && this.variation !== "default" ? "button" : "a";
         const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: 'c6dfd9dd4ce34ea1deea147e76481197cfa90854', class: {
+        return (h(Host, { key: 'c9771c4890b8c42dd47c1b5794a9bd1bac35e26f', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '72968ba8e93c2773e8cdbdc7521a854e63569826', href: this.url, class: {
+            } }, h(Tag, { key: '63c398171aaf01ce55e54040fc911587749b4d0e', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

package/lib/collection/components/duet-logo/duet-logo.css

@@ -28,7 +28,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 8px !important;
 }
 

package/lib/collection/components/duet-multiselect/duet-multiselect.css

@@ -98,7 +98,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-number-input/duet-number-input.css

@@ -33,7 +33,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-phone-input/duet-phone-input.css

@@ -40,7 +40,7 @@ span.flag-container {
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-promo-card/duet-promo-card.css

@@ -28,7 +28,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 4px !important;
 }
 

package/lib/collection/components/duet-radio/duet-radio.css

@@ -30,7 +30,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 28px !important;
 }
 
@@ -55,7 +55,7 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
-  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type {
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type:not(:last-child) {
     margin-right: 28px !important;
   }
   :host(.horizontal-responsive) .duet-label .duet-label-content {

package/lib/collection/components/duet-range-slider/duet-range-slider.css

@@ -99,7 +99,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-select/duet-select.css

@@ -109,7 +109,7 @@
 :host(:not(.duet-m-0)):last-child, :host(:not(.duet-m-0)):last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host(:not(.duet-m-0)):last-of-type {
+[alignment=form-distribute] > :host(:not(.duet-m-0)):last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 

package/lib/collection/components/duet-table/duet-table.js

@@ -120,7 +120,7 @@ export class DuetTable {
      * Local methods.
      */
     copyHeadingsToCells() {
-        if (Build.isServer) {
+        if (Build.isServer || ["none", "none-scrollable"].includes(this.breakpoint)) {
             return;
         }
         const headingElements = this.element.querySelectorAll(this.headingSelector);
@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'f7fa5871fe4bbfc89ec3683ad0d4d9824fb9347a', class: {
+        return (h(Host, { key: '02ed0a7f4b3c7504b0f6df2ee9e923f5afbca106', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '0bdd203be920ca5f48f82473ce69f63d0ee3aa86' })));
+            } }, h("slot", { key: '946a620f959caf19dc712844d81ebc345870757d' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-textarea/duet-textarea.css

@@ -98,7 +98,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-textarea/duet-textarea.js

@@ -6,16 +6,15 @@ import { inheritGlobalTheme } from "../../common";
 import { DuetInternalLabel } from "../../common/label";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, formatNumber, getLocaleString, } from "../../utils/language-utils";
+import { debounce } from "../../utils/js-utils";
+import { getLanguage, formatNumber } from "../../utils/language-utils";
 import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
-const CharacterCount = ({ value, maxlength, label, theme }) => {
+const CharacterCount = ({ value, maxlength, theme }) => {
     if (maxlength == null) {
         return;
     }
     const length = value.length;
-    const remainder = Math.max(maxlength - length, 0); // ensure we never have negative numbers
-    const isApproachingLimit = remainder / maxlength <= 0.1; // <= 10% chars remaining
-    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", class: "duet-textarea-counter-remaining" }, isApproachingLimit && `${remainder} ${label}`), h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
+    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
 };
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -32,12 +31,15 @@ export class DuetTextarea {
         this.labelId = createID("DuetLabel");
         this.errorId = createID("DuetError");
         this.characterCountId = createID("DuetCharacterCount");
+        this.visuallyHiddenCounterDebounceMS = 1000;
         this.disallowPatternRegex = null;
-        this.counterLabelDefaults = {
-            fi: "merkkiä jäljellä",
-            en: "characters remaining",
-            sv: "tecken kvar",
+        this.charactersRemainingLabel = {
+            // The comma in Finnish is to prevent use of partitive case for remaining
+            fi: "{remaining}, merkkiä jäljellä {max}{postfix}.",
+            en: "{remaining} characters remaining out of {max}.",
+            sv: "{remaining} tecken kvar av {max}.",
         };
+        this.language = getLanguage();
         /**
          * Controls the margin of the component.
          */
@@ -123,10 +125,9 @@ export class DuetTextarea {
          */
         this.counter = false;
         /**
-         * Accessible label for character counter.
-         * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+         * @deprecated, the visually hidden counter label is no longer changeable
          */
-        this.counterLabel = getLocaleString(this.counterLabelDefaults);
+        this.counterLabel = "";
         /**
          * Component event handling.
          */
@@ -158,15 +159,23 @@ export class DuetTextarea {
             });
         };
         this.handleFocus = (ev) => {
-            if (this.counter) {
-                this.hiddenCounterLabel.textContent = `${formatNumber(Math.max(this.maxlength - this.value.length, 0))}/${formatNumber(this.maxlength)} ${this.counterLabel}`;
-            }
             this.duetFocus.emit({
                 originalEvent: ev,
                 value: this.value,
                 component: "duet-textarea",
             });
         };
+        /**
+         * When the character limit has been reached and key is pressed, switch the
+         * visually hidden label temprorily to empty so it is re-read.
+         */
+        this.handleKeyDown = () => {
+            var _a;
+            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.maxlength) {
+                this.visuallyHiddenCounterText = "";
+                setTimeout(() => this.updateVisuallyHiddenCounterText(), 10);
+            }
+        };
         this.getDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -178,7 +187,7 @@ export class DuetTextarea {
             if (this.error) {
                 describedBy.push(this.errorId);
             }
-            if (this.counter) {
+            if (this.counter && this.maxlength) {
                 describedBy.push(this.characterCountId);
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
@@ -190,6 +199,11 @@ export class DuetTextarea {
     get validity() {
         return this.nativeInput.validity;
     }
+    valueChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            debounce(() => this.updateVisuallyHiddenCounterText(), this.visuallyHiddenCounterDebounceMS)();
+        }
+    }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
     }
@@ -200,19 +214,22 @@ export class DuetTextarea {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        this.updateVisuallyHiddenCounterText();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         if (this.counter && this.maxlength == null) {
             console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
     }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "counterLabel",
-            defaults: "counterLabelDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
+    updateVisuallyHiddenCounterText() {
+        var _a;
+        const remaining = formatNumber(Math.max(this.maxlength - (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0), 0));
+        // postfix is used only in Finnish
+        // with "a" for full hundreds or numbers ending with 2, 3, 6, or 8; with "ä" otherwise
+        const postfix = this.maxlength % 100 === 0 || [2, 3, 6, 8].includes(this.maxlength % 10) ? ":sta" : ":stä";
+        this.visuallyHiddenCounterText = this.charactersRemainingLabel[this.language]
+            .replace("{remaining}", remaining)
+            .replace("{max}", formatNumber(this.maxlength))
+            .replace("{postfix}", postfix);
     }
     componentDidRender() {
         proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
@@ -230,19 +247,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '624bdcddb58e1530c51ac379e2d274001b816883', class: {
+        return (h(Host, { key: '174c025b28759704200ac6bd9b20c07513796881', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '7052a9e19e9394d91343b9c356317706491483e4', class: {
+            } }, h("div", { key: 'cb62d2c55014bfb821da50fbeb53bef3878f42a2', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: 'f485a02ef392a81b6ce9675943b97589ab104787', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '2c6ad7e4e904a8296cd78c10f44b4059766fb6e8', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'a9574cd2fe26c7aae531900b941b9f599bbf4cbb', name: "tooltip" }), this.caption && (h("duet-caption", { key: '37ff8e38f41f97d150a8ded794acd5134cf396dd', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '91d6f9e0aff8fa8cb1eb700cc8e942a761171427', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'f11e135d88137d819fefae10d48df76927122d5e', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '21d58de3abc2c2befac4c05ba19ecc24931ff873', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '5e20d51637a82792cc21934cd1047db4926f16c8', alignment: "stretch" }, h("duet-grid-item", { key: 'd661c25567e85f2371e473d41444e024f8396f3d', margin: "none", fill: true }, h("div", { key: '6953975b58cf0abb73c6577ad7a78ba46e88230b', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'a3609f7dfffead70a15375479ab2223f78eb3e50' }, this.error))), h("duet-grid-item", { key: 'c249410eedf7c2f384f9ce32ac03aeb29936a594', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'abd891c68360549dd3c1a9ee0ff3dbeec5104049', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '45e036b9eb30379561d79b4822902ef31719a26e', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
-                this.hiddenCounterLabel = el;
-            } })))));
+            } }, h(DuetInternalLabel, { key: 'e60161bef26e445f508caa52d9ec36fad2e5a4d6', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '50d1b502ae2daeb5aa6b52a506f1b355b723ffd1', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '60cac12c58f83ea622fb1d55e4a548b424119c1c', name: "tooltip" }), this.caption && (h("duet-caption", { key: '57a5af01882adc799ae421d87c1a08e4d1a51ccd', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'ba6e6f1f9afaf509a45b6ce58c3cf8e3345c62fe', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'bdac513f777135b1c5fea678c622fe3b281f83c1', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '05e779176f391b62641944cf8e9004f82ed55af1', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '3f974cde13c49693404189ef820b30a47093cc01', alignment: "stretch" }, h("duet-grid-item", { key: '19fc220eed8890873a9bfcda21ccdce4214f125f', margin: "none", fill: true }, h("div", { key: 'ff672547fb887361bc8236db35e37c1c0f5d04ab', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'b6fdd99d426bc3e546bde21855954fd2a93c7e36' }, this.error))), h("duet-grid-item", { key: 'a11f7efc87417bf66c2bf07fdc4bff6ac4e77f9e', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '0675d261eeecf2c833c95103f5d43688ea3bf663', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'ee10cca12e1c4f29483a33c1ed04f03ce01f3f36', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -944,18 +959,24 @@ export class DuetTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "fi: \"merkki\u00E4 j\u00E4ljell\u00E4\", en: \"characters remaining\", sv: \"tecken kvar\""
+                            "name": "deprecated",
+                            "text": ", the visually hidden counter label is no longer changeable"
                         }],
-                    "text": "Accessible label for character counter."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "getLocaleString(this.counterLabelDefaults)"
+                "defaultValue": "\"\""
             }
         };
     }
+    static get states() {
+        return {
+            "language": {},
+            "visuallyHiddenCounterText": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "duetInput",
@@ -1075,6 +1096,9 @@ export class DuetTextarea {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "valueChange"
+            }, {
                 "propName": "disallowPattern",
                 "methodName": "disallowedPatternChange"
             }];

package/lib/collection/components/duet-toggle/duet-toggle.css

@@ -100,7 +100,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 8px !important;
 }