@designsystem-se/af 39.2.3-beta.darkmode.1 → 39.3.0

package/dist/esm/digi-form-select-filter.entry.js

@@ -0,0 +1,650 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
+import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
+import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
+import { _ as _t } from './text-DsO1BTml.js';
+import './badge-notification-shape.enum-CKoZU0-H.js';
+import { l as FormSelectFilterValidation } from './typography-variation.enum-D0J6vKy3.js';
+import './badge-status-variation.enum-C0A-p3cU.js';
+import './button-size.enum-C7xgnp99.js';
+import './button-type.enum-DShzaNrQ.js';
+import './button-variation.enum-y5Nm4oWF.js';
+import './calendar-week-view-heading-level.enum-DH_-wpLB.js';
+import './bar-chart-variation.enum-DPeoHh1J.js';
+import './code-example-variation.enum-DGI7Jkg2.js';
+import './code-variation.enum-qc6KRZue.js';
+import './expandable-accordion-header-level.enum-DwNlf6Sh.js';
+import './expandable-faq-item-variation.enum-C6B2KRZo.js';
+import './expandable-faq-variation.enum-CES5gUEo.js';
+import './footer-card-variation.enum-DzSu1-K0.js';
+import './form-checkbox-variation.enum-6-MpaVf8.js';
+import './form-file-upload-variation.enum-BfyJgcLA.js';
+import './form-input-search-variation.enum-BvWKyXb_.js';
+import { a as FormInputType } from './form-input-type.enum-BSJH8Lpg.js';
+import { a as FormInputValidation, b as FormInputVariation } from './form-select-variation.enum-f5Ytsp48.js';
+import './form-radiogroup-validation.enum-DcnvI7UR.js';
+import './form-textarea-variation.enum-DogB9kfH.js';
+import './form-validation-message-variation.enum-B8hpiXmh.js';
+import './info-card-multi-type.enum-u37CGyZ9.js';
+import './info-card-variation.enum-PuRFa9pe.js';
+import './layout-container-max-width.enum-CuhrrYGE.js';
+import './layout-block-variation.enum-CWFirwyE.js';
+import './layout-columns-variation.enum-DJCufAhy.js';
+import './link-button-variation.enum-CPzcg9n3.js';
+import './list-type.enum-CsNHGpkJ.js';
+import './loader-skeleton-variation.enum-D_VIx0pC.js';
+import './loader-spinner-size.enum-ArGkfrXt.js';
+import './logo-color.enum-Chk3GCYK.js';
+import './media-figure-alignment.enum-evtVuhQt.js';
+import './navigation-sidebar-variation.enum-V-HTxO5a.js';
+import './navigation-vertical-menu-variation.enum-DPkRL9Bv.js';
+import './progress-circle-heading-level.enum-D0CENVum.js';
+import './progress-indicator-heading-level.enum-DE6sqPn9.js';
+import './progress-list-item-variation.enum-DXqRzyRP.js';
+import './progress-list-variation.enum-DoZkBEe8.js';
+import './progressbar-variation.enum-m9xS70Ez.js';
+import './quote-image-inner-position.enum-CmH9mJ43.js';
+import './table-variation.enum-DBcU_EnL.js';
+import './tag-media-icon.enum-BvcVTm_t.js';
+import './tag-size.enum-bQJ38En_.js';
+import './tools-feedback-banner-type.enum-DrVSK7Ws.js';
+import './tools-feedback-rating-variation.enum-CAmn5qzb.js';
+import './tools-theme-provider.brand.enum-DpDyNuVC.js';
+import './typography-heading-jumbo-variation.enum-DNjGvZvz.js';
+import './typography-meta-variation.enum-CHxBAbI8.js';
+import './typography-time-variation.enum-rhVqmQwC.js';
+import './util-breakpoint-observer-breakpoints.enum-DPq588Q4.js';
+import './detectClosest.util-DwBvm-Nc.js';
+
+const formSelectFilterCss = () => `.sc-digi-form-select-filter-h{--digi--form-select-filter--footer--background:var(--digi--color--background--secondary);--digi--form-select-filter--scroll--max-height:10.625rem;--digi--form-select-filter--scroll--padding:var(--digi--padding--small);--digi--form-select-filter--reset-button--margin-right:var(--digi--padding--small);--digi--form-select-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--divider--primary);--digi--form-select-filter--list--margin:0;--digi--form-select-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-select-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-select-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-select-filter--dropdown--border-radius:var(--digi--border-radius--input);--digi--form-select-filter--dropdown--background:var(--digi--color--background--interactive--default--input-elements);--digi--form-select-filter--dropdown--min-width:18.75rem;--digi--form-select-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-select-filter--dropdown--z-index:999;--digi--form-select-filter--dropdown--header--background:var(--digi--color--background--secondary-accent);--digi--form-select-filter--dropdown--item--cursor:pointer;--digi--form-select-filter--dropdown--item--height:auto;--digi--form-select-filter--dropdown--item--min-height:1.5rem;--digi--form-select-filter--dropdown--item--color:var(--digi--color--text--primary);--digi--form-select-filter--dropdown--item--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select-filter--dropdown--item--font-family:var(--digi--global--typography--font-family--default);--digi--form-select-filter--dropdown--item--font-weight--default:var(--digi--typography--link--font-weight--desktop);--digi--form-select-filter--dropdown--item--font-weight--selected:var(--digi--typography--link-bold--font-weight--desktop);--digi--form-select-filter--dropdown--item--font-weight--hover:var(--digi--typography--link-bold--font-weight--desktop);--digi--form-select-filter--dropdown--item--letter-spacing:0px;--digi--form-select-filter--dropdown--item--line-height:1.5;--digi--form-select-filter--dropdown--item--margin-bottom:0px;--digi--form-select-filter--dropdown--item--border-width:var(--digi--border-width--primary);--digi--form-select-filter--dropdown--item--border-type:var(--digi--border-style--primary);--digi--form-select-filter--dropdown--item--border-color:var(--digi--color--divider--primary);--digi--form-select-filter--dropdown--item--padding-y:var(--digi--margin--small);--digi--form-select-filter--dropdown--item--padding-x:var(--digi--margin--largest);--digi--form-select-filter--dropdown--item--multiple--padding-y:var(--digi--margin--small);--digi--form-select-filter--dropdown--item--multiple--padding-x:var(--digi--padding--largest-2);--digi--form-select-filter--dropdown--item--background-color--default:var(--digi--color--background--interactive--default--input-elements);--digi--form-select-filter--dropdown--item--background-color--focus:var(--digi--color--background--interactive--hover--quarternary);--digi--form-select-filter--dropdown--item--background-color--hover:var(--digi--color--background--interactive--hover--quarternary);--digi--form-select-filter--dropdown--item--background-color--active:var(--digi--color--background--interactive--selected--tertiary);--digi--form-select-filter--dropdown--item--background-color--selected:var(--digi--color--background--interactive--selected--tertiary);--digi--form-select-filter--dropdown--item--checkbox--background-color:var(--digi--color--background--interactive--default--input-elements);--digi--form-select-filter--dropdown--item--checkbox--background-color--selected:var(--digi--color--marking--indication--primary);--digi--form-select-filter--dropdown--item--checkbox--border-color:var(--digi--color--border--interactive--default--on-input);--digi--form-select-filter--dropdown--item--checkbox--border-width:var(--digi--border-width--primary);--digi--form-select-filter--dropdown--item--checkbox--border-style:var(--digi--border-style--primary);--digi--form-select-filter--dropdown--item--checkbox--border-radius:var(--digi--border-radius--tertiary);--digi--form-select-filter--dropdown--item--checkbox--width:1.25rem;--digi--form-select-filter--dropdown--item--checkbox--height:1.25rem;--digi--form-select-filter--toggle-button-indicator--color--default:var(--digi--color--background--interactive--default--input-elements);--digi--form-select-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-select-filter--toggle-button-indicator--width:1rem;--digi--form-select-filter--toggle-button-indicator--height:1rem;--digi--form-select-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-select-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-select-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-select-filter--toggle-button-indicator--color:var(--digi--color--marking--indication--primary);--digi--form-select-filter--toggle-icon--width:0.875rem;--digi--form-select-filter--toggle-icon--height:0.875rem;--digi--form-select-filter--search-input--border-radius:var(--digi--border-radius--input);--digi--form-select-filter--search-input--border-width:var(--digi--border-width--input-regular);--digi--form-select-filter--search-input--border-style:var(--digi--border-style--primary);--digi--form-select-filter--search-input--border-color:var(--digi--form-select-filter--toggle-button--border-width--neutral);--digi--form-select-filter--search-input--height:var(--digi--input-height--medium);--digi--form-select-filter--search-input--width:100%;--digi--form-select-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-select-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-select-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop);--digi--form-select-filter--toggle-button--border-width--neutral:var(--digi--border-width--input-regular);--digi--form-select-filter--toggle-button--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-select-filter--toggle-button--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-select-filter--toggle-button--border-width--success:var(--digi--border-width--input-validation);--digi--form-select-filter--toggle-button--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-select-filter--toggle-button--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-select-filter--toggle-button--border-width--warning:var(--digi--border-width--input-validation);--digi--form-select-filter--toggle-button--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-select-filter--toggle-button--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-select-filter--toggle-button--border-width--error:var(--digi--border-width--input-validation);--digi--form-select-filter--toggle-button--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-select-filter--toggle-button--background--error:var(--digi--color--background--interactive--validation--error);box-sizing:content-box}.sc-digi-form-select-filter-h .digi--a11y--sr-only.sc-digi-form-select-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-select-filter-h .digi-form-select-filter.sc-digi-form-select-filter{display:flex;flex-direction:column;gap:0.4em;position:relative;--INDICATOR--BACKGROUND:var(--digi--form-select-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-select-filter--scroll--max-height)}.sc-digi-form-select-filter-h .digi-form-select-filter--neutral.sc-digi-form-select-filter{--BORDER-WIDTH:var(     --digi--form-select-filter--toggle-button--border-width--neutral   );--BORDER-COLOR:var(     --digi--form-select-filter--toggle-button--border-color--neutral   );--BACKGROUND:var(     --digi--form-select-filter--toggle-button--background--neutral   )}.sc-digi-form-select-filter-h .digi-form-select-filter--success.sc-digi-form-select-filter{--BORDER-WIDTH:var(     --digi--form-select-filter--toggle-button--border-width--success   );--BORDER-COLOR:var(     --digi--form-select-filter--toggle-button--border-color--success   );--BACKGROUND:var(     --digi--form-select-filter--toggle-button--background--success   )}.sc-digi-form-select-filter-h .digi-form-select-filter--warning.sc-digi-form-select-filter{--BORDER-WIDTH:var(     --digi--form-select-filter--toggle-button--border-width--warning   );--BORDER-COLOR:var(     --digi--form-select-filter--toggle-button--border-color--warning   );--BACKGROUND:var(     --digi--form-select-filter--toggle-button--background--warning   )}.sc-digi-form-select-filter-h .digi-form-select-filter--error.sc-digi-form-select-filter{--BORDER-WIDTH:var(     --digi--form-select-filter--toggle-button--border-width--error   );--BORDER-COLOR:var(     --digi--form-select-filter--toggle-button--border-color--error   );--BACKGROUND:var(     --digi--form-select-filter--toggle-button--background--error   )}.sc-digi-form-select-filter-h .digi-form-select-filter--open.sc-digi-form-select-filter .digi-form-select-filter__toggle-icon.sc-digi-form-select-filter{transform:rotate(-180deg)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button.sc-digi-form-select-filter{background:var(--BACKGROUND);border:var(--BORDER-WIDTH) solid var(--BORDER-COLOR);border-radius:var(--digi--border-radius--input);color:var(--digi--color--text--primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:var(--digi--typography--body--font-size--desktop);width:100%;padding:0 var(--digi--gutter--medium);min-height:var(--digi--input-height--medium);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button.sc-digi-form-select-filter:focus-visible,.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button.sc-digi-form-select-filter:focus{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-icon.sc-digi-form-select-filter{transition:var(--digi--form-select-filter--toggle-icon--transition)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-icon.sc-digi-form-select-filter-s>[slot^=icon],.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-icon .sc-digi-form-select-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-select-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-select-filter--toggle-icon--height)}.sc-digi-form-select-filter-h .digi-form-select-filter__legend.sc-digi-form-select-filter{font-weight:var(--digi--form-select-filter--legend--font-weight);font-family:var(--digi--form-select-filter--legend--font-family);font-size:var(--digi--form-select-filter--legend--font-size);border:0;padding:0;margin:0;border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-select-filter-h .digi-form-select-filter__scroll.sc-digi-form-select-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto}.sc-digi-form-select-filter-h .digi-form-select-filter__header.sc-digi-form-select-filter{background-color:var(--digi--form-select-filter--dropdown--header--background);padding:12px 12px 22px}.sc-digi-form-select-filter-h .digi-form-select-filter__header.sc-digi-form-select-filter input.sc-digi-form-select-filter{border-radius:var(--digi--form-select-filter--search-input--border-radius);border-width:var(--digi--form-select-filter--search-input--border-width);border-style:var(--digi--form-select-filter--search-input--border-style);border-color:var(--digi--form-select-filter--search-input--border-color);height:var(--digi--form-select-filter--search-input--height);width:var(--digi--form-select-filter--search-input--width)}.sc-digi-form-select-filter-h .digi-form-select-filter__header.sc-digi-form-select-filter legend.sc-digi-form-select-filter{width:100%;border-bottom:var(--digi--form-select-filter--legend__border-bottom)}.sc-digi-form-select-filter-h .digi-form-select-filter__footer.sc-digi-form-select-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-select-filter--footer--background);padding:var(--digi--form-select-filter--scroll--padding)}.sc-digi-form-select-filter-h .digi-form-select-filter__reset-button.sc-digi-form-select-filter{display:inline-block;margin-right:var(--digi--form-select-filter--reset-button--margin-right)}.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown.sc-digi-form-select-filter{box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.7);min-width:var(--digi--form-select-filter--dropdown--min-width);width:100%;position:absolute;z-index:var(--digi--form-select-filter--dropdown--z-index);background:var(--digi--form-select-filter--dropdown--background);border-radius:var(--digi--form-select-filter--dropdown--border-radius);overflow:hidden;margin-top:var(--digi--form-select-filter--dropdown--margin-top)}.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown.sc-digi-form-select-filter fieldset.sc-digi-form-select-filter{border:none;padding:0;margin:0}@media (min-width: 48rem){.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown--right.sc-digi-form-select-filter{right:0}}.sc-digi-form-select-filter-h .digi-form-select-filter__dropdown--hidden.sc-digi-form-select-filter{display:none}.sc-digi-form-select-filter-h .digi-form-select-filter__label.sc-digi-form-select-filter{display:block}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-wrapper--activated.sc-digi-form-select-filter{display:flex;align-items:center}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-indicator.sc-digi-form-select-filter{display:none;--digi--icon--color:var(--digi--form-select-filter--toggle-button-indicator--color)}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-indicator--active.sc-digi-form-select-filter{display:flex;margin-right:var(--digi--form-select-filter--toggle-button-indicator--margin-right);width:var(--digi--form-select-filter--toggle-button-indicator--width);height:var(--digi--form-select-filter--toggle-button-indicator--height)}.sc-digi-form-select-filter-h .digi-form-select-filter__search-status.sc-digi-form-select-filter{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary)}.sc-digi-form-select-filter-h .digi-form-select-filter__list.sc-digi-form-select-filter{margin:var(--digi--form-select-filter--list--margin);padding:0;max-width:100%}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter{background-color:var(--digi--form-select-filter--dropdown--item--background-color--default);border-width:0;box-sizing:border-box;border-bottom-width:var(--digi--form-select-filter--dropdown--item--border-width);border-style:var(--digi--form-select-filter--dropdown--item--border-type);border-color:var(--digi--form-select-filter--dropdown--item--border-color);cursor:var(--digi--form-select-filter--dropdown--item--cursor);color:var(--digi--form-select-filter--dropdown--item--color);display:block;font-size:var(--digi--form-select-filter--dropdown--item--font-size);font-family:var(--digi--form-select-filter--dropdown--item--font-family);font-weight:var(--digi--form-select-filter--dropdown--item--font-weight--default);padding:var(--digi--form-select-filter--dropdown--item--padding-y) var(--digi--form-select-filter--dropdown--item--padding-x);position:relative;height:var(--digi--form-select-filter--dropdown--item--height);min-height:var(--digi--form-select-filter--dropdown--item--min-height);margin-bottom:var(--digi--form-select-filter--dropdown--item--margin-bottom);letter-spacing:var(--digi--form-select-filter--dropdown--item--letter-spacing);line-height:var(--digi--form-select-filter--dropdown--item--line-height)}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter:focus-visible{background-color:var(--digi--form-select-filter--dropdown--item--background-color--focus);outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter:hover{background-color:var(--digi--form-select-filter--dropdown--item--background-color--hover);font-weight:var(--digi--form-select-filter--dropdown--item--font-weight--hover)}.sc-digi-form-select-filter-h .digi-form-select-filter__item.sc-digi-form-select-filter:active{background-color:var(--digi--form-select-filter--dropdown--item--background-color--active)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[aria-checked=true].sc-digi-form-select-filter{font-weight:var(--digi--form-select-filter--dropdown--item--font-weight--selected);background-color:var(--digi--form-select-filter--dropdown--item--background-color--selected)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[dir=rtl].sc-digi-form-select-filter{text-align:right}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=radio].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{position:absolute;width:13px;height:25px;left:7px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=radio][dir=rtl].sc-digi-form-select-filter::before{right:3px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=radio][dir=rtl].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{left:auto;right:7px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox].sc-digi-form-select-filter{padding:var(--digi--form-select-filter--dropdown--item--multiple--padding-y) var(--digi--form-select-filter--dropdown--item--multiple--padding-x)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox][aria-checked=true].sc-digi-form-select-filter:before{background:var(--digi--form-select-filter--dropdown--item--checkbox--background-color--selected);border-color:var(--digi--form-select-filter--dropdown--item--checkbox--background-color--selected)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox].sc-digi-form-select-filter::before{content:"";position:absolute;background-color:var(--digi--form-select-filter--dropdown--item--checkbox--background-color);border-color:var(--digi--form-select-filter--dropdown--item--checkbox--border-color);border-width:var(--digi--form-select-filter--dropdown--item--checkbox--border-width);border-style:var(--digi--form-select-filter--dropdown--item--checkbox--border-style);height:var(--digi--form-select-filter--dropdown--item--checkbox--width);width:var(--digi--form-select-filter--dropdown--item--checkbox--height);border-radius:var(--digi--form-select-filter--dropdown--item--checkbox--border-radius);left:12px;transform:translateY(1px)}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{position:absolute;width:13px;left:16px;--digi--icon--color:white}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox][dir=rtl].sc-digi-form-select-filter::before{right:12px}.sc-digi-form-select-filter-h .digi-form-select-filter__item[role=checkbox][dir=rtl].sc-digi-form-select-filter .digi-form-select-filter__item__icon.sc-digi-form-select-filter{left:auto;right:16px}.sc-digi-form-select-filter-h .digi-form-select-filter__toggle-button-text.sc-digi-form-select-filter{margin-right:var(--digi--form-select-filter--toggle-button--text--margin-right)}.sc-digi-form-select-filter-h .hidden.sc-digi-form-select-filter{display:none}`;
+
+const FormSelectFilter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
+        this.afOnSubmitFilters = createEvent(this, "afOnSubmitFilters", 7);
+        this.afOnFilterClosed = createEvent(this, "afOnFilterClosed", 7);
+        this.afOnResetFilters = createEvent(this, "afOnResetFilters", 7);
+        this.afOnSelect = createEvent(this, "afOnSelect", 7);
+        this.afOnQueryChanged = createEvent(this, "afOnQueryChanged", 7);
+        this.isOpen = false;
+        this.focusListItemIndex = 0;
+        this.focusInList = false;
+        this._filteredResult = [];
+        this._selectedItems = [];
+        this._searchQuery = '';
+        /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
+        this._valueIsMaster = false;
+        /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
+        this._updatingValueInternally = false;
+        /**
+         * Sätter väljarens validering
+         * @en Set select validation
+         */
+        this.afValidation = FormSelectFilterValidation.NEUTRAL;
+        /**
+         * Normalt betonas ett obligatoriskt fält visuellt och semantiskt.
+         * Detta vänder på det och betonar fältet om det inte krävs.
+         * Ställ in detta till sant om ditt formulär innehåller fler obligatoriska fält än inte.
+         * @en Normally a required field is visually and semantically emphasized.
+         * This flips that and emphasizes the field if it is not required.
+         * Set this to true if your form contains more required fields than not.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sorterar listan i alfabetisk ordning.
+         * @en Sort the list in alphabetical order.
+         */
+        this.sortAlphabetically = true;
+        /**
+         * @ignore
+         * Propertyn `value` finns inte dokumenterad på komponentens sida på dokumentationswebben, utan
+         * är endast till för att användas tillsammans med Angulars Control Value Accessors (CVA).
+         * Används CVA för att hantera komponentens värden så ska inte afListItems användas för att
+         * påverka vilka val som är gjorda eller ej.
+         * Exempel på båda sätten att hantera datat finns i Angular Playground.
+         */
+        this.value = [];
+        /**
+         * Sätts till true om det ska gå att välja flera val från listan.
+         * @en Set to true if you should be able to choose multiple items from the list.
+         */
+        this.afMultipleItems = false;
+        /**
+         * Prefixet för alla komponentens olika interna 'id'-attribut på dropdowns, filterlistor etc. Ex. 'my-cool-id' genererar 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' och så vidare. Ges inget värde så genereras ett slumpmässigt.
+         * @en Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' and so on. Defaults to random string.
+         */
+        this.afId = randomIdGenerator('digi-form-select-filter');
+        /**
+         * Texten i rensaknappen
+         * @en Set the reset button text
+         */
+        this.afResetButtonText = _t.clear;
+        /**
+         * Döljer rensaknappen när värdet sätts till true
+         * @en Hides the reset button when set to true
+         */
+        this.afHideResetButton = false;
+        /**
+         * Text som visas när sökningen inte ger några resultat.
+         * @en Text that is shown the the search gives no result.
+         */
+        this.afEmptySearchMessage = 'Inga sökträffar för';
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
+        this.afErrorMessageIsAlert = true;
+    }
+    onValueChanged(newValue) {
+        let parsedValue;
+        if (typeof newValue === 'string') {
+            parsedValue = newValue ? JSON.parse(newValue) : [];
+        }
+        else {
+            parsedValue = newValue || [];
+        }
+        if (!this._updatingValueInternally) {
+            this._valueIsMaster = true;
+        }
+        this.value = parsedValue;
+        this.syncValueAndSelectedListItems('valueChange');
+    }
+    handleListItems() {
+        if (this.afListItems) {
+            try {
+                if (this.afListItems.constructor === Array) {
+                    this._afListItems = this.afListItems;
+                }
+                else if (typeof this.afListItems === 'string') {
+                    this._afListItems = JSON.parse(this.afListItems);
+                }
+                else {
+                    throw `Invalid type in "af-list-items" attribute`;
+                }
+                this.giveItemsValueIfNoneExist();
+                this.sortListAlphabetically();
+                this.syncValueAndSelectedListItems('afListItemsChange');
+                this.filterResults();
+            }
+            catch (e) {
+                logger.warn(`Invalid JSON in "af-list-items" attribute`, this.hostElement, e);
+                return;
+            }
+        }
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    /**
+     * Funktion för att rensa valda värden från komponenten
+     * @en Function for clearing selected values from component
+     */
+    async afMReset() {
+        this.resetSelectItems();
+    }
+    /**
+     * Funktion för att stänga dropdownen
+     * @en Function for closing the dropdown
+     */
+    async afMCloseDropdown() {
+        this.setClosed();
+    }
+    clickHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-identifier`;
+        if (detectClickOutside(target, selector) && this.isOpen) {
+            this.emitFilterClosedEvent();
+        }
+    }
+    focusoutHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-identifier`;
+        const focusOutsideFilter = detectFocusOutside(target, selector);
+        if (focusOutsideFilter && this.isOpen) {
+            this.emitFilterClosedEvent();
+        }
+        else {
+            this.focusInList = !detectFocusOutside(target, `#${this.afId}-select-filter-list`);
+        }
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen.
+     * @en Listens for when focus is set on the custom element and propagates it down to the toggle butto.
+     */
+    focusOnElement() {
+        this._toggleButton.focus();
+    }
+    componentWillLoad() {
+        this.bootstrapInitialValue();
+        this.handleListItems();
+        // Angular attaches the host first and binds `[afListItems]` / CVA `value` on
+        // the next frame (Stencil 4.36+). @Watch skips that first assignment, so if
+        // the list is not here yet, wait one frame. React/vanilla that already set
+        // the prop skip the delay.
+        if (!this.afListItems) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.bootstrapInitialValue();
+                    this.handleListItems();
+                    resolve();
+                });
+            });
+        }
+    }
+    bootstrapInitialValue() {
+        if (typeof this.value === 'string') {
+            const parsed = this.value ? JSON.parse(this.value) : [];
+            this._updatingValueInternally = true;
+            this.value = parsed;
+            this._updatingValueInternally = false;
+        }
+        if (Array.isArray(this.value) && this.value.length > 0) {
+            this._valueIsMaster = true;
+        }
+    }
+    /**
+     * Keep `value` and `afListItems[].selected` in sync.
+     * - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
+     * - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
+     * Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
+     * does not get feedback loops on prop sync.
+     */
+    syncValueAndSelectedListItems(whereDidTheChangeComeFrom) {
+        if (!this._afListItems) {
+            return;
+        }
+        if (whereDidTheChangeComeFrom === 'afListItemsChange') {
+            if (this._valueIsMaster) {
+                this.applyValueToListItems(this.value);
+            }
+            else {
+                this._selectedItems = this._afListItems.filter((item) => item.selected);
+                this.setValueInternally([...this._selectedItems]);
+            }
+            return;
+        }
+        this.applyValueToListItems(this.value);
+    }
+    applyValueToListItems(value) {
+        const selectedValues = new Set((value !== null && value !== void 0 ? value : []).map((item) => item.value));
+        this._afListItems.forEach((item) => {
+            item.selected = selectedValues.has(item.value);
+        });
+        this._selectedItems = this._afListItems.filter((item) => selectedValues.has(item.value));
+    }
+    setValueInternally(nextValue) {
+        this._updatingValueInternally = true;
+        this.value = nextValue;
+        this._updatingValueInternally = false;
+    }
+    setClosed(focusToggleButton = false) {
+        this.isOpen = false;
+        if (focusToggleButton) {
+            document.getElementById(`${this.afId}`).focus();
+        }
+        this.setScroll(0);
+        this._searchQuery = '';
+        this.afOnQueryChanged.emit('');
+        this.afOnSubmitFilters.emit(this._selectedItems);
+        this.filterResults();
+    }
+    setScroll(scrollY) {
+        document.querySelector(`#${this.afId}-dropdown-menu .digi-form-select-filter__scroll`).scrollTop = scrollY;
+    }
+    setOpen() {
+        this.isOpen = true;
+        this.focusListItemIndex = 0;
+        setTimeout(() => {
+            this.setFocusSearch();
+        }, 50);
+    }
+    giveItemsValueIfNoneExist() {
+        this._afListItems
+            .filter((item) => {
+            return item.value === undefined;
+        })
+            .forEach((item) => {
+            item.value = item.label;
+        });
+    }
+    sortListAlphabetically() {
+        if (!this.sortAlphabetically) {
+            return;
+        }
+        this._afListItems.sort((a, b) => {
+            if (a.label < b.label) {
+                return -1;
+            }
+            if (a.label > b.label) {
+                return 1;
+            }
+            return 0;
+        });
+    }
+    toggleDropdown() {
+        return this.isOpen ? this.setClosed() : this.setOpen();
+    }
+    inputItem(identifier, index) {
+        const item = this.hostElement
+            .querySelectorAll(`#${identifier} .digi-form-select-filter__item`)
+            .item(index);
+        return item;
+    }
+    emitFilterClosedEvent() {
+        this.setClosed(true);
+        this.afOnFilterClosed.emit();
+    }
+    setFocusItem() {
+        const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
+        if (element) {
+            element.focus();
+        }
+    }
+    setFocusSearch() {
+        const element = this.hostElement.querySelector('input');
+        if (element) {
+            element.focus();
+        }
+    }
+    incrementFocusItem() {
+        const listLength = this.showNeutralValue
+            ? this._filteredResult.length
+            : this._filteredResult.length - 1;
+        if (this.focusListItemIndex < listLength) {
+            this.focusListItemIndex = this.focusListItemIndex + 1;
+            this.setFocusItem();
+            return;
+        }
+        else {
+            if (!this.afMultipleItems) {
+                this.focusListItemIndex = 0;
+                this.setFocusItem();
+                return;
+            }
+        }
+        this.tabHandler();
+    }
+    decrementFocusItem() {
+        if (this.focusListItemIndex === 0) {
+            this.setFocusSearch();
+            return;
+        }
+        if (this.focusListItemIndex > 0) {
+            this.focusListItemIndex = this.focusListItemIndex - 1;
+        }
+        this.setFocusItem();
+    }
+    downHandler(e) {
+        e.detail.preventDefault();
+        if (e.detail.code === 'ArrowDown' || e.detail.code === 'ArrowRight') {
+            this.incrementFocusItem();
+        }
+    }
+    upHandler(e) {
+        e.detail.preventDefault();
+        if (e.detail.code === 'ArrowUp' || e.detail.code === 'ArrowLeft') {
+            this.decrementFocusItem();
+        }
+    }
+    homeHandler(e) {
+        e.detail.preventDefault();
+        this.focusListItemIndex = 0;
+        this.setFocusItem();
+    }
+    endHandler(e) {
+        e.detail.preventDefault();
+        this.focusListItemIndex = this.showNeutralValue
+            ? this._filteredResult.length
+            : this._filteredResult.length - 1;
+        this.setFocusItem();
+    }
+    enterHandler(e) {
+        e.detail.preventDefault();
+        e.detail.target.click();
+    }
+    spaceHandler(e) {
+        e.detail.preventDefault();
+        e.detail.target.click();
+    }
+    escHandler() {
+        if (this.isOpen) {
+            this.setClosed(true);
+        }
+    }
+    tabHandler() {
+        if (this.isOpen && this.focusInList) {
+            if (this.afMultipleItems && this._submitButton) {
+                setTimeout(() => {
+                    var _a;
+                    if (this._submitButton) {
+                        (_a = this._submitButton.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }, 10);
+            }
+            else {
+                this.setClosed(true);
+            }
+        }
+    }
+    shiftHandler() {
+        if (this.isOpen && this.focusInList) {
+            if (this.afMultipleItems && this._toggleButton) {
+                this._toggleButton.querySelector('button').focus();
+            }
+            else {
+                this.setFocusSearch();
+            }
+        }
+    }
+    filterResults() {
+        if (this._searchQuery && this._searchQuery.length > 0) {
+            this._filteredResult = this._afListItems.filter((item) => {
+                return item.label
+                    .toLowerCase()
+                    .includes(this._searchQuery.toLowerCase());
+            });
+        }
+        else {
+            this._filteredResult = this._afListItems;
+        }
+    }
+    inputSearchKeyboardHandler(e) {
+        if (e.code === 'ArrowDown') {
+            e.preventDefault();
+            this.setFocusItem();
+        }
+        if (e.code === 'Enter' && this._searchQuery !== '') {
+            e.preventDefault();
+            this.setFocusItem();
+        }
+    }
+    inputSearchInputHandler(e) {
+        this._searchQuery = e.target.value;
+        this.afOnQueryChanged.emit(this._searchQuery);
+        this.filterResults();
+    }
+    resetSelectItems(close = false) {
+        this._selectedItems = [];
+        this.setValueInternally([]);
+        this.afOnSelect.emit([]);
+        this._searchQuery = '';
+        this.filterResults();
+        if (close) {
+            this.emitFilterClosedEvent();
+        }
+        this.afOnResetFilters.emit();
+    }
+    selectItemHandler(item) {
+        if (this.afMultipleItems) {
+            item.selected = !item.selected;
+            if (this._selectedItems.filter((x) => {
+                return x.value === item.value;
+            }).length > 0) {
+                //ITEM VALUE ALREADY EXISTS IN LIST, DELETE FROM LIST
+                this._selectedItems.splice(this._selectedItems.findIndex((e) => e.value === item.value), 1);
+            }
+            else {
+                this._selectedItems = [...this._selectedItems, item];
+            }
+        }
+        else {
+            this._selectedItems.forEach((item) => {
+                item.selected = false;
+            });
+            item.selected = true;
+            this._selectedItems = [item];
+            this.emitFilterClosedEvent();
+        }
+        this.setValueInternally([...this._selectedItems]);
+        this.afOnSelect.emit(this._selectedItems);
+        this.filterResults();
+    }
+    isSelected(textValue) {
+        if (textValue && this._selectedItems && this._selectedItems.length > 0) {
+            return (this._selectedItems.filter((item) => {
+                return item.value === textValue;
+            }).length > 0);
+        }
+        return false;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-select-filter--open': this.isOpen,
+            'digi-form-select-filter--neutral': this.afValidation === FormSelectFilterValidation.NEUTRAL,
+            'digi-form-select-filter--success': this.afValidation === FormSelectFilterValidation.SUCCESS,
+            'digi-form-select-filter--warning': this.afValidation === FormSelectFilterValidation.WARNING,
+            'digi-form-select-filter--error': this.afValidation === FormSelectFilterValidation.ERROR
+        };
+    }
+    get cssModifiersToggleButtonIndicator() {
+        return {
+            'digi-form-select-filter__toggle-button-indicator--active': this._selectedItems.length > 0
+        };
+    }
+    get cssModifiersToggleButtonWrapper() {
+        return {
+            'digi-form-select-filter__toggle-button-wrapper--activated': this._selectedItems.length > 0
+        };
+    }
+    buttonText(isAriaLabel) {
+        const ariaLabelText = (text = '') => {
+            return isAriaLabel ? text : '';
+        };
+        if (this._selectedItems && this._selectedItems.length === 1) {
+            return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
+                this._selectedItems[0].label);
+        }
+        else if (this._selectedItems &&
+            this._selectedItems.length > 0 &&
+            this.afMultipleItems) {
+            if (this.afFilterButtonTextMultipleValues) {
+                return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
+                    this.afFilterButtonTextMultipleValues.replace('{count}', this._selectedItems.length.toString()));
+            }
+            else {
+                return (ariaLabelText(this.afFilterButtonTextLabel + ': ') +
+                    `${this._selectedItems.length} valda`);
+            }
+        }
+        else {
+            return (ariaLabelText(this.afFilterButtonTextLabel
+                ? this.afFilterButtonTextLabel + ': '
+                : '') + this.afFilterButtonText);
+        }
+    }
+    get renderButtonLabel() {
+        return this.buttonText(false);
+    }
+    get ariaLabel() {
+        return this.buttonText(true);
+    }
+    get showNeutralValue() {
+        return (!this.afMultipleItems &&
+            this.afFilterButtonText &&
+            this._searchQuery.length === 0);
+    }
+    showValidation() {
+        return !this.afDisableValidation &&
+            this.afValidation !== FormSelectFilterValidation.NEUTRAL &&
+            this.afValidationText
+            ? true
+            : false;
+    }
+    renderEmptyStateBox() {
+        let statusMessage = '';
+        if (this._filteredResult && this._filteredResult.length > 0) {
+            statusMessage = `${this._filteredResult.length} sökträff${this._filteredResult.length > 1 ? 'ar' : ''}`;
+        }
+        else if (this._filteredResult.length === 0) {
+            statusMessage = `${this.afEmptySearchMessage} ${this._searchQuery}`;
+        }
+        return (h(Fragment, null, h("div", { role: "status", id: `${this.afId}-searchstatus`, class: {
+                'digi-form-select-filter__search-status': true,
+                'digi--a11y--sr-only': this._filteredResult && this._filteredResult.length > 0
+            } }, h("span", null, " ", statusMessage, " "), h("div", { class: {
+                hidden: this._filteredResult && this._filteredResult.length > 0
+            } }, h("slot", { name: "empty-search-result" })))));
+    }
+    render() {
+        const descriptionId = this.afDescription
+            ? this.afId + '--label--description'
+            : '';
+        return (h(Host, { key: '36f885eb0d406344333d0d3fdc878580b9772384', tabindex: -1 }, h("div", { key: 'bbe35192214230cd9ddd8c2790671867c53cd7c4', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), id: `${this.afId}-identifier` }, h("digi-form-label", { key: '51ba3fafec5ec7a4c9c798a8d56de416800fc8c3', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), this.afDescription && (h("span", { key: '81f3177a5752cf0e9970c234100a348a416d9f8d', id: descriptionId, class: "digi--a11y--sr-only" }, this.afDescription)), h("digi-util-keydown-handler", { key: '27c70393aeae25a2cdc3f77f085f73d227f688ea', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'fc9bc7fec170402401068b64cb1387eab3ef408a', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${descriptionId} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '7456eb294d9cf7e013425af1fed83fb721da2ddf', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'de7ffcae637f59666b5b735689da8539c105e9c8', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '9fe988f42321c510776a4a03850b2c67e5bf4df2', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '1064178874edc53546e06a8a134890e6db1574fa', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'c559d98f934e23554f1976de6b8a855e95cacff1', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+                'digi-form-select-filter__dropdown': true,
+                'digi-form-select-filter__dropdown--right': this.afAlignRight,
+                'digi-form-select-filter__dropdown--hidden': !this.isOpen
+            } }, h("fieldset", { key: 'af54f742fb7c0bb0c641acf05d8dd17883b753c9' }, h("div", { key: 'ac9e8f4e1185ced872ec62268c3cb1f64b3d75ed', class: "digi-form-select-filter__header" }, h("legend", { key: 'd625e52f8c849da2b4cdc7575e1851e4412a21f3', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '22897c421223ba66e439e6c38085ed6239685b47', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+                this.focusListItemIndex = 0;
+            }, onAfOnKeyup: (e) => {
+                this.inputSearchKeyboardHandler(e.detail);
+            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '5fb9ef3d14be10bbdac05219efa1ef6c7d068953', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '63a57b0e380b33c6c7078338b22ec033ac6aca92', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '7039d415e7e8fa20c58b802668b79f70a3f39f24', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+                ? 'false'
+                : this.afValidation ===
+                    FormSelectFilterValidation.ERROR
+                    ? 'true'
+                    : 'false', "aria-errormessage": `${this.afId}--validation-message`, "aria-required": this.afMultipleItems
+                ? false
+                : this.afRequired
+                    ? 'true'
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '3493dac442bc02bfcabbd11db246e89ec97f9f0c', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                ? 'false'
+                : this.afRequired
+                    ? 'true'
+                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '62d5f8f20828b47310cab7e3c4938c445f5e6842', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+            this._filteredResult.map((item, index) => {
+                return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
+                        ? 'false'
+                        : this.afRequired
+                            ? 'true'
+                            : 'false', "aria-invalid": this.afMultipleItems
+                        ? this.afValidation ===
+                            FormSelectFilterValidation.ERROR
+                            ? 'true'
+                            : 'false'
+                        : 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue
+                        ? -1
+                        : index === 0
+                            ? 0
+                            : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
+            }))))), this.afMultipleItems && (h("div", { key: 'fc12aee0445ed158c701bb49f977cad3acdf0971', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'd36b63d60c6ce9bd3f482dea7c77065b87d27f3d', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '24d63a13101c1fe08eca5f1126cabb77971bb66f', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '9e58cc30297d701e75c93445626fbb647d17989e', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+                this.setClosed(true);
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '367a06a00ce4418ccfc7b81040ccd01191394469', class: "digi-form-select__footer" }, h("div", { key: 'aad246e7c5251edf1348ce3359e326ebca149fb0', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '0fb9a3f887670fcf9157bcf7395cccf97555b9c5', "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afListItems": [{
+                "handleListItems": 0
+            }]
+    }; }
+};
+FormSelectFilter.style = formSelectFilterCss();
+
+export { FormSelectFilter as digi_form_select_filter };