@designsystem-se/af 39.4.0-beta.darkmode.1 → 39.5.0

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

@@ -0,0 +1,255 @@
+import { r as registerInstance, d as createEvent, h, a as Host, c as getElement } from './index-B8OxDoWx.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
+import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
+import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
+import { _ as _t } from './text-DsO1BTml.js';
+import './detectClosest.util-DwBvm-Nc.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) {
+        registerInstance(this, hostRef);
+        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.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('digi-form-filter');
+        /**
+         * Texten i rensaknappen
+         * @en Set the reset button text
+         */
+        this.afResetButtonText = _t.clear;
+        /**
+         * Döljer rensaknappen när värdet sätts till true
+         * @en Hides the reset button when set to true
+         */
+        this.afHideResetButton = false;
+        /**
+         * 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.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: '629ed6c227116a5fa43e0e2e4c90da6f15310b46' }, h("div", { key: '60e8979ca12ea06f48dac9103fed77a25a895b64', 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: 'f91142adf06d5320b5bd18f7e057ba3db67982a4', 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: '06b3942b320859323c70bef9a48b0170e62494b1', class: {
+                'digi-form-filter__toggle-button-indicator': true,
+                'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
+            } }), h("span", { key: '72654121dd476fde27a6dfc8dac7e0fa308da60a', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: 'a1d0c0155b0c5017cc85315134130b41697a6d54', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: '930be23958d57a8ec6b40e027f9729cb3297bc6c', 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: 'be2ff919debc13ccae9b55443b6ede7b20584a62', class: "digi-form-filter__scroll" }, h("fieldset", { key: 'e8e95989e36cefe37dc8d9ea35f733b721ba0925' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'ad8e66517cee5fe0c6ed26c016e23a00e62ee9ff', 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: '79448216684afafd5746362f923ca6cda0b3a136', class: "digi-form-filter__footer" }, h("digi-button", { key: '891b9ba1f286b1c9fc11c42855c41612fb3b84f4', 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: '11fa710bab35b7709c8063f143da9af0da6daaef', "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: '29f9d7299f89d564a616c302d9965e8431cbc3f8', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: 'a4b103b33602a14617884e95a28db8b958fcbbcd' }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afCheckItems": [{
+                "syncCheckItems": 0
+            }],
+        "afListItems": [{
+                "handleListItems": 0
+            }],
+        "listItems": [{
+                "setupAccessibility": 0
+            }]
+    }; }
+};
+FormFilter.style = formFilterCss();
+
+export { FormFilter as digi_form_filter };

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

@@ -1,6 +1,8 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-cJjrzQkn.js';
+import { r as registerInstance, d as createEvent, h, a as Host, c as getElement } from './index-B8OxDoWx.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
-import { b as FormInputType, a as FormInputButtonVariation, F as FormInputSearchVariation, B as ButtonType } from './form-input-type.enum-CN1mgrt1.js';
+import { F as FormInputSearchVariation } from './form-input-search-variation.enum-BvWKyXb_.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-BSJH8Lpg.js';
+import { B as ButtonType } from './button-type.enum-DShzaNrQ.js';
 import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
 import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
 import './detectClosest.util-DwBvm-Nc.js';
@@ -134,10 +136,10 @@ const FormInputSearch = class {
         };
     }
     render() {
-        return (h(Host, { key: '479760a36173d0a06d88a6c407c87543a6b13125', tabindex: -1 }, h("div", { key: '4e49bfd22f8191c07418f4e11b6328c53efbf8d8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'e4fdc40206a1bb9423b852e1f7e683ea8676a924', class: {
+        return (h(Host, { key: '0644a6dc56c3e6223d8150e6cac0410543b9001d', tabindex: -1 }, h("div", { key: '67b6bf12828abf4245dd9c06c32043965a2d880f', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '4c8c614a10dfa9bdbe0c3cd28dbdadd74a5be37b', 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: '3cd29d50fde3ddeb6b731969a51609688554cf75', 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: '26f2f3fbcd23a4e8ac3646f6f7d1cafd75126345', slot: "icon" }), this.afButtonText))))));
+            }, 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: '9e67c29ddca5c642e1c6c4464662c9172d75f474', 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: '0abfcf61703e2f8901caa567cd9efac74503dc8e', slot: "icon" }), this.afButtonText))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/digi-form-input.entry.js

@@ -0,0 +1,203 @@
+import { r as registerInstance, d as createEvent, h, a as Host, c as getElement } from './index-B8OxDoWx.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-BSJH8Lpg.js';
+import { F as FormInputMode, b as FormInputVariation, a as FormInputValidation } from './form-input-variation.enum-DfWZa2Wv.js';
+
+const formInputCss = () => `.sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}`;
+
+const FormInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.afOnDirty = createEvent(this, "afOnDirty", 7);
+        this.afOnTouched = createEvent(this, "afOnTouched", 7);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this.hasActiveValidationMessage = false;
+        this.dirty = false;
+        this.touched = false;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
+        this.afType = FormInputType.TEXT;
+        /**
+         * Sätter attributet 'inputmode'.
+         * @en Inputmode  type attribute
+         */
+        this.afInputmode = FormInputMode.DEFAULT;
+        /**
+         * Layout för hur inmatningsfältet ska visas då det finns en knapp
+         * @en Input layout when there is a button
+         */
+        this.afButtonVariation = FormInputButtonVariation.PRIMARY;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * @en Set input variation.
+         */
+        this.afVariation = FormInputVariation.MEDIUM;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator('digi-form-input');
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+         * @en Set input validation status
+         */
+        this.afValidation = FormInputValidation.NEUTRAL;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
+        this.afErrorMessageIsAlert = true;
+    }
+    onValueChanged(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+        if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
+            this._input.value = String(value !== null && value !== void 0 ? value : '');
+        }
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    afValidationTextWatch() {
+        this.setActiveValidationMessage();
+    }
+    /**
+     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
+     * @en Returns a reference to the input element. Handy for setting focus programmatically.
+     */
+    async afMGetFormControlElement() {
+        return this._input;
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+        this.setActiveValidationMessage();
+        this.setHasButton();
+    }
+    componentWillUpdate() {
+        this.setHasButton();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    setActiveValidationMessage() {
+        this.hasActiveValidationMessage = !!this.afValidationText;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-input--small': this.afVariation === FormInputVariation.SMALL,
+            'digi-form-input--medium': this.afVariation === FormInputVariation.MEDIUM,
+            'digi-form-input--large': this.afVariation === FormInputVariation.LARGE,
+            'digi-form-input--neutral': this.afValidation === FormInputValidation.NEUTRAL,
+            'digi-form-input--success': this.afValidation === FormInputValidation.SUCCESS,
+            'digi-form-input--error': this.afValidation === FormInputValidation.ERROR,
+            'digi-form-input--warning': this.afValidation === FormInputValidation.WARNING,
+            [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
+            [`digi-form-input--has-button-${this.hasButton}`]: true,
+            'digi-form-input--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === FormInputValidation.NEUTRAL)
+        };
+    }
+    blurHandler(e) {
+        const trimableTypes = [
+            FormInputType.TEXT,
+            FormInputType.EMAIL,
+            FormInputType.SEARCH,
+            FormInputType.TEL,
+            FormInputType.URL
+        ];
+        const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
+        if (shouldTrim && typeof e.target.value === 'string') {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                this.afValue = this.value = trimmedValue;
+                if (this._input) {
+                    this._input.value = trimmedValue;
+                }
+                // Emittar afOnInput så Angulars value accessor får det trimmade värdet
+                this.afOnInput.emit(e);
+            }
+        }
+        if (!this.touched) {
+            this.afOnTouched.emit(e);
+            this.touched = true;
+        }
+        this.afOnBlur.emit(e);
+    }
+    changeHandler(e) {
+        this.setActiveValidationMessage();
+        this.afOnChange.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    keyupHandler(e) {
+        this.afOnKeyup.emit(e);
+    }
+    inputHandler(e) {
+        this.afValue = this.value =
+            this.afType === FormInputType.NUMBER
+                ? parseFloat(e.target.value)
+                : e.target.value;
+        if (!this.dirty) {
+            this.afOnDirty.emit(e);
+            this.dirty = true;
+        }
+        this.setActiveValidationMessage();
+        this.afOnInput.emit(e);
+    }
+    setHasButton() {
+        this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
+    }
+    render() {
+        return (h(Host, { key: 'bc3d04d6ce2c7493463e25777c886a02aab33b60', tabindex: -1 }, h("div", { key: '4e7331cdfbeca168b993d4b2dbd3d6404cb55002', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '3a6b5f558655f055a547fbf5a9d4b37a1cdfd54d', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'e451db64601f98466d7bdd1914e4e207a1d090d6', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: '36db75eec2ec062a5cad58b03561f6ba64b00a2b', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR
+                ? 'true'
+                : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
+            ? {}
+            : { inputmode: this.afInputmode }))), h("slot", { key: 'cce7fa086fdb6996753b0c86e7e3a4e441c2f3d5', name: "button" })), h("div", { key: '233fb68dc6d2fe40e55024732a90750009bc1818', class: "digi-form-input__footer" }, h("div", { key: 'd5f2fab5f4c385f4b2dc10804e265d6c04d55dd4', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'bb2cd0ac275e22e95c6785f0d4c90ef37dfc6d7f', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }],
+        "afValidationText": [{
+                "afValidationTextWatch": 0
+            }]
+    }; }
+};
+FormInput.style = formInputCss();
+
+export { FormInput as digi_form_input };

package/dist/esm/digi-form-label_3.entry.js

@@ -0,0 +1,143 @@
+import { r as registerInstance, h, c as getElement } from './index-B8OxDoWx.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
+import { _ as _t } from './text-DsO1BTml.js';
+import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-B8hpiXmh.js';
+
+const formLabelCss = () => `.sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop);display:block;user-select:text;--webkit-user-select:text}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop);cursor:pointer}.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{cursor:text}`;
+
+const FormLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Set id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator('digi-form-label');
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter text för afRequired.
+         * @en Set text for afRequired.
+         */
+        this.afRequiredText = _t.required.toLowerCase();
+        /**
+         * Sätter text för afAnnounceIfOptional.
+         * @en Set text for afAnnounceIfOptional.
+         */
+        this.afAnnounceIfOptionalText = _t.optional.toLowerCase();
+    }
+    componentWillLoad() {
+        this.setLabelText();
+        this.validateFor();
+        this.handleSlotVisibility();
+    }
+    validateFor() {
+        if (this.afFor == null) {
+            logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
+        }
+    }
+    setLabelText() {
+        this.labelText = `${this.afLabel} ${this.requiredText}`;
+        if (!this.afLabel) {
+            logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
+        }
+    }
+    handleSlotVisibility() {
+        this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
+    }
+    get requiredText() {
+        if (this.afRequired && !this.afAnnounceIfOptional) {
+            return this.afRequiredText ? ` (${this.afRequiredText})` : '';
+        }
+        else if (!this.afRequired && this.afAnnounceIfOptional) {
+            return this.afAnnounceIfOptionalText
+                ? ` (${this.afAnnounceIfOptionalText})`
+                : '';
+        }
+        else {
+            return '';
+        }
+    }
+    render() {
+        return (h("div", { key: '78c3c9cc7609ede22abcd68c16514c85b52c945e', class: "digi-form-label" }, h("div", { key: '5bd7a74e6508c261f489716673f011391bf7c0d8', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '6952422ebe4e447857befae6116fd7336046dc1f', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '2da61e9396c9c20b40ee4d80c21ae96e2a491e8f', tabindex: "-1", class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '858d2ae39681662c278352e42b7bccb511279bd0', tabindex: "-1", class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: '7719bef7cfe38637a5ef4b71d5e9a6237ed48ff2', class: "digi-form-label__actions" }, h("slot", { key: '37bd2332a7d4e7fa15c4ff61a0cc26c92bed08d8', name: "actions" }))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afFor": [{
+                "validateFor": 0
+            }],
+        "afLabel": [{
+                "setLabelText": 0
+            }],
+        "afRequired": [{
+                "setLabelText": 0
+            }],
+        "afAnnounceIfOptional": [{
+                "setLabelText": 0
+            }]
+    }; }
+};
+FormLabel.style = formLabelCss();
+
+const formValidationMessageCss = () => `.sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}`;
+
+const FormValidationMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error' eller 'warning'.
+         * @en Set validation status
+         */
+        this.afVariation = FormValidationMessageVariation.SUCCESS;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-validation-message--success': this.afVariation === FormValidationMessageVariation.SUCCESS,
+            'digi-form-validation-message--error': this.afVariation === FormValidationMessageVariation.ERROR,
+            'digi-form-validation-message--warning': this.afVariation === FormValidationMessageVariation.WARNING
+        };
+    }
+    get icon() {
+        switch (this.afVariation) {
+            case FormValidationMessageVariation.SUCCESS:
+                return h("digi-icon-validation-success", null);
+            case FormValidationMessageVariation.ERROR:
+                return h("digi-icon-validation-error", null);
+            case FormValidationMessageVariation.WARNING:
+                return h("digi-icon-validation-warning", { class: "warning" });
+        }
+    }
+    render() {
+        return (h("div", { key: '5f010165e073249ebf394e341afdff8a5ed41db8', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: '6bff114f85afb3ec53bdf9c9eec43e1f369ab69a', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '51223bf120314df5505300b35f7c744f89a5e5ce', class: "digi-form-validation-message__text" }, h("slot", { key: '2379115a27540a6422fca6d868ce2fbb931c994f' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+FormValidationMessage.style = formValidationMessageCss();
+
+const iconValidationSuccessCss = () => `.sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-success-h svg.sc-digi-icon-validation-success{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconCheckCircle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '17db5bbcefc21fe324363bc54ed2a2617c9f925a', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: 'f895dcaa57b2ba196bc55382ad7cd12cc7da4aaf', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '95a3f9c27e32de783d5fe2cb7d3cb33d7ea44a3e' }, this.afDesc), h("path", { key: '50509fcf4cc01f7283178f2c0345b2f26613d2a1', class: "digi-icon-validation-success__shape", d: "M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconCheckCircle.style = iconValidationSuccessCss();
+
+export { FormLabel as digi_form_label, FormValidationMessage as digi_form_validation_message, IconCheckCircle as digi_icon_validation_success };