@designsystem-se/af 36.0.3 → 37.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "36.0.3",
+  "version": "37.0.1",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",

package/dist/cjs/button-size.enum-1fd86b9e.js

@@ -1,7 +0,0 @@
-'use strict';
-
-exports.ButtonSize = void 0;
-(function (ButtonSize) {
-    ButtonSize["SMALL"] = "small";
-    ButtonSize["MEDIUM"] = "medium";
-})(exports.ButtonSize || (exports.ButtonSize = {}));

package/dist/cjs/button-type.enum-406723db.js

@@ -1,8 +0,0 @@
-'use strict';
-
-exports.ButtonType = void 0;
-(function (ButtonType) {
-    ButtonType["BUTTON"] = "button";
-    ButtonType["SUBMIT"] = "submit";
-    ButtonType["RESET"] = "reset";
-})(exports.ButtonType || (exports.ButtonType = {}));

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

@@ -1,533 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7a477838.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const buttonSize_enum = require('./button-size.enum-1fd86b9e.js');
-const buttonType_enum = require('./button-type.enum-406723db.js');
-const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
-const logger_util = require('./logger.util-fdafc086.js');
-const text = require('./text-65b1b58c.js');
-const formSelectVariation_enum = require('./form-select-variation.enum-528c1bf0.js');
-const formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-855ae0be.js');
-
-const buttonCss = ".sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--background--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--focus:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--active:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--secondary--default:var(--digi--color--background--interactive--default--secondary);--digi--button--color--background--secondary--hover:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--focus:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--active:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--hover:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--focus:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--active:var(--digi--color--text--interactive--secondary);--digi--button--color--text--secondary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--hover:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--focus:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--active:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--function--default:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--hover:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--focus:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--active:var(--digi--color--text--interactive--primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--border--primary--focus:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--active:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--secondary--default:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--hover:var(--digi--color--border--interactive--hover--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--active:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--hover:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--focus:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--active:var(--digi--color--icon--secondary);--digi--button--color--icon--secondary--default:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--hover:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--focus:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--active:var(--digi--color--icon--brand-primary);--digi--button--color--icon--function--default:var(--digi--color--icon--cta);--digi--button--color--icon--function--hover:var(--digi--color--icon--cta);--digi--button--color--icon--function--focus:var(--digi--color--icon--cta);--digi--button--color--icon--function--active:var(--digi--color--icon--cta);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--primary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--primary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--primary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--primary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--primary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--primary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--secondary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--secondary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--secondary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--secondary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--secondary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--secondary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--secondary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--secondary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--secondary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--secondary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--function--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--function--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--function--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--function--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--function--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--function--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}@media (any-hover: hover){.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(--digi--button--text-align--full-width);--digi--button--justify-content--default:var(--digi--button--justify-content--full-width)}";
-const DigiButtonStyle0 = buttonCss;
-
-const Button = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afOnClick = index.createEvent(this, "afOnClick", 7);
-        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
-        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
-        this.afOnReady = index.createEvent(this, "afOnReady", 3);
-        this.hasIcon = undefined;
-        this.hasIconSecondary = undefined;
-        this.isFullSize = undefined;
-        this.afSize = buttonSize_enum.ButtonSize.MEDIUM;
-        this.afTabindex = undefined;
-        this.afVariation = buttonVariation_enum.ButtonVariation.PRIMARY;
-        this.afType = buttonType_enum.ButtonType.BUTTON;
-        this.afId = randomIdGenerator_util.randomIdGenerator('digi-button');
-        this.afAriaLabel = undefined;
-        this.afAriaLabelledby = undefined;
-        this.afAriaControls = undefined;
-        this.afForm = undefined;
-        this.afAriaPressed = undefined;
-        this.afAriaExpanded = undefined;
-        this.afAriaHaspopup = undefined;
-        this.afAriaCurrent = undefined;
-        this.afRole = undefined;
-        this.afAriaChecked = undefined;
-        this.afLang = undefined;
-        this.afDir = undefined;
-        this.afFullWidth = false;
-        this.afAutofocus = undefined;
-        this.afInputRef = undefined;
-    }
-    fullWidthHandler() {
-        this.isFullSize = this.afFullWidth;
-    }
-    /**
-     * Hämta en referens till buttonelementet. Bra för att t.ex. sätta fokus programmatiskt.
-     * @en Returns a reference to the button element. Handy for setting focus programmatically.
-     */
-    async afMGetButtonElement() {
-        return this._button;
-    }
-    componentWillLoad() {
-        this.setHasIcon();
-        this.fullWidthHandler();
-    }
-    componentWillUpdate() {
-        this.setHasIcon();
-    }
-    componentDidLoad() {
-        this.afOnReady.emit();
-    }
-    setHasIcon() {
-        const icon = !!this.hostElement.querySelector('[slot="icon"]');
-        const iconSecondary = !!this.hostElement.querySelector('[slot="icon-secondary"]');
-        if (icon) {
-            this.hasIcon = icon;
-        }
-        if (iconSecondary) {
-            this.hasIconSecondary = iconSecondary;
-        }
-    }
-    get cssModifiers() {
-        return {
-            [`digi-button--variation-${this.afVariation}`]: !!this.afVariation,
-            [`digi-button--size-${this.afSize}`]: !!this.afSize,
-            'digi-button--icon': this.hasIcon,
-            'digi-button--icon-secondary': this.hasIconSecondary,
-            'digi-button--full-width': this.isFullSize
-        };
-    }
-    get pressedState() {
-        if (this.afAriaPressed === null || this.afAriaPressed === undefined) {
-            return;
-        }
-        return this.afAriaPressed ? 'true' : 'false';
-    }
-    get expandedState() {
-        if (this.afAriaExpanded === null || this.afAriaExpanded === undefined) {
-            return;
-        }
-        return this.afAriaExpanded ? 'true' : 'false';
-    }
-    get hasPopup() {
-        if (this.afAriaHaspopup === null || this.afAriaHaspopup === undefined) {
-            return;
-        }
-        return this.afAriaHaspopup ? 'true' : 'false';
-    }
-    clickHandler(e) {
-        this.afOnClick.emit(e);
-    }
-    focusHandler(e) {
-        this.afOnFocus.emit(e);
-    }
-    blurHandler(e) {
-        this.afOnBlur.emit(e);
-    }
-    render() {
-        return (index.h(index.Host, { key: '3a398d75ad83e3caa9ec54928544d5bf8315d30f' }, index.h("button", { key: '2159552d7e8064acbb6da5c02c28ead3d4985e85', class: Object.assign({ 'digi-button': true }, this.cssModifiers), type: this.afType, role: this.afRole, ref: (el) => {
-                var _a, _b, _c;
-                this._button = el;
-                (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
-                // Stencil has a bug wiith form attribute so we need to set it like this
-                // https://github.com/ionic-team/stencil/issues/2703
-                this.afForm
-                    ? (_b = this._button) === null || _b === void 0 ? void 0 : _b.setAttribute('form', this.afForm)
-                    : (_c = this._button) === null || _c === void 0 ? void 0 : _c.removeAttribute('form');
-            }, id: this.afId, tabindex: this.afTabindex, "aria-label": this.afAriaLabel, "aria-labelledby": this.afAriaLabelledby, "aria-controls": this.afAriaControls, "aria-pressed": this.pressedState, "aria-expanded": this.expandedState, "aria-haspopup": this.hasPopup, "aria-current": this.afAriaCurrent, "aria-checked": this.afAriaChecked, onClick: (e) => this.clickHandler(e), onFocus: (e) => this.focusHandler(e), onBlur: (e) => this.blurHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null, form: this.afForm, lang: this.afLang, dir: this.afDir }, this.hasIcon && (index.h("span", { key: '1188d5cb005a51e4e065b70663d06877db3a1477', class: "digi-button__icon" }, index.h("slot", { key: 'f90319563c18e1f82fa13f478b4d4d13ce3e9bf7', name: "icon" }))), index.h("span", { key: '17dce8eed2e845ca6166cf85a1c0252c2c0b8037', class: "digi-button__text" }, index.h("slot", { key: '2f637e48b837ecd0f0f2333349f328c497aee650' })), this.hasIconSecondary && (index.h("span", { key: '49ffd3361b0cc00c074e1ce332dab2de33127fcc', class: "digi-button__icon digi-button__icon--secondary" }, index.h("slot", { key: '367d3ba37e2fd0b7e83d600f35d02d4df303c1c0', name: "icon-secondary" }))))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "afFullWidth": ["fullWidthHandler"]
-    }; }
-};
-Button.style = DigiButtonStyle0;
-
-const formLabelCss = ".sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}";
-const DigiFormLabelStyle0 = formLabelCss;
-
-const FormLabel = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.labelText = undefined;
-        this.hasActionSlot = undefined;
-        this.afLabel = undefined;
-        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-label');
-        this.afFor = undefined;
-        this.afDescription = undefined;
-        this.afRequired = undefined;
-        this.afAnnounceIfOptional = false;
-        this.afRequiredText = text._t.required.toLowerCase();
-        this.afAnnounceIfOptionalText = text._t.optional.toLowerCase();
-    }
-    componentWillLoad() {
-        this.setLabelText();
-        this.validateFor();
-        this.handleSlotVisibility();
-    }
-    validateFor() {
-        if (this.afFor == null) {
-            logger_util.logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
-        }
-    }
-    setLabelText() {
-        this.labelText = `${this.afLabel} ${this.requiredText}`;
-        if (!this.afLabel) {
-            logger_util.logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
-        }
-    }
-    handleSlotVisibility() {
-        this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
-    }
-    get requiredText() {
-        if (this.afRequired && !this.afAnnounceIfOptional) {
-            return this.afRequiredText ? ` (${this.afRequiredText})` : '';
-        }
-        else if (!this.afRequired && this.afAnnounceIfOptional) {
-            return this.afAnnounceIfOptionalText
-                ? ` (${this.afAnnounceIfOptionalText})`
-                : '';
-        }
-        else {
-            return '';
-        }
-    }
-    render() {
-        return (index.h("div", { key: '24ae333ab5edc928ce4d26e6e4da0f642617792a', class: "digi-form-label" }, index.h("div", { key: 'b1a5073a7c9883b13a86f741b865c3b368c1d02b', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '4dd98d11699d82e0e6b5f1127ca0e97382dc45d1', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: 'a8c1b2cf89d24625e3c13a93bac5fd144d95a3cb', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: '4a82c714e6b4f3189772d44bd5748c830252a8d5', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: 'd07f90e8e0a8ba9061686bf7cc331480091fbb33', class: "digi-form-label__actions" }, index.h("slot", { key: '7c5f1750217d9666a6543044e6dbb29ee4839940', name: "actions" }))))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "afFor": ["validateFor"],
-        "afLabel": ["setLabelText"],
-        "afRequired": ["setLabelText"],
-        "afAnnounceIfOptional": ["setLabelText"]
-    }; }
-};
-FormLabel.style = DigiFormLabelStyle0;
-
-const formSelectCss = ".sc-digi-form-select-h{--digi--form-select--background--empty:var(--digi--color--background--interactive--default--secondary);--digi--form-select--background--neutral:var(--digi--color--background--interactive--default--secondary);--digi--form-select--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-select--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-select--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-select--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-select--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-select--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-select--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-select--select-wrapper--position:relative;--digi--form-select--select--height--small:var(--digi--input-height--small);--digi--form-select--select--height--medium:var(--digi--input-height--medium);--digi--form-select--select--height--large:var(--digi--input-height--large);--digi--form-select--select--border-radius:var(--digi--border-radius--input);--digi--form-select--select--padding:0 var(--digi--gutter--medium);--digi--form-select--select--padding--inline-end:var(--digi--padding--large);--digi--form-select--select--border-width--neutral:var(--digi--border-width--input-regular);--digi--form-select--select--border-width--success:var(--digi--border-width--input-validation);--digi--form-select--select--border-width--error:var(--digi--border-width--input-validation);--digi--form-select--select--border-width--warning:var(--digi--border-width--input-validation);--digi--form-select--select--width:100%;--digi--form-select--select--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select--select-option--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select--label--margin-bottom:var(--digi--gutter--medium);--digi--form-select--icon--inline-end:0.75rem;--digi--form-select--icon--top:50%;--digi--form-select--icon--transform:translateY(-50%);--digi--form-select--icon--color:var(--digi--color--icon--primary);--digi--form-select--footer--margin-top:var(--digi--gutter--medium)}.sc-digi-form-select-h .digi-form-select.sc-digi-form-select{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-select-h .digi-form-select--neutral.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--neutral);--BORDER-COLOR:var(--digi--form-select--border-color--neutral);--BACKGROUND:var(--digi--form-select--background--neutral)}.sc-digi-form-select-h .digi-form-select--success.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--success);--BORDER-COLOR:var(--digi--form-select--border-color--success);--BACKGROUND:var(--digi--form-select--background--success)}.sc-digi-form-select-h .digi-form-select--warning.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--warning);--BORDER-COLOR:var(--digi--form-select--border-color--warning);--BACKGROUND:var(--digi--form-select--background--warning)}.sc-digi-form-select-h .digi-form-select--error.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--error);--BORDER-COLOR:var(--digi--form-select--border-color--error);--BACKGROUND:var(--digi--form-select--background--error)}.sc-digi-form-select-h .digi-form-select--small.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--small)}.sc-digi-form-select-h .digi-form-select--medium.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--medium)}.sc-digi-form-select-h .digi-form-select--large.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--large)}.sc-digi-form-select-h .digi-form-select--empty.sc-digi-form-select:not(:focus-within){--BACKGROUND:var(--digi--form-select--background--empty)}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select{appearance:none;width:var(--digi--form-select--select--width);padding:var(--digi--form-select--select--padding);padding-inline-end:var(--digi--form-select--select--padding--inline-end);height:var(--HEIGHT);border:var(--BORDER-WIDTH) solid;border-radius:var(--digi--form-select--select--border-radius);border-color:var(--BORDER-COLOR);cursor:pointer;font-size:var(--digi--form-select--select--font-size);color:var(--digi--color--text--primary);background:var(--BACKGROUND);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-select-h .digi-form-select__select-wrapper.sc-digi-form-select{position:var(--digi--form-select--select-wrapper--position)}.sc-digi-form-select-h .digi-form-select__select-option.sc-digi-form-select{font-size:var(--digi--form-select--select-option--font-size)}@media (min-width: 48rem){.sc-digi-form-select-h .digi-form-select__select-option.sc-digi-form-select{--digi--form-select--select-option--font-size:var(--digi--typography--font-size--l)}}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select::-ms-expand{display:none}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-form-select-h .digi-form-select__icon.sc-digi-form-select{position:absolute;inset-inline-end:var(--digi--form-select--icon--inline-end);inset-block-start:var(--digi--form-select--icon--top);transform:var(--digi--form-select--icon--transform);pointer-events:none;color:var(--digi--form-select--icon--color)}.digi-form-select--neutral.sc-digi-form-select .digi-form-select__footer.sc-digi-form-select{position:absolute}";
-const DigiFormSelectStyle0 = formSelectCss;
-
-const FormSelect = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afOnChange = index.createEvent(this, "afOnChange", 7);
-        this.afOnSelect = index.createEvent(this, "afOnSelect", 7);
-        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
-        this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
-        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
-        this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
-        this.afOnReady = index.createEvent(this, "afOnReady", 3);
-        this.optionItems = [];
-        this.dirty = false;
-        this.touched = false;
-        this.hasPlaceholder = false;
-        this.afLabel = undefined;
-        this.afAriaLabel = undefined;
-        this.afRequired = undefined;
-        this.afRequiredText = undefined;
-        this.afPlaceholder = undefined;
-        this.afAnnounceIfOptional = false;
-        this.afAnnounceIfOptionalText = undefined;
-        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-select');
-        this.afName = undefined;
-        this.afDescription = undefined;
-        this.value = undefined;
-        this.afValue = undefined;
-        this.afDisableValidation = undefined;
-        this.afVariation = formSelectVariation_enum.FormSelectVariation.MEDIUM;
-        this.afValidation = formSelectVariation_enum.FormSelectValidation.NEUTRAL;
-        this.afValidationText = undefined;
-        this.afAutofocus = undefined;
-        this.afErrorMessageIsAlert = true;
-    }
-    onValueChanged(value) {
-        this.afValue = value;
-    }
-    onAfValueChanged(value) {
-        this.value = value;
-    }
-    get errorMessageIsAlert() {
-        return (this.afErrorMessageIsAlert !== false &&
-            this.afErrorMessageIsAlert !== 'false');
-    }
-    getOptions() {
-        this.checkIfPlaceholder();
-        const options = this._observer.children;
-        if (!options || options.length <= 0) {
-            logger_util.logger.warn(`The slot contains no option elements.`, this.hostElement);
-            return;
-        }
-        this.optionItems = [...Array.from(options)]
-            .filter((el) => el.tagName.toLowerCase() === 'option')
-            .map((el) => {
-            return {
-                value: el['value'],
-                text: el['text']
-            };
-        });
-    }
-    checkIfPlaceholder() {
-        this.hasPlaceholder = !!this.afPlaceholder;
-    }
-    componentWillLoad() {
-        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
-    }
-    componentDidLoad() {
-        this.getOptions();
-        this.afOnReady.emit();
-    }
-    /**
-     * Returnerar en referens till formulärkontrollelementet.
-     * @en Returns a reference to the form control element.
-     */
-    async afMGetFormControlElement() {
-        return this._select;
-    }
-    /**
-     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet.
-     * @en Listens for when focus is set on the custom element and propagates it down to the actual select element.
-     */
-    focusOnInput() {
-        var _a;
-        (_a = this._select) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    get cssModifiers() {
-        return {
-            'digi-form-select--small': this.afVariation === formSelectVariation_enum.FormSelectVariation.SMALL,
-            'digi-form-select--medium': this.afVariation === formSelectVariation_enum.FormSelectVariation.MEDIUM,
-            'digi-form-select--large': this.afVariation === formSelectVariation_enum.FormSelectVariation.LARGE,
-            'digi-form-select--neutral': this.afValidation === formSelectVariation_enum.FormSelectValidation.NEUTRAL,
-            'digi-form-select--success': this.afValidation === formSelectVariation_enum.FormSelectValidation.SUCCESS,
-            'digi-form-select--warning': this.afValidation === formSelectVariation_enum.FormSelectValidation.WARNING,
-            'digi-form-select--error': this.afValidation === formSelectVariation_enum.FormSelectValidation.ERROR,
-            'digi-form-select--empty': !this.afValue &&
-                (!this.afValidation ||
-                    this.afValidation === formSelectVariation_enum.FormSelectValidation.NEUTRAL)
-        };
-    }
-    changeHandler(e) {
-        if (!this.dirty) {
-            this.afOnDirty.emit(e);
-            this.dirty = true;
-        }
-        this.value = this.afValue = e.target.value;
-        this.afOnChange.emit(e);
-    }
-    selectHandler(e) {
-        this.value = this.afValue = e.target.value;
-        this.afOnSelect.emit(e);
-    }
-    focusHandler(e) {
-        this.afOnFocus.emit(e);
-    }
-    focusoutHandler(e) {
-        this.afOnFocusout.emit(e);
-    }
-    blurHandler(e) {
-        this.afOnBlur.emit(e);
-    }
-    getSelectedItem(option) {
-        return this.afValue == option.value;
-    }
-    showValidation() {
-        return !this.afDisableValidation &&
-            this.afValidation !== formSelectVariation_enum.FormSelectValidation.NEUTRAL &&
-            this.afValidationText
-            ? true
-            : false;
-    }
-    render() {
-        return (index.h(index.Host, { key: 'd0422f1a779704cd2e9192f81199c58738c6f4db', tabindex: -1 }, index.h("div", { key: 'f6a49628a7d5d3d2d633e816aaf260242478fc4c', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, index.h("div", { key: '755b1b576bb8847570426d982d1a3445fb44edff', class: "digi-form-select__label-group" }, index.h("digi-form-label", { key: 'eda13cccb65792193b318bf9c21bd0b52384dbc5', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), index.h("div", { key: '0ae5338fd5aa2b7fffe60935ddae9fec0cbaf379', class: "digi-form-select__select-wrapper" }, index.h("select", { key: 'bd758e92e3fb977be5bad8530062d9b5c71f7e11', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === formSelectVariation_enum.FormSelectValidation.ERROR
-                ? 'true'
-                : 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (index.h("option", { key: '85d60c1b04d3a48773d7a25e79d6e6896abc4334', class: {
-                'digi-form-select__select-option': true,
-                'digi-form-select__select-option--initial-value': true
-            }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index$1) => {
-            return (index.h("option", { key: index$1, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
-        })), index.h("digi-icon-input-select-marker", { key: 'e9ab4ef12562679223aaa7f60e20936d2a1e078e', class: "digi-form-select__icon", slot: "icon" })), index.h("digi-util-mutation-observer", { key: '188b27eb0a27f9bb81eb8211e67df8d8c54b7485', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
-                e.stopImmediatePropagation();
-                this.getOptions();
-            } }, index.h("slot", { key: '70b2eeb015a08bfc2379f30eb4cf7e6281066d56' })), index.h("div", { key: 'd8aa1c5d5de3e847136d29b14a236d6cf73ecad4', class: "digi-form-select__footer" }, index.h("div", { key: '27f8450662d599b55aa22a3a82f268de8ecd7cbc', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (index.h("digi-form-validation-message", { key: 'e7f512be5ea01c8bb2c6a1e20bacafd43acf2770', "af-variation": this.afValidation }, this.afValidationText)))))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["onValueChanged"],
-        "afValue": ["onAfValueChanged"]
-    }; }
-};
-FormSelect.style = DigiFormSelectStyle0;
-
-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 DigiFormValidationMessageStyle0 = formValidationMessageCss;
-
-const FormValidationMessage = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afVariation = formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS;
-    }
-    get cssModifiers() {
-        return {
-            'digi-form-validation-message--success': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS,
-            'digi-form-validation-message--error': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR,
-            'digi-form-validation-message--warning': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING
-        };
-    }
-    get icon() {
-        switch (this.afVariation) {
-            case formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS:
-                return index.h("digi-icon-validation-success", null);
-            case formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR:
-                return index.h("digi-icon-validation-error", null);
-            case formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING:
-                return index.h("digi-icon-validation-warning", { class: "warning" });
-        }
-    }
-    render() {
-        return (index.h("div", { key: 'b15c3cca06f4e015c7006bae470876b246b6ce06', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: '1e9378eb8b193c35e24e700ef865fb44ae4fb28b', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: '6e72b4f07b641d63603914a33720d6b09a5bd44f', class: "digi-form-validation-message__text" }, index.h("slot", { key: '74cfa597bf12b19fb2dbef039eac148358ff2635' }))));
-    }
-    get hostElement() { return index.getElement(this); }
-};
-FormValidationMessage.style = DigiFormValidationMessageStyle0;
-
-const iconInputSelectMarkerCss = ".sc-digi-icon-input-select-marker-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-input-select-marker-h svg.sc-digi-icon-input-select-marker{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 DigiIconInputSelectMarkerStyle0 = iconInputSelectMarkerCss;
-
-const IconInputSelectMarker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afTitle = undefined;
-        this.afDesc = undefined;
-        this.afSvgAriaHidden = true;
-        this.afSvgAriaLabelledby = undefined;
-        this.titleId = randomIdGenerator_util.randomIdGenerator('icon-input-select-marker');
-    }
-    render() {
-        return (index.h("svg", { key: '041c1a9468d8fd9340a556b7f0b063f4f3cf738d', class: "digi-icon-input-select-marker", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined }, this.afTitle && index.h("title", { key: 'a0542c18fdc7e871d91a495af884aa65e1ea0cd5', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'da9171b347e0af9afe8fd5c5d49d7179c2798e84' }, this.afDesc), index.h("path", { key: '9f5352b7e70c2a4a19d94fe9786b1629dac338f5', d: "M1 1l6.074 6L13 1.147", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
-    }
-};
-IconInputSelectMarker.style = DigiIconInputSelectMarkerStyle0;
-
-const iconValidationErrorCss = ".sc-digi-icon-validation-error-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-error-h svg.sc-digi-icon-validation-error{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
-const DigiIconValidationErrorStyle0 = iconValidationErrorCss;
-
-const IconValidationError = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afTitle = undefined;
-        this.afDesc = undefined;
-        this.afSvgAriaHidden = true;
-        this.afSvgAriaLabelledby = undefined;
-        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
-    }
-    render() {
-        return (index.h("svg", { key: 'f499f42be0fc0b08203aa5f5f737d24dd637f2b2', class: "digi-icon-validation-error", width: "48", height: "48", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined }, this.afTitle && index.h("title", { key: 'fe9028dc6ef29fb411f3527f803f970fb200cbc7', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '602b904ee4e87ccd75c0fccbb1015f2e50a89c3d' }, this.afDesc), index.h("path", { key: 'c3e66974c35dd1405f668f9eb1c0c3ce65d57d16', class: "digi-icon-validation-error__shape", d: "M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z", fill: "currentColor", "fill-rule": "nonzero" })));
-    }
-};
-IconValidationError.style = DigiIconValidationErrorStyle0;
-
-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 DigiIconValidationSuccessStyle0 = iconValidationSuccessCss;
-
-const IconCheckCircle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afTitle = undefined;
-        this.afDesc = undefined;
-        this.afSvgAriaHidden = true;
-        this.afSvgAriaLabelledby = undefined;
-        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
-    }
-    render() {
-        return (index.h("svg", { key: '8e17bc8da17af20998fb67b64fc24b40461b176c', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '6f56caf229cfb9e2d8f6f54eaeaa4f86c9881eaf', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'f7fa4c25a72c4ef312a8f6daedf31ce199979bc2' }, this.afDesc), index.h("path", { key: 'f90d6e4c93085c88e81ef6935289f437a6a26aa6', 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 = DigiIconValidationSuccessStyle0;
-
-const iconValidationWarningCss = ".sc-digi-icon-validation-warning-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-warning-h svg.sc-digi-icon-validation-warning{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
-const DigiIconValidationWarningStyle0 = iconValidationWarningCss;
-
-const IconValidationWarning = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afTitle = undefined;
-        this.afDesc = undefined;
-        this.afSvgAriaHidden = true;
-        this.afSvgAriaLabelledby = undefined;
-        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
-    }
-    render() {
-        return (index.h("div", { key: 'eab65818fc925a1ff0b96f4c61897dbb21431375' }, index.h("svg", { key: '80fccf36625c7ad8899c656d6fd43e9c646ef941', class: "digi-icon-validation-warning", width: "18", height: "18", viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined }, this.afTitle && index.h("title", { key: '0b147bec8b5bb42bf03cf64f0c16fd8977738f17', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '250acb28819b3636883bc03da56a4228480e6fcb' }, this.afDesc), index.h("g", { key: 'a032d119a67df159ecf24e457ea87ce6399281f9', fill: "none", "fill-rule": "evenodd" }, index.h("circle", { key: 'de82de664348aca5dafef8991aff9beb1b6501d1', cx: "9", cy: "9", r: "6.75", fill: "#333" }), index.h("path", { key: 'e49d8e1173a1e0ce268977c08139bc275fd761e0', d: "m18 9c0 4.9717-4.0298 9-9 9-4.9702 0-9-4.0283-9-9 0-4.9688 4.0298-9 9-9 4.9702 0 9 4.0312 9 9zm-9 1.8145c-0.92196 0-1.6694 0.7474-1.6694 1.6694 0 0.92196 0.7474 1.6694 1.6694 1.6694s1.6694-0.7474 1.6694-1.6694c0-0.92196-0.7474-1.6694-1.6694-1.6694zm-1.3157-1.065c0.012593 0.23095 0.20355 0.41175 0.43483 0.41175h1.7618c0.23128 0 0.42224-0.1808 0.43483-0.41175l0.2692-4.9355c0.013609-0.24946-0.18501-0.45922-0.43483-0.45922h-2.3002c-0.24982 0-0.4484 0.20976-0.43479 0.45922l0.2692 4.9355z", fill: "#FFE200" })))));
-    }
-};
-IconValidationWarning.style = DigiIconValidationWarningStyle0;
-
-const UtilMutationObserver = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afOnChange = index.createEvent(this, "afOnChange", 7);
-        this._observer = null;
-        this._isObserving = false;
-        this.afId = randomIdGenerator_util.randomIdGenerator('digi-util-mutation-observer');
-        this.afOptions = {
-            attributes: false,
-            childList: true,
-            subtree: false,
-            characterData: false
-        };
-    }
-    afOptionsWatcher(newValue) {
-        this._afOptions =
-            typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-    }
-    componentWillLoad() {
-        this.afOptionsWatcher(this.afOptions);
-        this.initObserver();
-    }
-    disconnectedCallback() {
-        if (this._isObserving) {
-            this.removeObserver();
-        }
-    }
-    initObserver() {
-        this._observer = new MutationObserver((mutationsList) => {
-            for (const mutation of mutationsList) {
-                if (mutation.type === 'childList' ||
-                    mutation.type === 'attributes' ||
-                    mutation.type === 'characterData') {
-                    this.changeHandler(mutation);
-                }
-            }
-        });
-        this._observer.observe(this.$el, this._afOptions);
-        this._isObserving = true;
-    }
-    removeObserver() {
-        this._observer.disconnect();
-        this._isObserving = false;
-    }
-    changeHandler(e) {
-        this.afOnChange.emit(e);
-    }
-    render() {
-        index.h("div", { id: this.afId, ref: (el) => (this.$el = el) }, index.h("slot", null));
-    }
-    get $el() { return index.getElement(this); }
-    static get watchers() { return {
-        "afOptions": ["afOptionsWatcher"]
-    }; }
-};
-
-exports.digi_button = Button;
-exports.digi_form_label = FormLabel;
-exports.digi_form_select = FormSelect;
-exports.digi_form_validation_message = FormValidationMessage;
-exports.digi_icon_input_select_marker = IconInputSelectMarker;
-exports.digi_icon_validation_error = IconValidationError;
-exports.digi_icon_validation_success = IconCheckCircle;
-exports.digi_icon_validation_warning = IconValidationWarning;
-exports.digi_util_mutation_observer = UtilMutationObserver;