@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/dist-custom-elements/p-3695c0cf.js

@@ -1,614 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f2c2f3d2.js';
-import { f as formSearch } from './p-d004da5f.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { D as DuetInternalLabel } from './p-42619f94.js';
-import { c as createID } from './p-5e59e970.js';
-import { c as cleanValue, r as resetCursor } from './p-df7874f9.js';
-import { b as isEscapeKey, c as isEnterKey, h as isBackspaceKey, j as isArrowLeftKey, k as isArrowRightKey } from './p-8db11326.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './p-ad615991.js';
-import { d as defineCustomElement$8 } from './p-42c1fc90.js';
-import { d as defineCustomElement$7 } from './p-ef48f2c7.js';
-import { d as defineCustomElement$6 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$5 } from './p-f8ba399b.js';
-import { d as defineCustomElement$4 } from './p-821de204.js';
-import { d as defineCustomElement$3 } from './p-91688dd8.js';
-import { d as defineCustomElement$2 } from './p-0cd28b7b.js';
-import { d as defineCustomElement$1 } from './p-4f6ac36d.js';
-
-var formEmail={"title":"form-email","tags":"form email","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 23.999c-3.205 0-6.218-1.248-8.484-3.514S.001 15.206.001 12.001s1.248-6.218 3.514-8.485C5.782 1.25 8.795.001 12 .001s6.218 1.248 8.485 3.514A11.92 11.92 0 0 1 24 12v2.25A3.754 3.754 0 0 1 20.25 18a3.77 3.77 0 0 1-3.48-2.365A6.009 6.009 0 0 1 12 18c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6v2.25c0 1.241 1.009 2.25 2.25 2.25s2.25-1.009 2.25-2.25V12c0-2.804-1.092-5.441-3.075-7.424A10.433 10.433 0 0 0 12 1.501c-2.804 0-5.441 1.092-7.424 3.075S1.501 9.196 1.501 12c0 2.805 1.092 5.441 3.075 7.424s4.619 3.074 7.423 3.074c2.257 0 4.494-.746 6.299-2.1a.749.749 0 1 1 .9 1.199A12.049 12.049 0 0 1 12 23.999zM12 7.5c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z\"/></svg>"};
-
-const duetInputCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;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:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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\";color:rgb(23, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{margin-right:16px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:bottom}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}duet-tooltip,::slotted(duet-tooltip){position:relative;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){right:auto}}duet-caption:not(:last-of-type){margin-bottom:0}.duet-input-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-input-icon{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;font-size:0;line-height:normal;color:rgb(8, 42, 77);pointer-events:none;transform:translateY(-50%)}.duet-theme-turva .duet-input-icon{color:rgb(23, 28, 58)}.duet-input-container{position:relative;width:100%;height:100%}.duet-input-container.has-clear .duet-input-clear-icon{position:relative;z-index:250}.duet-input-container.has-clear .duet-input-clear-icon button{position:absolute;top:-24px;right:-24px;min-width:48px;min-height:48px;color:rgb(0, 75, 129)}.duet-input-container.has-clear .duet-input-clear-icon button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus,.duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-input-container.has-clear .duet-input-clear-icon button:active{opacity:0.75;transition:none}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single button{top:-48px;right:0}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double button{top:-24px;right:12px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-button button{top:-24px;right:0}.duet-input-container.has-clear.has-icon .duet-input-clear-icon{top:-24px;right:24px}.duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button{color:rgb(8, 42, 77)}.duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-input-label-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}@media (min-width: 48em){.duet-input-label-container{justify-content:flex-start}}.duet-input{position:relative;z-index:100;display:block !important;width:100% !important;min-width:8rem;max-width:initial !important;height:auto !important;padding:12px 14px !important;margin:initial !important;margin-bottom:initial !important;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:1rem;font-weight:400 !important;font-variant-numeric:tabular-nums;line-height:1.5 !important;color:rgb(8, 42, 77) !important;cursor:initial !important;background:rgb(255, 255, 255) !important;background-clip:initial !important;border:1px solid rgb(127, 150, 165) !important;border-radius:4px !important;box-shadow:initial !important;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-input.input-padding-small{padding:8px 10px !important}.duet-input.input-padding-x-small{padding:4px 6px !important}.duet-input.input-padding-xx-small{padding:0px 2px !important}.duet-input.is-number{padding-right:112px !important}.duet-input.is-date{padding-right:64px !important}.duet-input.after-chip{padding-left:8px !important}.has-error .duet-input,.has-error .duet-input[disabled]{border-color:rgb(214, 28, 82) !important}.has-error .duet-input+.duet-input-icon,.has-error .duet-input[disabled]+.duet-input-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-input{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-input+.duet-input-icon{color:rgb(214, 28, 82) !important}.has-icon .duet-input{padding-right:48px !important}.duet-theme-turva .duet-input{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58) !important;border-color:rgb(143, 147, 158) !important}.duet-input.align-right{text-align:right}.duet-input::-ms-clear{display:none}.duet-input::-webkit-contacts-auto-fill-button{display:none !important}.duet-input::-webkit-input-placeholder{color:rgb(98, 121, 138);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-input::-webkit-input-placeholder{color:rgb(143, 147, 158)}.duet-input:focus::-webkit-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-input:focus::-webkit-input-placeholder{color:rgb(199, 202, 207)}.duet-input::-moz-placeholder{color:rgb(98, 121, 138);opacity:1 !important}.duet-theme-turva .duet-input::-moz-placeholder{color:rgb(143, 147, 158)}.duet-input:focus::-moz-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-input:focus::-moz-placeholder{color:rgb(199, 202, 207)}.duet-input:-ms-input-placeholder{color:rgb(98, 121, 138)}.duet-theme-turva .duet-input:-ms-input-placeholder{color:rgb(143, 147, 158)}.duet-input:focus:-ms-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-input:focus:-ms-input-placeholder{color:rgb(199, 202, 207)}.duet-input[disabled]{color:rgb(8, 42, 77) !important;cursor:not-allowed !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-theme-turva .duet-input[disabled]{color:rgb(23, 28, 58) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important;-webkit-text-fill-color:rgb(23, 28, 58) !important}.duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva .duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.has-error .duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #e55039}.duet-input:focus{border-color:rgb(0, 119, 179) !important;outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-input:focus{border-color:rgb(23, 28, 58) !important;box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva .duet-input:focus+.duet-input-icon{color:rgb(23, 28, 58)}.has-error .duet-input:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-input:focus{box-shadow:0 0 0 1px #e55039}.duet-input:focus+.duet-input-icon{color:rgb(0, 119, 179)}.duet-input[type=search]:not(:placeholder-shown):focus+.duet-input-icon{display:none}.duet-input:not(:focus):not(:hover):invalid{box-shadow:none !important}.duet-input[type=number]::-webkit-inner-spin-button,.duet-input[type=number]::-webkit-outer-spin-button,.duet-input[type=time]::-webkit-inner-spin-button,.duet-input[type=time]::-webkit-outer-spin-button{display:none;margin:0;-webkit-appearance:none}.duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-input-help{display:block;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:400;line-height:1.25;color:rgb(98, 121, 138);border-radius:4px}.duet-input-help span{display:block;margin-top:8px}.duet-theme-turva .duet-input-help{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(143, 147, 158)}.has-error .duet-input-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-input-help{color:rgb(214, 28, 82)}.duet-label-hidden label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-input-relative{position:relative;width:100%}.duet-input-variation-button,.duet-input-variation-button-left{position:relative;width:100%}.duet-input-variation-button .duet-input-relative,.duet-input-variation-button-left .duet-input-relative{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto}.duet-input-variation-button .duet-input-relative duet-button,.duet-input-variation-button-left .duet-input-relative duet-button{z-index:250;margin-bottom:0}.duet-input-variation-button-left .duet-input-relative{border-radius:4px}.duet-input-variation-button-left.has-focus .duet-input-relative{border-color:rgb(0, 119, 179);box-shadow:0 0 0 1px #0077b3 !important}.duet-input-variation-button-left.duet-theme-turva.has-focus .duet-input-relative{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.duet-input-variation-button-left:hover:not(.disabled) .duet-input-relative{box-shadow:0 0 0 1px #909599}.duet-input-variation-button-left.duet-theme-turva:hover:not(.disabled) .duet-input-relative{box-shadow:0 0 0 1px #747475}.duet-input-variation-button-left .duet-input:focus,.duet-input-variation-button-left .duet-input:hover:not(.disabled){box-shadow:none !important}.duet-input-variation-button .duet-input-relative .duet-input{border-right-width:0 !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.duet-input-variation-button-left .duet-input-relative .duet-input{border-left-width:0 !important;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.duet-input-variation-revealable{position:relative;width:100%}.duet-input-variation-revealable ::-ms-reveal{display:none}.duet-input-variation-revealable .duet-input-relative{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto;border:1px solid rgb(127, 150, 165);border-radius:4px;box-shadow:initial;transition:box-shadow 150ms ease, border 150ms ease}.duet-theme-turva .duet-input-variation-revealable .duet-input-relative{border-color:rgb(143, 147, 158)}.duet-input-variation-revealable .duet-input-relative duet-button{z-index:250;margin-bottom:0}.duet-input-variation-revealable .duet-input-relative .duet-input{border-width:0 !important}.duet-input-variation-revealable .duet-input-relative .duet-input:focus,.duet-input-variation-revealable .duet-input-relative .duet-input:hover{border-width:0 !important;box-shadow:none !important}.duet-input-variation-revealable.disabled .duet-input-relative{background:rgb(245, 248, 250);border-color:rgb(212, 223, 229);box-shadow:none}.duet-input-variation-revealable.has-error .duet-input-relative{border-color:rgb(214, 28, 82)}.duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative{border-color:rgb(214, 28, 82)}.duet-input-variation-revealable.has-focus .duet-input-relative{border-color:rgb(0, 119, 179);box-shadow:0 0 0 1px #0077b3 !important}.duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative{box-shadow:0 0 0 1px #909599}.duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative{box-shadow:0 0 0 1px #747475}.duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative{box-shadow:0 0 0 1px #de2362}.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(127, 150, 165);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(143, 147, 158)}.duet-input-container.has-chips .duet-input-relative .duet-input{flex-basis:4rem;flex-grow:1;padding-left:0 !important;margin-left:12px !important;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}";
-const DuetInputStyle0 = duetInputCss;
-
-const icons = {
-    search: formSearch,
-    email: formEmail,
-};
-const DuetInput = /*@__PURE__*/ proxyCustomElement(class DuetInput extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetInput = createEvent(this, "duetInput", 7);
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        this.duetClear = createEvent(this, "duetClear", 7);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        /**
-         * Own Properties
-         */
-        this.inputId = createID("DuetInput");
-        this.proxyId = createID("DuetInput");
-        this.clearId = createID("DuetInputClear");
-        this.labelId = createID("DuetLabel");
-        this.topCaptionId = createID("DuetCaptionTop");
-        this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
-        this.chipCountId = createID("DuetInputChipCount");
-        this.errorId = createID("DuetError");
-        this.disallowPatternRegex = null;
-        this.clearLabel = {
-            en: "Clear",
-            fi: "Tyhjennä",
-            sv: "Rensa",
-        };
-        this.timeAnnouncement = {
-            en: "Time",
-            fi: "Aika",
-            sv: "Tid",
-        };
-        this.showPasswordLabel = {
-            en: "Show password",
-            fi: "Näytä salasana",
-            sv: "Visa lösenord",
-        };
-        this.hidePasswordLabel = {
-            en: "Hide password",
-            fi: "Piilota salasana",
-            sv: "Dölj lösenord",
-        };
-        this.passwordShownAriaAnnouncement = {
-            en: "Password is shown",
-            fi: "Salasana näytetään",
-            sv: "Lösenordet visas",
-        };
-        this.passwordHiddenAriaAnnouncement = {
-            en: "Password is hidden",
-            fi: "Salasana on piilotettu",
-            sv: "Lösenordet är dolt",
-        };
-        this.chipsSelectedDesriptionLabel = {
-            en: "selected",
-            fi: "valittu",
-            sv: "valt",
-        };
-        /**
-         * Component event handling.
-         */
-        this.onInput = (ev) => {
-            if (this.disallowPatternRegex) {
-                cleanValue(this.nativeInput, this.disallowPatternRegex);
-            }
-            if (this.chips) {
-                this.clearChipSelection();
-            }
-            this.value = this.nativeInput.value || "";
-            this.duetInput.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-input",
-            });
-        };
-        this.onBlur = (ev) => {
-            // prevent blur event when focus moves to the reveal password button or the input itself
-            if (ev.relatedTarget === this.nativeInput || ev.relatedTarget === this.togglePasswordRevealedButton) {
-                return;
-            }
-            if (this.variation === "revealable" && this.isPasswordRevealed) {
-                this.isPasswordRevealed = false;
-            }
-            this.isFocused = false;
-            this.duetBlur.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-input",
-            });
-        };
-        this.onFocus = (ev) => {
-            this.clearChipSelection();
-            this.isFocused = true;
-            this.duetFocus.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-input",
-            });
-        };
-        this.onClear = (ev) => {
-            this.duetClear.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-input",
-            });
-        };
-        /**
-         * Private functions
-         */
-        this.getAriaDescribedBy = () => {
-            const describedBy = [];
-            if (this.isCaptionVisible && this.topCaptionId) {
-                describedBy.push(this.topCaptionId);
-            }
-            if (this.accessibleDescribedBy) {
-                describedBy.push(this.accessibleDescribedBy);
-            }
-            if (this.chips) {
-                const currentChips = this.getAllChips();
-                if (currentChips.length) {
-                    describedBy.push(this.chipCountId);
-                    currentChips.forEach(chip => describedBy.push(chip.id));
-                }
-            }
-            if (this.error) {
-                describedBy.push(this.errorId);
-            }
-            return describedBy.length > 0 ? describedBy.join(" ") : null;
-        };
-        this.handleClearClick = (event) => {
-            const clearing = this.clearInput();
-            this.onClear(event);
-            return clearing;
-        };
-        this.keyHandler = (event) => {
-            if (isEscapeKey(event) && this.clear) {
-                this.handleClearClick(event);
-            }
-            if (isEnterKey(event) && this.variation === "revealable") {
-                if (event.target === this.togglePasswordRevealedButton) {
-                    event.stopPropagation();
-                }
-                else {
-                    this.isPasswordRevealed = false;
-                }
-            }
-            if (this.chips && this.nativeInput.value.length === 0) {
-                if (isBackspaceKey(event)) {
-                    if (this.isChipSelected()) {
-                        this.getSelectedChip().removeChip();
-                        setTimeout(() => this.selectLastChip());
-                    }
-                    this.selectLastChip();
-                }
-                if (isArrowLeftKey(event)) {
-                    this.selectChipToLeft();
-                }
-                if (isArrowRightKey(event) && this.isChipSelected()) {
-                    this.selectChipToRight();
-                }
-            }
-            return event;
-        };
-        this.togglePasswordRevealed = () => {
-            this.isPasswordRevealed = !this.isPasswordRevealed;
-        };
-        this.getInputType = () => {
-            if (this.variation === "revealable") {
-                return this.isPasswordRevealed ? "text" : "password";
-            }
-            return this.type;
-        };
-        this.language = getLanguage();
-        this.isPasswordRevealed = undefined;
-        this.isFocused = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleAutocomplete = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessibleDescribedBy = "";
-        this.accessibleHasPopup = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleLiveError = "polite";
-        this.debounce = 0;
-        this.clear = false;
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.theme = "";
-        this.expand = false;
-        this.disabled = false;
-        this.identifier = undefined;
-        this.margin = "auto";
-        this.inputAlign = "left";
-        this.inputPadding = "medium";
-        this.required = false;
-        this.type = "text";
-        this.variation = "default";
-        this.chips = false;
-        this.label = "Label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.error = "";
-        this.labelHidden = false;
-        this.numericKeyboard = false;
-        this.name = undefined;
-        this.pattern = undefined;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.placeholder = undefined;
-        this.component = "input";
-        this.role = undefined;
-        this.icon = undefined;
-        this.autoComplete = "on";
-        this.disallowPattern = null;
-        this.value = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-    }
-    disallowedPatternChange() {
-        this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
-    }
-    valueChanged() {
-        if (this.nativeInput && this.nativeInput.value !== this.value) {
-            const restoreCursor = resetCursor(this.nativeInput);
-            this.nativeInput.value = this.value;
-            // restore selection position after having set valuea
-            // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
-            restoreCursor();
-        }
-        this.isCaptionVisible = !!this.caption;
-        const emitEvent = () => this.duetChange.emit({
-            value: this.value,
-            component: "duet-input",
-        });
-        if (this.debounce === 0) {
-            emitEvent();
-        }
-        else {
-            clearTimeout(this.timeoutId);
-            this.timeoutId = setTimeout(emitEvent, this.debounce);
-        }
-    }
-    /**
-     * This is a proxy for the enclosed native inputs validity
-     */
-    get validity() {
-        return this.nativeInput.validity;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.disallowedPatternChange();
-        this.isCaptionVisible = !!this.caption;
-        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
-    }
-    componentDidLoad() {
-        if (this.variation === "revealable" && this.nativeInput.form) {
-            this.nativeInput.form.addEventListener("submit", () => {
-                this.isPasswordRevealed = false;
-            });
-        }
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    componentDidRender() {
-        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
-    }
-    /**
-     * Sets focus on the specified `duet-input`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus(options) {
-        if (this.nativeInput) {
-            this.nativeInput.focus(options);
-        }
-    }
-    /**
-     * Reset the cursor position on the native element
-     * `input.resetCursor()`.
-     */
-    async resetCursor() {
-        if (this.nativeInput) {
-            const restoreCursor = resetCursor(this.nativeInput);
-            this.nativeInput.value = this.value;
-            restoreCursor();
-        }
-    }
-    /**
-     * Reset the cursor position on the native element
-     * `input.resetCursor()`.
-     */
-    async clearInput() {
-        if (this.nativeInput) {
-            this.nativeInput.value = "";
-            this.nativeInput.focus();
-            this.value = "";
-        }
-    }
-    getAllChips() {
-        return Array.from(this.element.shadowRoot.querySelectorAll(".duet-input-relative duet-chip"));
-    }
-    isChipSelected() {
-        return this.getAllChips().some(chip => chip.selected);
-    }
-    getSelectedChip() {
-        return this.getAllChips().find(chip => chip.selected);
-    }
-    clearChipSelection() {
-        const chips = this.getAllChips();
-        chips.forEach(chip => (chip.selected = false));
-    }
-    /**
-     * If input has chips set the last, rightmost chip as selected
-     */
-    selectLastChip() {
-        const chips = this.getAllChips();
-        if (chips.length) {
-            chips.forEach(chip => (chip.selected = false));
-            chips.at(-1).selected = true;
-        }
-    }
-    /**
-     * If input has chips. and one is selected, set the chip next to the left as selected.
-     * If none was selected before, select the last, rightmost chip.
-     * If the first, leftmost chip was selected before, do nothing.
-     */
-    selectChipToLeft() {
-        const chips = this.getAllChips();
-        const selectedIndex = chips.findIndex(chip => chip.selected);
-        if (chips.length) {
-            chips.forEach(chip => (chip.selected = false));
-            if (selectedIndex === -1) {
-                chips.at(-1).selected = true;
-            }
-            else if (selectedIndex === 0) {
-                chips[0].selected = true;
-            }
-            else {
-                chips[selectedIndex - 1].selected = true;
-            }
-        }
-    }
-    /**
-     * If input has chips. and one is selected, set the chip next to the right as selected.
-     * If none was selected before, do nothing.
-     * If the last, rightmost chip was selected before, unselect it.
-     */
-    selectChipToRight() {
-        const chips = this.getAllChips();
-        const selectedIndex = chips.findIndex(chip => chip.selected);
-        if (chips.length) {
-            chips.forEach(chip => (chip.selected = false));
-            if (selectedIndex > -1 && selectedIndex < chips.length - 1) {
-                chips[selectedIndex + 1].selected = true;
-            }
-        }
-    }
-    /**
-     * @internal
-     * Add a chip to the input
-     */
-    async addChip(chip) {
-        const container = this.element.shadowRoot.querySelector(".duet-input-relative");
-        const input = container.querySelector("input:not(duet-chip input)");
-        chip.id = createID("DuetInputChip");
-        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.
-     */
-    render() {
-        const identifier = this.identifier || this.inputId;
-        const inputProps = {};
-        if (this.numericKeyboard) {
-            inputProps.inputmode = "numeric";
-        }
-        // Set validation regexes
-        if (this.pattern && this.type !== "tel") {
-            inputProps.pattern = this.pattern;
-        }
-        else if (!this.pattern && this.type === "tel") {
-            inputProps.pattern = "[0-9+ ]+";
-        }
-        let selectedTime;
-        if (this.value) {
-            selectedTime = new Date();
-            try {
-                selectedTime.setHours(Number(this.value.slice(0, 2)), Number(this.value.slice(3, 5)), 0, 0);
-            }
-            catch (e) {
-                selectedTime = undefined;
-            }
-        }
-        const hasInputIcon = !this.icon &&
-            this.type !== "text" &&
-            this.type !== "tel" &&
-            this.type !== "password" &&
-            this.type !== "time" &&
-            this.variation !== "button";
-        return (h(Host, { key: 'b937912982c9ab26076a7a8ef6d92d86721f1e52', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'f2c5263ad8bdc5420c0a57bb0de0257172dce64a', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'fc9419ac20d284a2d74922a41f66e6457ce2f68d', class: {
-                "duet-input-container": true,
-                "duet-theme-turva": this.theme === "turva",
-                [`duet-input-variation-${this.variation}`]: true,
-                "duet-label-hidden": this.labelHidden,
-                "duet-input-top-caption-shown": this.isCaptionVisible,
-                "has-icon": this.variation !== "button" &&
-                    (!!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,
-            } }, h("div", { key: '42a3f546f411b3179ed4224d0c1847be2cb4bd17', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '50f07e14449aa88f4f8f67b5c21fb23c435b318c', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '9161fff80a689ae4fa7fa7bc4532fef2b48cf8c7', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '17c98bf119774ef6606bac7117cb0826215fcfda', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'df3c5e4b0ca4830cec0e0ace48520847688f79bc', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '9cc334f9c6d565a5ad325c9218c6a2e24a04444b', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '3d24e72417e5f1d4b744a37e9847f7e0dd5e387e', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '3d28cc9d073f283b5f58524a9cb274b61808aaeb', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'a153bedd03fe832c4dbfc1911c3469872ef45425', name: "button-left" }), h("input", Object.assign({ key: '6ef60b5b5ec7b53ec70114bf9cd75c354fe81c36', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
-                "duet-input": true,
-                disabled: this.disabled,
-                "is-number": this.component === "number",
-                "is-date": this.component === "date",
-                "after-chip": this.getAllChips().length > 0,
-                "align-right": this.inputAlign === "right",
-                [`input-padding-${this.inputPadding}`]: true,
-            }, 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.getAriaDescribedBy(), 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", { key: '2febfb7a160144de44956c244f4a9b68bd8019c5', class: "duet-input-icon" }, h("duet-icon", { key: 'bfec761a97f3aaa0a686027b295f1004635db337', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'af719d50bdfcd0f64569c4eb30796459eb44bb5c', class: {
-                "duet-input-clear-icon": true,
-                "duet-input-clear-icon-single": !hasInputIcon,
-                "duet-input-clear-icon-double": !!this.icon,
-                "duet-input-clear-icon-button": this.variation === "button",
-            } }, h("button", { key: '838437d0b8b188588ab1558d6a34ee98636d5a8d', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '3240da9554ebf6e137633150f2972897332f6495', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'b7b0ce4e05eec8781853240aea367573972f9ed6', class: "duet-input-icon" }, h("duet-icon", { key: 'b81c5d03104501cc350e3af386d015858c405c02', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5dda63abcbd0bc5be78807425d854c41966d6888', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '4230c0b32da5a67b3fde47eab431e67502d60a57', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
-                ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '593e447fb4af422316fff12d8e9939966da7b8e8' }, h("span", { key: 'ed57b0cad434c886f7c7d7a063b969af82416ebd', "aria-live": "polite" }, this.isPasswordRevealed
-            ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'ec680b8b37c4d6250f301b4096ab116ba54fe85a' })), h("span", { key: '783f6d604b62e5a86f263fe1f784dc20e3062415', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '6d971f74c62bce4bb3594fe7e69682e82d3aeab2', class: "duet-input-error" }, this.error)))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "disallowPattern": ["disallowedPatternChange"],
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return DuetInputStyle0; }
-}, [1, "duet-input", {
-        "accessibleActiveDescendant": [1, "accessible-active-descendant"],
-        "accessibleAutocomplete": [1, "accessible-autocomplete"],
-        "accessibleControls": [1, "accessible-controls"],
-        "accessibleOwns": [1, "accessible-owns"],
-        "accessibleExpanded": [1, "accessible-expanded"],
-        "accessibleDescribedBy": [1, "accessible-described-by"],
-        "accessibleHasPopup": [1, "accessible-has-popup"],
-        "accessibleDetails": [1, "accessible-details"],
-        "accessibleLabelledBy": [1, "accessible-labelled-by"],
-        "accessibleDescription": [1, "accessible-description"],
-        "accessibleLiveError": [1, "accessible-live-error"],
-        "debounce": [2],
-        "clear": [4],
-        "caption": [1],
-        "echoPlaceholder": [4, "echo-placeholder"],
-        "theme": [1025],
-        "expand": [4],
-        "disabled": [516],
-        "identifier": [1],
-        "margin": [1],
-        "inputAlign": [1, "input-align"],
-        "inputPadding": [1, "input-padding"],
-        "required": [4],
-        "type": [1],
-        "variation": [1],
-        "chips": [4],
-        "label": [1025],
-        "labelColor": [1025, "label-color"],
-        "labelWeight": [1025, "label-weight"],
-        "error": [1],
-        "labelHidden": [4, "label-hidden"],
-        "numericKeyboard": [4, "numeric-keyboard"],
-        "name": [1],
-        "pattern": [1],
-        "maxlength": [2],
-        "minlength": [2],
-        "placeholder": [1],
-        "component": [1],
-        "role": [1],
-        "icon": [1],
-        "autoComplete": [1, "auto-complete"],
-        "disallowPattern": [1, "disallow-pattern"],
-        "value": [1025],
-        "validity": [2064],
-        "tooltip": [1],
-        "tooltipDirection": [1, "tooltip-direction"],
-        "language": [32],
-        "isPasswordRevealed": [32],
-        "isFocused": [32],
-        "setFocus": [64],
-        "resetCursor": [64],
-        "clearInput": [64],
-        "addChip": [64],
-        "hasChip": [64],
-        "getChips": [64],
-        "clearChips": [64]
-    }, undefined, {
-        "disallowPattern": ["disallowedPatternChange"],
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-input", "duet-button", "duet-caption", "duet-icon", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetInput);
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetInput as D, defineCustomElement as d };