@arbetsformedlingen/yrkesvaljaren 2.0.5

package/dist/esm/core-selector.entry.js

@@ -0,0 +1,474 @@
+import { h, r as registerInstance, c as createEvent, a as getElement } from './index-CGXZllj2.js';
+import { A as AfValidationMessage } from './af-validation-message-F8NIH2rC.js';
+
+const svgMarkup = {
+    search: '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%;height:100%"><path d="M25.645 22.437l-5.063-5.053a1.22 1.22 0 00-.864-.355h-.827a10.477 10.477 0 002.234-6.487C21.125 4.719 16.397 0 10.562 0 4.729 0 0 4.719 0 10.542c0 5.823 4.728 10.542 10.563 10.542 2.452 0 4.707-.831 6.5-2.23v.826c0 .324.126.633.355.862l5.063 5.053c.477.476 1.25.476 1.721 0l1.437-1.435a1.22 1.22 0 00.006-1.723zm-15.082-5.408c-3.59 0-6.5-2.899-6.5-6.487a6.49 6.49 0 016.5-6.487c3.59 0 6.5 2.899 6.5 6.487a6.49 6.49 0 01-6.5 6.487z" fill="currentColor" fill-rule="nonzero"/></svg>',
+    check: '<svg width="23" height="18" viewBox="0 0 23 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%;height:100%"><path d="M20.547.18L7.315 13.627 2.453 8.686a.597.597 0 00-.853 0L.177 10.132a.62.62 0 000 .868l6.711 6.82c.236.24.618.24.854 0L22.823 2.493a.62.62 0 000-.867L21.4.18a.597.597 0 00-.853 0z" fill="currentColor"/></svg>',
+    x: '<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%;height:100%"><g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M2 2l7.986 7.986M9.986 2L2 9.986"/></g></svg>',
+};
+const AfIcon = ({ name, class: className }) => (h("span", { class: className, "aria-hidden": "true", innerHTML: svgMarkup[name], style: {
+        display: 'flex',
+        width: className ? undefined : '12px',
+        height: className ? undefined : '12px',
+        minHeight: '1.4em',
+        alignItems: 'center',
+    } }));
+
+const AfLabel = ({ label, forId, description, required = false }) => (h("div", { class: "af-form-label" }, h("label", { class: "af-form-label__label", htmlFor: forId }, label, required ? ' *' : ''), description && h("span", { class: "af-form-label__description" }, description)));
+
+const AfTag = ({ text, breakWords = false, onRemove }) => (h("span", { class: "af-tag" }, h("button", { type: "button", class: "af-tag__button", "aria-label": `Ta bort ${text}`, onClick: (event) => {
+        event.preventDefault();
+        onRemove();
+    } }, h("span", { class: { 'af-tag__text': true, 'af-tag__text--break': breakWords } }, text), h(AfIcon, { name: "x", class: "af-tag__remove-icon" }))));
+
+function shouldShowManualInput(state, requireSelection = false) {
+    if (!state || requireSelection)
+        return false;
+    const inputValue = state.inputValue.trim();
+    if (inputValue === '')
+        return false;
+    return !state.suggestions.some((suggestion) => suggestion.label.toLowerCase() === inputValue.toLowerCase());
+}
+function reconcileActiveIndex({ activeIndex, newState, oldState, requireSelection = false, }) {
+    if (oldState && newState.inputValue !== oldState.inputValue) {
+        return { activeIndex: -1, shouldRestoreFocus: false };
+    }
+    let nextActiveIndex = activeIndex;
+    if (newState.status === 'multiSelect'
+        && oldState?.status === 'multiSelect'
+        && newState.selectedItems.length > oldState.selectedItems.length) {
+        nextActiveIndex = 0;
+    }
+    const oldShowManualInput = shouldShowManualInput(oldState, requireSelection);
+    const wasManualInputActive = Boolean(oldState && oldShowManualInput && activeIndex === oldState.suggestions.length);
+    const showManualInput = shouldShowManualInput(newState, requireSelection);
+    const optionCount = newState.suggestions.length + (showManualInput ? 1 : 0);
+    if (wasManualInputActive) {
+        nextActiveIndex = showManualInput ? newState.suggestions.length : -1;
+    }
+    else if (optionCount === 0) {
+        nextActiveIndex = -1;
+    }
+    else if (nextActiveIndex >= optionCount) {
+        nextActiveIndex = optionCount - 1;
+    }
+    return {
+        activeIndex: nextActiveIndex,
+        shouldRestoreFocus: newState.status === 'itemSelected' && oldState?.status !== 'itemSelected',
+    };
+}
+
+const coreSelectorCss = () => `:host{--digi--grayscale-0:#ffffff;--digi--grayscale-50:#fbfbfb;--digi--grayscale-100:#f4f4f4;--digi--grayscale-200:#ededed;--digi--grayscale-300:#e4e4e4;--digi--grayscale-400:#dddddd;--digi--grayscale-500:#cacaca;--digi--grayscale-600:#acacac;--digi--grayscale-700:#757575;--digi--grayscale-800:#5c5c5c;--digi--grayscale-900:#333333;--digi--grayscale-1000:#000000;--digi--global--color--cta--link--base:#1616b2;--digi--global--color--function--danger--base:#da0000;--digi--global--color--function--success--base:#008a20;--digi--global--color--function--success--lightest-3:#d4edda;--digi--global--color--function--warning--base:#ffe200;--digi--color--text--primary:var(--digi--grayscale-900);--digi--color--text--secondary:var(--digi--grayscale-700);--digi--color--text--link:var(--digi--global--color--cta--link--base);--digi--color--icons--success:var(--digi--global--color--function--success--base);--digi--color--icons--warning:#8a7a00;--digi--color--icons--danger:var(--digi--global--color--function--danger--base);--digi--global--typography--font-family--default:"Open Sans", Arial, sans-serif;--digi--global--typography--font-size--base:1rem;--digi--global--typography--font-size--small:0.875rem;--digi--global--typography--font-weight--regular:400;--digi--global--typography--font-weight--semibold:600;--digi--global--typography--font-weight--bold:700;--digi--global--typography--line-height--base:1.5;--digi--typography--label--font-size--desktop:1rem;--digi--typography--label--font-weight--desktop:600;--digi--typography--label--line-height--desktop:1.5;--digi--typography--label-description--font-size--desktop:1rem;--digi--typography--label-description--line-height--desktop:1.5;--digi--typography--tag--font-size--desktop:0.875rem;--digi--gutter--icon:0.625rem;--digi--gutter--smaller:0.75rem;--digi--gutter--small:0.875rem;--digi--gutter--medium:1rem;--digi--border-width--primary:1px;--digi--border-style--primary:solid;--digi--border-radius--primary:0;--digi--border-radius--secondary:6px;--af-tag-color:#091d54;--af-tag-hover-background:#ddf1fc}.af-form-label{color:var(--digi--color--text--primary);display:flex;flex-direction:column;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);margin-bottom:0.5rem}.af-form-label__label{cursor:pointer;display:block;font-weight:var(--digi--typography--label--font-weight--desktop);line-height:var(--digi--typography--label--line-height--desktop)}.af-form-label__description{display:block;font-size:var(--digi--typography--label-description--font-size--desktop);line-height:var(--digi--typography--label-description--line-height--desktop);max-width:35rem}.af-validation-message{align-items:center;display:flex;flex-wrap:wrap}.af-validation-message__icon{flex:0 0 auto;height:1.25em;margin-inline-end:var(--digi--gutter--icon);width:1.25em}.af-validation-message__icon--success,.af-validation-message__icon--error{background-color:var(--af-validation-icon-color, currentColor);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.af-validation-message__icon--success{--af-validation-icon-color:var(--digi--color--icons--success);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z'/%3E%3C/svg%3E")}.af-validation-message__icon--error{--af-validation-icon-color:var(--digi--color--icons--danger);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z'/%3E%3C/svg%3E")}.af-validation-message__icon--warning{background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='6.75' fill='%23333'/%3E%3Cpath d='m18 9c0 4.9717-4.0298 9-9 9-4.9702 0-9-4.0283-9-9 0-4.9688 4.0298-9 9-9 4.9702 0 9 4.0312 9 9zm-9 1.8145c-0.92196 0-1.6694 0.7474-1.6694 1.6694 0 0.92196 0.7474 1.6694 1.6694 1.6694s1.6694-0.7474 1.6694-1.6694c0-0.92196-0.7474-1.6694-1.6694-1.6694zm-1.3157-1.065c0.012593 0.23095 0.20355 0.41175 0.43483 0.41175h1.7618c0.23128 0 0.42224-0.1808 0.43483-0.41175l0.2692-4.9355c0.013609-0.24946-0.18501-0.45922-0.43483-0.45922h-2.3002c-0.24982 0-0.4484 0.20976-0.43479 0.45922l0.2692 4.9355z' fill='%23FFE200'/%3E%3C/svg%3E");position:relative;top:3px}.af-validation-message__text{color:var(--digi--color--text--primary);flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);transform:translateY(1px)}.af-tag{display:block;max-width:100%;min-width:0}.af-tag__button{align-items:center;background:var(--digi--grayscale-0);border:var(--digi--border-width--primary) var(--digi--border-style--primary) var(--af-tag-color);border-radius:var(--digi--border-radius--secondary);color:var(--af-tag-color);cursor:pointer;display:inline-flex;font-family:var(--digi--global--typography--font-family--default);font-size:0.875rem;font-weight:var(--digi--global--typography--font-weight--semibold);gap:10px;height:auto;max-width:100%;min-height:unset;min-width:0;padding:6px 8px;text-align:left;white-space:normal}.af-tag__button:hover{background:var(--af-tag-hover-background)}.af-tag__button:focus-visible{background:var(--af-tag-hover-background);border-color:var(--af-tag-color);outline:2px solid var(--digi--grayscale-1000);outline-offset:2px;box-shadow:0 0 0 5px var(--digi--grayscale-0)}.af-tag__button:active{background:var(--af-tag-hover-background)}.af-tag__text{display:inline-block;max-width:100%;min-width:0;white-space:normal}.af-tag__text--break{overflow-wrap:anywhere;word-break:break-word}.af-tag__remove-icon{flex:0 0 auto;height:1em;min-height:0 !important;width:1em}:host{--selector-width:var(--cs-width, 100%);--selector-min-width:var(--cs-min-width, 200px);--selector-max-width:var(--cs-max-width, none);--selector-height:var(--cs-height, auto);--selector-min-height:var(--cs-min-height, auto);--selector-max-height:var(--cs-max-height, none);--selector-font-family:var(--global-font-family, 'Open Sans', sans-serif);--selector-font-size:var(--cs-font-size, 1rem);--selector-text-color:var(--cs-text-color, #212529);--selector-placeholder-color:var(--cs-placeholder-color, #6c757d);--selector-border-color:var(--cs-border-color, #d1d5db);--selector-focus-border-color:var(--cs-focus-border-color, #86b7fe);--selector-focus-shadow:var(--cs-focus-shadow, 0 0 0 0.25rem rgba(13, 110, 253, 0.25));--selector-background-color:var(--cs-background-color, #fff);--selector-icon-color:var(--cs-icon-color, #6c757d);--selector-clear-button-color:var(--cs-clear-button-color, #6c757d);--selector-clear-button-hover-color:var(--cs-clear-button-hover-color, #212529);--selector-suggestion-background-color:var(--cs-suggestion-background-color, #fff);--selector-suggestion-border-color:var(--cs-suggestion-border-color, #ced4da);--selector-suggestion-hover-background:var(--cs-suggestion-hover-background, #e9ecef);--selector-suggestion-active-background:var(--cs-suggestion-active-background, #dde4eb);--selector-suggestion-text-color:var(--cs-suggestion-text-color, #212529);--selector-suggestion-highlight-weight:var(--cs-suggestion-highlight-weight, bold);--selector-error-color:var(--cs-error-color, #dc3545);--selector-loading-color:var(--cs-loading-color, #6c757d);--selector-container-min-height:40px;--selector-padding-y:6px;--selector-padding-x:10px;--selector-icon-size:1.1em;--selector-gap:6px;--cs-row-height:32px;display:flex;flex-direction:column;width:var(--selector-width);min-width:var(--selector-min-width);max-width:var(--selector-max-width);height:var(--selector-height);min-height:var(--selector-min-height);max-height:var(--selector-max-height);font-family:var(--selector-font-family);font-size:var(--selector-font-size);color:var(--selector-text-color);position:relative}:host([cs-size="small"]){--selector-container-min-height:32px;--selector-padding-y:2px;--selector-icon-size:1em;--selector-gap:4px;--cs-row-height:28px}:host([cs-size="medium"]){--selector-container-min-height:40px;--selector-padding-y:6px;--cs-row-height:32px}:host([cs-size="large"]){--selector-container-min-height:48px;--selector-padding-y:10px;--selector-icon-size:1.25em;--selector-gap:8px;--cs-row-height:40px}*{box-sizing:border-box}.core-selector-wrapper{display:flex;flex-direction:column;flex:1;min-height:inherit}.af-form-label{margin-bottom:0.5rem}.search-container{display:flex;align-items:center;flex-wrap:wrap;gap:6px;border:1px solid #757575;border-radius:0px;padding:var(--selector-padding-y) var(--selector-padding-x);flex:1;min-height:var(--selector-container-min-height);cursor:text;background-color:var(--selector-background-color);position:relative;overflow:hidden}.search-container:focus-within{outline:2px solid black;outline-offset:2px}.search-container.is-inactive-selected .selector-input-field{caret-color:transparent;cursor:default}.is-inactive-selected+.suggestions-box-container{display:none !important}.search-container.is-inactive-selected .search-icon-container{display:none}.search-container.is-inactive-selected .input-area{padding-left:0}.input-controls-wrapper{position:relative;width:100%;display:flex;align-items:center}.search-icon-container{position:absolute;left:0;top:50%;width:20px;height:20px;transform:translateY(-50%);z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease-in-out, opacity 0.2s ease-in-out;opacity:1;max-height:100%}.search-icon-container.is-hidden{opacity:0;transform:translateY(-50%) scale(0.7)}.selector-search-icon{color:var(--digi--color--icon--primary, #333);display:block;flex:0 0 auto;width:20px;height:20px}.clear-button>span{color:var(--digi--color--icon--primary, #333)}.input-area{flex:1;min-width:0;padding-left:27px;display:flex;align-items:center;transition:padding-left 0.2s ease-in-out}.input-area.has-value{padding-left:0}.selector-input-field{width:100%;font-family:inherit;font-size:var(--selector-font-size);color:inherit;border:none;outline:none;background:transparent;transition:padding-right 0.2s ease-in-out}.search-container.has-input .selector-input-field{padding-right:0}.selector-input-field::placeholder{color:var(--selector-placeholder-color);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-button{position:static;flex-shrink:0;opacity:0;pointer-events:none;z-index:2;background:none;border:none;padding:0;margin:0;height:20px;width:20px;cursor:pointer;color:var(--selector-clear-button-color);line-height:1;display:flex;align-items:center;transition:color 0.2s ease-in-out, opacity 0.2s ease-in-out}.clear-button.is-visible{opacity:1;pointer-events:auto}.clear-button:hover,.clear-button:focus{color:var(--selector-clear-button-hover-color);outline:none}.search-container.multi-search-container{display:flex;flex-direction:column;gap:0.5rem;align-items:stretch;padding-top:var(--selector-padding-y);padding-bottom:var(--selector-padding-y);width:100%;max-width:100%}.selected-tags-wrapper{display:flex;flex-wrap:wrap;gap:0.5rem;width:100%;max-width:100%;box-sizing:border-box}.selected-tags-wrapper .af-tag{display:block;max-width:100%;min-width:0}.selected-tags-wrapper .af-tag__button{white-space:normal !important;height:auto !important;text-align:left !important;word-break:break-word !important;overflow-wrap:anywhere !important;max-width:100% !important}.search-container.single-value-display{display:flex;align-items:center;flex-wrap:nowrap;gap:0.5rem;min-height:var(--selector-container-min-height);padding:var(--selector-padding-y) var(--selector-padding-x)}.selected-text-in-box{flex-grow:1;white-space:normal;word-break:break-word;min-width:0;line-height:inherit}.search-container.single-value-display .clear-button{position:static;transform:none;opacity:1;pointer-events:auto;flex-shrink:0}.combobox-container{position:relative;margin-top:0;display:flex;flex-direction:column;flex:1}.suggestions-box-container{position:absolute;top:100%;left:0;right:0;z-index:100}.suggestions-box-container.is-hidden-list{z-index:101;pointer-events:none}.suggestions-box{position:relative;background-color:white;border:1px solid var(--selector-suggestion-border-color);border-radius:4px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);overflow-y:auto;margin:2px 0px;max-height:calc(var(--max-visible-rows, 10) * var(--cs-row-height) + 40px)}.suggestion-item{display:flex;align-items:center;min-height:var(--cs-row-height);height:auto;padding:6px 1rem;font-size:inherit;line-height:1.25;cursor:pointer;color:var(--selector-suggestion-text-color);list-style:none;transition:background-color 0.15s ease, color 0.15s ease;white-space:normal !important;word-break:break-word !important;overflow-wrap:anywhere !important;position:relative;z-index:1;box-sizing:border-box}.suggestion-item>span{transition:font-weight 0.2s ease, transform 0.2s ease;display:inline;vertical-align:middle;white-space:normal;word-break:break-word;overflow-wrap:anywhere}.suggestion-item:hover,.suggestion-item.active-suggestion{background-color:var(--selector-suggestion-active-background)}.suggestion-item.active-suggestion.is-keyboard-focus{outline:1px solid black;outline-offset:-1px}.suggestion-item.is-selected{color:var(--selector-suggestion-text-color) !important;cursor:default;background-color:#f2f2f2 !important}.suggestion-item.is-selected span{font-weight:600}.selection-indicator-icon{width:0;height:20px;opacity:0;transform:scale(0.5);margin-right:0;transition:width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),                  opacity 0.2s ease,                  transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),                 margin-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);color:var(--digi--grayscale-800, #333);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.suggestion-item.is-selected .selection-indicator-icon{width:24px;opacity:1;transform:scale(1);margin-right:8px}.suggestion-item.is-selected.active-suggestion{background-color:#f2f2f2 !important}.suggestion-item .suggestion-text strong,.suggestion-item .match-highlight{font-weight:var(--selector-suggestion-highlight-weight);color:inherit;display:inline}.metadata-dimmed,.occupation-variant-label{font-size:1rem;color:var(--digi--grayscale-700, #757575);margin-left:0.25rem;display:inline;vertical-align:baseline;line-height:inherit;white-space:normal}.suggestion-item.no-results{color:var(--selector-placeholder-color);cursor:default;padding:0.5rem 1rem;font-style:italic;text-align:center;height:auto}.search-container.has-validation-error{border-color:var(--selector-error-color);border-width:2px;background-color:#fef3f2}.search-container.has-positive-validation{border-color:#155724;background-color:#d4edda}.status-message{margin-top:0.5rem}.selector-validation-message{margin-top:0.5rem;display:block}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none;display:none}input::-ms-clear{display:none;width:0;height:0}.list-header-container{position:sticky;top:0;z-index:10;background-color:#f8f9fa;border-bottom:1px solid var(--selector-suggestion-border-color);min-height:auto;display:flex;flex-direction:column}.list-header-container ::slotted([slot="suggestions-overlay"]){position:absolute !important;top:0;left:0;width:100%;height:100%;z-index:20}.suggestions-box>::slotted([slot="suggestions-overlay"]){position:sticky !important;top:0;left:0;width:100%;z-index:20}.list-header{display:flex;align-items:center;min-height:var(--cs-row-height);padding:6px 1rem;font-size:0.875rem;line-height:1.25;color:var(--digi--grayscale-700, #757575);border-bottom:1px solid var(--selector-suggestion-border-color, #ced4da)}.list-header span{font-size:0.875rem;font-weight:normal}.history-clear-link{color:var(--digi--grayscale-700, #757575);text-decoration:underline;cursor:pointer;margin-left:0.25rem;background:transparent;border:0;padding:0;font:inherit}.history-clear-link:hover{color:var(--digi--grayscale-900, #222)}@keyframes cs-shrink-fade{from{opacity:1}to{opacity:1}}@keyframes cs-collapse{from{height:auto}to{height:auto}}.cs-toast{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;align-items:center;justify-content:center;gap:8px;background-color:#f8fdf0;animation:cs-toastSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;pointer-events:none;box-sizing:border-box}.cs-toast.is-closing{animation:cs-toastSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards}.cs-toast-text{margin:0;font-size:0.875rem;font-weight:500;color:#2e7d32}@keyframes cs-toastSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cs-toastSlideUp{from{transform:translateY(0)}to{transform:translateY(-100%)}}.selector-input-field.visually-hidden-selected{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}`;
+
+const CoreSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.csInput = createEvent(this, "csInput");
+        this.csSelect = createEvent(this, "csSelect");
+        this.csClear = createEvent(this, "csClear");
+        this.csRemoveItem = createEvent(this, "csRemoveItem");
+        this.csBlur = createEvent(this, "csBlur");
+        this.csEditSelection = createEvent(this, "csEditSelection");
+        this.csFocus = createEvent(this, "csFocus");
+        this.csLoadMore = createEvent(this, "csLoadMore");
+        this.csClearHistory = createEvent(this, "csClearHistory");
+        this.csRequestHistory = createEvent(this, "csRequestHistory");
+    }
+    historyRequestTimer;
+    disconnectedCallback() {
+        clearTimeout(this.historyRequestTimer);
+        this.historyRequestTimer = undefined;
+    }
+    static nextId = 0;
+    get hostElement() { return getElement(this); }
+    state;
+    config = {
+        disabled: false,
+        placeholder: 'Sök...',
+        minLength: 1,
+        maxResults: 10,
+        enableMultiple: false,
+        showSearchIcon: true,
+        requireSelection: true,
+        size: 'medium'
+    };
+    label = '';
+    labelDescription;
+    componentId = `cs-${CoreSelector.nextId++}`;
+    size = 'medium';
+    csInput;
+    csSelect;
+    csClear;
+    csRemoveItem;
+    csBlur;
+    csEditSelection;
+    csFocus;
+    csLoadMore;
+    csClearHistory;
+    csRequestHistory;
+    afFocused = false;
+    activeIndex = -1;
+    isFocusedInternal = false;
+    isNavigatingWithKeyboard = false;
+    async setFocus() {
+        if (this.inputRef) {
+            this.inputRef.focus();
+            const len = this.inputRef.value.length;
+            this.inputRef.setSelectionRange(len, len);
+        }
+        else {
+            this.shouldFocusAfterRender = true;
+        }
+    }
+    inputRef;
+    listRef;
+    shouldFocusAfterRender = false;
+    handleKeyDown = (event) => {
+        if (this.config.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (!this.state)
+            return;
+        if (event.target.tagName === 'BUTTON')
+            return;
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Enter' && event.key !== 'Escape') {
+            this.isNavigatingWithKeyboard = false;
+        }
+        if (this.state.status === 'itemSelected') {
+            if (event.key !== 'Tab' && event.key !== 'Shift' && !event.ctrlKey && !event.metaKey) {
+                this.csEditSelection.emit();
+                return;
+            }
+        }
+        if (this.state.status !== 'searching' && this.state.status !== 'multiSelect')
+            return;
+        const suggestions = this.state.suggestions;
+        const showManualInput = shouldShowManualInput(this.state, this.config.requireSelection);
+        const totalOptions = suggestions.length + (showManualInput ? 1 : 0);
+        switch (event.key) {
+            case 'ArrowDown':
+                if (totalOptions > 0) {
+                    event.preventDefault();
+                    this.isNavigatingWithKeyboard = true;
+                    if (this.activeIndex < totalOptions - 1) {
+                        this.activeIndex = this.activeIndex + 1;
+                        this.scrollToActive();
+                    }
+                    if (this.activeIndex >= suggestions.length - 3) {
+                        this.csLoadMore.emit();
+                    }
+                }
+                else {
+                    this.csFocus.emit();
+                }
+                break;
+            case 'ArrowUp':
+                if (totalOptions > 0) {
+                    event.preventDefault();
+                    this.isNavigatingWithKeyboard = true;
+                    if (this.activeIndex > 0) {
+                        this.activeIndex = this.activeIndex - 1;
+                        this.scrollToActive();
+                    }
+                    else if (this.activeIndex === 0 || this.activeIndex === -1) {
+                        // Wrap around to the last option (which might be manual input)
+                        this.activeIndex = totalOptions - 1;
+                        this.scrollToActive();
+                    }
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                // Only handle Space if we have an active suggestion (keyboard navigation)
+                // If index is -1, let the space go through to the input field
+                if (event.key === ' ' && this.activeIndex === -1) {
+                    return;
+                }
+                if (this.activeIndex >= 0 && this.activeIndex < suggestions.length) {
+                    event.preventDefault();
+                    const item = suggestions[this.activeIndex];
+                    this.shouldFocusAfterRender = true;
+                    if (item.isSelected) {
+                        this.csRemoveItem.emit(item);
+                    }
+                    else {
+                        this.csSelect.emit(item);
+                    }
+                }
+                else if (showManualInput && this.activeIndex === suggestions.length && this.isNavigatingWithKeyboard) {
+                    event.preventDefault();
+                    this.handleManualSelect();
+                }
+                else if (event.key === 'Enter') {
+                    // If Enter is pressed but no item is active,
+                    // we prevent default to avoid accidental form submission
+                    // and ensure the dropdown stays open if manual input is available.
+                    if (showManualInput || suggestions.length > 0) {
+                        event.preventDefault();
+                        this.isNavigatingWithKeyboard = true;
+                    }
+                }
+                break;
+            case 'Escape':
+                this.activeIndex = -1;
+                this.csClear.emit();
+                break;
+        }
+    };
+    onWrapperFocusIn = () => {
+        if (this.config.disabled)
+            return;
+        if (!this.state || !this.isFocusedInternal) {
+            if (this.state) {
+                this.isFocusedInternal = true;
+                this.activeIndex = -1;
+                this.csFocus.emit();
+                if (this.state.inputValue.trim() === '') {
+                    this.csRequestHistory.emit();
+                }
+            }
+        }
+    };
+    onWrapperFocusOut = () => {
+        if (this.shouldFocusAfterRender)
+            return;
+        // Use requestAnimationFrame to wait for the next frame where focus
+        // will have settled on the new element.
+        requestAnimationFrame(() => {
+            const root = this.hostElement.shadowRoot;
+            const activeElement = root?.activeElement || document.activeElement;
+            // Check if the currently focused element is inside the component or its shadow DOM
+            const isInside = (activeElement && this.hostElement.contains(activeElement)) ||
+                (root && root.contains(activeElement));
+            if (!isInside) {
+                this.isFocusedInternal = false;
+                this.activeIndex = -1;
+                this.csBlur.emit();
+            }
+        });
+    };
+    handleAfFocusedChange(newValue) {
+        this.isFocusedInternal = newValue;
+        if (newValue) {
+            this.shouldFocusAfterRender = true;
+        }
+    }
+    handleConfigChange(newConfig) {
+        if (newConfig.disabled) {
+            this.isFocusedInternal = false;
+            this.activeIndex = -1;
+            this.shouldFocusAfterRender = false;
+        }
+    }
+    handleStateChange(newState, oldState) {
+        const result = reconcileActiveIndex({
+            activeIndex: this.activeIndex,
+            newState,
+            oldState,
+            requireSelection: this.config.requireSelection,
+        });
+        this.activeIndex = result.activeIndex;
+        if (result.shouldRestoreFocus) {
+            this.shouldFocusAfterRender = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.shouldFocusAfterRender) {
+            this.performFocusRestoration();
+        }
+    }
+    performFocusRestoration(retryCount = 0) {
+        if (this.config.disabled) {
+            this.shouldFocusAfterRender = false;
+            return;
+        }
+        if (this.inputRef) {
+            this.isFocusedInternal = true; // Ensure UI thinks it's focused to show suggestions
+            this.inputRef.focus();
+            const currentActive = this.hostElement.shadowRoot?.activeElement;
+            if (currentActive === this.inputRef || retryCount > 20) {
+                const len = this.inputRef.value.length;
+                this.inputRef.setSelectionRange(len, len);
+                this.shouldFocusAfterRender = false;
+            }
+            else {
+                requestAnimationFrame(() => this.performFocusRestoration(retryCount + 1));
+            }
+        }
+    }
+    handleScroll(event) {
+        if (!this.config.enableInfiniteScroll)
+            return;
+        const target = event.target;
+        const threshold = 50;
+        const remaining = target.scrollHeight - (target.scrollTop + target.clientHeight);
+        if (remaining < threshold) {
+            this.csLoadMore.emit();
+        }
+    }
+    scrollToActive() {
+        if (!this.listRef || !this.state)
+            return;
+        const optionId = this.activeIndex === this.state.suggestions.length
+            ? `${this.componentId}-list-option-manual-input`
+            : `${this.componentId}-list-option-${this.activeIndex}`;
+        const activeElement = this.listRef.querySelector(`#${optionId}`);
+        activeElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+    handleManualSelect() {
+        const item = { id: '', label: this.state.inputValue.trim(), metadata: { type: 'ManualInput' } };
+        this.shouldFocusAfterRender = true;
+        this.csSelect.emit(item);
+        if (this.config.enableMultiple && this.state?.inputValue?.trim() === '') {
+            this.csRequestHistory.emit();
+        }
+    }
+    render() {
+        if (!this.state)
+            return null;
+        const isSelected = this.state.status === 'itemSelected';
+        return (h("div", { class: { 'core-selector-wrapper': true, 'is-disabled': !!this.config.disabled }, "aria-disabled": this.config.disabled ? 'true' : 'false', onKeyDown: (e) => this.handleKeyDown(e), onMouseMove: () => { this.isNavigatingWithKeyboard = false; }, onFocusin: this.onWrapperFocusIn, onFocusout: this.onWrapperFocusOut }, this.label && (h(AfLabel, { label: this.label, forId: `${this.componentId}-input`, description: this.labelDescription })), this.labelDescription && (h("div", { id: `${this.componentId}-description`, class: "visually-hidden" }, this.labelDescription)), this.state && this.state.status === 'loading' && h("div", { class: "loading-indicator" }, "Laddar..."), this.state && this.state.status === 'error' && h("div", { class: "error-message" }, this.state.message), this.state && ['searching', 'itemSelected', 'multiSelect'].includes(this.state.status) && (h("div", { class: "combobox-container" }, this.renderSearchContainer(), this.isFocusedInternal && !isSelected && this.renderSuggestionsList())), this.state && this.state.validation !== 'idle' && this.state.status !== 'itemSelected' && (h(AfValidationMessage, { id: `${this.componentId}-validation-message`, variant: this.state.validation === 'error' ? 'error' : 'success', role: this.state.validation === 'error' ? 'alert' : undefined, class: "selector-validation-message" }, this.state.message))));
+    }
+    renderSearchContainer() {
+        const isSelected = this.state.status === 'itemSelected';
+        const displayValue = isSelected ? (this.state.selectedItem?.label || '') : this.state.inputValue;
+        const isMulti = this.state.status === 'multiSelect';
+        const hasInput = displayValue.length > 0;
+        const hasTags = isMulti && this.state.selectedItems.length > 0;
+        const hasSuggestions = this.state && (this.state.suggestions.length > 0 || shouldShowManualInput(this.state, this.config.requireSelection));
+        const activeDescendantId = (this.activeIndex >= 0 && this.isNavigatingWithKeyboard)
+            ? (this.activeIndex === this.state.suggestions.length
+                ? `${this.componentId}-list-option-manual-input`
+                : `${this.componentId}-list-option-${this.activeIndex}`)
+            : undefined;
+        const descriptionId = `${this.componentId}-description`;
+        const validationMessageId = `${this.componentId}-validation-message`;
+        const hasDescription = !!this.labelDescription;
+        const hasError = this.state && this.state.validation === 'error' && this.state.message;
+        const describedByList = [];
+        if (hasDescription && displayValue.length === 0)
+            describedByList.push(descriptionId);
+        if (hasError)
+            describedByList.push(validationMessageId);
+        const ariaDescribedBy = describedByList.length > 0 ? describedByList.join(' ') : undefined;
+        return (h("div", { class: {
+                'search-container': true,
+                'is-inactive-selected': isSelected,
+                'multi-search-container': isMulti,
+                'has-tags': hasTags,
+                'has-validation-error': this.state?.validation === 'error',
+                'has-positive-validation': !isSelected && this.state?.validation === 'success',
+            }, onClick: () => {
+                if (this.config.disabled)
+                    return;
+                if (isSelected) {
+                    this.csEditSelection.emit();
+                }
+                else if (this.state.inputValue.trim() === '') {
+                    this.csRequestHistory.emit();
+                }
+            } }, isMulti && this.state.selectedItems.length > 0 && (h("div", { class: "selected-tags-wrapper" }, this.state.selectedItems.map((item) => (h(AfTag, { key: item.id, text: item.label, breakWords: true, onRemove: () => {
+                this.shouldFocusAfterRender = true;
+                this.csRemoveItem.emit(item);
+            } }))))), h("div", { class: "input-controls-wrapper" }, h(AfIcon, { name: "search", class: {
+                'search-icon-container': true,
+                'selector-search-icon': true,
+                'is-hidden': !this.config.showSearchIcon || hasInput || hasTags,
+            } }), h("div", { class: { 'input-area': true, 'has-value': !this.config.showSearchIcon || hasInput || hasTags } }, isSelected && (h("span", { class: "selected-text-in-box" }, displayValue)), h("input", { class: {
+                'selector-input-field': true,
+                'visually-hidden-selected': isSelected
+            }, ref: (el) => this.inputRef = el, id: `${this.componentId}-input`, type: "text", placeholder: this.config.placeholder, value: displayValue, onInput: (e) => {
+                if (this.config.disabled)
+                    return;
+                this.isNavigatingWithKeyboard = false;
+                this.csInput.emit(e.target.value);
+            }, autocomplete: "off", role: "combobox", "aria-label": this.label, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": !isSelected && hasSuggestions && this.isNavigatingWithKeyboard ? 'true' : 'false', "aria-controls": !isSelected && hasSuggestions && this.isNavigatingWithKeyboard ? `${this.componentId}-listbox` : undefined, "aria-activedescendant": activeDescendantId, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": ariaDescribedBy, readOnly: isSelected, disabled: !!this.config.disabled })), h("button", { type: "button", class: { 'clear-button': true, 'is-visible': hasInput || isSelected }, tabIndex: hasInput || isSelected ? 0 : -1, disabled: !!this.config.disabled, "aria-label": "Rensa inmatad text", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                if (this.config.disabled)
+                    return;
+                this.csInput.emit('');
+                this.shouldFocusAfterRender = true;
+                this.csClear.emit();
+                this.csRequestHistory.emit();
+            } }, h(AfIcon, { name: "x" })))));
+    }
+    renderSuggestionsList() {
+        if (this.state.status === 'itemSelected')
+            return null;
+        const hasSearchInput = Boolean(this.state.inputValue && this.state.inputValue.trim().length > 0);
+        const showManualInput = shouldShowManualInput(this.state, this.config.requireSelection);
+        const hasSuggestions = Boolean(this.state.suggestions && this.state.suggestions.length > 0);
+        const noResults = hasSearchInput && !hasSuggestions && !showManualInput;
+        if (!hasSuggestions && !showManualInput && !noResults) {
+            return null;
+        }
+        const listHeader = this.state.listHeader || this.config.listHeader;
+        const showHistoryHeader = this.state.showHistoryHeader || (this.state.isHistoryView && this.config.showHistoryHeader);
+        return (h("div", { class: "suggestions-box-container" }, h("div", { class: "suggestions-box", ref: (el) => (this.listRef = el), onScroll: (e) => this.handleScroll(e) }, (listHeader || showHistoryHeader) && (h("div", { class: "list-header-container" }, h("slot", { name: "suggestions-overlay" }), listHeader && (h("div", { class: "list-header" }, h("span", null, listHeader))), showHistoryHeader && (h("div", { class: "list-header history-header" }, h("span", null, "Din privata historik"), " - ", h("button", { type: "button", class: "history-clear-link", "aria-label": "Rensa historik", disabled: !!this.config.disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                if (!this.config.disabled)
+                    this.csClearHistory.emit();
+            } }, "Rensa"))))), !listHeader && !showHistoryHeader && h("slot", { name: "suggestions-overlay" }), h("div", { id: `${this.componentId}-listbox`, role: "listbox" }, noResults && (h("div", { class: "suggestion-item no-results" }, "Inga resultat matchade din s\u00F6kning")), !noResults && this.state.suggestions.map((item, index) => (h("div", { key: item.id || index, role: "option", id: `${this.componentId}-list-option-${index}`, "aria-selected": !!item.isSelected, "aria-current": index === this.activeIndex ? 'true' : 'false', class: {
+                'suggestion-item': true,
+                'active-suggestion': index === this.activeIndex,
+                'is-selected': !!item.isSelected,
+                'is-keyboard-focus': index === this.activeIndex && this.isNavigatingWithKeyboard
+            }, onMouseDown: (e) => {
+                e.preventDefault();
+                if (this.config.disabled)
+                    return;
+                this.shouldFocusAfterRender = true;
+                if (item.isSelected) {
+                    this.csRemoveItem.emit(item);
+                }
+                else {
+                    this.csSelect.emit(item);
+                }
+                if (this.config.enableMultiple) {
+                    // Trigger history refresh if we are in multi-mode
+                    clearTimeout(this.historyRequestTimer);
+                    this.historyRequestTimer = setTimeout(() => {
+                        this.csRequestHistory.emit();
+                        this.historyRequestTimer = undefined;
+                    }, 50);
+                }
+            }, onMouseEnter: () => {
+                if (this.config.disabled)
+                    return;
+                if (!item.isSelected) {
+                    this.activeIndex = index;
+                    this.isNavigatingWithKeyboard = false;
+                }
+            } }, h(AfIcon, { name: "check", class: "selection-indicator-icon" }), item.displaySegments ? (h("span", null, item.displaySegments.map((segment, segmentIndex) => (h("span", { key: segmentIndex, class: {
+                'match-highlight': !!segment.isMatch,
+                'metadata-dimmed': !!segment.isMetadata
+            } }, segment.text))))) : (h("span", null, item.label))))), !noResults && shouldShowManualInput(this.state, this.config.requireSelection) && (h("div", { role: "option", id: `${this.componentId}-list-option-manual-input`, class: {
+                'suggestion-item': true,
+                'active-suggestion': this.activeIndex === this.state.suggestions.length,
+                'is-keyboard-focus': this.activeIndex === this.state.suggestions.length && this.isNavigatingWithKeyboard
+            }, onMouseDown: (e) => {
+                e.preventDefault();
+                if (!this.config.disabled)
+                    this.handleManualSelect();
+            }, onMouseEnter: () => {
+                if (this.config.disabled)
+                    return;
+                this.activeIndex = this.state.suggestions.length;
+                this.isNavigatingWithKeyboard = false;
+            } }, h("span", null, "Anv\u00E4nd \"", h("strong", null, this.state.inputValue.trim()), "\"")))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "afFocused": [{
+                "handleAfFocusedChange": 0
+            }],
+        "config": [{
+                "handleConfigChange": 0
+            }],
+        "state": [{
+                "handleStateChange": 0
+            }]
+    }; }
+};
+CoreSelector.style = coreSelectorCss();
+
+export { CoreSelector as core_selector };