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

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

@@ -0,0 +1,257 @@
+'use strict';
+
+var index = require('./index-tbq85ezH.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;

package/dist/cjs/digi-form-input-search.cjs.entry.js

@@ -1,16 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-tbq85ezH.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var formInputType_enum = require('./form-input-type.enum-B2CsNSBg.js');
+var detectClickOutside_util = require('./detectClickOutside.util-DKR8Sdiw.js');
+var detectFocusOutside_util = require('./detectFocusOutside.util-BNHrXMJ2.js');
+require('./detectClosest.util-D1z809xM.js');
 
-const index = require('./index-7a477838.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const formInputType_enum = require('./form-input-type.enum-1fb2180a.js');
-const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
-const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
-require('./detectClosest.util-85b3507b.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(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}";
-const DigiFormInputSearchStyle0 = formInputSearchCss;
+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(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}`;
 
 const FormInputSearch = class {
     constructor(hostRef) {
@@ -28,26 +25,31 @@ const FormInputSearch = class {
         this.afOnClick = index.createEvent(this, "afOnClick", 7);
         this.afOnSubmitSearch = index.createEvent(this, "afOnSubmitSearch", 7);
         this.afOnReady = index.createEvent(this, "afOnReady", 3);
-        this.afLabel = undefined;
-        this.afLabelDescription = undefined;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
         this.afType = formInputType_enum.FormInputType.SEARCH;
+        /**
+         * 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;
-        this.afName = undefined;
+        /**
+         * 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-search');
-        this.value = undefined;
-        this.afValue = undefined;
-        this.afAutocomplete = undefined;
-        this.afAriaAutocomplete = undefined;
-        this.afAriaActivedescendant = undefined;
-        this.afAriaLabelledby = undefined;
-        this.afAriaDescribedby = undefined;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * @en Set input variation.
+         */
         this.afVariation = formInputType_enum.FormInputSearchVariation.MEDIUM;
-        this.afHideButton = undefined;
+        /**
+         * Sätter knappelementets attribut 'type'. Bör vara 'submit' eller 'button'
+         * @en Set button element's type attribute.
+         */
         this.afButtonType = formInputType_enum.ButtonType.SUBMIT;
-        this.afButtonText = undefined;
-        this.afButtonAriaLabel = undefined;
-        this.afButtonAriaLabelledby = undefined;
-        this.afAutofocus = undefined;
     }
     onValueChanged(value) {
         this.afValue = value;
@@ -140,10 +142,14 @@ const FormInputSearch = class {
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["onValueChanged"],
-        "afValue": ["onAfValueChanged"]
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }]
     }; }
 };
-FormInputSearch.style = DigiFormInputSearchStyle0;
+FormInputSearch.style = formInputSearchCss();
 
 exports.digi_form_input_search = FormInputSearch;

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

@@ -1,25 +1,37 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-tbq85ezH.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var formRadiogroupValidation_enum = require('./form-radiogroup-validation.enum-DBDbjF6N.js');
 
-const index = require('./index-7a477838.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const formRadiogroupValidation_enum = require('./form-radiogroup-validation.enum-03a17d4d.js');
-
-const formRadiogroupCss = ".sc-digi-form-radiogroup-h{display:block;width:fit-content}";
-const DigiFormRadiogroupStyle0 = formRadiogroupCss;
+const formRadiogroupCss = () => `.sc-digi-form-radiogroup-h{display:block;width:fit-content}`;
 
 const FormRadiogroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.afOnGroupChange = index.createEvent(this, "afOnGroupChange", 7);
-        this.radiobuttons = undefined;
+        this.radiobuttons = [];
+        /**
+         * 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-radiogroup');
-        this.afValue = undefined;
-        this.value = undefined;
+        /**
+         * Namnet på radiogruppen
+         * @en Radiogroup name
+         */
         this.afName = randomIdGenerator_util.randomIdGenerator('digi-form-radiogroup');
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+         * @en Set input validation status
+         */
         this.afValidation = formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL;
-        this.afValidationText = undefined;
+        /**
+         * 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;
     }
     OnAfValueChange(value) {
@@ -38,25 +50,39 @@ const FormRadiogroup = class {
      * @en Listens for when focus is set on the custom element and propagates it down to the first radionutton in the group.
      */
     focusOnGroup() {
-        const radioButtons = this.radiobuttons;
+        const radioButtons = this.getSlottedRadiobuttons();
         if (radioButtons.length > 0) {
             radioButtons[0].focus();
         }
     }
     radiobuttonChangeListener(e) {
-        if (Array.from(this.radiobuttons).includes(e.target)) {
-            e.preventDefault();
-            this.afValue = e.detail.target.value;
-            this.afOnGroupChange.emit(e.detail.target.value);
+        var _a, _b, _c;
+        const radio = this.getRadiobuttonFromEvent(e);
+        if (!radio) {
+            return;
         }
+        e.preventDefault();
+        const value = (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : radio.afValue;
+        this.afValue = value;
+        this.afOnGroupChange.emit(value);
     }
     componentDidLoad() {
         this.setRadiobuttons(this.value || this.afValue);
         if (this.value)
             this.afValue = this.value;
     }
+    getSlottedRadiobuttons() {
+        return Array.from(this.hostElement.querySelectorAll('digi-form-radiobutton'));
+    }
+    getRadiobuttonFromEvent(e) {
+        var _a;
+        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];
+        return ((_a = this.getSlottedRadiobuttons().find((radio) => radio === e.target ||
+            path.includes(radio) ||
+            radio.contains(e.target))) !== null && _a !== void 0 ? _a : undefined);
+    }
     setRadiobuttons(value) {
-        this.radiobuttons = this.hostElement.querySelectorAll('digi-form-radiobutton');
+        this.radiobuttons = this.getSlottedRadiobuttons();
         this.radiobuttons.forEach((r) => {
             r.afName = this.afName;
             if (value && r.afValue == value) {
@@ -65,16 +91,20 @@ const FormRadiogroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '7aa6f6bb84566148fa042a558bb0ba267e691df9', tabindex: -1 }, index.h("div", { key: '4b1002650100ea8f1bbbb043779a08dda374a25b', id: this.afId, class: {
+        return (index.h(index.Host, { key: '4dbf540c453ceae10ede282625b6cec774e38e7e', tabindex: -1 }, index.h("div", { key: '2c3b135f63fc23dd1cd3418e6191fb5fbf18bfce', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, index.h("digi-util-mutation-observer", { key: '497eb4a70127e75bc2e44a955efdf880ce2c9465', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, index.h("slot", { key: '82294fd122f1ef6439fb961d86fe1fae88af2f7b' }))), index.h("div", { key: '2e23ee3a7e77cfe441a500088106631a8e998948', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '8b7d829da48f9e33765586cccf2ddb449e52d2e5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, index.h("slot", { key: 'a30c5afdfac57eba9f4bbf99d649858be9fe2551', onSlotchange: () => this.setRadiobuttons(this.value || this.afValue) })), index.h("div", { key: '1c4a269da4da56c91c1792d95e2e51c41820e73e', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: 'ad4781c8cfe0bd5457f4d96d1acb8894ff7256be', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "afValue": ["OnAfValueChange"],
-        "value": ["OnValueChange"]
+        "afValue": [{
+                "OnAfValueChange": 0
+            }],
+        "value": [{
+                "OnValueChange": 0
+            }]
     }; }
 };
-FormRadiogroup.style = DigiFormRadiogroupStyle0;
+FormRadiogroup.style = formRadiogroupCss();
 
 exports.digi_form_radiogroup = FormRadiogroup;

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

@@ -1,50 +1,83 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-tbq85ezH.js');
+var typographyVariation_enum = require('./typography-variation.enum-4snUBTF7.js');
+require('./badge-notification-shape.enum-CEyEo2G5.js');
+require('./badge-status-variation.enum-XX8d--rj.js');
+require('./code-example-variation.enum-BCENTUV2.js');
+require('./form-input-type.enum-B2CsNSBg.js');
+require('./button-variation.enum-DkUalo9f.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');
+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');
+var layoutBlockVariation_enum = 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');
 
-const index = require('./index-7a477838.js');
-const typographyVariation_enum = require('./typography-variation.enum-ad1b2403.js');
-require('./badge-notification-shape.enum-ff802554.js');
-require('./badge-status-variation.enum-0a5adc21.js');
-require('./code-example-variation.enum-1611825e.js');
-require('./form-input-type.enum-1fb2180a.js');
-require('./button-variation.enum-bc521499.js');
-require('./calendar-week-view-heading-level.enum-fd0c841b.js');
-require('./bar-chart-variation.enum-a4e866b6.js');
-require('./code-variation.enum-c4a4e6fd.js');
-require('./expandable-accordion-header-level.enum-45483252.js');
-require('./expandable-faq-variation.enum-af923f49.js');
-require('./form-radiogroup-validation.enum-03a17d4d.js');
-require('./form-textarea-variation.enum-9c90d40f.js');
-const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.js');
-require('./list-type.enum-aea4d012.js');
-require('./loader-skeleton-variation.enum-d52ba55e.js');
-require('./loader-spinner-size.enum-db2973f0.js');
-require('./media-figure-alignment.enum-3885aba5.js');
-require('./navigation-sidebar-variation.enum-1c0c3064.js');
-require('./progress-circle-role.enum-b7fdcf0c.js');
-require('./progress-list-item-variation.enum-90e4c874.js');
-require('./progress-list-variation.enum-06d5ce27.js');
-require('./progressbar-variation.enum-aff9fa80.js');
-require('./quote-image-inner-position.enum-e64e7a6d.js');
-require('./table-variation.enum-25df2ad7.js');
-require('./tag-size.enum-387c516c.js');
-require('./tools-feedback-banner-type.enum-de373ba0.js');
-require('./tools-feedback-rating-variation.enum-2f71e84d.js');
-require('./typography-meta-variation.enum-13ac3538.js');
-require('./typography-time-variation.enum-bce1d87e.js');
-require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
-
-const formReceiptCss = ".sc-digi-form-receipt-h{--digi--receipt--background-color:var(--digi--color--background--pop-out);--digi--receipt--margin:var(--digi--padding--small);--digi--receipt--padding-top:var(--digi--padding--large);--digi--receipt--padding-bottom:var(--digi--padding--largest);--digi--receipt--padding-top--desktop:var(--digi--padding--largest-2);--digi--receipt--padding-bottom--desktop:var(--digi--padding--largest-3);--digi--receipt--padding-horizontal:var(--digi--padding--medium);--digi--receipt--heading--color:var(--digi--color--text--primary);--digi--receipt--heading--font-size:var(--digi--typography--heading-2--font-size--mobile);--digi--receipt--heading--font-size--desktop:var(--digi--typography--heading-1--font-size--desktop-large);--digi--receipt--heading--font-weight:var(--digi--typography--heading-2--font-weight--mobile);--digi--receipt--heading--font-weight--desktop:var(--digi--typography--heading-1--font-weight--desktop);--digi--receipt--heading--font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{background-color:var(--digi--receipt--background-color);display:grid;padding-top:var(--digi--receipt--padding-top);padding-bottom:var(--digi--receipt--padding-bottom)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{padding-top:var(--digi--receipt--padding-top--desktop);padding-bottom:var(--digi--receipt--padding-bottom--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt--grid.sc-digi-form-receipt{padding-left:var(--digi--receipt--padding-horizontal);padding-right:var(--digi--receipt--padding-horizontal)}.sc-digi-form-receipt-h .digi-form-receipt--center.sc-digi-form-receipt .digi-form-receipt__content.sc-digi-form-receipt{display:flex;flex-direction:column;align-items:center}.sc-digi-form-receipt-h .digi-form-receipt__content.sc-digi-form-receipt{grid-column:1;grid-row:1}.sc-digi-form-receipt-h .digi-form-receipt__body.sc-digi-form-receipt{display:flex;flex-direction:column}.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-family:var(--digi--receipt--heading--font-family);font-size:var(--digi--receipt--heading--font-size);font-weight:var(--digi--receipt--heading--font-weight);margin-top:0;margin-bottom:0;display:block;color:var(--digi--receipt--heading--color)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-size:var(--digi--receipt--heading--font-size--desktop);font-weight:var(--digi--receipt--heading--font-weight--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.125rem;height:1.75rem;margin-bottom:var(--digi--receipt--margin)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.75rem;height:2.25rem}}.sc-digi-form-receipt-h .digi-form-receipt__infographic-primary.sc-digi-form-receipt{fill:var(--digi--color--infographic--brand--primary)}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper.sc-digi-form-receipt{display:flex;flex-direction:column;gap:1rem}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper-has-content.sc-digi-form-receipt{padding-top:1.5rem}.sc-digi-form-receipt-s .digi-form-receipt__slot-wrapper-center-text{text-align:center}";
-const DigiFormReceiptStyle0 = formReceiptCss;
+const formReceiptCss = () => `.sc-digi-form-receipt-h{--digi--receipt--background-color:var(--digi--color--background--pop-out);--digi--receipt--margin:var(--digi--padding--small);--digi--receipt--padding-top:var(--digi--padding--large);--digi--receipt--padding-bottom:var(--digi--padding--largest);--digi--receipt--padding-top--desktop:var(--digi--padding--largest-2);--digi--receipt--padding-bottom--desktop:var(--digi--padding--largest-3);--digi--receipt--padding-horizontal:var(--digi--padding--medium);--digi--receipt--heading--color:var(--digi--color--text--primary);--digi--receipt--heading--font-size:var(--digi--typography--heading-2--font-size--mobile);--digi--receipt--heading--font-size--desktop:var(--digi--typography--heading-1--font-size--desktop-large);--digi--receipt--heading--font-weight:var(--digi--typography--heading-2--font-weight--mobile);--digi--receipt--heading--font-weight--desktop:var(--digi--typography--heading-1--font-weight--desktop);--digi--receipt--heading--font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{background-color:var(--digi--receipt--background-color);display:grid;padding-top:var(--digi--receipt--padding-top);padding-bottom:var(--digi--receipt--padding-bottom)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt.sc-digi-form-receipt{padding-top:var(--digi--receipt--padding-top--desktop);padding-bottom:var(--digi--receipt--padding-bottom--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt--grid.sc-digi-form-receipt{padding-left:var(--digi--receipt--padding-horizontal);padding-right:var(--digi--receipt--padding-horizontal)}.sc-digi-form-receipt-h .digi-form-receipt--center.sc-digi-form-receipt .digi-form-receipt__content.sc-digi-form-receipt{display:flex;flex-direction:column;align-items:center}.sc-digi-form-receipt-h .digi-form-receipt__content.sc-digi-form-receipt{grid-column:1;grid-row:1}.sc-digi-form-receipt-h .digi-form-receipt__body.sc-digi-form-receipt{display:flex;flex-direction:column}.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-family:var(--digi--receipt--heading--font-family);font-size:var(--digi--receipt--heading--font-size);font-weight:var(--digi--receipt--heading--font-weight);margin-top:0;margin-bottom:0;display:block;color:var(--digi--receipt--heading--color)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__heading.sc-digi-form-receipt{font-size:var(--digi--receipt--heading--font-size--desktop);font-weight:var(--digi--receipt--heading--font-weight--desktop)}}.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.125rem;height:1.75rem;margin-bottom:var(--digi--receipt--margin)}@media (min-width: 61.9375rem){.sc-digi-form-receipt-h .digi-form-receipt__icon.sc-digi-form-receipt{width:2.75rem;height:2.25rem}}.sc-digi-form-receipt-h .digi-form-receipt__infographic-primary.sc-digi-form-receipt{fill:var(--digi--color--infographic--brand--primary)}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper.sc-digi-form-receipt{display:flex;flex-direction:column;gap:1rem}.sc-digi-form-receipt-h .digi-form-receipt__slot-wrapper-has-content.sc-digi-form-receipt{padding-top:1.5rem}.sc-digi-form-receipt-s .digi-form-receipt__slot-wrapper-center-text{text-align:center}`;
 
 const FormReceipt = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Sätter texten som ska visas
+         * @en Set text to be shown
+         */
         this.afText = '';
+        /**
+         * Sätter variationen på kortet. Kan vara 'fullwidth' eller 'grid'.
+         * @en Set card variation. Can be 'fullwidth' or 'grid'.
+         */
         this.afVariation = typographyVariation_enum.FormReceiptVariation.FULLWIDTH;
+        /**
+         * Sätter textsnittsjusteringen. Kan vara 'center' eller 'start'.
+         * @en Set font alignment. Can be 'center' or 'start'.
+         */
         this.afType = typographyVariation_enum.FormReceiptType.CENTER;
+        /**
+         * Sätter textens vikt (h1-h6)
+         * @en Set text level (h1-h6)
+         */
         this.afHeadingLevel = typographyVariation_enum.FormReceiptHeadingLevel.H2;
+        /**
+         * Kollar ifall default slot är tom
+         * @en Check if default slot is empty
+         */
         this.hasDefaultSlot = false;
     }
     componentDidLoad() {
@@ -88,10 +121,10 @@ const FormReceipt = class {
         return (index.h("div", { class: "digi-form-receipt__content" }, index.h("svg", { class: "digi-form-receipt__icon", "aria-hidden": "true", version: "1.1", viewBox: "0 0 35 29" }, index.h("title", null, "Check mark"), index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("g", { transform: "translate(-170 -32)" }, index.h("g", { transform: "translate(170 32.325)" }, index.h("g", { transform: "translate(0 .77495)" }, index.h("mask", { id: "b", fill: "white" }, index.h("polygon", { points: "0 0 26.685 0 26.685 27.689 0 27.689" })), index.h("path", { d: "m13.711 27.689c-7.5602 0-13.711-6.2103-13.711-13.844 0-7.6345 6.151-13.845 13.711-13.845 3.1693 0 6.2611 1.1179 8.7048 3.1478l-1.5894 1.9509c-1.9972-1.6592-4.5241-2.5724-7.1155-2.5724-6.181 0-11.209 5.0773-11.209 11.319 0 6.2406 5.0283 11.318 11.209 11.318 4.7924 0 9.0551-3.0733 10.607-7.6478l2.3668 0.81853c-1.8983 5.5958-7.1124 9.3556-12.974 9.3556", fill: "#333", mask: "url(#b)" })), index.h("g", { transform: "translate(4.2177)" }, index.h("mask", { id: "a", fill: "white" }, index.h("polygon", { points: "0 0 30.425 0 30.425 23.496 0 23.496" })), index.h("path", { class: "digi-form-receipt__infographic-primary", d: "m30.191 3.2545-19.95 20.007c-0.31227 0.31253-0.81758 0.31253-1.1292 0l-8.878-8.9033c-0.31164-0.31316-0.31164-0.81992 0-1.1324l1.8818-1.8878c0.31164-0.31253 0.81758-0.31253 1.1292 0l6.4315 6.4499 17.504-17.553c0.31164-0.31316 0.81695-0.31316 1.1292 0l1.8818 1.8872c0.31164 0.31253 0.31164 0.81929 0 1.1324", fill: "#95C13E", mask: "url(#a)" })))))), index.h(this.afHeadingLevel, { class: "digi-form-receipt__heading", tabIndex: -1 }, this.afText), this.slotContent));
     }
     render() {
-        return (index.h("div", { key: 'a657922108a6318f7abfc6a3b942dea48ec77b33', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === typographyVariation_enum.FormReceiptVariation.FULLWIDTH ? (index.h("digi-layout-block", { afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
+        return (index.h("div", { key: 'ca17434bdc0109f95b0258ec434c7d5cf63c4115', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === typographyVariation_enum.FormReceiptVariation.FULLWIDTH ? (index.h("digi-layout-block", { afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
     }
     get hostElement() { return index.getElement(this); }
 };
-FormReceipt.style = DigiFormReceiptStyle0;
+FormReceipt.style = formReceiptCss();
 
 exports.digi_form_receipt = FormReceipt;