@designsystem-se/af 31.3.0

package/components/digi-form-filter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiFormFilter extends Components.DigiFormFilter, HTMLElement {}
+export const DigiFormFilter: {
+    prototype: DigiFormFilter;
+    new (): DigiFormFilter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/digi-form-filter.js

@@ -0,0 +1,302 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f124fce4.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import { l as logger } from './p-e3d2e899.js';
+import { d as detectClickOutside } from './p-430607cb.js';
+import { d as detectFocusOutside } from './p-ee33960b.js';
+import { _ as _t } from './p-42aa440f.js';
+import { d as defineCustomElement$4 } from './p-09e0586b.js';
+import { d as defineCustomElement$3 } from './p-ccb24f10.js';
+import { d as defineCustomElement$2 } from './p-2c789cac.js';
+
+const formFilterCss = ".digi--util--fs--xs.sc-digi-form-filter{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-form-filter{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-form-filter{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-form-filter{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-form-filter{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-form-filter{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-form-filter{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-form-filter{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-form-filter{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-form-filter{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-form-filter{padding-top:5rem !important}.digi--util--pb--1.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-form-filter{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-form-filter{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-form-filter{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-form-filter{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-form-filter{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-form-filter{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-form-filter{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-form-filter{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-form-filter{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-form-filter{padding:2.5rem !important}.digi--util--p--60.sc-digi-form-filter{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-form-filter{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-form-filter{padding:4.5rem !important}.digi--util--p--90.sc-digi-form-filter{padding:5rem !important}.digi--util--ptb--1.sc-digi-form-filter{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-form-filter{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-form-filter{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-form-filter{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-form-filter{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-form-filter{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-form-filter{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-form-filter{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-form-filter{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-form-filter{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-form-filter{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-form-filter{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-form-filter{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-form-filter{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-form-filter{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-form-filter{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-form-filter{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-form-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}.digi--util--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary);--digi--form-filter--scroll--max-height:18.75rem;--digi--form-filter--scroll--max-height--large:23.4275rem;--digi--form-filter--scroll--padding:var(--digi--padding--small);--digi--form-filter--reset-button--margin-left:var(--digi--padding--small);--digi--form-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);--digi--form-filter--list--margin:0;--digi--form-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-filter--dropdown--border-radius:var(--digi--border--radius--primary);--digi--form-filter--dropdown--background:var(--digi--color--background--primary);--digi--form-filter--dropdown--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--border--success);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(\n    --digi--form-filter--toggle-button-indicator--color--default\n  );--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(\n      --digi--form-filter--scroll--max-height--large\n    )}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-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-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:\"\";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(\n    --digi--form-filter--toggle-button-indicator--color--active\n  )}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}";
+const DigiFormFilterStyle0 = formFilterCss;
+
+const FormFilter = /*@__PURE__*/ proxyCustomElement(class FormFilter extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.afBlurFilter = createEvent(this, "afBlurFilter", 7);
+        this.afSubmitFilter = createEvent(this, "afSubmitFilter", 7);
+        this.afCloseFilter = createEvent(this, "afCloseFilter", 7);
+        this.afResetFilter = createEvent(this, "afResetFilter", 7);
+        this.afChangeFilter = createEvent(this, "afChangeFilter", 7);
+        this.refs = {};
+        this.listItems = [];
+        this.checkedItems = [];
+        this.tabItems = [];
+        this.isActive = false;
+        this.activeListItemIndex = 0;
+        this.afId = randomIdGenerator('digi-form-filter');
+        this.afFilterButtonText = undefined;
+        this.afSubmitButtonText = undefined;
+        this.afSubmitButtonTextAriaLabel = undefined;
+        this.afResetButtonText = _t.clear;
+        this.afResetButtonTextAriaLabel = undefined;
+        this.afHideResetButton = false;
+        this.afAlignRight = undefined;
+        this.afName = undefined;
+        this.afFilterButtonAriaLabel = undefined;
+        this.afFilterButtonAriaDescribedby = undefined;
+        this.afAutofocus = undefined;
+        this.afListItems = undefined;
+        this.afCheckItems = [];
+    }
+    syncCheckItems() {
+        this.checkedItems = this.afCheckItems;
+    }
+    handleListItems() {
+        if (this.afListItems) {
+            // via props
+            this.setupListProps(this.afListItems);
+        }
+        else {
+            // child elements
+            this.setupListElements(this.slotRef.children);
+        }
+    }
+    setupAccessibility() {
+        // set default tabIndex to first filter
+        if (this.tabItems.length === 0 && this.listItems.length > 0) {
+            this.tabItems = [this.listItems.at(0).id];
+        }
+    }
+    setupListProps(userItems) {
+        try {
+            if (Array.isArray(userItems)) {
+                this.listItems = userItems;
+            }
+            else if (typeof userItems === 'string') {
+                this.listItems = JSON.parse(userItems);
+            }
+            else {
+                throw `Invalid type in "af-list-items" attribute`;
+            }
+        }
+        catch (e) {
+            logger.warn(`Invalid JSON in "af-list-items" attribute`, this.hostElement, e);
+            return;
+        }
+    }
+    clickHandler(e) {
+        var _a;
+        const target = e.target;
+        const rootId = (_a = this.refs.root) === null || _a === void 0 ? void 0 : _a.id;
+        if (rootId) {
+            if (detectClickOutside(target, `#${rootId}`) && this.isActive) {
+                this.hideMenu();
+            }
+        }
+    }
+    focusoutHandler(e) {
+        var _a;
+        const target = e.target;
+        const rootId = (_a = this.refs.root) === null || _a === void 0 ? void 0 : _a.id;
+        const focusOutsideFilter = detectFocusOutside(target, `#${rootId}`);
+        if (focusOutsideFilter && this.isActive) {
+            this.hideMenu();
+        }
+        else {
+            this.afBlurFilter.emit({
+                filterName: this.afName
+            });
+        }
+    }
+    setupListElements(collection) {
+        if (!collection || collection.length <= 0) {
+            logger.warn(`The slot contains no filter elements.`, this.slotRef);
+            return;
+        }
+        this.listItems = [...collection].map((element, i) => ({
+            id: element.afId || i.toString(),
+            label: element.afLabel
+        }));
+    }
+    componentWillLoad() {
+        this.syncCheckItems();
+    }
+    componentDidLoad() {
+        this.handleListItems();
+        this.setupSlot();
+    }
+    setupSlot() {
+        if (!window.MutationObserver) {
+            return;
+        } // for tests
+        const observer = new window.MutationObserver(() => {
+            this.setupListElements(this.slotRef.children);
+        });
+        observer.observe(this.slotRef, { childList: true });
+    }
+    incrementFocus() {
+        if (this.activeListItemIndex < this.listItems.length - 1) {
+            this.focusItem(this.activeListItemIndex + 1);
+        }
+    }
+    decrementFocus() {
+        if (this.activeListItemIndex > 0) {
+            this.focusItem(this.activeListItemIndex - 1);
+        }
+    }
+    handleKey(e) {
+        switch (e.key) {
+            case 'ArrowDown':
+                return this.incrementFocus();
+            case 'ArrowUp':
+                return this.decrementFocus();
+            case 'Home':
+                return this.focusItem(0);
+            case 'End':
+                return this.focusItem(this.listItems.length - 1);
+            case 'Enter':
+                e.target.click();
+                break;
+            case 'Escape':
+                return this.hideMenu();
+        }
+    }
+    focusItem(idx) {
+        var _a;
+        this.activeListItemIndex = idx;
+        const currentItem = this.listItems.at(idx);
+        if (currentItem && this.refs.filter) {
+            (_a = this.refs.filter[currentItem.id]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        this.tabItems = [currentItem === null || currentItem === void 0 ? void 0 : currentItem.id];
+    }
+    hideMenu() {
+        var _a;
+        this.isActive = false;
+        (_a = this.refs.toggle) === null || _a === void 0 ? void 0 : _a.focus();
+        this.afCloseFilter.emit({
+            filterName: this.afName,
+            listItems: this.listItems,
+            checked: this.checkedItems
+        });
+    }
+    showMenu() {
+        this.isActive = true;
+        setTimeout(() => this.focusItem(0), 10);
+    }
+    handleToggle() {
+        if (this.isActive) {
+            this.hideMenu();
+        }
+        else {
+            this.showMenu();
+        }
+    }
+    handleCheckItem(item) {
+        const isCurrentlyChecked = this.checkedItems.includes(item.id);
+        if (isCurrentlyChecked) {
+            this.checkedItems = this.checkedItems.filter((id) => id !== item.id);
+        }
+        else {
+            this.checkedItems = [...this.checkedItems, item.id];
+        }
+        const idx = this.listItems.findIndex(({ id }) => id === item.id);
+        this.focusItem(idx);
+        this.afChangeFilter.emit({
+            filterName: this.afName,
+            id: item.id,
+            isChecked: !isCurrentlyChecked
+        });
+    }
+    handleSubmit() {
+        this.hideMenu();
+        this.afSubmitFilter.emit({
+            filterName: this.afName,
+            listItems: this.listItems,
+            checked: this.checkedItems
+        });
+    }
+    handleReset() {
+        this.checkedItems = [];
+        this.afResetFilter.emit({
+            filterName: this.afName
+        });
+    }
+    render() {
+        return (h(Host, { key: '33b46420ca800f91bea4414f515003e313c45ab2' }, h("div", { key: '4d6383fcd8a3bc6a5f2b0331fdf0c081eb025ce6', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
+                'digi-form-filter': true,
+                'digi-form-filter--open': this.isActive
+            } }, h("digi-button", { key: '0fef77e1e39067cdd096e9089556348d753aa346', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: 'e61a6158e1c8909ea84ae8d2bb6313b228c69ec4', class: {
+                'digi-form-filter__toggle-button-indicator': true,
+                'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
+            } }), h("span", { key: 'b1139fa62d9e1efdedb351a5b7c49e043b37af2c', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: '93b44197a1bb780682568ab9cb9930dbf95415da', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: '840052db4ddbba622e876fa7279898f7cd3c9f7a', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
+                'digi-form-filter__dropdown': true,
+                'digi-form-filter__dropdown--right': this.afAlignRight,
+                'digi-form-filter__dropdown--hidden': !this.isActive
+            } }, h("div", { key: '75c9eeed26b192149887832faab2311f9fbf771c', class: "digi-form-filter__scroll" }, h("fieldset", { key: '9b234f932eb41c9c7dd29984f88ca194edcd6348' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: '81169739f755d31d18dc0e8c9fd9a7435fa80a9c', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
+            const isChecked = this.checkedItems.includes(item.id);
+            const isTabbable = this.tabItems.includes(item.id);
+            return (h("li", { class: "digi-form-filter__item", key: item.id }, h("digi-form-checkbox", { afInputRef: (ref) => (this.refs.filter = Object.assign(Object.assign({}, this.refs.filter), { [item.id]: ref })), afTabIndex: isTabbable ? 0 : -1, afLabel: item.label, afValue: item.id, afChecked: isChecked, onClick: (e) => {
+                    e.preventDefault();
+                    this.handleCheckItem(item);
+                } })));
+        })))), h("div", { key: '4870d1ff4d945751b715eebbff6dbd15d1b5517b', class: "digi-form-filter__footer" }, h("digi-button", { key: 'e4fbc043ccaa1c0b384a7af27af2a00338af8da0', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: 'fa1687bda6bc611f4e810039656f73aa8864ec90', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: '82c097a454fd958768eae605eb16317e2a0ed91a', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: '7ce9c0f253557196321516b182bff2ce6b8d2da1' }))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "afCheckItems": ["syncCheckItems"],
+        "afListItems": ["handleListItems"],
+        "listItems": ["setupAccessibility"]
+    }; }
+    static get style() { return DigiFormFilterStyle0; }
+}, [6, "digi-form-filter", {
+        "afId": [1, "af-id"],
+        "afFilterButtonText": [1, "af-filter-button-text"],
+        "afSubmitButtonText": [1, "af-submit-button-text"],
+        "afSubmitButtonTextAriaLabel": [1, "af-submit-button-text-aria-label"],
+        "afResetButtonText": [1, "af-reset-button-text"],
+        "afResetButtonTextAriaLabel": [1, "af-reset-button-text-aria-label"],
+        "afHideResetButton": [4, "af-hide-reset-button"],
+        "afAlignRight": [4, "af-align-right"],
+        "afName": [1, "af-name"],
+        "afFilterButtonAriaLabel": [1, "af-filter-button-aria-label"],
+        "afFilterButtonAriaDescribedby": [1, "af-filter-button-aria-describedby"],
+        "afAutofocus": [4, "af-autofocus"],
+        "afListItems": [1, "af-list-items"],
+        "afCheckItems": [16],
+        "listItems": [32],
+        "checkedItems": [32],
+        "tabItems": [32],
+        "isActive": [32],
+        "activeListItemIndex": [32]
+    }, [[8, "click", "clickHandler"], [4, "focusin", "focusoutHandler"], [0, "keydown", "handleKey"]], {
+        "afCheckItems": ["syncCheckItems"],
+        "afListItems": ["handleListItems"],
+        "listItems": ["setupAccessibility"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-form-filter", "digi-button", "digi-form-checkbox", "digi-icon-chevron-down"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-form-filter":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FormFilter);
+            }
+            break;
+        case "digi-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "digi-form-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "digi-icon-chevron-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DigiFormFilter = FormFilter;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiFormFilter, defineCustomElement };

package/components/digi-form-input-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiFormInputSearch extends Components.DigiFormInputSearch, HTMLElement {}
+export const DigiFormInputSearch: {
+    prototype: DigiFormInputSearch;
+    new (): DigiFormInputSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/digi-form-input-search.js

@@ -0,0 +1,229 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f124fce4.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import { F as FormInputSearchVariation } from './p-bc3d2778.js';
+import { b as FormInputType, F as FormInputButtonVariation } from './p-c8429245.js';
+import { a as ButtonType } from './p-490d2653.js';
+import { d as detectClickOutside } from './p-430607cb.js';
+import { d as detectFocusOutside } from './p-ee33960b.js';
+import { d as defineCustomElement$9 } from './p-09e0586b.js';
+import { d as defineCustomElement$8 } from './p-5d309a3a.js';
+import { d as defineCustomElement$7 } from './p-3e02e6a4.js';
+import { d as defineCustomElement$6 } from './p-91245b2c.js';
+import { d as defineCustomElement$5 } from './p-a37eff2b.js';
+import { d as defineCustomElement$4 } from './p-5ef808b0.js';
+import { d as defineCustomElement$3 } from './p-d84461c8.js';
+import { d as defineCustomElement$2 } from './p-63296d6b.js';
+
+const formInputSearchCss = ".sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(\n    --digi--form-input-search--input--border-radius--default\n  )}";
+const DigiFormInputSearchStyle0 = formInputSearchCss;
+
+const FormInputSearch = /*@__PURE__*/ proxyCustomElement(class FormInputSearch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.afOnFocusOutside = createEvent(this, "afOnFocusOutside", 7);
+        this.afOnFocusInside = createEvent(this, "afOnFocusInside", 7);
+        this.afOnClickOutside = createEvent(this, "afOnClickOutside", 7);
+        this.afOnClickInside = createEvent(this, "afOnClickInside", 7);
+        this.afOnChange = createEvent(this, "afOnChange", 7);
+        this.afOnBlur = createEvent(this, "afOnBlur", 7);
+        this.afOnKeyup = createEvent(this, "afOnKeyup", 7);
+        this.afOnFocus = createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
+        this.afOnInput = createEvent(this, "afOnInput", 7);
+        this.afOnClick = createEvent(this, "afOnClick", 7);
+        this.afOnSubmitSearch = createEvent(this, "afOnSubmitSearch", 7);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this.afLabel = undefined;
+        this.afLabelDescription = undefined;
+        this.afType = FormInputType.SEARCH;
+        this.afButtonVariation = FormInputButtonVariation.PRIMARY;
+        this.afName = undefined;
+        this.afId = randomIdGenerator('digi-form-input-search');
+        this.value = undefined;
+        this.afValue = undefined;
+        this.afAutocomplete = undefined;
+        this.afAriaAutocomplete = undefined;
+        this.afAriaActivedescendant = undefined;
+        this.afAriaLabelledby = undefined;
+        this.afAriaDescribedby = undefined;
+        this.afVariation = FormInputSearchVariation.MEDIUM;
+        this.afHideButton = undefined;
+        this.afButtonType = ButtonType.SUBMIT;
+        this.afButtonText = undefined;
+        this.afButtonAriaLabel = undefined;
+        this.afButtonAriaLabelledby = undefined;
+        this.afAutofocus = undefined;
+    }
+    onValueChanged(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+    }
+    /**
+     * 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() {
+        const formControlElement = await this._input.afMGetFormControlElement();
+        return formControlElement;
+    }
+    blurHandler(e) {
+        this.afOnBlur.emit(e);
+    }
+    changeHandler(e) {
+        const element = e.target;
+        this.afValue = this.value = element.value;
+        this.afOnChange.emit(e);
+    }
+    focusHandler(e) {
+        e.stopPropagation();
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    keyupHandler(e) {
+        this.afOnKeyup.emit(e);
+        if (e.detail.key === 'Enter') {
+            this.afOnSubmitSearch.emit(this.afValue);
+        }
+    }
+    inputHandler(e) {
+        this.afOnInput.emit(e);
+    }
+    clickHandler(e) {
+        e.stopPropagation();
+        this.afOnClick.emit(e);
+        this.afOnSubmitSearch.emit(this.afValue);
+    }
+    clickOutsideListener(e) {
+        const target = e.target;
+        const selector = `[data-af-identifier="${this.afId}"]`;
+        if (detectClickOutside(target, selector)) {
+            this.afOnClickOutside.emit(e);
+        }
+        else {
+            this.afOnClickInside.emit(e);
+        }
+    }
+    focusOutsideListener(e) {
+        const target = e.target;
+        const selector = `[data-af-identifier="${this.afId}"]`;
+        if (detectFocusOutside(target, selector)) {
+            this.afOnFocusOutside.emit(e);
+        }
+        else {
+            this.afOnFocusInside.emit(e);
+        }
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-input-search--small': this.afVariation === FormInputSearchVariation.SMALL,
+            'digi-form-input-search--medium': this.afVariation === FormInputSearchVariation.MEDIUM,
+            'digi-form-input-search--large': this.afVariation === FormInputSearchVariation.LARGE
+        };
+    }
+    render() {
+        return (h("div", { key: '7de63915fb92fa4bc91837bb05c13d420207d818', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '67c9a320e90a72cc82b0515d5faa124624a5ae4b', class: {
+                'digi-form-input-search__input': true,
+                'digi-form-input-search__input--no-button': this.afHideButton
+            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '87e99c7c90f41b66417e69629dd88307f3d29211', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: '985805e3e6c0ada2974dd1043a7a85c70e289fda', slot: "icon" }), this.afButtonText)))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "value": ["onValueChanged"],
+        "afValue": ["onAfValueChanged"]
+    }; }
+    static get style() { return DigiFormInputSearchStyle0; }
+}, [2, "digi-form-input-search", {
+        "afLabel": [1, "af-label"],
+        "afLabelDescription": [1, "af-label-description"],
+        "afType": [1, "af-type"],
+        "afButtonVariation": [1, "af-button-variation"],
+        "afName": [1, "af-name"],
+        "afId": [1, "af-id"],
+        "value": [1],
+        "afValue": [1, "af-value"],
+        "afAutocomplete": [1, "af-autocomplete"],
+        "afAriaAutocomplete": [1, "af-aria-autocomplete"],
+        "afAriaActivedescendant": [1, "af-aria-activedescendant"],
+        "afAriaLabelledby": [1, "af-aria-labelledby"],
+        "afAriaDescribedby": [1, "af-aria-describedby"],
+        "afVariation": [1, "af-variation"],
+        "afHideButton": [4, "af-hide-button"],
+        "afButtonType": [1, "af-button-type"],
+        "afButtonText": [1, "af-button-text"],
+        "afButtonAriaLabel": [1, "af-button-aria-label"],
+        "afButtonAriaLabelledby": [1, "af-button-aria-labelledby"],
+        "afAutofocus": [4, "af-autofocus"],
+        "afMGetFormControlElement": [64]
+    }, [[8, "click", "clickOutsideListener"], [4, "focusin", "focusOutsideListener"]], {
+        "value": ["onValueChanged"],
+        "afValue": ["onAfValueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-form-input-search", "digi-button", "digi-form-input", "digi-form-label", "digi-form-validation-message", "digi-icon-search", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-form-input-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FormInputSearch);
+            }
+            break;
+        case "digi-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "digi-form-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "digi-form-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "digi-form-validation-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "digi-icon-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "digi-icon-validation-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "digi-icon-validation-success":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "digi-icon-validation-warning":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DigiFormInputSearch = FormInputSearch;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiFormInputSearch, defineCustomElement };

package/components/digi-form-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiFormInput extends Components.DigiFormInput, HTMLElement {}
+export const DigiFormInput: {
+    prototype: DigiFormInput;
+    new (): DigiFormInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/digi-form-input.js

@@ -0,0 +1,6 @@
+import { F as FormInput, d as defineCustomElement$1 } from './p-5d309a3a.js';
+
+const DigiFormInput = FormInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiFormInput, defineCustomElement };

package/components/digi-form-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiFormLabel extends Components.DigiFormLabel, HTMLElement {}
+export const DigiFormLabel: {
+    prototype: DigiFormLabel;
+    new (): DigiFormLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/digi-form-label.js

@@ -0,0 +1,6 @@
+import { F as FormLabel, d as defineCustomElement$1 } from './p-3e02e6a4.js';
+
+const DigiFormLabel = FormLabel;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiFormLabel, defineCustomElement };

package/components/digi-form-radiobutton.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiFormRadiobutton extends Components.DigiFormRadiobutton, HTMLElement {}
+export const DigiFormRadiobutton: {
+    prototype: DigiFormRadiobutton;
+    new (): DigiFormRadiobutton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/digi-form-radiobutton.js

@@ -0,0 +1,6 @@
+import { F as FormRadiobutton, d as defineCustomElement$1 } from './p-e22aa82c.js';
+
+const DigiFormRadiobutton = FormRadiobutton;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiFormRadiobutton, defineCustomElement };

package/components/digi-form-radiogroup.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiFormRadiogroup extends Components.DigiFormRadiogroup, HTMLElement {}
+export const DigiFormRadiogroup: {
+    prototype: DigiFormRadiogroup;
+    new (): DigiFormRadiogroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;