@designsystem-se/af 39.0.1-beta.dark-mode → 39.1.0-beta.2

package/dist/cjs/digi-button_11.cjs.entry.js

@@ -0,0 +1,1274 @@
+'use strict';
+
+var index = require('./index-tbq85ezH.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var codeExampleVariation_enum = require('./code-example-variation.enum-BCENTUV2.js');
+var formInputType_enum = require('./form-input-type.enum-B2CsNSBg.js');
+var buttonVariation_enum = require('./button-variation.enum-DkUalo9f.js');
+var typographyVariation_enum = require('./typography-variation.enum-4snUBTF7.js');
+var logger_util = require('./logger.util-DUhrcCTY.js');
+var text = require('./text-Cu3CaHGj.js');
+var detectClickOutside_util = require('./detectClickOutside.util-DKR8Sdiw.js');
+var detectFocusOutside_util = require('./detectFocusOutside.util-BNHrXMJ2.js');
+require('./badge-notification-shape.enum-CEyEo2G5.js');
+require('./badge-status-variation.enum-XX8d--rj.js');
+require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
+require('./bar-chart-variation.enum-BZFN4377.js');
+require('./code-variation.enum-BM-hhQuD.js');
+require('./expandable-accordion-header-level.enum-CjL9V3Kt.js');
+require('./expandable-faq-item-variation.enum-aKkYAQgd.js');
+require('./expandable-faq-variation.enum-FEybT9s4.js');
+require('./footer-card-variation.enum-BPnpkC45.js');
+require('./form-checkbox-variation.enum-BfOGU4Qt.js');
+var formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-DgkifAnP.js');
+require('./form-radiogroup-validation.enum-DBDbjF6N.js');
+require('./form-select-variation.enum-e6wjWyaS.js');
+require('./form-textarea-variation.enum-BcEyaR5W.js');
+require('./info-card-multi-type.enum-pqhvdrsN.js');
+require('./info-card-variation.enum-B1cqmknX.js');
+require('./layout-container-max-width.enum-DqWtU7WK.js');
+require('./layout-block-variation.enum-BldWvnDk.js');
+require('./layout-columns-variation.enum-OgD-hvRN.js');
+require('./link-button-variation.enum-03cHZQxx.js');
+require('./list-type.enum-CkFOn-eB.js');
+require('./loader-skeleton-variation.enum-UvPtdesw.js');
+require('./loader-spinner-size.enum-u5AQs-UJ.js');
+require('./logo-color.enum-BJZv-f6R.js');
+require('./media-figure-alignment.enum-BWO1sg67.js');
+require('./navigation-sidebar-variation.enum-70NIGQoi.js');
+require('./navigation-vertical-menu-variation.enum-7IUICId3.js');
+require('./progress-circle-role.enum-DCkczyl8.js');
+require('./progress-indicator-variation.enum-3KORUGDH.js');
+require('./progress-list-item-variation.enum-Dk3YS--x.js');
+require('./progress-list-variation.enum-BvLLJK9O.js');
+require('./progressbar-variation.enum-CnRJPSs7.js');
+require('./quote-image-inner-position.enum-CLifVlj0.js');
+require('./table-variation.enum-DlDZKXbq.js');
+require('./tag-media-icon.enum-DzhiwvjI.js');
+require('./tag-size.enum-DFom3Smn.js');
+require('./tools-feedback-banner-type.enum-Dyeg3XNb.js');
+require('./tools-feedback-rating-variation.enum-CBI4GhXs.js');
+require('./tools-theme-provider.brand.enum-BzduvCUY.js');
+require('./typography-heading-jumbo-variation.enum-Di1Jeh0G.js');
+require('./typography-meta-variation.enum-lvDemnSz.js');
+require('./typography-time-variation.enum-D2gIVzYH.js');
+require('./util-breakpoint-observer-breakpoints.enum-zoJiezkV.js');
+var keyboardHandler_util = require('./keyboardHandler.util-Co9WoNpM.js');
+require('./detectClosest.util-D1z809xM.js');
+
+const buttonCss = () => `.sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--background--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--focus:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--active:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--secondary--default:var(--digi--color--background--interactive--default--secondary);--digi--button--color--background--secondary--hover:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--focus:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--active:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--hover:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--focus:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--active:var(--digi--color--text--interactive--secondary);--digi--button--color--text--secondary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--hover:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--focus:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--active:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--function--default:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--hover:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--focus:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--active:var(--digi--color--text--interactive--primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--border--primary--focus:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--active:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--secondary--default:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--hover:var(--digi--color--border--interactive--hover--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--active:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--hover:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--focus:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--active:var(--digi--color--icon--secondary);--digi--button--color--icon--secondary--default:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--hover:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--focus:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--active:var(--digi--color--icon--brand-primary);--digi--button--color--icon--function--default:var(--digi--color--icon--cta);--digi--button--color--icon--function--hover:var(--digi--color--icon--cta);--digi--button--color--icon--function--focus:var(--digi--color--icon--cta);--digi--button--color--icon--function--active:var(--digi--color--icon--cta);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--primary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--primary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--primary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--primary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--primary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--primary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--secondary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--secondary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--secondary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--secondary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--secondary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--secondary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--secondary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--secondary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--secondary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--secondary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--function--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--function--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--function--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--function--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--function--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--function--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}@media (any-hover: hover){.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(--digi--button--text-align--full-width);--digi--button--justify-content--default:var(--digi--button--justify-content--full-width)}`;
+
+const Button = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnClick = index.createEvent(this, "afOnClick", 7);
+        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
+        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
+        this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        /**
+         * Sätter knappens storlek. 'medium' är förvalt.
+         * @en Set button size. Defaults to medium size.
+         */
+        this.afSize = codeExampleVariation_enum.ButtonSize.MEDIUM;
+        /**
+         * Sätt variant. Om varianten är 'tertiary' så krävs även en ikon.
+         * @en Set button variation. If set to FUNCTION, the button also needs an icon.
+         */
+        this.afVariation = buttonVariation_enum.ButtonVariation.PRIMARY;
+        /**
+         * Sätt attributet 'type'.
+         * @en Set button `type` attribute.
+         */
+        this.afType = formInputType_enum.ButtonType.BUTTON;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-button');
+        /**
+         * Sätter knappens bredd till 100%.
+         * @en Set button width to 100%.
+         */
+        this.afFullWidth = false;
+    }
+    fullWidthHandler() {
+        this.isFullSize = this.afFullWidth;
+    }
+    /**
+     * Hämta en referens till buttonelementet. Bra för att t.ex. sätta fokus programmatiskt.
+     * @en Returns a reference to the button element. Handy for setting focus programmatically.
+     */
+    async afMGetButtonElement() {
+        return this._button;
+    }
+    componentWillLoad() {
+        this.setHasIcon();
+        this.fullWidthHandler();
+    }
+    componentWillUpdate() {
+        this.setHasIcon();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    setHasIcon() {
+        const icon = !!this.hostElement.querySelector('[slot="icon"]');
+        const iconSecondary = !!this.hostElement.querySelector('[slot="icon-secondary"]');
+        if (icon) {
+            this.hasIcon = icon;
+        }
+        if (iconSecondary) {
+            this.hasIconSecondary = iconSecondary;
+        }
+    }
+    get cssModifiers() {
+        return {
+            [`digi-button--variation-${this.afVariation}`]: !!this.afVariation,
+            [`digi-button--size-${this.afSize}`]: !!this.afSize,
+            'digi-button--icon': this.hasIcon,
+            'digi-button--icon-secondary': this.hasIconSecondary,
+            'digi-button--full-width': this.isFullSize
+        };
+    }
+    get pressedState() {
+        if (this.afAriaPressed === null || this.afAriaPressed === undefined) {
+            return;
+        }
+        return this.afAriaPressed ? 'true' : 'false';
+    }
+    get expandedState() {
+        if (this.afAriaExpanded === null || this.afAriaExpanded === undefined) {
+            return;
+        }
+        return this.afAriaExpanded ? 'true' : 'false';
+    }
+    get hasPopup() {
+        if (this.afAriaHaspopup === null || this.afAriaHaspopup === undefined) {
+            return;
+        }
+        return this.afAriaHaspopup ? 'true' : 'false';
+    }
+    clickHandler(e) {
+        this.afOnClick.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    blurHandler(e) {
+        this.afOnBlur.emit(e);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3a398d75ad83e3caa9ec54928544d5bf8315d30f' }, index.h("button", { key: '2159552d7e8064acbb6da5c02c28ead3d4985e85', class: Object.assign({ 'digi-button': true }, this.cssModifiers), type: this.afType, role: this.afRole, ref: (el) => {
+                var _a, _b, _c;
+                this._button = el;
+                (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
+                // Stencil has a bug wiith form attribute so we need to set it like this
+                // https://github.com/ionic-team/stencil/issues/2703
+                this.afForm
+                    ? (_b = this._button) === null || _b === void 0 ? void 0 : _b.setAttribute('form', this.afForm)
+                    : (_c = this._button) === null || _c === void 0 ? void 0 : _c.removeAttribute('form');
+            }, id: this.afId, tabindex: this.afTabindex, "aria-label": this.afAriaLabel, "aria-labelledby": this.afAriaLabelledby, "aria-controls": this.afAriaControls, "aria-pressed": this.pressedState, "aria-expanded": this.expandedState, "aria-haspopup": this.hasPopup, "aria-current": this.afAriaCurrent, "aria-checked": this.afAriaChecked, onClick: (e) => this.clickHandler(e), onFocus: (e) => this.focusHandler(e), onBlur: (e) => this.blurHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null, form: this.afForm, lang: this.afLang, dir: this.afDir }, this.hasIcon && (index.h("span", { key: '1188d5cb005a51e4e065b70663d06877db3a1477', class: "digi-button__icon" }, index.h("slot", { key: 'f90319563c18e1f82fa13f478b4d4d13ce3e9bf7', name: "icon" }))), index.h("span", { key: '17dce8eed2e845ca6166cf85a1c0252c2c0b8037', class: "digi-button__text" }, index.h("slot", { key: '2f637e48b837ecd0f0f2333349f328c497aee650' })), this.hasIconSecondary && (index.h("span", { key: '49ffd3361b0cc00c074e1ce332dab2de33127fcc', class: "digi-button__icon digi-button__icon--secondary" }, index.h("slot", { key: '367d3ba37e2fd0b7e83d600f35d02d4df303c1c0', name: "icon-secondary" }))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afFullWidth": [{
+                "fullWidthHandler": 0
+            }]
+    }; }
+};
+Button.style = buttonCss();
+
+const formInputCss = () => `.sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}`;
+
+const FormInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnChange = index.createEvent(this, "afOnChange", 7);
+        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
+        this.afOnKeyup = index.createEvent(this, "afOnKeyup", 7);
+        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
+        this.afOnInput = index.createEvent(this, "afOnInput", 7);
+        this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
+        this.afOnTouched = index.createEvent(this, "afOnTouched", 7);
+        this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        this.hasActiveValidationMessage = false;
+        this.dirty = false;
+        this.touched = false;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
+        this.afType = formInputType_enum.FormInputType.TEXT;
+        /**
+         * Sätter attributet 'inputmode'.
+         * @en Inputmode  type attribute
+         */
+        this.afInputmode = typographyVariation_enum.FormInputMode.DEFAULT;
+        /**
+         * Layout för hur inmatningsfältet ska visas då det finns en knapp
+         * @en Input layout when there is a button
+         */
+        this.afButtonVariation = formInputType_enum.FormInputButtonVariation.PRIMARY;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * @en Set input variation.
+         */
+        this.afVariation = typographyVariation_enum.FormInputVariation.MEDIUM;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-input');
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+         * @en Set input validation status
+         */
+        this.afValidation = typographyVariation_enum.FormInputValidation.NEUTRAL;
+        /**
+         * 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(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+        if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
+            this._input.value = String(value !== null && value !== void 0 ? value : '');
+        }
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    afValidationTextWatch() {
+        this.setActiveValidationMessage();
+    }
+    /**
+     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
+     * @en Returns a reference to the input element. Handy for setting focus programmatically.
+     */
+    async afMGetFormControlElement() {
+        return this._input;
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+        this.setActiveValidationMessage();
+        this.setHasButton();
+    }
+    componentWillUpdate() {
+        this.setHasButton();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    setActiveValidationMessage() {
+        this.hasActiveValidationMessage = !!this.afValidationText;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-input--small': this.afVariation === typographyVariation_enum.FormInputVariation.SMALL,
+            'digi-form-input--medium': this.afVariation === typographyVariation_enum.FormInputVariation.MEDIUM,
+            'digi-form-input--large': this.afVariation === typographyVariation_enum.FormInputVariation.LARGE,
+            'digi-form-input--neutral': this.afValidation === typographyVariation_enum.FormInputValidation.NEUTRAL,
+            'digi-form-input--success': this.afValidation === typographyVariation_enum.FormInputValidation.SUCCESS,
+            'digi-form-input--error': this.afValidation === typographyVariation_enum.FormInputValidation.ERROR,
+            'digi-form-input--warning': this.afValidation === typographyVariation_enum.FormInputValidation.WARNING,
+            [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
+            [`digi-form-input--has-button-${this.hasButton}`]: true,
+            'digi-form-input--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === typographyVariation_enum.FormInputValidation.NEUTRAL)
+        };
+    }
+    blurHandler(e) {
+        const trimableTypes = [
+            formInputType_enum.FormInputType.TEXT,
+            formInputType_enum.FormInputType.EMAIL,
+            formInputType_enum.FormInputType.SEARCH,
+            formInputType_enum.FormInputType.TEL,
+            formInputType_enum.FormInputType.URL
+        ];
+        const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
+        if (shouldTrim && typeof e.target.value === 'string') {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                this.afValue = this.value = trimmedValue;
+                if (this._input) {
+                    this._input.value = trimmedValue;
+                }
+                // Emittar afOnInput så Angulars value accessor får det trimmade värdet
+                this.afOnInput.emit(e);
+            }
+        }
+        if (!this.touched) {
+            this.afOnTouched.emit(e);
+            this.touched = true;
+        }
+        this.afOnBlur.emit(e);
+    }
+    changeHandler(e) {
+        this.setActiveValidationMessage();
+        this.afOnChange.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    keyupHandler(e) {
+        this.afOnKeyup.emit(e);
+    }
+    inputHandler(e) {
+        this.afValue = this.value =
+            this.afType === formInputType_enum.FormInputType.NUMBER
+                ? parseFloat(e.target.value)
+                : e.target.value;
+        if (!this.dirty) {
+            this.afOnDirty.emit(e);
+            this.dirty = true;
+        }
+        this.setActiveValidationMessage();
+        this.afOnInput.emit(e);
+    }
+    setHasButton() {
+        this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
+    }
+    render() {
+        return (index.h(index.Host, { key: '2739bdd7385125581d7ea9c25a3610f5950c6a74', tabindex: -1 }, index.h("div", { key: '7e261c1e2fc4f37f4ddda861872a470c89181e16', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, index.h("digi-form-label", { key: '7e8fd283dedf0a851c714331ae640f7c74176bde', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: '68d715181c180ebaf957dfb46afb63b19b8a8188', class: "digi-form-input__input-wrapper" }, index.h("input", Object.assign({ key: 'e25ab871e988f9e8bd0837f75403e85f7423805f', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === typographyVariation_enum.FormInputValidation.ERROR
+                ? 'true'
+                : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == typographyVariation_enum.FormInputMode.DEFAULT
+            ? {}
+            : { inputmode: this.afInputmode }))), index.h("slot", { key: 'c14ae079a53099fc3928bcf3ac7f5517c20b0f36', name: "button" })), index.h("div", { key: '75d6afa176cd8620e31c384e169b3c84a3bb584d', class: "digi-form-input__footer" }, index.h("div", { key: '81029d425aae06e3c72c08afe982f2ff1a7bb81d', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != typographyVariation_enum.FormInputValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '9a8fec12db8c78a037a9b70194b32814d7641dad', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }],
+        "afValidationText": [{
+                "afValidationTextWatch": 0
+            }]
+    }; }
+};
+FormInput.style = formInputCss();
+
+const formLabelCss = () => `.sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}`;
+
+const FormLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Set id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-label');
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter text för afRequired.
+         * @en Set text for afRequired.
+         */
+        this.afRequiredText = text._t.required.toLowerCase();
+        /**
+         * Sätter text för afAnnounceIfOptional.
+         * @en Set text for afAnnounceIfOptional.
+         */
+        this.afAnnounceIfOptionalText = text._t.optional.toLowerCase();
+    }
+    componentWillLoad() {
+        this.setLabelText();
+        this.validateFor();
+        this.handleSlotVisibility();
+    }
+    validateFor() {
+        if (this.afFor == null) {
+            logger_util.logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
+        }
+    }
+    setLabelText() {
+        this.labelText = `${this.afLabel} ${this.requiredText}`;
+        if (!this.afLabel) {
+            logger_util.logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
+        }
+    }
+    handleSlotVisibility() {
+        this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
+    }
+    get requiredText() {
+        if (this.afRequired && !this.afAnnounceIfOptional) {
+            return this.afRequiredText ? ` (${this.afRequiredText})` : '';
+        }
+        else if (!this.afRequired && this.afAnnounceIfOptional) {
+            return this.afAnnounceIfOptionalText
+                ? ` (${this.afAnnounceIfOptionalText})`
+                : '';
+        }
+        else {
+            return '';
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, index.h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, index.h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', name: "actions" }))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afFor": [{
+                "validateFor": 0
+            }],
+        "afLabel": [{
+                "setLabelText": 0
+            }],
+        "afRequired": [{
+                "setLabelText": 0
+            }],
+        "afAnnounceIfOptional": [{
+                "setLabelText": 0
+            }]
+    }; }
+};
+FormLabel.style = formLabelCss();
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
+        this.afOnSubmitFilters = index.createEvent(this, "afOnSubmitFilters", 7);
+        this.afOnFilterClosed = index.createEvent(this, "afOnFilterClosed", 7);
+        this.afOnResetFilters = index.createEvent(this, "afOnResetFilters", 7);
+        this.afOnSelect = index.createEvent(this, "afOnSelect", 7);
+        this.afOnQueryChanged = index.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 = typographyVariation_enum.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_util.randomIdGenerator('digi-form-select-filter');
+        /**
+         * Texten i rensaknappen
+         * @en Set the reset button text
+         */
+        this.afResetButtonText = text._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_util.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_util.detectClickOutside(target, selector) && this.isOpen) {
+            this.emitFilterClosedEvent();
+        }
+    }
+    focusoutHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-identifier`;
+        const focusOutsideFilter = detectFocusOutside_util.detectFocusOutside(target, selector);
+        if (focusOutsideFilter && this.isOpen) {
+            this.emitFilterClosedEvent();
+        }
+        else {
+            this.focusInList = !detectFocusOutside_util.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 === typographyVariation_enum.FormSelectFilterValidation.NEUTRAL,
+            'digi-form-select-filter--success': this.afValidation === typographyVariation_enum.FormSelectFilterValidation.SUCCESS,
+            'digi-form-select-filter--warning': this.afValidation === typographyVariation_enum.FormSelectFilterValidation.WARNING,
+            'digi-form-select-filter--error': this.afValidation === typographyVariation_enum.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 !== typographyVariation_enum.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 (index.h(index.Fragment, null, index.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
+            } }, index.h("span", null, " ", statusMessage, " "), index.h("div", { class: {
+                hidden: this._filteredResult && this._filteredResult.length > 0
+            } }, index.h("slot", { name: "empty-search-result" })))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '2e7276930637366cbcb14168102afb82393708f5', tabindex: -1 }, index.h("div", { key: 'a5620907d2399c0561b6b3b604220c3bf82ded6b', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, index.h("digi-form-label", { key: '151c3656f03d8b8b7639daf0e26631722a1f6878', 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 }), index.h("digi-util-keydown-handler", { key: '035ffc46a22218d42d892c89592993a7694b2be2', onAfOnEsc: () => this.escHandler() }, index.h("button", { key: 'b8fedc87ecf0b1cf26e2b123c97fcd7ff6287e0b', 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} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, index.h("div", { key: '8bb88747afac881b3667ecb60c4adbe36c1325f8', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, index.h("digi-icon-check", { key: 'a809c5fa00dd4d2a50662aeed3d673cda0289d80', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), index.h("span", { key: 'a5e7f4b998d38a7d912a25b2d7fb0b852b920dc3', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), index.h("digi-icon-chevron-down", { key: 'ef852d8060bacbdef9707dcb23ed3ae1f98cc33f', class: "digi-form-select-filter__toggle-icon" })), index.h("div", { key: '5c5e41376cf7264e837bed3905c971dd0adee156', 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
+            } }, index.h("fieldset", { key: 'daa4e02e97f5907fc89aeb7a337bd97ceba1c148' }, index.h("div", { key: '99cd8af83d9b1410610f4e49a6759fac20c6955f', class: "digi-form-select-filter__header" }, index.h("legend", { key: '0ed1e17842e0795194c4b74d9600f17c3d2e63b0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), index.h("digi-form-input", { key: 'c35f93cb680c6f6e902f281ff597108a9106b016', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: typographyVariation_enum.FormInputVariation.MEDIUM, afType: formInputType_enum.FormInputType.SEARCH, afValidation: typographyVariation_enum.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()), index.h("div", { key: '4e2c4a6e6039f8f3efe8cfc75bb302214704073e', class: "digi-form-select-filter__scroll" }, index.h("digi-util-keydown-handler", { key: '751ad128164783be9f7d32d5418d8b99a2be24e3', 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() }, index.h("ul", { key: '2879b7c081ea2097bd17a9c0f0967b78b9a5d665', 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 ===
+                    typographyVariation_enum.FormSelectFilterValidation.ERROR
+                    ? 'true'
+                    : 'false', "aria-errormessage": `${this.afId}--validation-message`, "aria-required": this.afMultipleItems
+                ? false
+                : this.afRequired
+                    ? 'true'
+                    : 'false' }, this.showNeutralValue && (index.h("li", { key: '0d51a466af769e3b687805b4cb8027bcac8b5112', 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 && (index.h("digi-icon-check", { key: '84264b690e6a8b4cd792f6543f00a7f5e559fe06', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+            this._filteredResult.map((item, index$1) => {
+                return (index.h("li", { class: "digi-form-select-filter__item", key: index$1, 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 ===
+                            typographyVariation_enum.FormSelectFilterValidation.ERROR
+                            ? 'true'
+                            : 'false'
+                        : 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue
+                        ? -1
+                        : index$1 === 0
+                            ? 0
+                            : -1 }, this.isSelected(item.value) && (index.h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
+            }))))), this.afMultipleItems && (index.h("div", { key: '79def162604c33d3c6acffd7464f2d44f4cf6229', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (index.h("digi-button", { key: '3ee850fa06c38590c50dcfba11251bd6a4ed5626', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), index.h("digi-util-keydown-handler", { key: '0fe5d9f9d899d3ddeaf6447485bf5f655e6270ff', onAfOnUp: () => this.setFocusItem() }, index.h("digi-button", { key: '0c14fea74bd16712355a8fafdc17408674ae0489', 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)))))), index.h("div", { key: 'eb9dd0d0150b043458211e89c1311d9c7103d46f', class: "digi-form-select__footer" }, index.h("div", { key: 'f7aca001f6b2580600c1e823e307a4352811bb66', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (index.h("digi-form-validation-message", { key: '5802021f469405694a75378fc8830720a9275d41', "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afListItems": [{
+                "handleListItems": 0
+            }]
+    }; }
+};
+FormSelectFilter.style = formSelectFilterCss();
+
+const formValidationMessageCss = () => `.sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}`;
+
+const FormValidationMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error' eller 'warning'.
+         * @en Set validation status
+         */
+        this.afVariation = formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-validation-message--success': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS,
+            'digi-form-validation-message--error': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR,
+            'digi-form-validation-message--warning': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING
+        };
+    }
+    get icon() {
+        switch (this.afVariation) {
+            case formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS:
+                return index.h("digi-icon-validation-success", null);
+            case formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR:
+                return index.h("digi-icon-validation-error", null);
+            case formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING:
+                return index.h("digi-icon-validation-warning", { class: "warning" });
+        }
+    }
+    render() {
+        return (index.h("div", { key: '5c89cb2cfe7085ec0203814f2c7a43c9fe518db4', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: 'cb85b6a6e02b081710f80ad7bbbe96e182d8c353', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: '9b1689dcad19fd3f033c679f496a1c94348f393b', class: "digi-form-validation-message__text" }, index.h("slot", { key: '794c1b1c0771cae8c0b19bd7123f7f5bc28e99b7' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+FormValidationMessage.style = formValidationMessageCss();
+
+const iconCheckCss = () => `.sc-digi-icon-check-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-check-h svg.sc-digi-icon-check{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconCheck = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '6f876190ee1cdd56d449aab39acdd01f080d6cd6', class: "digi-icon-check", width: "23", height: "18", viewBox: "0 0 23 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: 'bef781ca98e73396b1fe60b65796e2a1e2f9dc05', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '9d4a13004fbaaed886b59fc22dbee79245af10de' }, this.afDesc), index.h("path", { key: '102e5f0057f44c0e8a33888386a7777a4ce58b96', class: "digi-icon-check__shape", 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", "fill-rule": "nonzero" })));
+    }
+};
+IconCheck.style = iconCheckCss();
+
+const iconChevronDownCss = () => `.sc-digi-icon-chevron-down-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-down-h svg.sc-digi-icon-chevron-down{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconChevronDown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '14c50bb9ce94f2ae7e6b89e99417668515a0e1fa', class: "digi-icon-chevron-down", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: '4692fea634337c2e89e5eeac67c707c84f919563', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '3948943affb34ebc1967aeb54389b0c3230e6daf' }, this.afDesc), index.h("path", { key: '252f72d574b43e0d794341fa05f5a2cf39cedb4d', class: "digi-icon-chevron-down__shape", d: "M1 1l6.074 6L13 1.147", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
+    }
+};
+IconChevronDown.style = iconChevronDownCss();
+
+const iconValidationErrorCss = () => `.sc-digi-icon-validation-error-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-error-h svg.sc-digi-icon-validation-error{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconValidationError = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: 'b20fb61395f90adad2b9e5be72d3e2ea3c5a3feb', class: "digi-icon-validation-error", width: "48", height: "48", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: '5e08a1b947d534b913fff06e02109b53c607a0be', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'f016b92eb4957943a5308d12db1ce2f1b73fae3f' }, this.afDesc), index.h("path", { key: 'f5ba662eeb6689959a6990ae2e880edc42670490', class: "digi-icon-validation-error__shape", 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", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconValidationError.style = iconValidationErrorCss();
+
+const iconValidationSuccessCss = () => `.sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-success-h svg.sc-digi-icon-validation-success{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconCheckCircle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '1c9dcaf014e400504cbce24f69c67bdbb1dc0361', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: 'ed5b4d39b987b025d99ef2ce2153a8de749f587e', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '7c5175b745577dd9076170ba83fa00f8cc03c4a2' }, this.afDesc), index.h("path", { key: 'f9cb601de2dfbf7959b2b43023692e111f1fbf91', class: "digi-icon-validation-success__shape", 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", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconCheckCircle.style = iconValidationSuccessCss();
+
+const iconValidationWarningCss = () => `.sc-digi-icon-validation-warning-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-warning-h svg.sc-digi-icon-validation-warning{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconValidationWarning = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("div", { key: '7017a09730cca2dafe42548b11d18e34a693f81b' }, index.h("svg", { key: 'd56b196f88aaf6dd87bb416e422d399667e80202', class: "digi-icon-validation-warning", width: "18", height: "18", viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: '25751b0fd552d8dcabc3402345ba8528126dd973', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '41476cbdf1b92dd9b7c44d8791481a5cf00186ca' }, this.afDesc), index.h("g", { key: '6607df5c4713e5680fcaa2e9ea29b7cab5064e3d', fill: "none", "fill-rule": "evenodd" }, index.h("circle", { key: 'c87e6472093671bc2f1f6b3d7eb0b34f512468c1', cx: "9", cy: "9", r: "6.75", fill: "#333" }), index.h("path", { key: '17b79d3e780ecbb2394b38586388ea457c65a2f7', 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: "#FFE200" })))));
+    }
+};
+IconValidationWarning.style = iconValidationWarningCss();
+
+const UtilKeydownHandler = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnEsc = index.createEvent(this, "afOnEsc", 7);
+        this.afOnEnter = index.createEvent(this, "afOnEnter", 7);
+        this.afOnTab = index.createEvent(this, "afOnTab", 7);
+        this.afOnSpace = index.createEvent(this, "afOnSpace", 7);
+        this.afOnShiftTab = index.createEvent(this, "afOnShiftTab", 7);
+        this.afOnUp = index.createEvent(this, "afOnUp", 7);
+        this.afOnDown = index.createEvent(this, "afOnDown", 7);
+        this.afOnLeft = index.createEvent(this, "afOnLeft", 7);
+        this.afOnRight = index.createEvent(this, "afOnRight", 7);
+        this.afOnHome = index.createEvent(this, "afOnHome", 7);
+        this.afOnEnd = index.createEvent(this, "afOnEnd", 7);
+        this.afOnKeyDown = index.createEvent(this, "afOnKeyDown", 7);
+    }
+    keydownHandler(e) {
+        const key = keyboardHandler_util.keyboardHandler(e);
+        switch (key) {
+            case keyboardHandler_util.KEY_CODE.SHIFT_TAB:
+                this.afOnShiftTab.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.DOWN_ARROW:
+                this.afOnDown.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.UP_ARROW:
+                this.afOnUp.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.LEFT_ARROW:
+                this.afOnLeft.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.RIGHT_ARROW:
+                this.afOnRight.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.ENTER:
+                this.afOnEnter.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.ESCAPE:
+                this.afOnEsc.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.TAB:
+                this.afOnTab.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.SPACE:
+                this.afOnSpace.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.HOME:
+                this.afOnHome.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.END:
+                this.afOnEnd.emit(e);
+                this.afOnKeyDown.emit(e);
+                break;
+            case keyboardHandler_util.KEY_CODE.ANY:
+                this.afOnKeyDown.emit(e);
+                break;
+            default:
+                this.afOnKeyDown.emit(e);
+                return;
+        }
+    }
+    render() {
+        return index.h("slot", { key: 'c0a9e056eb5e48ce215370d38ee65a62ca2e33d9' });
+    }
+};
+
+exports.digi_button = Button;
+exports.digi_form_input = FormInput;
+exports.digi_form_label = FormLabel;
+exports.digi_form_select_filter = FormSelectFilter;
+exports.digi_form_validation_message = FormValidationMessage;
+exports.digi_icon_check = IconCheck;
+exports.digi_icon_chevron_down = IconChevronDown;
+exports.digi_icon_validation_error = IconValidationError;
+exports.digi_icon_validation_success = IconCheckCircle;
+exports.digi_icon_validation_warning = IconValidationWarning;
+exports.digi_util_keydown_handler = UtilKeydownHandler;