@duetds/components 8.5.5 → 8.6.0

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

@@ -190,6 +190,9 @@ duet-caption:not(:last-of-type) {
 .duet-input.is-date {
   padding-right: 64px !important;
 }
+.duet-input.after-chip {
+  padding-left: 8px !important;
+}
 .has-error .duet-input {
   border-color: rgb(222, 35, 98) !important;
 }
@@ -446,4 +449,30 @@ duet-caption:not(:last-of-type) {
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
   box-shadow: 0 0 0 1px #e55039;
+}
+
+.duet-input-container.has-chips .duet-input-relative {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+  border: 1px solid rgb(144, 149, 153);
+  border-radius: 4px;
+  box-shadow: initial;
+  transition: box-shadow 150ms ease, border 150ms ease;
+}
+.duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
+  border-color: rgb(116, 116, 117);
+}
+.duet-input-container.has-chips .duet-input-relative .duet-input {
+  flex-basis: 4rem;
+  flex-grow: 1;
+  border-width: 0 !important;
+}
+.duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {
+  border-width: 0 !important;
+  box-shadow: none !important;
 }

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

@@ -173,6 +173,7 @@ export class DuetInput {
         this.required = false;
         this.type = "text";
         this.variation = "default";
+        this.chips = false;
         this.label = "Label";
         this.labelColor = undefined;
         this.labelWeight = undefined;
@@ -201,7 +202,7 @@ export class DuetInput {
         if (((_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
             const restoreCursor = resetCursor(this.nativeInput);
             this.nativeInput.value = this.value;
-            // restore selection position after having set value
+            // restore selection position after having set valuea
             // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
             restoreCursor();
         }
@@ -271,6 +272,39 @@ export class DuetInput {
             this.value = "";
         }
     }
+    getAllChips() {
+        return Array.from(this.element.querySelectorAll(".duet-input-relative duet-chip"));
+    }
+    /**
+     * @internal
+     * Add a chip to the input
+     */
+    async addChip(chip) {
+        const container = this.element.querySelector(".duet-input-relative");
+        const input = container.querySelector("input");
+        container.insertBefore(chip, input);
+    }
+    /**
+     * @internal
+     * Does the input have a chip with the given value and text
+     */
+    async hasChip({ value, text }) {
+        return this.getAllChips().some(chip => chip.value === value && chip.textContent === text);
+    }
+    /**
+     * @internal
+     * Get all chips from the input
+     */
+    async getChips() {
+        return this.getAllChips();
+    }
+    /**
+     * @internal
+     * Remove all chips from the input
+     */
+    async clearChips() {
+        this.getAllChips().forEach(chip => chip.remove());
+    }
     /**
      * render() function
      * Always the last one in the class.
@@ -317,6 +351,7 @@ export class DuetInput {
                     (!!this.icon ||
                         (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
                 "has-error": !!this.error,
+                "has-chips": this.chips,
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
@@ -325,6 +360,7 @@ export class DuetInput {
                 disabled: this.disabled,
                 "is-number": this.component === "number",
                 "is-date": this.component === "date",
+                "after-chip": this.getAllChips().length > 0,
             }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
@@ -781,6 +817,27 @@ export class DuetInput {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
+            "chips": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Render a container for chips"
+                        }],
+                    "text": ""
+                },
+                "attribute": "chips",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": true,
@@ -995,8 +1052,11 @@ export class DuetInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Used internally in Duet to adjust whether this component acts as e.g. number input."
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used internally in Duet to adjust whether this component acts as e.g. number input."
+                        }],
+                    "text": ""
                 },
                 "attribute": "component",
                 "reflect": false,
@@ -1314,6 +1374,102 @@ export class DuetInput {
                     "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
                     "tags": []
                 }
+            },
+            "addChip": {
+                "complexType": {
+                    "signature": "(chip: HTMLDuetChipElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "chip",
+                            "type": "HTMLDuetChipElement",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDuetChipElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetChipElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Add a chip to the input"
+                        }]
+                }
+            },
+            "hasChip": {
+                "complexType": {
+                    "signature": "({ value, text }: { value: string; text: string; }) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ value: string; text: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Does the input have a chip with the given value and text"
+                        }]
+                }
+            },
+            "getChips": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLDuetChipElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDuetChipElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetChipElement"
+                        }
+                    },
+                    "return": "Promise<HTMLDuetChipElement[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Get all chips from the input"
+                        }]
+                }
+            },
+            "clearChips": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Remove all chips from the input"
+                        }]
+                }
             }
         };
     }

package/lib/collection/utils/slot-utils.js

@@ -11,7 +11,9 @@ export const getElementsFromDefaultSlot = (element) => {
     return childElements.filter(el => !el.getAttribute("slot"));
 };
 export const hasSlot = (element, slotName) => {
-    return getElementsFromNamedSlot(element, slotName).length > 0;
+    return slotName
+        ? getElementsFromNamedSlot(element, slotName).length > 0
+        : getElementsFromDefaultSlot(element).length > 0;
 };
 /**
  * Check if the slotted element matches the given selector.

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-c3d02eb2.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-03152b20.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-89d58b60.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-6d366100.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -4,7 +4,7 @@
 import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-e98f9bb0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { h } from './p-33937fd7.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-d87f6dd5.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-06e608ae.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
 import { g as getColorByName } from './p-25c80cdb.js';
 import { d as defineCustomElement$3 } from './p-a167e2a0.js';

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -3,7 +3,7 @@
  */
 import { p as proxyCustomElement, H, h, d as Host } from './p-e98f9bb0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-e44c0eff.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-785686e3.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
 import { d as defineCustomElement$3 } from './p-667579b0.js';
 import { d as defineCustomElement$2 } from './p-23e23ced.js';

package/lib/dist-custom-elements/duet-callout.js

@@ -3,7 +3,7 @@
  */
 import { p as proxyCustomElement, H, h, d as Host } from './p-e98f9bb0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-d87f6dd5.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-06e608ae.js';
 import { d as defineCustomElement$2 } from './p-667579b0.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";

package/lib/dist-custom-elements/duet-card.js

@@ -4,7 +4,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-e98f9bb0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-e44c0eff.js';
+import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-785686e3.js';
 import { s as sanitizeString } from './p-0e052642.js';
 import { g as getColorByName } from './p-25c80cdb.js';
 import { d as defineCustomElement$3 } from './p-667579b0.js';

package/lib/dist-custom-elements/duet-chip.js

@@ -1,279 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-e98f9bb0.js';
-import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { c as createID } from './p-5e59e970.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-e44c0eff.js';
-import { d as defineCustomElement$2 } from './p-667579b0.js';
-
-const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(207, 210, 212);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(207, 207, 209)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(101, 119, 135) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:8px 14px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;line-height:1rem;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{padding:0 !important;background:rgb(230, 242, 248);border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(205, 229, 241)}.duet-chip-container.duet-chip-filter-checked.chip-has-icon button,.duet-chip-container.duet-chip-filter-checked.chip-has-icon label,.duet-chip-container.duet-chip-radio-checked.chip-has-icon button,.duet-chip-container.duet-chip-radio-checked.chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(228, 228, 230)}.duet-chip-container .duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container .duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
-
-const DuetChip$1 = /*@__PURE__*/ proxyCustomElement(class DuetChip extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        /**
-         * Own Properties.
-         */
-        this.chipId = createID("DuetChip");
-        this.enforceNoDisabledSelected = () => {
-            if (this.disabled && this.checked) {
-                console.error("Duet error: pre-selected chip may not be disabled");
-                this.disabled = false;
-            }
-        };
-        this.popupSetUp = () => {
-            const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
-            if (popup) {
-                this.popupElement = popup;
-                popup.controller = this.element;
-                const originalText = this.element.textContent;
-                const originalValue = this.value;
-                if (!popup.id) {
-                    popup.id = "popup-menu";
-                }
-                popup.addEventListener("duetToggle", (evt) => {
-                    this.popupOpen = evt.detail.open;
-                });
-                const clearActive = () => {
-                    popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
-                        item.active = false;
-                    });
-                };
-                popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
-                    item.addEventListener("click", evt => {
-                        var _a;
-                        const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.innerText;
-                        if (!item.active) {
-                            clearActive();
-                            item.active = true;
-                            this.element.textContent = item.innerText;
-                            this.value = value;
-                            this.checked = true;
-                        }
-                        else {
-                            clearActive();
-                            this.element.textContent = originalText;
-                            this.value = originalValue;
-                            this.checked = false;
-                        }
-                        this.emitChange(evt);
-                        // A workaround to the difference of event handling between the browers.
-                        // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
-                        // open the popup again. Firefox does not have this behavior.
-                        setTimeout(() => {
-                            if (this.popupElement.isOpen()) {
-                                this.popupElement.hide();
-                            }
-                        });
-                    });
-                });
-            }
-        };
-        /**
-         * Component event handling.
-         */
-        this.onFocus = (ev) => {
-            this.focus = true;
-            this.duetFocus.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-        };
-        this.onBlur = (ev) => {
-            this.focus = false;
-            this.duetBlur.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-        };
-        this.emitChange = originalEvent => {
-            this.duetChange.emit({
-                originalEvent,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-        };
-        /**
-         * Change checked state and emit duetChange event.
-         */
-        this.onFilterChange = (evt) => {
-            this.checked = !this.checked;
-            this.emitChange(evt);
-        };
-        /**
-         * Change checked state and emit duetChange event.
-         */
-        this.onRadioChange = (evt) => {
-            const input = this.focusableElement;
-            const inputChecked = input.checked;
-            this.checked = inputChecked;
-            this.emitChange(evt);
-        };
-        /**
-         * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
-         */
-        this.onFilterClick = (evt) => {
-            if (this.disabled) {
-                evt.stopPropagation();
-                evt.preventDefault();
-                return;
-            }
-            if (this.popupElement) {
-                evt.stopPropagation();
-                evt.preventDefault();
-                this.popupElement.toggle();
-            }
-        };
-        /**
-         * Remove input chip
-         */
-        this.onRemoveClick = (evt) => {
-            evt.stopPropagation();
-            evt.preventDefault();
-            this.element.remove();
-        };
-        this.focus = false;
-        this.popupElement = undefined;
-        this.popupOpen = undefined;
-        this.accessibleLabel = undefined;
-        this.variation = "button";
-        this.size = "medium";
-        this.popup = undefined;
-        this.icon = "";
-        this.theme = "";
-        this.identifier = undefined;
-        this.value = undefined;
-        this.name = undefined;
-        this.checked = false;
-        this.disabled = false;
-        this.accessibleExpanded = undefined;
-        this.accessiblePopup = "false";
-    }
-    clearOtherRadioButtons() {
-        if (this.variation === "radio" && this.checked) {
-            const chips = document.querySelectorAll(`duet-chip[variation="radio"][name="${this.name}"]`);
-            chips.forEach(chip => {
-                if (chip !== this.element) {
-                    chip.checked = false;
-                }
-            });
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.popupSetUp();
-        this.enforceNoDisabledSelected();
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    getAccessibleExpanded() {
-        if (this.accessibleExpanded != null) {
-            return (!!this.accessibleExpanded).toString();
-        }
-        if (this.popupElement) {
-            return this.popupOpen ? "true" : "false";
-        }
-        return undefined;
-    }
-    getAccessiblePopup() {
-        if (this.popupElement) {
-            return "true";
-        }
-        else {
-            return this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined;
-        }
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        setTimeout(() => this.focusableElement.focus(options), 200);
-    }
-    render() {
-        var _a;
-        const identifier = this.identifier || this.chipId;
-        const classes = {
-            "duet-chip-container": true,
-            [`duet-chip-${this.variation}`]: true,
-            "duet-chip-focus": this.focus,
-            "duet-chip-has-icon": !!this.icon,
-            "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
-            "duet-theme-turva": this.theme === "turva",
-            "duet-chip-filter-checked": this.variation === "filter" && this.checked,
-            "duet-chip-radio-checked": this.variation === "radio" && this.checked,
-            "duet-chip-filter-popup-open": this.popupOpen,
-            "duet-chip-disabled": this.disabled,
-            [this.size]: true,
-        };
-        const focusHandlers = {
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
-            ref: el => (this.focusableElement = el),
-        };
-        return (h(Host, null, this.variation === "button" && (h("span", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("span", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, this.icon && (h("span", { class: "duet-chip-icon-container" }, h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", null), this.popupElement && (h("span", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, this.icon && (h("span", { class: "duet-chip-icon-container" }, h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", null))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "checked": ["clearOtherRadioButtons"]
-    }; }
-    static get style() { return duetChipCss; }
-}, [1, "duet-chip", {
-        "accessibleLabel": [1, "accessible-label"],
-        "variation": [1],
-        "size": [1],
-        "popup": [1],
-        "icon": [1],
-        "theme": [1025],
-        "identifier": [1],
-        "value": [1025],
-        "name": [1],
-        "checked": [1540],
-        "disabled": [4],
-        "accessibleExpanded": [1540, "accessible-expanded"],
-        "accessiblePopup": [1537, "accessible-popup"],
-        "focus": [32],
-        "popupElement": [32],
-        "popupOpen": [32],
-        "setFocus": [64]
-    }, undefined, {
-        "checked": ["clearOtherRadioButtons"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-chip", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-chip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetChip$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { D as DuetChip$1, d as defineCustomElement$1 } from './p-755dd68f.js';
 
 const DuetChip = DuetChip$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-choice-group.js

@@ -3,13 +3,13 @@
  */
 import { p as proxyCustomElement, H, h, d as Host } from './p-e98f9bb0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { c as checkNamedSlotElement } from './p-d87f6dd5.js';
+import { c as checkNamedSlotElement } from './p-06e608ae.js';
 import { d as defineCustomElement$8 } from './p-b6322d8d.js';
-import { d as defineCustomElement$7 } from './p-d191ba9e.js';
+import { d as defineCustomElement$7 } from './p-45fd4d84.js';
 import { d as defineCustomElement$6 } from './p-667579b0.js';
-import { d as defineCustomElement$5 } from './p-f9f9e33d.js';
-import { d as defineCustomElement$4 } from './p-0d5c0a22.js';
-import { d as defineCustomElement$3 } from './p-9cdbc360.js';
+import { d as defineCustomElement$5 } from './p-a02e62f3.js';
+import { d as defineCustomElement$4 } from './p-c8415e2f.js';
+import { d as defineCustomElement$3 } from './p-0cee8a12.js';
 import { d as defineCustomElement$2 } from './p-d1815d2a.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";