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

package/components/p-1zaBZxWX.js

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

package/components/p-76enOn84.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 iconCalendarAltCss = () => `.sc-digi-icon-calendar-alt-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-calendar-alt-h svg.sc-digi-icon-calendar-alt{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 IconCalendarAlt = /*@__PURE__*/ proxyCustomElement(class IconCalendarAlt 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: '51b9d922462d3ad108545dbe7df4bf805334b0ef', class: "digi-icon-calendar-alt", 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: '0cf10651a3b238c59bc9f342cec98ff7c2a967e7', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'a7826ce588a9bd9580c3f45a20834ff4e66a3620' }, this.afDesc), h("path", { key: '0854e6fc47b9a773f3d902e557535765d973252a', class: "digi-icon-calendar-alt__shape", d: "M21.41 8.125H.59a.601.601 0 01-.59-.61V5.689C0 4.341 1.056 3.25 2.357 3.25h2.357V.61c0-.336.265-.61.59-.61h1.964c.324 0 .59.274.59.61v2.64h6.285V.61c0-.336.265-.61.59-.61h1.963c.325 0 .59.274.59.61v2.64h2.357C20.944 3.25 22 4.342 22 5.688v1.828c0 .335-.265.609-.59.609zM.59 9.75h20.82c.325 0 .59.274.59.61v13.203C22 24.907 20.944 26 19.643 26H2.357C1.056 26 0 24.908 0 23.562V10.36c0-.335.265-.609.59-.609zm5.696 10.36a.601.601 0 00-.59-.61H3.732a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.325 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.59-.61H3.732a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.325 0 .59-.274.59-.61v-2.03zm6.285 6.5a.601.601 0 00-.589-.61h-1.964a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.589-.61h-1.964a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm6.286 6.5a.601.601 0 00-.59-.61h-1.963a.601.601 0 00-.59.61v2.03c0 .336.265.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.59-.61h-1.963a.601.601 0 00-.59.61v2.03c0 .336.265.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+    static get style() { return iconCalendarAltCss(); }
+}, [2, "digi-icon-calendar-alt", {
+        "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-calendar-alt"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-icon-calendar-alt":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), IconCalendarAlt);
+            }
+            break;
+    } });
+}
+
+export { IconCalendarAlt as I, defineCustomElement as d };

package/components/p-B12j8zwu.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 iconTableCss = () => `.sc-digi-icon-table-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-table-h svg.sc-digi-icon-table{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 IconTable = /*@__PURE__*/ proxyCustomElement(class IconTable 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: '5921ce66579bd86066ffa41dc7a3a77956068c6b', class: "digi-icon-table", width: "62px", height: "62px", viewBox: "0 0 62 62", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && h("title", { key: 'c31d547044d9d13a1c033376ae7b905eeb5d5e7e', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '280303698d3c26d7a938e8bc2681785803ac21d2' }, this.afDesc), h("defs", { key: 'b9f252519e9980c5e756d80cb70dd941bbb75dbe' }, h("polygon", { key: 'e03b1f906ad82a1564f9854569599c99e7fe7666', points: "0 62 62 62 62 0 0 0" })), h("g", { key: 'd5614ebe38f0c4e895faa6c0911a906c4577f6f0', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '085543db9d4fc254995894365ea6d893055bf2fe', transform: "translate(-302, -975)" }, h("g", { key: '172ae18756be104b87be1911075928c0a132f75a', transform: "translate(302, 975)" }, h("polygon", { key: '7df75783055757adfe0f598f9f703b8b44ab83cc', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), h("g", { key: 'ac6bddce4781c6ce22549b5c0eb041321438ba28' }, h("path", { key: 'bcb6c44f7000315aa92cb60ed3612ce66507ca5a', d: "M35.3073208,0 L26.6931958,0 C24.7918625,0 23.2496125,1.53297409 23.2496125,3.42574093 L23.2496125,11.9939482 C23.2496125,13.886715 24.7918625,15.4196891 26.6931958,15.4196891 L35.3073208,15.4196891 C37.2086542,15.4196891 38.7496125,13.886715 38.7496125,11.9939482 L38.7496125,3.42574093 C38.7496125,1.53297409 37.2086542,0 35.3073208,0", fill: "currentColor" }), h("polygon", { key: 'd0bd3f8fbc809e4322ae57bd193a66fa1bd70e66', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), h("path", { key: 'a1fa3e5d2ae10bf7e30e871c994b0d2aa6a41aad', d: "M12.0573208,0 L3.44319583,0 C1.5418625,0 -0.0003875,1.53297409 -0.0003875,3.42574093 L-0.0003875,11.9939482 C-0.0003875,13.886715 1.5418625,15.4196891 3.44319583,15.4196891 L12.0573208,15.4196891 C13.9586542,15.4196891 15.4996125,13.886715 15.4996125,11.9939482 L15.4996125,3.42574093 C15.4996125,1.53297409 13.9586542,0 12.0573208,0", fill: "currentColor" }), h("polygon", { key: '29de0a3b4197080cea0277d33ce787b1ebb61008', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), h("path", { key: '6341e406e1435869fa7df349c52cc00f26278bb6', d: "M58.5573208,0 L49.9431958,0 C48.0418625,0 46.4996125,1.53297409 46.4996125,3.42574093 L46.4996125,11.9939482 C46.4996125,13.886715 48.0418625,15.4196891 49.9431958,15.4196891 L58.5573208,15.4196891 C60.4586542,15.4196891 61.9996125,13.886715 61.9996125,11.9939482 L61.9996125,3.42574093 C61.9996125,1.53297409 60.4586542,0 58.5573208,0", fill: "currentColor" }), h("polygon", { key: 'e044d2b7d6d7db62ff620ab323e03517e2547c4e', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), h("path", { key: '2284007e64d1bab4b0c20e424fb129eafadbcecf', d: "M35.3073208,46.5803109 L26.6931958,46.5803109 C24.7918625,46.5803109 23.2496125,48.113285 23.2496125,50.0060518 L23.2496125,58.5742591 C23.2496125,60.4670259 24.7918625,62 26.6931958,62 L35.3073208,62 C37.2086542,62 38.7496125,60.4670259 38.7496125,58.5742591 L38.7496125,50.0060518 C38.7496125,48.113285 37.2086542,46.5803109 35.3073208,46.5803109", fill: "currentColor" }), h("polygon", { key: 'd5f96f3f46bae66af42bcbc27353d9a93467763d', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), h("path", { key: 'e8cf6c904a7f75527e5329925b1a725a1694e626', d: "M12.0573208,46.5803109 L3.44319583,46.5803109 C1.5418625,46.5803109 -0.0003875,48.113285 -0.0003875,50.0060518 L-0.0003875,58.5742591 C-0.0003875,60.4670259 1.5418625,62 3.44319583,62 L12.0573208,62 C13.9586542,62 15.4996125,60.4670259 15.4996125,58.5742591 L15.4996125,50.0060518 C15.4996125,48.113285 13.9586542,46.5803109 12.0573208,46.5803109", fill: "currentColor" }), h("polygon", { key: 'ad5c1930600597bc39d3ab5c7a7bbc95fd31084e', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), h("path", { key: '6155710aeb205817e5b332192b60c9896ab41685', d: "M58.5573208,46.5803109 L49.9431958,46.5803109 C48.0418625,46.5803109 46.4996125,48.113285 46.4996125,50.0060518 L46.4996125,58.5742591 C46.4996125,60.4670259 48.0418625,62 49.9431958,62 L58.5573208,62 C60.4586542,62 61.9996125,60.4670259 61.9996125,58.5742591 L61.9996125,50.0060518 C61.9996125,48.113285 60.4586542,46.5803109 58.5573208,46.5803109", fill: "currentColor" }), h("polygon", { key: '2601df3ce91e008c7116f6de124ddbe862c0204d', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), h("path", { key: 'e05bd17650fdc5ee9f477a2b26261e038f2ce622', d: "M35.3073208,23.2901554 L26.6931958,23.2901554 C24.7918625,23.2901554 23.2496125,24.8231295 23.2496125,26.7158964 L23.2496125,35.2841036 C23.2496125,37.1768705 24.7918625,38.7098446 26.6931958,38.7098446 L35.3073208,38.7098446 C37.2086542,38.7098446 38.7496125,37.1768705 38.7496125,35.2841036 L38.7496125,26.7158964 C38.7496125,24.8231295 37.2086542,23.2901554 35.3073208,23.2901554", fill: "currentColor" }), h("polygon", { key: 'f91754ef67be3ef8695534fa1d14e06ef863b790', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), h("path", { key: '234994e21c4748e8f6999a44d6a754429e278e48', d: "M12.0573208,23.2901554 L3.44319583,23.2901554 C1.5418625,23.2901554 -0.0003875,24.8231295 -0.0003875,26.7158964 L-0.0003875,35.2841036 C-0.0003875,37.1768705 1.5418625,38.7098446 3.44319583,38.7098446 L12.0573208,38.7098446 C13.9586542,38.7098446 15.4996125,37.1768705 15.4996125,35.2841036 L15.4996125,26.7158964 C15.4996125,24.8231295 13.9586542,23.2901554 12.0573208,23.2901554", fill: "currentColor" }), h("polygon", { key: '927c2dfec6b5b0175a6f2e25b759d1ca99c73392', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), h("path", { key: '69f886e883005dd7556c5a8368ab70cc1790972f', d: "M58.5573208,23.2901554 L49.9431958,23.2901554 C48.0418625,23.2901554 46.4996125,24.8231295 46.4996125,26.7158964 L46.4996125,35.2841036 C46.4996125,37.1768705 48.0418625,38.7098446 49.9431958,38.7098446 L58.5573208,38.7098446 C60.4586542,38.7098446 61.9996125,37.1768705 61.9996125,35.2841036 L61.9996125,26.7158964 C61.9996125,24.8231295 60.4586542,23.2901554 58.5573208,23.2901554", fill: "currentColor" })))))));
+    }
+    static get style() { return iconTableCss(); }
+}, [2, "digi-icon-table", {
+        "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-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-icon-table":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), IconTable);
+            }
+            break;
+    } });
+}
+
+export { IconTable as I, defineCustomElement as d };

package/components/p-B1ltWH-v.js

@@ -0,0 +1,102 @@
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-B6ugjiwM.js';
+
+const UtilIntersectionObserver = /*@__PURE__*/ proxyCustomElement(class UtilIntersectionObserver extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.afOnChange = createEvent(this, "afOnChange", 7);
+        this.afOnIntersect = createEvent(this, "afOnIntersect", 7);
+        this.afOnUnintersect = createEvent(this, "afOnUnintersect", 7);
+        this._observer = null;
+        this._hasIntersected = false;
+        this._isObserving = false;
+        /**
+         * Stäng av observern efter första intersection
+         * @en Disconnect the observer after first intersection.
+         */
+        this.afOnce = false;
+        /**
+         * Skicka options till komponentens interna Intersection Observer. T.ex. för att kontrollera när bilden lazy loadas.
+         * @en Accepts an Intersection Observer options object. Controls when the image should lazy-load.
+         */
+        this.afOptions = {
+            rootMargin: '0px',
+            threshold: 0
+        };
+    }
+    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 IntersectionObserver(([entry]) => {
+            if (entry && entry.isIntersecting) {
+                this.intersectionHandler();
+                if (this.afOnce) {
+                    this.removeObserver();
+                }
+            }
+            else if (entry && this._hasIntersected) {
+                this.unintersectionHandler();
+            }
+        }, this._afOptions);
+        this._observer.observe(this.$el);
+        this._isObserving = true;
+    }
+    removeObserver() {
+        this._observer.disconnect();
+        this._isObserving = false;
+    }
+    intersectionHandler() {
+        this.afOnChange.emit(true);
+        this.afOnIntersect.emit();
+        this._hasIntersected = true;
+    }
+    unintersectionHandler() {
+        this.afOnChange.emit(false);
+        this.afOnUnintersect.emit();
+        this._hasIntersected = false;
+    }
+    render() {
+        return h("slot", { key: '0a8bad37aec6fceb8af7c855b276b64d01976ef8' });
+    }
+    get $el() { return this; }
+    static get watchers() { return {
+        "afOptions": [{
+                "afOptionsWatcher": 0
+            }]
+    }; }
+}, [262, "digi-util-intersection-observer", {
+        "afOnce": [4, "af-once"],
+        "afOptions": [1, "af-options"]
+    }, undefined, {
+        "afOptions": [{
+                "afOptionsWatcher": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-util-intersection-observer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-util-intersection-observer":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), UtilIntersectionObserver);
+            }
+            break;
+    } });
+}
+
+export { UtilIntersectionObserver as U, defineCustomElement as d };