@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -2,12 +2,12 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
-import { a as animateHeightFactory } from './index-CosyroON.js';
+import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
+import { a as animateHeightFactory } from './index-DyhO6xPY.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { c as chevron_down } from './chevron_down-DrYFvs2M.js';
 import { c as close } from './close-BvuWkoyY.js';
-import { uuidv4, awaitTopbar, ripple, getTotalHeightOffset, en } from './index.js';
+import { uuidv4, awaitTopbar, ripple, getTotalHeightOffset, getMenuWidth, en } from './index.js';
 
 const translations = {
     SELECT_AN_OPTION: {
@@ -110,23 +110,24 @@ const translations = {
     },
 };
 
-const pnMultiselectCss = () => `${transformTag("pn-multiselect")}{display:inline-block}${transformTag("pn-multiselect")} .pn-multiselect{position:relative;border:0;margin:0;padding:0}${transformTag("pn-multiselect")} .pn-multiselect[data-icon]{--pn-input-offset-left:2em}${transformTag("pn-multiselect")} .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:2.75em}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label{color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label[data-compact]{color:#2d2013}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill,${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover,${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus,${transformTag("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}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-multiselect")} .pn-multiselect-label>span{font-size:0.875em}${transformTag("pn-multiselect")} .pn-multiselect-label[data-compact]{justify-content:start}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-group{position:relative;padding:0;margin:0}${transformTag("pn-multiselect")} .pn-multiselect-input{position:relative}${transformTag("pn-multiselect")} .pn-multiselect-input>${transformTag("pn-icon")}{pointer-events:none;position:absolute;top:0.75em;right:3.5em}${transformTag("pn-multiselect")} .pn-multiselect-input>${transformTag("pn-icon")}[data-custom]{left:0.75em;right:unset}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-multiselect")} .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-button>${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-button>${transformTag("pn-icon")}>svg>path{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-button>${transformTag("pn-icon")}>svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}${transformTag("pn-multiselect")} .pn-multiselect-button:hover{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]>${transformTag("pn-icon")}>svg>path{transform:rotate(180deg);transition-delay:0s}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill,${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:hover,${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:focus,${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-multiselect")} .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-multiselect")} .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]::placeholder{color:transparent}${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]:focus+.pn-multiselect-label,${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]:not(:placeholder-shown)+.pn-multiselect-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-multiselect")} .pn-multiselect-element:hover{border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-multiselect")} .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}${transformTag("pn-multiselect")} .pn-multiselect-element:focus-visible{transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-element::-webkit-search-cancel-button,${transformTag("pn-multiselect")} .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-options[data-open]{visibility:visible}${transformTag("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)}${transformTag("pn-multiselect")} .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-corner,${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-button{display:none}${transformTag("pn-multiselect")} .pn-multiselect-options>${transformTag("pn-input")}{padding:0.5em}${transformTag("pn-multiselect")} .pn-multiselect-optgroup{list-style:none;padding:0}${transformTag("pn-multiselect")} .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-chips:empty{display:none}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}${transformTag("pn-multiselect")} .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-chip-button{-webkit-tap-highlight-color:transparent}${transformTag("pn-multiselect")} .pn-multiselect-chip-button:hover{background-color:#8eddf9}${transformTag("pn-multiselect")} .pn-multiselect-chip-button:focus{outline:0}${transformTag("pn-multiselect")} .pn-multiselect-no-results{margin:0;padding:0.75em}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-description[role=alert]{color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option{position:relative;margin:0;padding:0}${transformTag("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}}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled{pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content path{fill:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content path{fill:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}${transformTag("pn-multiselect")} .pn-multiselect-option-helper{color:#5e554a;margin:0}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}`;
+const pnMultiselectCss = () => `${transformTag("pn-multiselect")}{display:inline-block}${transformTag("pn-multiselect")} .pn-multiselect{position:relative;border:0;margin:0;padding:0}${transformTag("pn-multiselect")} .pn-multiselect[data-icon]{--pn-input-offset-left:2em}${transformTag("pn-multiselect")} .pn-multiselect[data-icon] .pn-multiselect-element{padding-left:2.75em}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label{color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-label[data-compact]{color:#2d2013}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element{padding-right:5.5em;border-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:hover{border-color:#500715}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill,${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover,${transformTag("pn-multiselect")} .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus,${transformTag("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}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-label{transition-duration:0s;transition-delay:0s}}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-multiselect")} .pn-multiselect-label>span{font-size:0.875em}${transformTag("pn-multiselect")} .pn-multiselect-label[data-compact]{justify-content:start}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-group{position:relative;padding:0;margin:0}${transformTag("pn-multiselect")} .pn-multiselect-input{position:relative}${transformTag("pn-multiselect")} .pn-multiselect-input>${transformTag("pn-icon")}{pointer-events:none;position:absolute;top:0.75em;right:3.5em}${transformTag("pn-multiselect")} .pn-multiselect-input>${transformTag("pn-icon")}[data-custom]{left:0.75em;right:unset}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-multiselect")} .pn-multiselect-button:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-button>${transformTag("pn-icon")} svg>path{transition-delay:0.2s;transform-origin:center;transform:rotate(0deg)}${transformTag("pn-multiselect")} .pn-multiselect-button:hover{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-button[aria-expanded=true]>${transformTag("pn-icon")} svg>path{transform:rotate(180deg);transition-delay:0s}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill,${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:hover,${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:focus,${transformTag("pn-multiselect")} .pn-multiselect-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-multiselect")} .pn-multiselect-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-multiselect")} .pn-multiselect-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]::placeholder{color:transparent}${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]:focus+.pn-multiselect-label,${transformTag("pn-multiselect")} .pn-multiselect-element[data-compact]:not(:placeholder-shown)+.pn-multiselect-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-multiselect")} .pn-multiselect-element:hover{border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button{pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-element:disabled+.pn-multiselect-button path{fill:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-element:placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-multiselect")} .pn-multiselect-element[type=input]:hover{cursor:pointer;color:#2d2013;background-color:#effbff;transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-element[type=input]:hover[aria-invalid=true]{background-color:#fdefee}${transformTag("pn-multiselect")} .pn-multiselect-element:focus-visible{transition-delay:0s}${transformTag("pn-multiselect")} .pn-multiselect-element::-webkit-search-cancel-button,${transformTag("pn-multiselect")} .pn-multiselect-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${transformTag("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:clamp(100%, 95vw, 20em);max-height:var(--pn-select-max-height);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;visibility:hidden;transform-origin:top left;transform:translateX(var(--pn-select-options-offset, 0))}${transformTag("pn-multiselect")} .pn-multiselect-options[data-open]{visibility:visible}${transformTag("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)}${transformTag("pn-multiselect")} .pn-multiselect-options[data-moving]{overflow:hidden;visibility:visible}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-corner,${transformTag("pn-multiselect")} .pn-multiselect-options::-webkit-scrollbar-button{display:none}${transformTag("pn-multiselect")} .pn-multiselect-options>${transformTag("pn-input")}{padding:0.5em}${transformTag("pn-multiselect")} .pn-multiselect-optgroup{list-style:none;padding:0}${transformTag("pn-multiselect")} .pn-multiselect-optgroup>.pn-multiselect-option>.pn-multiselect-option-content{padding-left:2em}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-chips:empty{display:none}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-chip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-chip:focus-within{color:#005d92;outline-color:#005d92;background-color:#effbff;border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-chip[data-count]{pointer-events:none;border:0;padding-left:0;padding-right:0;background-color:unset}${transformTag("pn-multiselect")} .pn-multiselect-chip-label{font-size:0.875em;white-space:nowrap}${transformTag("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%;-webkit-tap-highlight-color:transparent;transition-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-multiselect")} .pn-multiselect-chip-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-chip-button:hover{background-color:#8eddf9}${transformTag("pn-multiselect")} .pn-multiselect-chip-button:focus{outline:0}${transformTag("pn-multiselect")} .pn-multiselect-no-results{margin:0;padding:0.75em}${transformTag("pn-multiselect")} .pn-multiselect-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-multiselect")} .pn-multiselect-text[hidden]{display:none}${transformTag("pn-multiselect")} .pn-multiselect-text[role=alert]{color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option{position:relative;margin:0;padding:0}${transformTag("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}}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled{pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#f3f2f2;border-color:#969087}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled+.pn-multiselect-option-content .pn-icon-svg path{fill:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#969087;border-color:#969087}${transformTag("pn-multiselect")} .pn-multiselect-option-input:disabled:checked+.pn-multiselect-option-content .pn-icon-svg path{fill:#5e554a}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]+.pn-multiselect-option-content .pn-ripple{background-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content{background-color:#fdefee}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#a70707;border-color:#a70707}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:focus-visible+.pn-multiselect-option-content{background-color:#fdefee}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:checked:hover+.pn-multiselect-option-content{background-color:#fef7f6}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content{background-color:#fef7f6}${transformTag("pn-multiselect")} .pn-multiselect-option-input[aria-invalid=true]:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#fdefee;border-color:#a70707}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#e0f8ff}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content{background-color:#e0f8ff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#005d92;background-color:#005d92}${transformTag("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}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content{background-color:#effbff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content{background-color:#e0f8ff}${transformTag("pn-multiselect")} .pn-multiselect-option-input:checked:focus-visible+.pn-multiselect-option-content .pn-multiselect-option-checkbox{border-color:#0d234b;background-color:#0d234b}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#005d92;border-color:#005d92}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate+.pn-multiselect-option-content svg .pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:0}${transformTag("pn-multiselect")} .pn-multiselect-option-input:indeterminate:hover+.pn-multiselect-option-content .pn-multiselect-option-checkbox{background-color:#0d234b;border-color:#0d234b}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-option-content{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-option-text{flex:1;text-overflow:ellipsis;overflow:hidden}${transformTag("pn-multiselect")} .pn-multiselect-option-helper{color:#5e554a;margin:0}${transformTag("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){${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-delay:0s;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path{stroke-dashoffset:23}${transformTag("pn-multiselect")} .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-indeterminate-path{stroke-dashoffset:23}`;
 
 const PnMultiselect = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.toggleSelect = createEvent(this, "toggleSelect");
-        this.allOptions = createEvent(this, "allOptions");
-        this.selectedOption = createEvent(this, "selectedOption");
-        this.selectedAllOptions = createEvent(this, "selectedAllOptions");
-        this.searchInput = createEvent(this, "searchInput");
+        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`;
+    idError = `${this.id}-error`;
     idChips = `${this.id}-chips`;
     idSr = `${this.id}-sr`;
     elGroup;
@@ -145,28 +146,32 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
     label;
     /** Display a helper text underneath the select */
     helpertext;
+    /** Manually set the language, not needed if you have the pnTopbar available */
+    language = undefined;
+    /** HTML name of the checkbox elements. Used for each checkbox inside the multiselect. @category Native attributes */
+    name;
+    /** HTML name of the input element. @category Native attributes*/
+    selectName;
     /**
      * 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.
+     * @category Native attributes
      */
     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;
-    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
-    compact = false;
-    /** Manually set the language, not needed if you have the pnTopbar available */
-    language = null;
+    /** Set the select as required. @category Native attributes */
+    required = false;
+    /** Disable the select. @category Native attributes */
+    disabled = false;
     /**
-     * Array of options.
-     * @hide true
+     * The array of `PnMultiselectOption` objects.
+     * @see {@link PnMultiselectOption} for the option object properties.
+     * @category Features
      **/
     options;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 @category Features */
+    compact = false;
+    /** Display an icon to the left of the select input @category Features */
+    icon;
     /**
      * 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.
@@ -201,8 +206,7 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
      **/
     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.
+     * 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
@@ -218,20 +222,34 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
      * @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 */
+    /** Trigger the invalid state. @category Features */
     invalid = false;
-    /** Display an error message and trigger the invalid state. @category Validation */
+    /** Display an error message and trigger the invalid state. @category Features */
     error;
+    /** Set a custom ID for the select. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Select HTML id @deprecated Use `pn-id` instead. @category HTML attributes */
+    selectId;
     handleOpen() {
         if (this.open) {
             this.addGlobalEventListeners();
             this.handleDirection();
             this.handleMaxHeight();
-            this.handleWidth();
+            this.handleOffset();
         }
         else {
             this.removeGlobalEventListeners();
@@ -257,11 +275,12 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
             this.handleInputSearch();
     }
     handleSelectId() {
-        const id = this.selectId;
+        const id = this.getId();
         this.idLegend = `${id}-legend`;
         this.idButton = `${id}-button`;
         this.idOptions = `${id}-options`;
         this.idHelper = `${id}-text`;
+        this.idError = `${id}-error`;
         this.idChips = `${id}-chips`;
         this.idSr = `${id}-sr`;
     }
@@ -273,8 +292,8 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
         if (!this.open)
             return;
         this.toggleOpen(false);
-        this.elList.style.removeProperty('--pn-select-options-width');
-        this.elList.style.removeProperty('--pn-select-max-height');
+        this.elGroup.style.removeProperty('--pn-select-max-height');
+        this.elGroup.style.removeProperty('--pn-select-options-offset');
     }
     /** Dispatched everytime the multiselect is opened or closed. */
     toggleSelect;
@@ -293,19 +312,44 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
      **/
     searchInput;
     async componentWillLoad() {
-        this.handleSelectId();
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
     componentDidLoad() {
         if (!!this.searchQuery?.length)
             this.handleSearchQuery();
     }
+    getId() {
+        return this.pnId || this.selectId || this.id;
+    }
+    hasHelperText() {
+        return this.helpertext?.length > 0 || this.checkSlottedHelper();
+    }
+    /** If any `error` text is present, either via prop/slot. */
+    hasErrorMessage() {
+        return this.error?.length > 0 || this.checkSlottedError();
+    }
+    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
+    hasError() {
+        return this.hasErrorMessage() || this.invalid;
+    }
+    checkSlottedHelper() {
+        return !!this.hostElement.querySelector('[slot=helpertext]');
+    }
+    checkSlottedError() {
+        return !!this.hostElement.querySelector('[slot=error]');
+    }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
+    }
     globalEvents = (event) => {
         const target = event.target;
-        const isWithinCalendar = target?.closest(this.hostElement.localName);
-        if (!isWithinCalendar)
+        if (!this.hostElement.contains(target) || event?.key === 'Escape') {
             this.toggleOpen(false);
+        }
     };
     addGlobalEventListeners() {
         const root = this.hostElement.getRootNode();
@@ -498,9 +542,21 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
         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`);
+    handleOffset() {
+        this.elGroup.style.removeProperty('--pn-select-options-offset');
+        requestAnimationFrame(() => {
+            const { left, right } = this.getRect(this.elList);
+            const menuWidth = getMenuWidth();
+            const leftBoundary = menuWidth + 8;
+            const rightBoundary = window.innerWidth - 8;
+            let offset = 0;
+            if (left < leftBoundary)
+                offset = leftBoundary - left;
+            else if (right > rightBoundary)
+                offset = rightBoundary - right;
+            if (offset !== 0)
+                this.elGroup.style.setProperty('--pn-select-options-offset', `${Math.floor(offset)}px`);
+        });
     }
     setFocus() {
         if (this.search)
@@ -508,12 +564,6 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
         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;
@@ -634,14 +684,45 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
         const single = `MORE_OPTION${count === 1 ? '' : 'S'}`;
         return `${count} ${this.translate(single)}`;
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabel() {
+        return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    /**
+     * If you use a label (technically a legend), use the `idLegend` to point to it.
+     * If not, make sure there is no pnAriaLabel and use pnAriaLabelledby.
+     * This is to make sure there are no double label/labelledby.
+     */
+    getAriaLabelledby() {
+        return this.displayLabel() ? this.idLegend : !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     describedBy() {
-        const list = [this.search && this.idChips, this.srMessage && this.idSr, !!this.helpertext && this.idHelper].filter(Boolean);
+        const list = [];
+        if (this.search)
+            list.push(this.idChips);
+        if (this.srMessage)
+            list.push(this.idSr);
+        if (this.hasHelperText() && !this.hasErrorMessage())
+            list.push(this.idHelper);
+        if (this.hasErrorMessage())
+            list.push(this.idError);
         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))))));
+    /**
+     * This is to prevent a rare issue with rendering flag icons.
+     * Flags use a set ID to identify gradient colors. If the icon is rendered while the dropdown is closed,
+     * the ID is not unique and the icon will not be rendered for other pn-icons using it.
+     * This is a temp fix to address the root issue which is how the flags SVG styling is built.
+     */
+    renderItemIcon(icon, hide) {
+        return (this.open || this.isMoving()) && !!icon && !hide;
+    }
+    renderOption({ label, value, checked, helpertext, icon, id = `${this.getId()}-${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" }, this.renderItemIcon(icon, hide) && 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() &&
@@ -652,7 +733,7 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
             }), 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())))));
+        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, icon }, index) => (h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, !!icon && h("pn-icon", { icon: icon, small: true }), 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())))));
     }
     renderLabel(compactLabel = false) {
         if (!this.label)
@@ -663,7 +744,7 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
         return (h(Tag, { id: id, class: { 'pn-multiselect-label': true, 'pn-multiselect-sr-only': this.compact && !compactLabel }, "data-compact": this.compact, ...attrs }, h("span", null, this.label), !!this.optionsChecked()?.length && (h("span", null, this.optionsCheckedTotal(), "/", this.optionsTotal()))));
     }
     render() {
-        return (h(Host, { key: '55af777ec6dd7165b4d16bdad6ec784fe81b8f20' }, h("fieldset", { key: '41a5e9a45b3460a96676d606c458a062efe6ab80', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: 'fb6874e8d17a70ec0e1e21bf3474575b01c3e669', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: 'ab6aa995337f5a80e2026d98fe69399571249c24', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '0d9495e8864e266a6ababc752781b6e9c75595c3', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("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: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '36e6f1e307758cdec5f9eda59413b8a0c28af78c', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("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.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: 'f9ddba2705b7782606897f6374f5963833bde76e', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'd9fb544f999b9d779362f13090e9653bbd22fd4e', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: 'ed1426909307379ba22c06a6870ad867f5a7cdad' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: 'd0bc44a9160fa4151e6f74c05fa3102189710454' }), this.search && (h("p", { key: '0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '610fc47f9a032c6e8931745e6b6d0b418eadd5ee' }, this.srMessage))))));
+        return (h(Host, { key: '326b1351c1600920a89b49a4ca04fb48af112bb7' }, h("fieldset", { key: '069b0689d499ad99b65f29597cc3968a47a3fc86', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: '0a96f922421c6a1adb664714ec0d593cfdf950e5', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '3c6cadb7ff3dbc67fb8bab786133d64ad330c5d7', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '20bb5b6b273bea94903648a3465e14cf8dad2f77', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '905179f50885d27bc7f41df667be93731dd5e4be', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.getId(), class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "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: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '635d97c6b8f780e6bd6daab225a97d1057b4bf0d', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '77e9862561cd9ed80c5aa1b386ae772476a34e76', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.getId(), "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: '28092398e64c04af103142d8f459579eb2b70a1b', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), h("p", { key: '17d396f1b3175b502ce8d54c6ec059588bbe8128', id: this.idHelper, class: "pn-multiselect-text", hidden: this.hideHelpertext() }, h("span", { key: '693ba0a687b9b9766249e6703d0252beeeb762e9' }, this.helpertext), h("slot", { key: 'a70b1dff00b4ec936461f73354ebe18ce1a0a0c1', name: "helpertext" })), h("p", { key: '94c44db96a270fd7d3180c6dfddb53a46e85c2aa', id: this.idError, class: "pn-multiselect-text", role: "alert", hidden: this.hideError() }, h("span", { key: '0297ed1e18f374c0c3f0909a1ee5685b75c73a7c' }, this.error), h("slot", { key: '9c545b960d440978e46858b69ac86ad0112510c7', name: "error" })), this.search && this.renderChips(), h("slot", { key: '9551563c6a72fa6e06ce473eadbc73a0428b551e' }), this.search && (h("p", { key: '96863325f57e613f0272d652e05a70e1c5c35dde', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '21b84e0522ca16702a9ccabb071d30c0317631ef' }, this.srMessage))))));
     }
     static get watchers() { return {
         "open": [{
@@ -677,6 +758,9 @@ const PnMultiselect = class extends Mixin(animateHeightFactory) {
             }],
         "selectId": [{
                 "handleSelectId": 0
+            }],
+        "pnId": [{
+                "handleSelectId": 1
             }]
     }; }
 };

package/umd/modules/@postnord/web-components/esm/pn-ocr-search.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { awaitTopbar, sv } from './index.js';
 
 const translations = {
@@ -136,7 +136,7 @@ const PnOcrSearch = class {
         }
     }
     render() {
-        return (h(Host, { key: 'edf8696a2d3f115868f13d3bfa9c5e9c4128426c' }, h("pn-search-field", { key: 'b54f8575a5ebdd518e4082f78799f417448d53e9', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
+        return (h(Host, { key: '7cf50eabd6310124086f1674537bbb5f73ac6714' }, h("pn-search-field", { key: 'b8a24cdd8fdbb4ad6ac051bddd064f731bac8880', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
     }
 };
 PnOcrSearch.style = pnOcrSearchCss();

package/umd/modules/@postnord/web-components/esm/pn-page-nav-dropdown-item.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h } from './index-XKg-ydzH.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
 
 const pnPageNavDropdownItemCss = () => `${transformTag("pn-page-nav-dropdown-item")}:first-of-type li>a,${transformTag("pn-page-nav-dropdown-item")}:first-of-type li>button{border-radius:0.5em 0.5em 0 0}${transformTag("pn-page-nav-dropdown-item")}:last-of-type li>a,${transformTag("pn-page-nav-dropdown-item")}:last-of-type li>button{border-radius:0 0 0.5em 0.5em}${transformTag("pn-page-nav-dropdown-item")}:last-of-type li>hr{display:none}${transformTag("pn-page-nav-dropdown-item")} li{font-size:inherit}${transformTag("pn-page-nav-dropdown-item")} li>*{color:#ffffff;font-size:inherit;border:none;padding:1em;margin:0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.15s;outline:none;width:100%;font-weight:500}${transformTag("pn-page-nav-dropdown-item")} li>*>${transformTag("pn-icon")}{margin-left:1em}${transformTag("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active{background:#005d92}${transformTag("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:hover,${transformTag("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:focus{background:#005d92}${transformTag("pn-page-nav-dropdown-item")} li>*:hover,${transformTag("pn-page-nav-dropdown-item")} li>*:focus{background:#0d234b}${transformTag("pn-page-nav-dropdown-item")} li>*:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}${transformTag("pn-page-nav-dropdown-item")} li>a{text-decoration:none}${transformTag("pn-page-nav-dropdown-item")} li>button{background:none}${transformTag("pn-page-nav-dropdown-item")} li>hr{bottom:0;padding:0;margin:0 auto;border-top:0.0625em solid #d3cecb;opacity:0.6;width:85%}`;
@@ -10,7 +10,7 @@ const pnPageNavDropdownItemCss = () => `${transformTag("pn-page-nav-dropdown-ite
 const PnPageNavDropdownItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.itemselection = createEvent(this, "itemselection");
+        this.itemselection = createEvent(this, "itemselection", 7);
     }
     get hostElement() { return getElement(this); }
     /**
@@ -43,7 +43,7 @@ const PnPageNavDropdownItem = class {
     }
     render() {
         const TagName = this.getTagName();
-        return (h("li", { key: 'a4ca23ac5a53d78c87f2c955c3da18372a7d572d' }, h(TagName, { key: '20639a9f58133cf65d8719943d9d11630166b8d4', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '5440c1e919238f6aaa55ca9df2dec18ebbce2f83' }), h("pn-icon", { key: 'ff16474c7bc9fc6664c64c5b4567e88a88bd29fb', icon: arrow_right, color: "white" })), h("hr", { key: '5201ae642f54f3ad7b157762dedfddb08d865486' })));
+        return (h("li", { key: '93c6bd31a88c76797cee2bc915c31e6ecfa5aace' }, h(TagName, { key: '2818d4f3a1572f863f9b9a8609d572f5994f6e75', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: 'e04f130737445747a2b93bf9d7372bf22889fcff' }), h("pn-icon", { key: '934d46f6bd482171d974efec7c4494f8b1b1faff', icon: arrow_right, color: "white" })), h("hr", { key: 'c5c9c4a24affe5b10d56e8a6ca5d6bee434aa571' })));
     }
 };
 PnPageNavDropdownItem.style = pnPageNavDropdownItemCss();

package/umd/modules/@postnord/web-components/esm/pn-page-nav-item.entry.js

@@ -2,14 +2,14 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 
 const pnPageNavItemCss = () => `${transformTag("pn-page-nav-item")}{position:relative;color:#ffffff;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${transformTag("pn-page-nav-item")} a{text-decoration:none;color:#ffffff;height:100%;width:100%;padding:0.5em;font-weight:500;border-radius:3em;border:0.0625em solid transparent;display:inline-flex;align-items:center;cursor:pointer;outline:none;transition:box-shadow 0.15s}${transformTag("pn-page-nav-item")} a:focus{box-shadow:0 0 0 0.1em #d3cecb}${transformTag("pn-page-nav-item")} a>${transformTag("pn-icon")}{margin-right:0.5em}${transformTag("pn-page-nav-item")}:last-of-type{margin-right:0}`;
 
 const PnPageNavItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.itemselection = createEvent(this, "itemselection");
+        this.itemselection = createEvent(this, "itemselection", 7);
     }
     get hostElement() { return getElement(this); }
     /** The item value. Used by `pn-page-nav` to determine pre-selected item. */
@@ -26,7 +26,7 @@ const PnPageNavItem = class {
         this.itemselection.emit(this.value);
     }
     render() {
-        return (h(Host, { key: '43346d6ed6211b3e6c4ee7c6dfd261112028445f' }, h("li", { key: '8a191825d21ae79f3c8bf69381151b8d258a7c64' }, h("a", { key: '3dab24d14cb027916343ae3b1f86ded224907ab6', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && h("pn-icon", { key: 'fa382f49cb1602908dd53af48044826f934679cd', icon: this.icon, color: "white" }), h("slot", { key: '576b22e87a530ac0a8a19eaf8a094937ab227b67' })))));
+        return (h(Host, { key: 'b4249e533daa9f96259d5379fdfcd90d87f3cc11' }, h("li", { key: '86b933f5d6b4bc827826c679a6ddf04efca08ee9' }, h("a", { key: '217797b771a53db8bbf53272eaafe816fc668ebc', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && h("pn-icon", { key: '8de359aa34e50caa65a66db5620590f24d409dae', icon: this.icon, color: "white" }), h("slot", { key: '5610d030d68f2e7f3f8eac68c02a01c3f9624f5e' })))));
     }
 };
 PnPageNavItem.style = pnPageNavItemCss();

package/umd/modules/@postnord/web-components/esm/pn-page-nav.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
 import { a as arrow_left } from './arrow_left-CQaMdITw.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
@@ -13,7 +13,7 @@ const pnPageNavCss = () => `${transformTag("pn-page-nav")}{display:block;positio
 const PnPageNav = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.navchange = createEvent(this, "navchange");
+        this.navchange = createEvent(this, "navchange", 7);
     }
     mo;
     navContainer;
@@ -297,7 +297,7 @@ const PnPageNav = class {
     }
     /* ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */
     render() {
-        return (h(Host, { key: 'f76a115ccea11e238d2aee5288b06675abc80b8a' }, h("div", { key: '453102a432daf9b567be4f5dc415bab34b48bc84', class: "pn-page-nav-wrapper" }, h("nav", { key: '9207ade4b4d6cea4c22622c91988eef2b3c812bc', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: '3365178312cfe2b9d48fccbc794d2a8a857ed6f0', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '460172b12b334e96920d185dcbc868acafc0cdcc', icon: chevron_down, color: "white", small: true }), h("div", { key: 'f16219e3070e00ebd1ab143b8803a94c44e242bc', class: "pn-page-nav-divider" }))), h("ul", { key: '560ef88c95269f29b1f76ee65e3a2541fc2482ce', class: "pn-page-nav-items" }, h("slot", { key: '7b1cfc89976421963cc19f958f21e29bfc796621' }), h("li", { key: '7df00d0a42fc3f48f82afdb0bbbf943229604293', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: '68fd6cc6f9dfcb834c62105f81ff2e21b332be94', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: 'ba26546a6fa3f750a5314dd80f80e1487b4962ec', class: this.scrollArrowClasses() }, h("button", { key: '57b43598cb3288b068c3583c822be35418b28e91', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'b812b5b471ba0982be6cb3bcacc84bb2f52fa0e3', icon: arrow_left, color: "white" })), h("button", { key: '70d5bffed71999aaf154f88590378496d79e7f55', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'a2d4319bab3a80b092321873ff66e4b421f14743', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: '1e2a73e7b4d523f3feba0dc18ccc14871b551862', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '20f647483c10a84de4bf2f40126b83b65b61b99f', name: "dropdown-item" })))));
+        return (h(Host, { key: '2bca6384910b5b314ddbb6f4f646fa95ee084c09' }, h("div", { key: '2322adc21546db4fcf950f0136516ef3a059b409', class: "pn-page-nav-wrapper" }, h("nav", { key: '62ce2c8c14c2748b8e5f4fd91263c19b70db1559', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: 'a7839cdd22ca1fbb7f2a1dcb56ebf8d9d7dda05d', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '1a91a0a67c34295456c3bdb943740b257d942a53', icon: chevron_down, color: "white", small: true }), h("div", { key: '1197635d3c157fae6b5fd90b52a8a61af8de4b8e', class: "pn-page-nav-divider" }))), h("ul", { key: '3a19fcbe877e2dc81c76d378fffe1536ac1af54f', class: "pn-page-nav-items" }, h("slot", { key: 'aff622272002a021fc4606cb9d43aa9d86e06ba3' }), h("li", { key: 'eb6d08cc390d742576a633629ee930b979ee9fdf', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: '86be3cba39c47f3bc7f3c87afedfef66afcd6fb2', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: '875412be070486024d5886f5f4099747b0d51b8a', class: this.scrollArrowClasses() }, h("button", { key: '358199bf37ce3473f002ae20e6dfab31a1ae0ac5', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'c40ceef73645e7bf9cec3935e892faf8c369a158', icon: arrow_left, color: "white" })), h("button", { key: '8ac847b47005a0d61f72de5122601c38ff268655', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'dc21c3242fe32126adca3ebc38c8a8eeed705aca', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: '7666ab6c68d3b9fe0bd39ac4bd1cec2e240e6871', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '64c6a3b285fb8058eb8085f2557e001c6711db4c', name: "dropdown-item" })))));
     }
     static get watchers() { return {
         "value": [{

package/umd/modules/@postnord/web-components/esm/pn-pagination.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { a as arrow_left } from './arrow_left-CQaMdITw.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
 import { awaitTopbar, en } from './index.js';
@@ -50,8 +50,8 @@ const pnPaginationCss = () => `${transformTag("pn-pagination")}{display:block;ma
 const PnPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageSelected = createEvent(this, "pageSelected");
-        this.rowsSelected = createEvent(this, "rowsSelected");
+        this.pageSelected = createEvent(this, "pageSelected", 7);
+        this.rowsSelected = createEvent(this, "rowsSelected", 7);
     }
     listElement;
     get hostElement() { return getElement(this); }
@@ -226,7 +226,7 @@ const PnPagination = class {
         return (h("pn-button", { arialabel: label, ariacurrent: current ? 'page' : null, href: this.getUrl(page), rel: current ? null : rel, appearance: "light", small: true, icon: icon, iconOnly: true, onPnClick: ({ detail }) => this.navigate({ page, event: detail }) }));
     }
     render() {
-        return (h(Host, { key: '4b78edcca36adfd17035e9bed30ae5af6918d6e8' }, h("nav", { key: '600dd0a880e03b9b5e98de4ee2d55134a0a90b8e', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '8cca49bb36c9b10fa05e7637acec36e28b25fb8e', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'd3fc1f233ab4d62c868a8a0a2076d7666d5dd53a', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: '17be56bca6cd83e7f7dc3174e2e92d91a05930dd', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
+        return (h(Host, { key: 'a975a04388ce0495aef863236d3fd2f936380fed' }, h("nav", { key: '920aeb21c535b7f09bc54924865d3b5be2a65652', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '880de99ef3a2a1400ff08f420c8c81017846e1fa', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'd11a69a8d7f5efcaae031214f2abf417d8922207', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: '2a5777aecd5210105ea26ed8c8cb9d99d1f1efc8', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
     }
     static get watchers() { return {
         "page": [{