@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-multiselect.js

@@ -2,725 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, Mixin, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as animateHeightFactory } from './index2.js';
-import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { c as chevron_down } from './chevron_down.js';
-import { c as close } from './close.js';
-import { u as uuidv4, k as awaitTopbar, o as ripple, j as getTotalHeightOffset, e as en } from './helpers.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const translations = {
-    SELECT_AN_OPTION: {
-        en: 'Select an option',
-        sv: 'Välj ett alternativ',
-        da: 'Vælg en mulighed',
-        fi: 'Valitse vaihtoehto',
-        no: 'Velg et alternativ',
-    },
-    SELECT_ALL_OPTIONS: {
-        en: 'Select all options',
-        sv: 'Välj alla alternativ',
-        da: 'Vælg alle muligheder',
-        fi: 'Valitse kaikki vaihtoehdot',
-        no: 'Velg alle alternativer',
-    },
-    SELECT_FOUND_OPTIONS: {
-        en: 'Select {number} options',
-        sv: 'Välj {number} alternativ',
-        da: 'Vælg {number} muligheder',
-        fi: 'Valitse {number} vaihtoehtoa',
-        no: 'Velg {number} alternativer',
-    },
-    SELECTED_OPTIONS: {
-        en: 'Selected options.',
-        sv: 'Valda alternativ.',
-        da: 'Valgte muligheder.',
-        fi: 'Valitut vaihtoehdot.',
-        no: 'Valgte alternativer.',
-    },
-    BUTTON_OPEN: {
-        en: 'Open list',
-        sv: 'Öppna listan',
-        da: 'Open list',
-        fi: 'Open list',
-        no: 'Open list',
-    },
-    BUTTON_CLOSE: {
-        en: 'Close list',
-        sv: 'Stäng listan',
-        da: 'Close list',
-        fi: 'Close list',
-        no: 'Close list',
-    },
-    REMOVE: {
-        en: 'Remove',
-        sv: 'Ta bort',
-        da: 'Remove',
-        fi: 'Remove',
-        no: 'Remove',
-    },
-    REMOVED: {
-        en: 'Removed',
-        sv: 'Tog bort',
-        da: 'Fjernet',
-        fi: 'Poistettu',
-        no: 'Fjernet',
-    },
-    MORE_OPTION: {
-        en: 'more option.',
-        sv: 'alternativ till.',
-        da: 'mulighed mere.',
-        fi: 'vaihtoehto lisää.',
-        no: 'alternativ til.',
-    },
-    MORE_OPTIONS: {
-        en: 'more options.',
-        sv: 'fler alternativ.',
-        da: 'more options.',
-        fi: 'more options.',
-        no: 'more options.',
-    },
-    SEARCH: {
-        en: 'Search',
-        sv: 'Sök',
-        da: 'Søg',
-        fi: 'Hae',
-        no: 'Søk',
-    },
-    RESULTS_FOUND: {
-        en: 'options found',
-        sv: 'alternativ hittades',
-        da: 'muligheder fundet',
-        fi: 'vaihtoehtoja löytyi',
-        no: 'alternativer funnet',
-    },
-    NO_SEARCH_RESULTS: {
-        en: 'No options found',
-        sv: 'Inga alternativ hittades',
-        da: 'Ingen muligheder fundet',
-        fi: 'Vaihtoehtoja ei löytynyt',
-        no: 'Finner ingen alternativer',
-    },
-    NO_OPTIONS: {
-        en: 'No options available',
-        sv: 'Inga alternativ tillgängliga',
-        da: 'Ingen tilgængelige muligheder',
-        fi: 'Ei vaihtoehtoja',
-        no: 'Ingen tilgjengelige alternativer',
-    },
-};
-
-const pnMultiselectCss = "pn-multiselect{display:inline-block}pn-multiselect .pn-multiselect{border:0;margin:0;padding:0}pn-multiselect .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:3em}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-multiselect .pn-multiselect-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-label>span{font-size:0.875em}pn-multiselect .pn-multiselect-label{width:100%}pn-multiselect .pn-multiselect-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}pn-multiselect .pn-multiselect-group{position:relative;padding:0;margin:0}pn-multiselect .pn-multiselect-input{position:relative}pn-multiselect .pn-multiselect-input>pn-icon{pointer-events:none;position:absolute;top:0.75em;right:3.5em}pn-multiselect .pn-multiselect-input>pn-icon[data-custom]{left:0.75em;right:unset}pn-multiselect .pn-multiselect-button{cursor:pointer;position:absolute;right:0.75em;top:50%;transform:translateY(-50%);padding:0;margin:0;border:0;width:2em;height:2em;font-size:1em;border-radius:50%;background-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-multiselect .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-button>pn-icon>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}pn-multiselect .pn-multiselect-button:hover{background-color:#effbff}pn-multiselect .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}pn-multiselect .pn-multiselect-button[aria-expanded=true]>pn-icon>svg>path{transform:rotate(180deg);transition-delay:0s}pn-multiselect .pn-multiselect-element{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-element:-webkit-autofill,pn-multiselect .pn-multiselect-element:-webkit-autofill:hover,pn-multiselect .pn-multiselect-element:-webkit-autofill:focus,pn-multiselect .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-multiselect .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-multiselect .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-multiselect .pn-multiselect-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}pn-multiselect .pn-multiselect-element:hover{border-color:#005d92}pn-multiselect .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-multiselect .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;padding-right:3.5em;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis}pn-multiselect .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}pn-multiselect .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}pn-multiselect .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}pn-multiselect .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}pn-multiselect .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}pn-multiselect .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}pn-multiselect .pn-multiselect-element:focus-visible{transition-delay:0s}pn-multiselect .pn-multiselect-element::-webkit-search-cancel-button,pn-multiselect .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-multiselect .pn-multiselect-options{scroll-behavior:smooth;position:absolute;z-index:10;top:calc(100% + 0.5em);left:0;right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;list-style:none;margin:0;padding:0;width:var(--pn-select-options-width);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left}pn-multiselect .pn-multiselect-options[data-open]{visibility:visible}pn-multiselect .pn-multiselect-options[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left;box-shadow:0 -0.0625em 0.125em rgba(0, 0, 0, 0.2)}pn-multiselect .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}pn-multiselect .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-multiselect .pn-multiselect-options::-webkit-scrollbar-corner,pn-multiselect .pn-multiselect-options::-webkit-scrollbar-button{display:none}pn-multiselect .pn-multiselect-options>pn-input{padding:0.5em}pn-multiselect .pn-multiselect-optgroup{list-style:none;padding:0}pn-multiselect .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}pn-multiselect .pn-multiselect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.5em;padding:0;margin:0.5em 0 0 0;color:#5e554a;font-weight:400}pn-multiselect .pn-multiselect-chips:empty{display:none}pn-multiselect .pn-multiselect-chip{margin:0;display:inline-flex;align-items:center;gap:0.25em;background-color:#ffffff;border-radius:0.5em;padding:0.125em 0.25em 0.125em 0.5em;line-height:1.5em;border:0.0625em solid #5e554a;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}pn-multiselect .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}pn-multiselect .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}pn-multiselect .pn-multiselect-chip-button{cursor:pointer;font-size:1em;padding:0.25em;height:1.5em;width:1.5em;border:0;background-color:unset;border-radius:50%;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-chip-button:hover{background-color:#8eddf9}pn-multiselect .pn-multiselect-chip-button:focus{outline:0}pn-multiselect .pn-multiselect-no-results{margin:0;padding:0.75em}pn-multiselect .pn-multiselect-description{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-multiselect .pn-multiselect-description[role=alert]{color:#a70707}pn-multiselect .pn-multiselect-option{position:relative;margin:0;padding:0}pn-multiselect .pn-multiselect-option .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-multiselect .pn-multiselect-option-input{cursor:pointer;position:absolute;opacity:0;left:0;top:0;height:100%;width:100%;margin:0;-webkit-tap-highlight-color:transparent}pn-multiselect .pn-multiselect-option-input:disabled{pointer-events:none}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}pn-multiselect .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}pn-multiselect .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}pn-multiselect .pn-multiselect-option-input[aria-invalid=true]:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#a70707;background-color:#fdefee;border-color:#a70707}pn-multiselect .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}pn-multiselect .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#005d92;background-color:#e0f8ff;border-color:#005d92}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}pn-multiselect .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}pn-multiselect .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}pn-multiselect .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}pn-multiselect .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}pn-multiselect .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}pn-multiselect .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}pn-multiselect .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}pn-multiselect .pn-multiselect-option-content{position:relative;overflow:hidden;z-index:-1;display:flex;align-items:center;padding:0.75em 1em;gap:0.5em;background-color:#ffffff;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}pn-multiselect .pn-multiselect-option-label{color:#2d2013;font-weight:400}pn-multiselect .pn-multiselect-option-helper{color:#5e554a;margin:0}pn-multiselect .pn-multiselect-option-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-multiselect .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}pn-multiselect .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}";
-
-const PnMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PnMultiselect extends Mixin(animateHeightFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.toggleSelect = createEvent(this, "toggleSelect", 7);
-        this.allOptions = createEvent(this, "allOptions", 7);
-        this.selectedOption = createEvent(this, "selectedOption", 7);
-        this.selectedAllOptions = createEvent(this, "selectedAllOptions", 7);
-        this.searchInput = createEvent(this, "searchInput", 7);
-    }
-    id = `pn-multiselect-${uuidv4()}`;
-    idLegend = `${this.id}-legend`;
-    idButton = `${this.id}-button`;
-    idOptions = `${this.id}-options`;
-    idHelper = `${this.id}-text`;
-    idChips = `${this.id}-chips`;
-    idSr = `${this.id}-sr`;
-    elGroup;
-    elButton;
-    elInput;
-    elList;
-    elChips;
-    srTimer;
-    get hostElement() { return this; }
-    isSearching = false;
-    /** Layout state. */
-    open = false;
-    upwards = false;
-    srMessage;
-    /** Label placed above the select */
-    label;
-    /** Display a helper text underneath the select */
-    helpertext;
-    /**
-     * This is what will be shown on load if no value is used.
-     * The `placeholder` will override the default text used if you have the `search` prop active.
-     */
-    placeholder;
-    /** HTML name of the checkbox elements. Used for each checkbox inside the multiselect. */
-    name;
-    /** Select HTML id */
-    selectId = this.id;
-    /** HTML name of the input element.*/
-    selectName;
-    /** Display an icon to the left of the select input */
-    icon;
-    /** Manually set the language, not needed if you have the pnTopbar available */
-    language = null;
-    /**
-     * Array of options.
-     * @hide true
-     **/
-    options;
-    /**
-     * Adds a "Select all" option into the list.
-     * If you use the search feature at the same time, clicking this option will only toggle the options found.
-     * @see {@link search}
-     * @category Features
-     **/
-    selectAll = false;
-    /**
-     * Set a custom value for the "Select all value" option.
-     * @see {@link selectAll}
-     * @category Features
-     */
-    allValue = 'pn_multiselect_all';
-    /**
-     * Allow the user to search among the options.
-     * The selected options will now display underneath the multiselect element.
-     *
-     * @category Features
-     **/
-    search = false;
-    /** Set the search query of the multiselect.
-     *
-     * @see {@link search}
-     * @category Features
-     */
-    searchQuery = '';
-    /**
-     * Decide how many items should be shown before ellipsis. Requires the `search` prop to work.
-     *
-     * @see {@link search}
-     * @category Features
-     **/
-    itemCount = 5;
-    /**
-     * Use a custom max-height for the dropdown list.
-     * @description The component will automatically set the max height of the dropdown list on its own.
-     * It takes the `pn-topbar` into account and will open in the direction that fits best.
-     * Use this prop to override this behaviour and use a custom max-height.
-     * @category Features
-     **/
-    maxHeight;
-    /**
-     * Force the dropdown to always open upwards.
-     * @category Features
-     **/
-    top = false;
-    /**
-     * Force the dropdown to always open downwards.
-     * @category Features
-     **/
-    bottom = false;
-    /** Set the select as required. @category Validation */
-    required = false;
-    /** Disable the select. @category Validation */
-    disabled = false;
-    /** Trigger the invalid state. @category Validation */
-    invalid = false;
-    /** Display an error message and trigger the invalid state. @category Validation */
-    error;
-    handleOpen() {
-        if (this.open) {
-            this.addGlobalEventListeners();
-            this.handleDirection();
-            this.handleMaxHeight();
-            this.handleWidth();
-        }
-        else {
-            this.removeGlobalEventListeners();
-        }
-        this.dropdownHandler();
-    }
-    handleSearch() {
-        if (!this.search)
-            this.options = [
-                ...this.options.map(option => {
-                    const item = {
-                        ...option,
-                        hide: false,
-                    };
-                    if (item?.group?.length)
-                        item.group.map(opt => ({ ...opt, hide: false }));
-                    return item;
-                }),
-            ];
-    }
-    handleSearchQuery() {
-        if (this.search && typeof this.searchQuery === 'string')
-            this.handleInputSearch();
-    }
-    handleSelectId() {
-        const id = this.selectId;
-        this.idLegend = `${id}-legend`;
-        this.idButton = `${id}-button`;
-        this.idOptions = `${id}-options`;
-        this.idHelper = `${id}-text`;
-        this.idChips = `${id}-chips`;
-        this.idSr = `${id}-sr`;
-    }
-    /**
-     * If the select is open and you resize the window.
-     * Remove all css props and disable the animations entierly.
-     **/
-    handleResize() {
-        if (!this.open)
-            return;
-        this.toggleOpen(false);
-        this.elList.style.removeProperty('--pn-select-options-width');
-        this.elList.style.removeProperty('--pn-select-max-height');
-    }
-    /** Dispatched everytime the multiselect is opened or closed. */
-    toggleSelect;
-    /** This event contains the entire options array with the new props. Dispatched everytime you make changes to any option. */
-    allOptions;
-    /** Dispatched when you toggle an option. Includes all the props of the option. */
-    selectedOption;
-    /**
-     * This event is dispatched when the user toggles the "Choose all options" box.
-     * Also triggers when you click the "Select {number} options" if you are performing a search at the same time.
-     **/
-    selectedAllOptions;
-    /**
-     * Contains the search text and the options found for that query.
-     * Dispacthed everytime you change the search query.
-     **/
-    searchInput;
-    async componentWillLoad() {
-        this.handleSelectId();
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    componentDidLoad() {
-        if (!!this.searchQuery?.length)
-            this.handleSearchQuery();
-    }
-    globalEvents = (event) => {
-        const target = event.target;
-        const isWithinCalendar = target?.closest(this.hostElement.localName);
-        if (!isWithinCalendar)
-            this.toggleOpen(false);
-    };
-    addGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.addEventListener('click', this.globalEvents);
-    }
-    removeGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.removeEventListener('click', this.globalEvents);
-    }
-    dropdownHandler() {
-        if (this.open)
-            this.openDropdown(this.elList);
-        else
-            this.closeDropdown(this.elList);
-    }
-    emitEvents(option, all) {
-        this.allOptions.emit(this.options);
-        if (option)
-            return this.selectedOption.emit(option);
-        const data = {
-            checked: all,
-            searching: this.isSearching,
-        };
-        if (this.search && this.optionsTotal() !== this.optionsSearch().length) {
-            data.query = this.searchQuery;
-            data.found = this.optionsSearch();
-        }
-        this.selectedAllOptions.emit(data);
-    }
-    optionsChecked() {
-        const list = this.options?.reduce((sum, item) => {
-            const subgroup = item.group ? [...item.group.filter(({ checked }) => checked)] : [];
-            if (item.checked)
-                sum.push(item);
-            if (subgroup?.length)
-                sum.push(...subgroup);
-            return sum;
-        }, []);
-        return list;
-    }
-    optionsTotal() {
-        return this.options?.reduce((sum, item) => sum + (item?.group?.length ? item.group.length + 1 : 1), 0);
-    }
-    optionsIndex(val) {
-        const findNested = ({ group = [] }) => group?.findIndex(({ value }) => value === val);
-        const indexGroup = this.options.findIndex(option => option.value === val || findNested(option) !== -1);
-        const indexNested = findNested(this.options?.[indexGroup]);
-        return {
-            indexGroup,
-            indexNested,
-        };
-    }
-    optionsCheckedTotal() {
-        return this.optionsChecked()?.length;
-    }
-    optionsCheckedPreview() {
-        return this.optionsChecked()?.slice(0, this.itemCount);
-    }
-    optionsCheckedLabels() {
-        return this.optionsChecked()
-            ?.map(({ label }) => label)
-            ?.join(', ');
-    }
-    optionsSearch() {
-        const list = this.options?.reduce((sum, item) => {
-            const subgroup = item.group ? [...item.group.filter(({ hide }) => !hide)] : [];
-            if (!item.hide)
-                sum.push(item);
-            if (subgroup?.length)
-                sum.push(...subgroup);
-            return sum;
-        }, []);
-        return list;
-    }
-    noResults() {
-        return this.optionsSearch()?.length === 0;
-    }
-    isIndeterminate(groupIndex) {
-        const option = this.options?.[groupIndex];
-        if (option?.group?.length) {
-            const all = option.group.every(({ checked }) => checked);
-            const none = option.group.every(({ checked }) => !checked);
-            return !(all || none);
-        }
-        return false;
-    }
-    optionSelect({ val, checked, chip }) {
-        if (val === this.allValue)
-            return this.optionSelectAll(checked);
-        const options = this.options;
-        const { indexGroup, indexNested } = this.optionsIndex(val);
-        const group = options[indexGroup]?.group;
-        const nested = group?.[indexNested];
-        if (nested?.value) {
-            options[indexGroup].group[indexNested].checked = checked;
-            const allSiblingsChecked = group?.every(({ checked }) => checked);
-            if (allSiblingsChecked)
-                options[indexGroup].checked = true;
-            else
-                options[indexGroup].checked = false;
-        }
-        else {
-            options[indexGroup].checked = checked;
-            if (group?.length)
-                options[indexGroup].group = group?.map(opt => ({ ...opt, checked: checked }));
-        }
-        const option = indexNested === -1 ? options[indexGroup] : options[indexGroup].group[indexNested];
-        this.emitEvents(option);
-        this.options = [...options];
-        if (typeof chip === 'number') {
-            this.handleSrMesssage(`${this.translate('REMOVED')} ${option.label}`);
-            requestAnimationFrame(() => {
-                const index = chip === this.optionsCheckedTotal() ? chip - 1 : chip;
-                const btn = Array.from(this.elChips.children)?.[index];
-                btn?.querySelector('button').focus({ preventScroll: true });
-            });
-        }
-    }
-    optionSelectAll(checked) {
-        this.options = [
-            ...this.options.map(option => {
-                const opt = {
-                    ...option,
-                    checked: this.isSearching ? (option.hide ? option.checked : checked) : checked,
-                };
-                if (opt.group)
-                    opt.group = [
-                        ...opt.group.map(item => ({
-                            ...item,
-                            checked: this.isSearching ? (item.hide ? item.checked : checked) : checked,
-                        })),
-                    ];
-                const allChecked = opt?.group?.every(({ checked }) => checked);
-                if (opt?.group?.length)
-                    opt.checked = allChecked;
-                return opt;
-            }),
-        ];
-        this.emitEvents(null, checked);
-    }
-    optionSelected(val) {
-        return !!this.optionsChecked()?.find(({ value, checked }) => value === val && checked);
-    }
-    translate(prop) {
-        const text = translations?.[prop]?.[this.language || en];
-        if (text.includes('{number}'))
-            return text.replace('{number}', this.optionsSearch().length);
-        return text;
-    }
-    getRect(element) {
-        return element?.getBoundingClientRect();
-    }
-    ripple({ clientX, clientY, target }) {
-        const isKeyboard = clientX === 0 && clientY === 0;
-        const element = target.nextElementSibling;
-        const { x, width, y, top } = this.getRect(element);
-        const clientCor = isKeyboard ? { clientX: x + width - 24, clientY: y - top } : { clientX, clientY };
-        ripple(clientCor, element);
-    }
-    handleSrMesssage(text) {
-        this.srMessage = text;
-        clearTimeout(this.srTimer);
-        this.srTimer = setTimeout(() => (this.srMessage = null), 2000);
-    }
-    handleDirection() {
-        if (this.top)
-            return (this.upwards = true);
-        if (this.bottom)
-            return (this.upwards = false);
-        const { bottom, top } = this.getRect(this.elInput);
-        const oneEm = 16;
-        /*
-         * Take the inner window height and subtract the elements bottom and 1em (16px)
-         * If the max height of this calculation is less than the space above the element, open it upwards.
-         * Do another calculation with the top value - 1em.
-         */
-        const offsetTop = window.innerHeight - bottom - oneEm;
-        const offsetBottom = top - oneEm;
-        /** Always point downwards, unless the space to the bottom is less than half of the top offset space. */
-        this.upwards = offsetBottom / 2 > offsetTop;
-    }
-    handleMaxHeight() {
-        if (this.maxHeight)
-            return this.elGroup.style.setProperty('--pn-select-max-height', this.maxHeight);
-        const { bottom, top } = this.getRect(this.elInput);
-        const inputHeight = this.upwards ? top : bottom;
-        const offsetTop = getTotalHeightOffset();
-        const offset = this.upwards ? offsetTop + 16 : 16;
-        const maxHeight = this.upwards ? inputHeight - offset : window.innerHeight - inputHeight - offset;
-        this.elGroup.style.setProperty('--pn-select-max-height', `${Math.ceil(maxHeight)}px`);
-    }
-    handleWidth() {
-        const { width } = this.getRect(this.elInput);
-        this.elGroup.style.setProperty('--pn-select-options-width', `${Math.ceil(width)}px`);
-    }
-    setFocus() {
-        if (this.search)
-            this.elInput.focus({ preventScroll: true });
-        else
-            this.elButton.focus({ preventScroll: true });
-    }
-    hasError() {
-        return this.invalid || !!this.error;
-    }
-    hasMessage() {
-        return !!this.helpertext || !!this.error;
-    }
-    toggleOpen(state) {
-        if (typeof state === 'boolean' && state === this.open)
-            return;
-        this.open = state ?? !this.open;
-        this.toggleSelect.emit({ open: this.open });
-    }
-    handleInputKeyboard(event) {
-        event.stopImmediatePropagation();
-        const { code } = event;
-        if (code === 'Escape')
-            return this.toggleOpen(false);
-        if (!this.open && code.match(/^(Space|Enter)$|Arrow|^Key.*$/))
-            this.toggleOpen();
-    }
-    setSearchQuery(value) {
-        if (!this.open)
-            this.toggleOpen(true);
-        this.searchQuery = value;
-    }
-    handleInputSearch() {
-        if (this.isEmpty())
-            return;
-        const term = this.searchQuery;
-        const performSearch = ({ label, helpertext, value }) => {
-            return `${label} ${helpertext} ${value}`.trim().toLowerCase().includes(term.toLowerCase());
-        };
-        const options = this.options.map(option => {
-            const foundNested = option?.group?.map(item => ({ ...item, hide: !performSearch(item) })) || [];
-            const found = performSearch(option) || foundNested?.some(({ hide }) => !hide);
-            option.hide = !found;
-            if (option?.group?.length)
-                option.group = [...foundNested];
-            return option;
-        });
-        this.isSearching = term !== '';
-        this.options = [...options];
-        this.searchInput.emit({ query: term, found: this.optionsSearch() });
-    }
-    getListItem(index) {
-        const { value } = this.options[index];
-        return this.elList.querySelector(`.pn-multiselect-option-input[value='${value}']`);
-    }
-    getOptionIndex(val, triggers, code) {
-        const total = this.optionsTotal() - 1;
-        if (code === 'End')
-            return total;
-        if (code === 'Home')
-            return 0;
-        const valIndex = this.options.findIndex(({ value }) => value === val);
-        const count = triggers.find(item => typeof item === 'number');
-        const index = valIndex + count;
-        if (index >= total)
-            return total;
-        if (index <= 0)
-            return 0;
-        return index;
-    }
-    checkboxNav(e, val) {
-        const { code } = e;
-        const arrowUp = code === 'ArrowUp' && -1;
-        const arrowDown = code === 'ArrowDown' && 1;
-        const pageUp = code === 'PageUp' && -10;
-        const pageDown = code === 'PageDown' && 10;
-        const home = code === 'Home' && 0;
-        const end = code === 'End' && this.optionsTotal() - 1;
-        const tab = code === 'Tab';
-        const space = code === 'Space';
-        const enter = code === 'Enter';
-        const escape = code === 'Escape';
-        const triggers = [arrowUp, arrowDown, pageUp, pageDown, home, end, tab, space, enter, escape];
-        if (!triggers.some(item => typeof item === 'number' || item))
-            return;
-        if (tab || space || enter)
-            return;
-        e.stopImmediatePropagation();
-        e.preventDefault();
-        if (escape) {
-            this.setFocus();
-            return this.toggleOpen(false);
-        }
-        const item = this.getOptionIndex(val, triggers, code);
-        return this.getListItem(item)?.focus();
-    }
-    handleBlur(event) {
-        const target = event.target;
-        const related = event.relatedTarget;
-        const jumpingToChips = (related || target)?.className === 'pn-multiselect-chip-button';
-        if (jumpingToChips)
-            this.toggleOpen(false);
-    }
-    handleLabel() {
-        if (this.disabled)
-            return;
-        this.setFocus();
-    }
-    /** Check if there are no options in the list. */
-    isEmpty() {
-        return (this.options?.length || 0) === 0;
-    }
-    showSelectAll() {
-        return this.selectAll && !this.isEmpty() && !this.noResults();
-    }
-    /** Check if the empty/nothing found should be visible. */
-    showEmptyOption() {
-        return (this.isSearching && this.noResults()) || this.isEmpty();
-    }
-    getPlaceholder() {
-        const autoTranslation = this.search ? 'SEARCH' : 'SELECT_AN_OPTION';
-        return this.placeholder || this.translate(autoTranslation);
-    }
-    handleChange({ target }) {
-        const { value, checked } = target;
-        this.optionSelect({ val: value, checked });
-    }
-    /** Display the "X more selected options" text. */
-    additonalOptions() {
-        const count = this.optionsCheckedTotal() - this.itemCount;
-        const single = `MORE_OPTION${count === 1 ? '' : 'S'}`;
-        return `${count} ${this.translate(single)}`;
-    }
-    describedBy() {
-        const list = [this.search && this.idChips, this.srMessage && this.idSr, !!this.helpertext && this.idHelper].filter(Boolean);
-        if (list.length)
-            return list.join(' ');
-        return null;
-    }
-    renderOption({ label, value, checked, helpertext, icon, id = `${this.selectId}-${value || label}`, invalid, disabled, hide, group, }, indexGroup, indexNested) {
-        return (h("li", { class: "pn-multiselect-option", key: id, hidden: hide }, h("input", { type: "checkbox", id: id, class: "pn-multiselect-option-input", checked: checked ?? this.optionSelected(value), indeterminate: indexNested === undefined && this.isIndeterminate(indexGroup), name: this.name, value: value, disabled: this.disabled || disabled, required: this.required, "aria-invalid": invalid ? 'true' : null, "aria-describedby": helpertext ? `${id}-helper` : null, onClick: (event) => this.ripple(event), onKeyDown: (event) => this.checkboxNav(event, value), onBlur: (event) => this.handleBlur(event) }), h("div", { class: "pn-multiselect-option-content" }, !!icon && h("pn-icon", { icon: icon, color: "blue900" }), h("div", { class: "pn-multiselect-option-text" }, h("label", { class: "pn-multiselect-option-label", htmlFor: id }, h("span", null, label)), helpertext && (h("p", { class: "pn-multiselect-option-helper", id: `${id}-helper` }, helpertext))), h("div", { class: "pn-multiselect-option-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "pn-multiselect-option-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "pn-multiselect-option-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))), group?.length && (h("ul", { class: "pn-multiselect-optgroup" }, group?.map((option, i) => this.renderOption(option, indexGroup, i))))));
-    }
-    renderOptions() {
-        return (h("ul", { id: this.idOptions, class: "pn-multiselect-options", "data-open": this.open, "data-upwards": this.upwards, onChange: (event) => this.handleChange(event), style: { height: '0px' }, ref: el => (this.elList = el) }, this.showSelectAll() &&
-            this.renderOption({
-                label: this.translate(`SELECT_${this.isSearching ? 'FOUND' : 'ALL'}_OPTIONS`),
-                value: this.allValue,
-                checked: this.optionsTotal() === this.optionsCheckedTotal(),
-            }), this.options?.map((option, index) => this.renderOption(option, index)), this.showEmptyOption() && (h("li", { class: "pn-multiselect-option" }, h("div", { class: "pn-multiselect-option-content", role: "alert" }, h("div", { class: "pn-multiselect-option-text" }, h("span", { class: "pn-multiselect-option-label" }, this.translate(this.isEmpty() ? 'NO_OPTIONS' : 'NO_SEARCH_RESULTS'))))))));
-    }
-    renderChips() {
-        return (h("ul", { id: this.idChips, class: "pn-multiselect-chips", "aria-label": this.translate('SELECTED_OPTIONS'), ref: el => (this.elChips = el) }, this.optionsCheckedPreview()?.map(({ label, value }, index) => (h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, h("span", { class: "pn-multiselect-chip-label" }, label), h("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index }) }, h("pn-icon", { icon: close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (h("li", { class: "pn-multiselect-chip", "data-count": true }, h("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
-    }
-    render() {
-        return (h(Host, { key: '9b25af2f368c47c8820ae000ed1389215cd952a2' }, h("fieldset", { key: '3aa70d5b8d62ee84616afe853c2ea746c991fc67', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (h("legend", { key: '2e1bd83a8c6cb64bc9da287c70abcffccb334cbb', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, h("span", { key: '1d3073c63643320b9b9fde625832d89e41edaa35' }, this.label), !!this.optionsChecked()?.length && (h("span", { key: '316c9d892808df273840dcac243971e5fb5d2b62' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), h("div", { key: 'f79e79c0406ca659a6380902a6c8296df89bde97', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '73bc49a104f3846a41fa65f4e6e2623dba0806c2', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: 'a68a06de67861057dd6d853ab53b7a34d76ca7ee', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '5df7e2ededf6e196ae47053ce650628391bc282d', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.hasError() && (h("pn-icon", { key: '5204a96efe2e88fee5d762a89b0623b1f8a163ce', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '78a487b3afc8c91e588d7922f3a2b490e9173d2f', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: '061e6c886b21d559c439d2e689cfc02b328d87c9', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'a1c3cdabb02dfc2403dbe55cc4ce2fb38f71578c', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: '3f9428b50a5d440866462e52181e13aa3b894e6a' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: '74dc717f4f662fbc53b0e73f0690a10a13feeb22' }), this.search && (h("p", { key: '85126ac7f1b59b4f2fd988bff08b5b2bcb561cbb', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '45615fbfb30b133134d06c6fbee20a75a1dd61bd' }, this.srMessage))))));
-    }
-    static get watchers() { return {
-        "open": ["handleOpen"],
-        "search": ["handleSearch"],
-        "searchQuery": ["handleSearchQuery"],
-        "selectId": ["handleSelectId"]
-    }; }
-    static get style() { return pnMultiselectCss; }
-}, [772, "pn-multiselect", {
-        "label": [1],
-        "helpertext": [1],
-        "placeholder": [1],
-        "name": [1],
-        "selectId": [1, "select-id"],
-        "selectName": [1, "select-name"],
-        "icon": [1],
-        "language": [1],
-        "options": [1040],
-        "selectAll": [4, "select-all"],
-        "allValue": [1, "all-value"],
-        "search": [4],
-        "searchQuery": [1025, "search-query"],
-        "itemCount": [2, "item-count"],
-        "maxHeight": [1, "max-height"],
-        "top": [4],
-        "bottom": [4],
-        "required": [4],
-        "disabled": [4],
-        "invalid": [4],
-        "error": [1],
-        "isClosing": [32],
-        "isExpanding": [32],
-        "isSearching": [32],
-        "open": [32],
-        "upwards": [32],
-        "srMessage": [32]
-    }, [[9, "resize", "handleResize"]], {
-        "open": ["handleOpen"],
-        "search": ["handleSearch"],
-        "searchQuery": ["handleSearchQuery"],
-        "selectId": ["handleSelectId"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-multiselect", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-multiselect":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnMultiselect$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnMultiselect = PnMultiselect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnMultiselect, defineCustomElement };
-//# sourceMappingURL=pn-multiselect.js.map
-
-//# sourceMappingURL=pn-multiselect.js.map
+import{transformTag as e,proxyCustomElement as t,Mixin as i,createEvent as n,h as l,Host as o}from"@stencil/core/internal/client";import{a as s}from"./index2.js";import{a as c}from"./alert_exclamation_circle.js";import{c as r}from"./chevron_down.js";import{c as a}from"./close.js";import{u as p,k as u,o as m,j as d,e as h}from"./helpers.js";import{d as f}from"./pn-icon2.js";const b={SELECT_AN_OPTION:{en:"Select an option",sv:"Välj ett alternativ",da:"Vælg en mulighed",fi:"Valitse vaihtoehto",no:"Velg et alternativ"},SELECT_ALL_OPTIONS:{en:"Select all options",sv:"Välj alla alternativ",da:"Vælg alle muligheder",fi:"Valitse kaikki vaihtoehdot",no:"Velg alle alternativer"},SELECT_FOUND_OPTIONS:{en:"Select {number} options",sv:"Välj {number} alternativ",da:"Vælg {number} muligheder",fi:"Valitse {number} vaihtoehtoa",no:"Velg {number} alternativer"},SELECTED_OPTIONS:{en:"Selected options.",sv:"Valda alternativ.",da:"Valgte muligheder.",fi:"Valitut vaihtoehdot.",no:"Valgte alternativer."},BUTTON_OPEN:{en:"Open list",sv:"Öppna listan",da:"Open list",fi:"Open list",no:"Open list"},BUTTON_CLOSE:{en:"Close list",sv:"Stäng listan",da:"Close list",fi:"Close list",no:"Close list"},REMOVE:{en:"Remove",sv:"Ta bort",da:"Remove",fi:"Remove",no:"Remove"},REMOVED:{en:"Removed",sv:"Tog bort",da:"Fjernet",fi:"Poistettu",no:"Fjernet"},MORE_OPTION:{en:"more option.",sv:"alternativ till.",da:"mulighed mere.",fi:"vaihtoehto lisää.",no:"alternativ til."},MORE_OPTIONS:{en:"more options.",sv:"fler alternativ.",da:"more options.",fi:"more options.",no:"more options."},SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},RESULTS_FOUND:{en:"options found",sv:"alternativ hittades",da:"muligheder fundet",fi:"vaihtoehtoja löytyi",no:"alternativer funnet"},NO_SEARCH_RESULTS:{en:"No options found",sv:"Inga alternativ hittades",da:"Ingen muligheder fundet",fi:"Vaihtoehtoja ei löytynyt",no:"Finner ingen alternativer"},NO_OPTIONS:{en:"No options available",sv:"Inga alternativ tillgängliga",da:"Ingen tilgængelige muligheder",fi:"Ei vaihtoehtoja",no:"Ingen tilgjengelige alternativer"}},g=t(class extends(i(s)){constructor(e){super(!1),!1!==e&&this.__registerHost(),this.toggleSelect=n(this,"toggleSelect",7),this.allOptions=n(this,"allOptions",7),this.selectedOption=n(this,"selectedOption",7),this.selectedAllOptions=n(this,"selectedAllOptions",7),this.searchInput=n(this,"searchInput",7)}id="pn-multiselect-"+p();idLegend=this.id+"-legend";idButton=this.id+"-button";idOptions=this.id+"-options";idHelper=this.id+"-text";idChips=this.id+"-chips";idSr=this.id+"-sr";elGroup;elButton;elInput;elList;elChips;srTimer;get hostElement(){return this}isSearching=!1;open=!1;upwards=!1;srMessage;label;helpertext;placeholder;name;selectId=this.id;selectName;icon;compact=!1;language=null;options;selectAll=!1;allValue="pn_multiselect_all";search=!1;searchQuery="";itemCount=5;maxHeight;top=!1;bottom=!1;required=!1;disabled=!1;invalid=!1;error;handleOpen(){this.open?(this.addGlobalEventListeners(),this.handleDirection(),this.handleMaxHeight(),this.handleWidth()):this.removeGlobalEventListeners(),this.dropdownHandler()}handleSearch(){this.search||(this.options=[...this.options.map((e=>{const t={...e,hide:!1};return t?.group?.length&&t.group.map((e=>({...e,hide:!1}))),t}))])}handleSearchQuery(){this.search&&"string"==typeof this.searchQuery&&this.handleInputSearch()}handleSelectId(){const e=this.selectId;this.idLegend=e+"-legend",this.idButton=e+"-button",this.idOptions=e+"-options",this.idHelper=e+"-text",this.idChips=e+"-chips",this.idSr=e+"-sr"}handleResize(){this.open&&(this.toggleOpen(!1),this.elList.style.removeProperty("--pn-select-options-width"),this.elList.style.removeProperty("--pn-select-max-height"))}toggleSelect;allOptions;selectedOption;selectedAllOptions;searchInput;async componentWillLoad(){this.handleSelectId(),null===this.language&&await u(this.hostElement)}componentDidLoad(){this.searchQuery?.length&&this.handleSearchQuery()}globalEvents=e=>{const t=e.target,i=t?.closest(this.hostElement.localName);i||this.toggleOpen(!1)};addGlobalEventListeners(){this.hostElement.getRootNode().addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){this.hostElement.getRootNode().removeEventListener("click",this.globalEvents)}dropdownHandler(){this.open?this.openDropdown(this.elList):this.closeDropdown(this.elList)}emitEvents(e,t){if(this.allOptions.emit(this.options),e)return this.selectedOption.emit(e);const i={checked:t,searching:this.isSearching};this.search&&this.optionsTotal()!==this.optionsSearch().length&&(i.query=this.searchQuery,i.found=this.optionsSearch()),this.selectedAllOptions.emit(i)}optionsChecked(){const e=this.options?.reduce(((e,t)=>{const i=t.group?[...t.group.filter((({checked:e})=>e))]:[];return t.checked&&e.push(t),i?.length&&e.push(...i),e}),[]);return e}optionsTotal(){return this.options?.reduce(((e,t)=>e+(t?.group?.length?t.group.length+1:1)),0)}optionsIndex(e){const t=({group:t=[]})=>t?.findIndex((({value:t})=>t===e)),i=this.options.findIndex((i=>i.value===e||-1!==t(i)));return{indexGroup:i,indexNested:t(this.options?.[i])}}optionsCheckedTotal(){return this.optionsChecked()?.length}optionsCheckedPreview(){return this.optionsChecked()?.slice(0,this.itemCount)}optionsCheckedLabels(){return this.optionsChecked()?.map((({label:e})=>e))?.join(", ")?.trim()}optionsSearch(){const e=this.options?.reduce(((e,t)=>{const i=t.group?[...t.group.filter((({hide:e})=>!e))]:[];return t.hide||e.push(t),i?.length&&e.push(...i),e}),[]);return e}noResults(){return 0===this.optionsSearch()?.length}isIndeterminate(e){const t=this.options?.[e];if(t?.group?.length){const e=t.group.every((({checked:e})=>e)),i=t.group.every((({checked:e})=>!e));return!(e||i)}return!1}optionSelect({val:e,checked:t,chip:i}){if(e===this.allValue)return this.optionSelectAll(t);const n=this.options,{indexGroup:l,indexNested:o}=this.optionsIndex(e),s=n[l]?.group,c=s?.[o];if(c?.value){n[l].group[o].checked=t;const e=s?.every((({checked:e})=>e));n[l].checked=!!e}else n[l].checked=t,s?.length&&(n[l].group=s?.map((e=>({...e,checked:t}))));const r=-1===o?n[l]:n[l].group[o];this.emitEvents(r),this.options=[...n],"number"==typeof i&&(this.handleSrMesssage(`${this.translate("REMOVED")} ${r.label}`),requestAnimationFrame((()=>{const e=i===this.optionsCheckedTotal()?i-1:i,t=Array.from(this.elChips.children)?.[e];t?.querySelector("button").focus({preventScroll:!0})})))}optionSelectAll(e){this.options=[...this.options.map((t=>{const i={...t,checked:this.isSearching&&t.hide?t.checked:e};i.group&&(i.group=[...i.group.map((t=>({...t,checked:this.isSearching&&t.hide?t.checked:e})))]);const n=i?.group?.every((({checked:e})=>e));return i?.group?.length&&(i.checked=n),i}))],this.emitEvents(null,e)}optionSelected(e){return!!this.optionsChecked()?.find((({value:t,checked:i})=>t===e&&i))}translate(e){const t=b?.[e]?.[this.language||h];return t.includes("{number}")?t.replace("{number}",this.optionsSearch().length):t}getRect(e){return e?.getBoundingClientRect()}ripple({clientX:e,clientY:t,target:i}){const n=0===e&&0===t,l=i.nextElementSibling,{x:o,width:s,y:c,top:r}=this.getRect(l);m(n?{clientX:o+s-24,clientY:c-r}:{clientX:e,clientY:t},l)}handleSrMesssage(e){this.srMessage=e,clearTimeout(this.srTimer),this.srTimer=setTimeout((()=>this.srMessage=null),2e3)}handleDirection(){if(this.top)return this.upwards=!0;if(this.bottom)return this.upwards=!1;const{bottom:e,top:t}=this.getRect(this.elInput),i=window.innerHeight-e-16;this.upwards=(t-16)/2>i}handleMaxHeight(){if(this.maxHeight)return this.elGroup.style.setProperty("--pn-select-max-height",this.maxHeight);const{bottom:e,top:t}=this.getRect(this.elInput),i=this.upwards?t:e,n=d(),l=this.upwards?n+16:16,o=this.upwards?i-l:window.innerHeight-i-l;this.elGroup.style.setProperty("--pn-select-max-height",Math.ceil(o)+"px")}handleWidth(){const{width:e}=this.getRect(this.elInput);this.elGroup.style.setProperty("--pn-select-options-width",Math.ceil(e)+"px")}setFocus(){this.search?this.elInput.focus({preventScroll:!0}):this.elButton.focus({preventScroll:!0})}hasError(){return this.invalid||!!this.error}hasMessage(){return!!this.helpertext||!!this.error}toggleOpen(e){"boolean"==typeof e&&e===this.open||(this.open=e??!this.open,this.toggleSelect.emit({open:this.open}))}handleInputKeyboard(e){e.stopImmediatePropagation();const{code:t}=e;if("Escape"===t)return this.toggleOpen(!1);!this.open&&t.match(/^(Space|Enter)$|Arrow|^Key.*$/)&&this.toggleOpen()}setSearchQuery(e){this.open||this.toggleOpen(!0),this.searchQuery=e}handleInputSearch(){if(this.isEmpty())return;const e=this.searchQuery,t=({label:t,helpertext:i,value:n})=>`${t} ${i} ${n}`.trim().toLowerCase().includes(e.toLowerCase()),i=this.options.map((e=>{const i=e?.group?.map((e=>({...e,hide:!t(e)})))||[],n=t(e)||i?.some((({hide:e})=>!e));return e.hide=!n,e?.group?.length&&(e.group=[...i]),e}));this.isSearching=""!==e,this.options=[...i],this.searchInput.emit({query:e,found:this.optionsSearch()})}getListItem(e){const{value:t}=this.options[e];return this.elList.querySelector(`.pn-multiselect-option-input[value='${t}']`)}getOptionIndex(e,t,i){const n=this.optionsTotal()-1;if("End"===i)return n;if("Home"===i)return 0;const l=this.options.findIndex((({value:t})=>t===e))+t.find((e=>"number"==typeof e));return l>=n?n:l<=0?0:l}checkboxNav(e,t){const{code:i}=e,n="Tab"===i,l="Space"===i,o="Enter"===i,s="Escape"===i,c=["ArrowUp"===i&&-1,"ArrowDown"===i&&1,"PageUp"===i&&-10,"PageDown"===i&&10,"Home"===i&&0,"End"===i&&this.optionsTotal()-1,n,l,o,s];if(!c.some((e=>"number"==typeof e||e)))return;if(n||l||o)return;if(e.stopImmediatePropagation(),e.preventDefault(),s)return this.setFocus(),this.toggleOpen(!1);const r=this.getOptionIndex(t,c,i);return this.getListItem(r)?.focus()}handleBlur(e){const t=e.target,i=e.relatedTarget;"pn-multiselect-chip-button"===(i||t)?.className&&this.toggleOpen(!1)}handleLabel(){this.disabled||this.setFocus()}isEmpty(){return 0===(this.options?.length||0)}showSelectAll(){return this.selectAll&&!this.isEmpty()&&!this.noResults()}showEmptyOption(){return this.isSearching&&this.noResults()||this.isEmpty()}getPlaceholder(){return this.placeholder||this.translate(this.search?"SEARCH":"SELECT_AN_OPTION")}handleChange({target:e}){const{value:t,checked:i}=e;this.optionSelect({val:t,checked:i})}additonalOptions(){const e=this.optionsCheckedTotal()-this.itemCount;return`${e} ${this.translate("MORE_OPTION"+(1===e?"":"S"))}`}describedBy(){const e=[this.search&&this.idChips,this.srMessage&&this.idSr,!!this.helpertext&&this.idHelper].filter(Boolean);return e.length?e.join(" "):null}renderOption({label:e,value:t,checked:i,helpertext:n,icon:o,id:s=`${this.selectId}-${t||e}`,invalid:c,disabled:r,hide:a,group:p},u,m){return l("li",{class:"pn-multiselect-option",key:s,hidden:a},l("input",{type:"checkbox",id:s,class:"pn-multiselect-option-input",checked:i??this.optionSelected(t),indeterminate:void 0===m&&this.isIndeterminate(u),name:this.name,value:t,disabled:this.disabled||r,required:this.required,"aria-invalid":c?"true":null,"aria-describedby":n?s+"-helper":null,onClick:e=>this.ripple(e),onKeyDown:e=>this.checkboxNav(e,t),onBlur:e=>this.handleBlur(e)}),l("div",{class:"pn-multiselect-option-content"},!!o&&l("pn-icon",{icon:o,color:"blue900"}),l("div",{class:"pn-multiselect-option-text"},l("label",{class:"pn-multiselect-option-label",htmlFor:s},l("span",null,e)),n&&l("p",{class:"pn-multiselect-option-helper",id:s+"-helper"},n)),l("div",{class:"pn-multiselect-option-checkbox"},l("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},l("polyline",{class:"pn-multiselect-option-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}),l("polyline",{class:"pn-multiselect-option-checkbox-indeterminate-path",points:"4,12 20,12","stroke-width":"3"})))),p?.length&&l("ul",{class:"pn-multiselect-optgroup"},p?.map(((e,t)=>this.renderOption(e,u,t)))))}renderOptions(){return l("ul",{id:this.idOptions,class:"pn-multiselect-options","data-open":this.open,"data-upwards":this.upwards,onChange:e=>this.handleChange(e),style:{height:"0px"},ref:e=>this.elList=e},this.showSelectAll()&&this.renderOption({label:this.translate(`SELECT_${this.isSearching?"FOUND":"ALL"}_OPTIONS`),value:this.allValue,checked:this.optionsTotal()===this.optionsCheckedTotal()}),this.options?.map(((e,t)=>this.renderOption(e,t))),this.showEmptyOption()&&l("li",{class:"pn-multiselect-option"},l("div",{class:"pn-multiselect-option-content",role:"alert"},l("div",{class:"pn-multiselect-option-text"},l("span",{class:"pn-multiselect-option-label"},this.translate(this.isEmpty()?"NO_OPTIONS":"NO_SEARCH_RESULTS"))))))}renderChips(){return l("ul",{id:this.idChips,class:"pn-multiselect-chips","aria-label":this.translate("SELECTED_OPTIONS"),ref:e=>this.elChips=e},this.optionsCheckedPreview()?.map((({label:e,value:t},i)=>l("li",{class:"pn-multiselect-chip","aria-setsize":this.optionsCheckedTotal(),"aria-posinset":i+1,key:`${e}-${t}`},l("span",{class:"pn-multiselect-chip-label"},e),l("button",{type:"button",class:"pn-multiselect-chip-button","aria-label":`${this.translate("REMOVE")} ${e}`,onClick:()=>this.optionSelect({val:t,checked:!1,chip:i})},l("pn-icon",{icon:a,small:!0,color:"blue700"}))))),this.optionsCheckedTotal()>this.itemCount&&l("li",{class:"pn-multiselect-chip","data-count":!0},l("span",{class:"pn-multiselect-chip-label"},"+ ",this.additonalOptions())))}renderLabel(e=!1){return this.label?l(e?"div":"legend",{id:e?null:this.idLegend,class:{"pn-multiselect-label":!0,"pn-multiselect-sr-only":this.compact&&!e},"data-compact":this.compact,...e?{inert:!0}:{onClick:()=>this.handleLabel()}},l("span",null,this.label),!!this.optionsChecked()?.length&&l("span",null,this.optionsCheckedTotal(),"/",this.optionsTotal())):null}render(){return l(o,{key:"55af777ec6dd7165b4d16bdad6ec784fe81b8f20"},l("fieldset",{key:"41a5e9a45b3460a96676d606c458a062efe6ab80",class:"pn-multiselect","data-icon":!!this.icon,"data-error":this.hasError(),disabled:this.disabled},this.renderLabel(),l("div",{key:"fb6874e8d17a70ec0e1e21bf3474575b01c3e669",class:"pn-multiselect-group",ref:e=>this.elGroup=e},l("div",{key:"ab6aa995337f5a80e2026d98fe69399571249c24",class:"pn-multiselect-input"},!!this.icon&&l("pn-icon",{key:"0d9495e8864e266a6ababc752781b6e9c75595c3",class:"pn-multiselect-icon","data-custom":!0,icon:this.icon}),l("input",{key:"6b5adbc27ab64b9cdb7f53a99d2f4cd9a2185e47",tabindex:this.search?null:"-1",type:this.search?"search":"input",id:this.selectId,class:"pn-multiselect-element",value:this.search?this.searchQuery:this.optionsCheckedLabels(),name:this.selectName,placeholder:this.getPlaceholder(),required:this.search?null:this.required,"aria-labelledby":this.idLegend,"aria-describedby":this.describedBy(),"aria-controls":`${this.idOptions} ${this.search?this.idChips:""}`,"aria-invalid":this.hasError()?.toString(),disabled:this.disabled,readonly:!this.search,"data-compact":this.compact,onClick:()=>this.search&&this.open?null:this.toggleOpen(),onKeyDown:e=>this.handleInputKeyboard(e),onBlur:e=>this.handleBlur(e),onInput:e=>this.search&&this.setSearchQuery(e.target.value),ref:e=>this.elInput=e}),this.compact&&this.renderLabel(!0),this.hasError()&&l("pn-icon",{key:"36e6f1e307758cdec5f9eda59413b8a0c28af78c",class:"pn-multiselect-icon","data-error":!0,icon:c,color:"warning"}),l("button",{key:"6197b7545b8646fecbd5a12e540e3011303f660c",id:this.idButton,type:"button",class:"pn-multiselect-button","aria-label":this.translate("BUTTON_"+(this.open?"CLOSE":"OPEN")),"aria-describedby":this.search?null:this.selectId,"aria-controls":this.idOptions,"aria-expanded":""+this.open,onClick:()=>this.toggleOpen(),ref:e=>this.elButton=e},l("pn-icon",{key:"f9ddba2705b7782606897f6374f5963833bde76e",class:"pn-multiselect-icon",icon:r,color:"blue700"}))),this.renderOptions()),this.hasMessage()&&l("p",{key:"d9fb544f999b9d779362f13090e9653bbd22fd4e",id:this.idHelper,class:"pn-multiselect-description",role:this.error?"alert":null},l("span",{key:"ed1426909307379ba22c06a6870ad867f5a7cdad"},this.error||this.helpertext)),this.search&&this.renderChips(),l("slot",{key:"d0bc44a9160fa4151e6f74c05fa3102189710454"}),this.search&&l("p",{key:"0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1",id:this.idSr,class:"pn-multiselect-sr-only",role:"alert","aria-live":"assertive"},this.srMessage&&l("span",{key:"610fc47f9a032c6e8931745e6b6d0b418eadd5ee"},this.srMessage))))}static get watchers(){return{open:[{handleOpen:0}],search:[{handleSearch:0}],searchQuery:[{handleSearchQuery:0}],selectId:[{handleSelectId:0}]}}static get style(){return`${e("pn-multiselect")}{display:inline-block}${e("pn-multiselect")} .pn-multiselect{position:relative;border:0;margin:0;padding:0}${e("pn-multiselect")} .pn-multiselect[data-icon]{--pn-input-offset-left:2em}${e("pn-multiselect")} .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:2.75em}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label{color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label[data-compact]{color:#2d2013}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus,${e("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-multiselect")} .pn-multiselect-label{width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${e("pn-multiselect")} .pn-multiselect-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-multiselect")} .pn-multiselect-label>span{font-size:0.875em}${e("pn-multiselect")} .pn-multiselect-label[data-compact]{justify-content:start}${e("pn-multiselect")} .pn-multiselect-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-multiselect")} .pn-multiselect-group{position:relative;padding:0;margin:0}${e("pn-multiselect")} .pn-multiselect-input{position:relative}${e("pn-multiselect")} .pn-multiselect-input>${e("pn-icon")}{pointer-events:none;position:absolute;top:0.75em;right:3.5em}${e("pn-multiselect")} .pn-multiselect-input>${e("pn-icon")}[data-custom]{left:0.75em;right:unset}${e("pn-multiselect")} .pn-multiselect-button{cursor:pointer;position:absolute;right:0.75em;top:50%;transform:translateY(-50%);padding:0;margin:0;border:0;width:2em;height:2em;font-size:1em;border-radius:50%;background-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-multiselect")} .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-button>${e("pn-icon")}>svg>path{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-button>${e("pn-icon")}>svg>path{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-button>${e("pn-icon")}>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}${e("pn-multiselect")} .pn-multiselect-button:hover{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]>${e("pn-icon")}>svg>path{transform:rotate(180deg);transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element{cursor:text;text-align:left;transition-delay:0.1s, 0.1s, 0s;width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.5em;overflow:hidden;text-overflow:ellipsis;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3.5em 0.75em 0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:hover,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:focus,${e("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-multiselect")} .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-multiselect")} .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-multiselect")} .pn-multiselect-element[data-compact]::placeholder{color:transparent}${e("pn-multiselect")} .pn-multiselect-element[data-compact]:focus+.pn-multiselect-label,${e("pn-multiselect")} .pn-multiselect-element[data-compact]:not(:placeholder-shown)+.pn-multiselect-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-multiselect")} .pn-multiselect-element:hover{border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}${e("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}${e("pn-multiselect")} .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-element:focus-visible{transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-element::-webkit-search-cancel-button,${e("pn-multiselect")} .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${e("pn-multiselect")} .pn-multiselect-options{scroll-behavior:smooth;position:absolute;z-index:10;top:calc(100% + 0.5em);left:0;right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;list-style:none;margin:0;padding:0;width:var(--pn-select-options-width);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left}${e("pn-multiselect")} .pn-multiselect-options[data-open]{visibility:visible}${e("pn-multiselect")} .pn-multiselect-options[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left;box-shadow:0 -0.0625em 0.125em rgba(0, 0, 0, 0.2)}${e("pn-multiselect")} .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-corner,${e("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-button{display:none}${e("pn-multiselect")} .pn-multiselect-options>${e("pn-input")}{padding:0.5em}${e("pn-multiselect")} .pn-multiselect-optgroup{list-style:none;padding:0}${e("pn-multiselect")} .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}${e("pn-multiselect")} .pn-multiselect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0.5em;padding:0;margin:0.5em 0 0 0;color:#5e554a;font-weight:400}${e("pn-multiselect")} .pn-multiselect-chips:empty{display:none}${e("pn-multiselect")} .pn-multiselect-chip{margin:0;display:inline-flex;align-items:center;gap:0.25em;background-color:#ffffff;border-radius:0.5em;padding:0.125em 0.25em 0.125em 0.5em;line-height:1.5em;border:0.0625em solid #5e554a;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}${e("pn-multiselect")} .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}${e("pn-multiselect")} .pn-multiselect-chip-button{cursor:pointer;font-size:1em;padding:0.25em;height:1.5em;width:1.5em;border:0;background-color:unset;border-radius:50%;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}${e("pn-multiselect")} .pn-multiselect-chip-button:hover{background-color:#8eddf9}${e("pn-multiselect")} .pn-multiselect-chip-button:focus{outline:0}${e("pn-multiselect")} .pn-multiselect-no-results{margin:0;padding:0.75em}${e("pn-multiselect")} .pn-multiselect-description{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-multiselect")} .pn-multiselect-description[role=alert]{color:#a70707}${e("pn-multiselect")} .pn-multiselect-option{position:relative;margin:0;padding:0}${e("pn-multiselect")} .pn-multiselect-option .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${e("pn-multiselect")} .pn-multiselect-option-input{cursor:pointer;position:absolute;opacity:0;left:0;top:0;height:100%;width:100%;margin:0;-webkit-tap-highlight-color:transparent}${e("pn-multiselect")} .pn-multiselect-option-input:disabled{pointer-events:none}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}${e("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}${e("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#500715;border-color:#500715}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#a70707;background-color:#fdefee;border-color:#a70707}${e("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{outline-color:#005d92;background-color:#e0f8ff;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}${e("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}${e("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}${e("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}${e("pn-multiselect")} .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}${e("pn-multiselect")} .pn-multiselect-option-content{position:relative;overflow:hidden;z-index:-1;display:flex;align-items:center;padding:0.75em 1em;gap:0.5em;background-color:#ffffff;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}${e("pn-multiselect")} .pn-multiselect-option-helper{color:#5e554a;margin:0}${e("pn-multiselect")} .pn-multiselect-option-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${e("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}`}},[772,"pn-multiselect",{label:[1],helpertext:[1],placeholder:[1],name:[1],selectId:[1,"select-id"],selectName:[1,"select-name"],icon:[1],compact:[4],language:[1],options:[1040],selectAll:[4,"select-all"],allValue:[1,"all-value"],search:[4],searchQuery:[1025,"search-query"],itemCount:[2,"item-count"],maxHeight:[1,"max-height"],top:[4],bottom:[4],required:[4],disabled:[4],invalid:[4],error:[1],isClosing:[32],isExpanding:[32],isSearching:[32],open:[32],upwards:[32],srMessage:[32]},[[9,"resize","handleResize"]],{open:[{handleOpen:0}],search:[{handleSearch:0}],searchQuery:[{handleSearchQuery:0}],selectId:[{handleSelectId:0}]}]),k=g,v=function(){"undefined"!=typeof customElements&&["pn-multiselect","pn-icon"].forEach((t=>{switch(t){case"pn-multiselect":customElements.get(e(e(t)))||customElements.define(e(e(t)),g);break;case"pn-icon":customElements.get(e(e(t)))||f()}}))};export{k as PnMultiselect,v as defineCustomElement}