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

package/dist/cjs/digi-form-filter.cjs.entry.js

@@ -1,257 +0,0 @@
-'use strict';
-
-var index = require('./index-Cn1hHaSy.js');
-var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
-var logger_util = require('./logger.util-DUhrcCTY.js');
-var detectClickOutside_util = require('./detectClickOutside.util-DKR8Sdiw.js');
-var detectFocusOutside_util = require('./detectFocusOutside.util-BNHrXMJ2.js');
-var text = require('./text-Cu3CaHGj.js');
-require('./detectClosest.util-D1z809xM.js');
-
-const formFilterCss = () => `.sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--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--divider--primary);--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--marking--indication--primary);--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(--digi--form-filter--toggle-button-indicator--color--default);--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(--digi--form-filter--scroll--max-height--large)}}.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(--digi--form-filter--toggle-button-indicator--color--active)}.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 FormFilter = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afBlurFilter = index.createEvent(this, "afBlurFilter", 7);
-        this.afSubmitFilter = index.createEvent(this, "afSubmitFilter", 7);
-        this.afCloseFilter = index.createEvent(this, "afCloseFilter", 7);
-        this.afResetFilter = index.createEvent(this, "afResetFilter", 7);
-        this.afChangeFilter = index.createEvent(this, "afChangeFilter", 7);
-        this.listItems = [];
-        this.checkedItems = [];
-        this.tabItems = [];
-        this.isActive = false;
-        this.activeListItemIndex = 0;
-        this.refs = {};
-        /**
-         * 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-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;
-        /**
-         * Definiera vilka kryssrutor som ska vara ikryssade, förväntar sig filtrets `id`
-         * @en Defines which checkboxes are checked, expects the `id` of the filter
-         */
-        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_util.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_util.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_util.detectFocusOutside(target, `#${rootId}`);
-        if (focusOutsideFilter && this.isActive) {
-            this.hideMenu();
-        }
-        else {
-            this.afBlurFilter.emit({
-                filterName: this.afName
-            });
-        }
-    }
-    setupListElements(collection) {
-        if (!collection || collection.length <= 0) {
-            logger_util.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 (index.h(index.Host, { key: 'dfd9336afc099665b35c08b47467d68320279469' }, index.h("div", { key: 'a329b82ecd5905e1792021a16dd1c12b3b7b00a0', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
-                'digi-form-filter': true,
-                'digi-form-filter--open': this.isActive
-            } }, index.h("digi-button", { key: 'b5a6b2aca44be78743d9f0df213b801395f09ae4', 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 }, index.h("i", { key: '38753316b8e1cdc24a977c835da398ff344b3d68', class: {
-                'digi-form-filter__toggle-button-indicator': true,
-                'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
-            } }), index.h("span", { key: 'bef6dc84b8439cb5bd45229f5e77b0a2bd6a97ad', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), index.h("digi-icon-chevron-down", { key: '9572d1ec8bc6f8ac50252be491131544fbb2c151', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: 'f2071068664d89a5510f2840a7d8912b654c56f4', 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
-            } }, index.h("div", { key: '3574702676988b2a0777564b343fdf6dc271177c', class: "digi-form-filter__scroll" }, index.h("fieldset", { key: '03098521d312f77170041c7240c1bfd1f9831107' }, this.afName ? (index.h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (index.h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), index.h("ul", { key: '532094b7579a8c7f60e87e4ee973f66b16cb7487', 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 (index.h("li", { class: "digi-form-filter__item", key: item.id }, index.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);
-                } })));
-        })))), index.h("div", { key: 'c7985ef9aec4f29899fc4ff829867fd43fa85c08', class: "digi-form-filter__footer" }, index.h("digi-button", { key: '06dca89dd7498a070c1046a97cdda36986bebded', 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 && (index.h("digi-button", { key: '863114cc93fd93a5fea02d114d60c64c86d29d8f', "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))))), index.h("div", { key: 'ac372d9c7e3a82886b6b692493bfcb536b52b5be', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, index.h("slot", { key: '5c1fc764d95c7928a84a13cfb57f9299e620e510' }))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "afCheckItems": [{
-                "syncCheckItems": 0
-            }],
-        "afListItems": [{
-                "handleListItems": 0
-            }],
-        "listItems": [{
-                "setupAccessibility": 0
-            }]
-    }; }
-};
-FormFilter.style = formFilterCss();
-
-exports.digi_form_filter = FormFilter;