@designsystem-se/af 39.2.1-beta.0 → 39.2.1-beta.darkmode.0

package/components/p-Cv0ClvMw.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+
+const iconNotificationErrorCss = () => `.sc-digi-icon-notification-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-notification-error-h svg.sc-digi-icon-notification-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 IconNotificationError = /*@__PURE__*/ proxyCustomElement(class IconNotificationError extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * 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: 'dfefe243f8a771a2c803895dbcafcc9b51a8ceb3', class: "digi-icon-notification-error", width: "48", height: "48", viewBox: "0 0 48 48", "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: '712f78a5c44171742dc9805b518b7e5811a09e6e', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '771a01821f88e25c229047552e77043026370d67' }, this.afDesc), h("path", { key: 'a3ba8e314f5461ef6d282e938a911874bfd815d7', class: "digi-icon-notification-error__shape", d: "M16.3083126,13.5575621 C17.212521,12.6758465 18.6746453,12.6758465 19.4922806,13.5575621 L24.0133226,18.0230248 L28.6209379,13.5575621 C29.5251463,12.6758465 30.9872705,12.6758465 31.8049058,13.5575621 C32.7860681,14.4487585 32.7860681,15.889842 31.8049058,16.6957111 L27.3608176,21.151693 L31.8049058,25.6930023 C32.7860681,26.5841986 32.7860681,28.0252822 31.8049058,28.8311512 C30.9872705,29.7981941 29.5251463,29.7981941 28.6209379,28.8311512 L24.0133226,24.4510158 L19.4922806,28.8311512 C18.6746453,29.7981941 17.212521,29.7981941 16.3083126,28.8311512 C15.4137234,28.0252822 15.4137234,26.5841986 16.3083126,25.6930023 L20.8389739,21.151693 L16.3083126,16.6957111 C15.4137234,15.889842 15.4137234,14.4487585 16.3083126,13.5575621 L16.3083126,13.5575621 Z M9.87119353,3.24 C11.1166068,1.228125 13.3583507,0 15.6767354,0 L32.240732,0 C34.6453376,0 36.8870815,1.228125 38.1324948,3.24 L46.9940893,17.49375 C48.3353036,19.65 48.3353036,22.35 46.9940893,24.50625 L38.1324948,38.75625 C36.8870815,40.771875 34.6453376,42 32.240732,42 L15.6767354,42 C13.3583507,42 11.1166068,40.771875 9.87119353,38.75625 L1.00576702,24.50625 C-0.335255674,22.35 -0.335255674,19.65 1.00576702,17.49375 L9.87119353,3.24 Z M4.95376353,20.0519187 C4.50454509,20.7819413 4.50454509,21.6920993 4.95376353,22.4221219 L13.8554068,36.8329571 C14.2690341,37.5060948 15.0193347,37.9232506 15.7407776,37.9232506 L32.3724409,37.9232506 C33.1804569,37.9232506 33.9307575,37.5060948 34.3443848,36.8329571 L43.2421804,22.4221219 C43.6942846,21.6920993 43.6942846,20.7819413 43.2421804,20.0519187 L34.3443848,5.64297968 C33.9307575,4.96510158 33.1804569,4.55079007 32.3724409,4.55079007 L15.7407776,4.55079007 C15.0193347,4.55079007 14.2690341,4.96510158 13.8554068,5.64297968 L4.95376353,20.0519187 Z M38.2882725,3.27656885 L34.3443848,5.64297968 L38.2882725,3.27656885 Z M1.00987575,24.7828442 L4.95376353,22.4221219 L1.00987575,24.7828442 Z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+    static get style() { return iconNotificationErrorCss(); }
+}, [2, "digi-icon-notification-error", {
+        "afTitle": [1, "af-title"],
+        "afDesc": [1, "af-desc"],
+        "afSvgAriaHidden": [4, "af-svg-aria-hidden"],
+        "afSvgAriaLabelledby": [1, "af-svg-aria-labelledby"],
+        "titleId": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-icon-notification-error"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-icon-notification-error":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), IconNotificationError);
+            }
+            break;
+    } });
+}
+
+export { IconNotificationError as I, defineCustomElement as d };

package/components/p-Cw1KRV3D.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { l as logger } from './p-DdB9j8uV.js';
+import { _ as _t } from './p-DsO1BTml.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{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 FormLabel = /*@__PURE__*/ proxyCustomElement(class FormLabel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * 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: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', name: "actions" }))))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "afFor": [{
+                "validateFor": 0
+            }],
+        "afLabel": [{
+                "setLabelText": 0
+            }],
+        "afRequired": [{
+                "setLabelText": 0
+            }],
+        "afAnnounceIfOptional": [{
+                "setLabelText": 0
+            }]
+    }; }
+    static get style() { return formLabelCss(); }
+}, [262, "digi-form-label", {
+        "afLabel": [1, "af-label"],
+        "afId": [1, "af-id"],
+        "afFor": [1, "af-for"],
+        "afDescription": [1, "af-description"],
+        "afRequired": [4, "af-required"],
+        "afAnnounceIfOptional": [4, "af-announce-if-optional"],
+        "afRequiredText": [1, "af-required-text"],
+        "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
+        "labelText": [32],
+        "hasActionSlot": [32]
+    }, undefined, {
+        "afFor": [{
+                "validateFor": 0
+            }],
+        "afLabel": [{
+                "setLabelText": 0
+            }],
+        "afRequired": [{
+                "setLabelText": 0
+            }],
+        "afAnnounceIfOptional": [{
+                "setLabelText": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-form-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-form-label":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormLabel);
+            }
+            break;
+    } });
+}
+
+export { FormLabel as F, defineCustomElement as d };

package/components/p-CyLmOeJr.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+
+const iconMinusCss = () => `.sc-digi-icon-minus-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-minus-h svg.sc-digi-icon-minus{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 IconMinus = /*@__PURE__*/ proxyCustomElement(class IconMinus extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * 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: '62fd25f3d56ba9b3e2c595863c871e60599ae2b9', class: "digi-icon-minus", width: "22", height: "26", viewBox: "0 0 22 26", "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: 'efcc0516d7961aa6a75e2e4103584ea27698dec9', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'd3511f54ec1addc4ea79de9f75c3c765964daa17' }, this.afDesc), h("path", { key: '522ce2a013a882e8b1bd96e2ec80de5417fb62a0', class: "digi-icon-minus__shape", d: "M21.2,13c0,0.7-0.5,1.2-1.2,1.2H2c-0.7,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2H20C20.7,11.8,21.2,12.4,21.2,13z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+    static get style() { return iconMinusCss(); }
+}, [2, "digi-icon-minus", {
+        "afTitle": [1, "af-title"],
+        "afDesc": [1, "af-desc"],
+        "afSvgAriaHidden": [4, "af-svg-aria-hidden"],
+        "afSvgAriaLabelledby": [1, "af-svg-aria-labelledby"],
+        "titleId": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-icon-minus"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-icon-minus":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), IconMinus);
+            }
+            break;
+    } });
+}
+
+export { IconMinus as I, defineCustomElement as d };

package/components/p-D1HhP4_d.js

@@ -0,0 +1,87 @@
+import { p as proxyCustomElement, t as transformTag, H, h, c as Host } from './p-B6ugjiwM.js';
+import { B as BadgeNotificationShape } from './p-CKoZU0-H.js';
+
+const badgeNotificationCss = () => `.sc-digi-badge-notification-h{--digi--badge-notification--color--text:var(--digi--color--text--secondary);--digi--badge-notification--color--border:var(--digi--color--border--notification);--digi--badge-notification--background-color:var(--digi--color--background--notification);--digi--badge-notification--font-weight:var(--digi--global--typography--font-weight--semibold)}.sc-digi-badge-notification-h .digi-badge-notification.sc-digi-badge-notification{font-size:0.75rem;font-weight:var(--digi--badge-notification--font-weight);border-width:var(--digi--border-width--secondary);border-style:solid;color:var(--digi--badge-notification--color--text);background-color:var(--digi--badge-notification--background-color);border-color:var(--BORDER-COLOR)}.sc-digi-badge-notification-h .digi-badge-notification--circle.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:50%;height:1.25rem;width:1.25rem}.sc-digi-badge-notification-h .digi-badge-notification--oval.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:0.75rem;height:1.125rem;width:1.5625rem;padding-left:0.25rem;padding-right:0.25rem}.sc-digi-badge-notification-h .digi-badge-notification--pill.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:inline-block;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.75rem;height:1.125rem}`;
+
+const BadgeNotification = /*@__PURE__*/ proxyCustomElement(class BadgeNotification extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.afShape = BadgeNotificationShape.PILL;
+        /**
+         * Värdet som ska skrivas ut i notifieringen.
+         * @en The value to be displayed in the badge.
+         */
+        this.afValue = '';
+    }
+    afValueChangeHandler() {
+        this.checkProps();
+    }
+    get cssModifiers() {
+        return {
+            'digi-badge-notification--circle': this.afShape === BadgeNotificationShape.CIRCLE,
+            'digi-badge-notification--oval': this.afShape === BadgeNotificationShape.OVAL,
+            'digi-badge-notification--pill': this.afShape === BadgeNotificationShape.PILL
+        };
+    }
+    componentWillLoad() {
+        this.checkProps();
+    }
+    checkProps() {
+        let valueAsNumber;
+        if (this.afValue !== null &&
+            this.afValue !== undefined &&
+            this.afValue !== '') {
+            valueAsNumber = Number(this.afValue);
+        }
+        if (!isNaN(valueAsNumber)) {
+            if (valueAsNumber >= 100) {
+                this.afValue = '+99';
+                this.afShape = BadgeNotificationShape.PILL;
+            }
+            else if (valueAsNumber < 100 && valueAsNumber >= 10) {
+                this.afShape = BadgeNotificationShape.OVAL;
+            }
+            else {
+                this.afShape = BadgeNotificationShape.CIRCLE;
+            }
+        }
+        else {
+            this.afShape = BadgeNotificationShape.PILL;
+        }
+    }
+    render() {
+        return (h(Host, { key: '2a3f82fe0bf3d3b43ee858a0184fb7d0045656f7' }, h("div", { key: 'f652cc5b76bdc72b4778fd16a1a9d270fe2400ea', class: Object.assign({ 'digi-badge-notification': true }, this.cssModifiers), "aria-label": this.afAriaLabel }, h("div", { key: 'ece907bc0004e24eafd221ead41300f7acd803ea', class: `${this.afShape}` }, h("span", { key: 'c83210ebbbcad768073095e52b601adc80a0645d' }, this.afValue)))));
+    }
+    static get watchers() { return {
+        "afValue": [{
+                "afValueChangeHandler": 0
+            }]
+    }; }
+    static get style() { return badgeNotificationCss(); }
+}, [2, "digi-badge-notification", {
+        "afAriaLabel": [1, "af-aria-label"],
+        "afValue": [8, "af-value"],
+        "afShape": [32]
+    }, undefined, {
+        "afValue": [{
+                "afValueChangeHandler": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-badge-notification"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-badge-notification":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), BadgeNotification);
+            }
+            break;
+    } });
+}
+
+export { BadgeNotification as B, defineCustomElement as d };

package/components/p-D7p7K791.js

@@ -0,0 +1,259 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { a as FormSelectVariation, F as FormSelectValidation } from './p-DCS1KcvC.js';
+import { d as defineCustomElement$6 } from './p-Cw1KRV3D.js';
+import { d as defineCustomElement$5 } from './p-BNyUAR47.js';
+import { d as defineCustomElement$4 } from './p-EEdJGiLG.js';
+import { d as defineCustomElement$3 } from './p-Xfe6RWkX.js';
+import { d as defineCustomElement$2 } from './p-aZpxMui7.js';
+import { d as defineCustomElement$1 } from './p-C6y08__Y.js';
+
+const formSelectCss = () => `.sc-digi-form-select-h{--digi--form-select--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-select--background--neutral:var(--digi--color--background--interactive--default--input-elements);--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 FormSelect = /*@__PURE__*/ proxyCustomElement(class FormSelect extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.afOnChange = createEvent(this, "afOnChange", 7);
+        this.afOnSelect = createEvent(this, "afOnSelect", 7);
+        this.afOnFocus = createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
+        this.afOnBlur = createEvent(this, "afOnBlur", 7);
+        this.afOnDirty = createEvent(this, "afOnDirty", 7);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this.optionItems = [];
+        this.dirty = false;
+        this.touched = false;
+        this.hasPlaceholder = false;
+        /**
+         * Normalt betonas ett obligatoriskt fält visuellt och semantiskt.
+         * Detta vänder på det och betonar fältet om det inte krävs.
+         * Ställ in detta till sant om ditt formulär innehåller fler obligatoriska fält än inte.
+         * @en Normally a required field is visually and semantically emphasized.
+         * This flips that and emphasizes the field if it is not required.
+         * Set this to true if your form contains more required fields than not.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter ett id attribut.
+         * @en Sets an id attribute. Standard är slumpmässig sträng.
+         */
+        this.afId = randomIdGenerator('digi-form-select');
+        /**
+         * Sätter väljarens storlek.
+         * @en Set select input size.
+         */
+        this.afVariation = FormSelectVariation.MEDIUM;
+        /**
+         * Sätter väljarens validering
+         * @en Set select validation
+         */
+        this.afValidation = FormSelectValidation.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;
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    getOptions() {
+        this.checkIfPlaceholder();
+        const options = Array.from(this.hostElement.querySelectorAll('option')).filter((el) => { var _a; return !((_a = this._select) === null || _a === void 0 ? void 0 : _a.contains(el)); });
+        const updatedOptionItems = options.map((el) => ({
+            value: el.value,
+            text: el.text
+        }));
+        if (JSON.stringify(updatedOptionItems) === JSON.stringify(this.optionItems)) {
+            return;
+        }
+        this.optionItems = updatedOptionItems;
+    }
+    checkIfPlaceholder() {
+        this.hasPlaceholder = !!this.afPlaceholder;
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+    }
+    componentDidLoad() {
+        this.optionsObserver = new MutationObserver(() => this.getOptions());
+        this.optionsObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true
+        });
+        this.getOptions();
+        this.afOnReady.emit();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.optionsObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * 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.SMALL,
+            'digi-form-select--medium': this.afVariation === FormSelectVariation.MEDIUM,
+            'digi-form-select--large': this.afVariation === FormSelectVariation.LARGE,
+            'digi-form-select--neutral': this.afValidation === FormSelectValidation.NEUTRAL,
+            'digi-form-select--success': this.afValidation === FormSelectValidation.SUCCESS,
+            'digi-form-select--warning': this.afValidation === FormSelectValidation.WARNING,
+            'digi-form-select--error': this.afValidation === FormSelectValidation.ERROR,
+            'digi-form-select--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === 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 !== FormSelectValidation.NEUTRAL &&
+            this.afValidationText
+            ? true
+            : false;
+    }
+    render() {
+        return (h(Host, { key: 'b40fb54f41ae0b739a943d600624889b604865b2', tabindex: -1 }, h("div", { key: 'e753b10a46503f6711b35dd1d30b8be59296cc0b', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: 'a820eb5ffec3ac101febd080add2ddf9aa537c21', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'ad8616ae6b48a6e10c2827a7d00d51daa44129ec', 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 })), h("div", { key: 'ffe072a753cfe6a7f6afd300e34f8aff9ec4fc2a', class: "digi-form-select__select-wrapper" }, h("select", { key: '204dbc6361c6fb0a0ae0265cdd05db1888380c6d', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === 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 && (h("option", { key: '0f4675533c05c4e6a2f3dd7b502676aa6354c001', 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) => {
+            return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
+        })), h("digi-icon-input-select-marker", { key: '13c14346d06dbf9d67bedfcb45300ee0cd7921e4', class: "digi-form-select__icon", slot: "icon" })), h("div", { key: '9a88dda5d1d981016bb17a053d913eadd89e5e07', hidden: true }, h("slot", { key: '9b6cc012b2c0fead2a1e70441abebbb28364b450' })), h("div", { key: '1f13d6ddaf2a9d78a7c66c242bfe5ac35cf2c961', class: "digi-form-select__footer" }, h("div", { key: '6ba7c2aea4196e0e1b646e22ca9d14be65540ccb', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'eee53a1c30af8d43e8f60d3c85764f65d335e9ec', "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }]
+    }; }
+    static get style() { return formSelectCss(); }
+}, [262, "digi-form-select", {
+        "afLabel": [1, "af-label"],
+        "afAriaLabel": [1, "af-aria-label"],
+        "afRequired": [4, "af-required"],
+        "afRequiredText": [1, "af-required-text"],
+        "afPlaceholder": [1, "af-placeholder"],
+        "afAnnounceIfOptional": [4, "af-announce-if-optional"],
+        "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
+        "afId": [1, "af-id"],
+        "afName": [1, "af-name"],
+        "afDescription": [1, "af-description"],
+        "value": [1],
+        "afValue": [1, "af-value"],
+        "afDisableValidation": [4, "af-disable-validation"],
+        "afVariation": [1, "af-variation"],
+        "afValidation": [1, "af-validation"],
+        "afValidationText": [1, "af-validation-text"],
+        "afAutofocus": [4, "af-autofocus"],
+        "afErrorMessageIsAlert": [8, "af-error-message-is-alert"],
+        "optionItems": [32],
+        "dirty": [32],
+        "touched": [32],
+        "hasPlaceholder": [32],
+        "afMGetFormControlElement": [64]
+    }, [[0, "focus", "focusOnInput"]], {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-form-select", "digi-form-label", "digi-form-validation-message", "digi-icon-input-select-marker", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-form-select":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormSelect);
+            }
+            break;
+        case "digi-form-label":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "digi-form-validation-message":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "digi-icon-input-select-marker":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "digi-icon-validation-error":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "digi-icon-validation-success":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "digi-icon-validation-warning":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { FormSelect as F, defineCustomElement as d };

package/components/p-D9wdbtrJ.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+
+const iconCheckCircleSolidCss = () => `.sc-digi-icon-check-circle-solid-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-check-circle-solid-h svg.sc-digi-icon-check-circle-solid{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 IconCheckCircleSolid = /*@__PURE__*/ proxyCustomElement(class IconCheckCircleSolid extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * 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: 'ba5d581aed6b0b8b6fb9c21f5cdc85b508216a17', class: "digi-icon-check-circle-solid", width: "48px", height: "48px", 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, fill: "currentColor" }, this.afTitle && h("title", { key: 'f9835131e7a8cee04a1f5f0c971a72cc102d8ff4', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '9814221eb8c0f3981b0333783eb4f43668743acb' }, this.afDesc), h("defs", { key: 'a4cf71891213bdbedbaf0f9c9d3c4e8c92ee795f' }, h("polygon", { key: '320b8c91517c27cd2a87085bde71ec918980d389', points: "0 0 48 0 48 48.0005539 0 48.0005539" })), h("g", { key: '72ebc21ec6b5824180a2612b51d1a15a1a655cc2', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '23b79375f6c67782002fc2ac7b55dee15be90e09', transform: "translate(-1122, -215)" }, h("g", { key: '93c5a33ccc025e5584184c281731e23ea7a4d5d4', transform: "translate(1122, 215)" }, h("mask", { key: '73d137d4212aba1038e53134845186f09da934c9', id: "mask-2", fill: "white" }, h("use", { key: '19a2ba8244d5441e1e683c92884839484b909372', href: "#path-1" })), h("g", { key: '50a827eddabbd1903b4706e1427c4ab444c925a7', id: "Clip-2" }), h("path", { key: '0ede480489fef5e2fd771ae332411854c6a289f1', d: "M38.2695118,19.0969092 L22.8594286,34.5069924 C22.1966492,35.1697718 21.1129402,35.1697718 20.4501608,34.5069924 L18.821828,32.8786597 L18.821828,32.8786597 L11.8414129,25.8982446 C11.1786335,25.2354652 11.1786335,24.14991 11.8414129,23.4871306 L13.4678995,21.860644 C14.1306789,21.1978646 15.2162341,21.1978646 15.8790135,21.860644 L21.6538716,27.6373483 L34.2319113,15.0593086 C34.8946907,14.3965292 35.9783997,14.3965292 36.6411791,15.0593086 L38.2695118,16.6876413 C38.9322913,17.3504208 38.9322913,18.4341298 38.2695118,19.0969092 M24.0003692,0 C10.7447807,0 0,10.7447807 0,24.0003692 C0,37.2559578 10.7447807,48.0007385 24.0003692,48.0007385 C37.2541116,48.0007385 48.0007385,37.2559578 48.0007385,24.0003692 C48.0007385,10.7447807 37.2541116,0 24.0003692,0", fill: "currentColor" }))))));
+    }
+    static get style() { return iconCheckCircleSolidCss(); }
+}, [2, "digi-icon-check-circle-solid", {
+        "afTitle": [1, "af-title"],
+        "afDesc": [1, "af-desc"],
+        "afSvgAriaHidden": [4, "af-svg-aria-hidden"],
+        "afSvgAriaLabelledby": [1, "af-svg-aria-labelledby"],
+        "titleId": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-icon-check-circle-solid"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-icon-check-circle-solid":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), IconCheckCircleSolid);
+            }
+            break;
+    } });
+}
+
+export { IconCheckCircleSolid as I, defineCustomElement as d };