npm - @designsystem-se/af - Versions diffs - 39.1.0-beta.2 → 39.2.0 - Mend

@designsystem-se/af 39.1.0-beta.2 → 39.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2072) hide show

package/components/digi-dialog.js CHANGED Viewed

@@ -1,102 +1,83 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-B-pDXa1I.js';
-import { f as DialogVariation, e as DialogSize, D as DialogHeadingLevel } from './p-BbGPkkqr.js';
-import { r as randomIdGenerator } from './p-BGaIliX6.js';
-import './p-CKoZU0-H.js';
-import './p-C0A-p3cU.js';
-import { B as ButtonSize, b as ButtonVariation } from './p-DNHRmpND.js';
-import './p-DH_-wpLB.js';
-import './p-DPeoHh1J.js';
-import './p-qc6KRZue.js';
-import './p-DwNlf6Sh.js';
-import './p-C6B2KRZo.js';
-import './p-CES5gUEo.js';
-import './p-DzSu1-K0.js';
-import './p-6-MpaVf8.js';
-import './p-BfyJgcLA.js';
-import './p-BvWKyXb_.js';
-import './p-7F-7XlTz.js';
-import './p-Dp9SgP94.js';
-import './p-CAr8ZNeD.js';
-import './p-DcnvI7UR.js';
-import './p-DCS1KcvC.js';
-import './p-DogB9kfH.js';
-import './p-B8hpiXmh.js';
-import './p-CkIb3cUS.js';
-import './p-_ycZeBN4.js';
-import './p-rbgkevJv.js';
-import './p-DJCufAhy.js';
-import './p-oKq_eErM.js';
-import './p-CPzcg9n3.js';
-import './p-CsNHGpkJ.js';
-import './p-D_VIx0pC.js';
-import './p-ArGkfrXt.js';
-import './p-Chk3GCYK.js';
-import './p-evtVuhQt.js';
-import './p-V-HTxO5a.js';
-import './p-DPkRL9Bv.js';
-import './p-w8pbG68a.js';
-import './p-DMrSPsPW.js';
-import './p-DXqRzyRP.js';
-import './p-DoZkBEe8.js';
-import './p-m9xS70Ez.js';
-import './p-CmH9mJ43.js';
-import './p-DBcU_EnL.js';
-import './p-BvcVTm_t.js';
-import './p-bQJ38En_.js';
-import './p-DrVSK7Ws.js';
-import './p-CAmn5qzb.js';
-import './p-DpDyNuVC.js';
-import './p-DNjGvZvz.js';
-import './p-CHxBAbI8.js';
-import './p-rhVqmQwC.js';
-import './p-DPq588Q4.js';
-import { d as defineCustomElement$5 } from './p--RxphPe_.js';
-import { d as defineCustomElement$4 } from './p-CfNd9HJm.js';
-import { d as defineCustomElement$3 } from './p-CXvUvwhd.js';
-import { d as defineCustomElement$2 } from './p-BtWOyQUR.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
+import { f as DialogVariation, e as DialogSize, D as DialogHeadingLevel } from './p-768f56d4.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import './p-717306ef.js';
+import './p-a4a001e1.js';
+import { B as ButtonSize, b as ButtonVariation } from './p-f518a4cf.js';
+import './p-7e32c40b.js';
+import './p-dcdffb3c.js';
+import './p-5d21a361.js';
+import './p-ad16c7a1.js';
+import './p-f40f4b2a.js';
+import './p-1f68d501.js';
+import './p-ee88e3f1.js';
+import './p-8142cc73.js';
+import './p-905ccb30.js';
+import './p-bc3d2778.js';
+import './p-c8429245.js';
+import './p-9a1bec0e.js';
+import './p-06625463.js';
+import './p-24fe2189.js';
+import './p-f447b984.js';
+import './p-9c5a93d8.js';
+import './p-7933b555.js';
+import './p-0f6c0360.js';
+import './p-814ca2ad.js';
+import './p-d8a98b3b.js';
+import './p-07303cb5.js';
+import './p-5f8dc01a.js';
+import './p-2a023831.js';
+import './p-5ba6737a.js';
+import './p-e4a9f8f0.js';
+import './p-f2a6768b.js';
+import './p-9dd41cc4.js';
+import './p-40657c82.js';
+import './p-f600576a.js';
+import './p-3b20ec86.js';
+import './p-fe63f0b9.js';
+import './p-d0f35bd6.js';
+import './p-77a93845.js';
+import './p-06f939ab.js';
+import './p-8cd2d6dd.js';
+import './p-484a1d6d.js';
+import './p-0f3fbb1e.js';
+import './p-820e795b.js';
+import './p-46cbbcb5.js';
+import './p-d74742b8.js';
+import './p-6e383896.js';
+import './p-4bad4fb0.js';
+import './p-d1886fff.js';
+import './p-a6ca40fc.js';
+import './p-b0e88537.js';
+import './p-cdcaf0eb.js';
+import { d as defineCustomElement$5 } from './p-70fad0ea.js';
+import { d as defineCustomElement$4 } from './p-4b44f757.js';
+import { d as defineCustomElement$3 } from './p-2881b363.js';
+import { d as defineCustomElement$2 } from './p-ac5035f1.js';
-const dialogCss = () => `:host{--digi--dialog--backdrop--position:fixed;--digi--dialog--backdrop--opacity:1;--digi--dialog--backdrop--z--index:999;--digi--dialog--backdrop--left:0;--digi--dialog--backdrop--top:0;--digi--dialog--backdrop--width:100vw;--digi--dialog--backdrop--height:100vh;--digi--dialog--backdrop--display:flex;--digi--dialog--backdrop--justify--content:center;--digi--dialog--backdrop--align--items:center;--digi--dialog--close--button--display:grid;--digi--dialog--close--button--justify--content:end;--digi--dialog--close--button--margin--right:-1rem;--digi--dialog--button--container--display:flex;--digi--dialog--button--container--flex-wrap:wrap;--digi--dialog--button--container--gap:var(--digi--gutter--large);--digi--dialog--button--container--padding--top:var(--digi--gutter--largest-2);--digi--dialog--button--text--align--mobile:center;--digi--dialog--content--gutter:var(--digi--gutter--largest);--digi--dialog--content--margin:var(--digi--margin--large) auto;--digi--dialog--content--padding:var(--digi--padding--large);--digi--dialog--content--width--small:28.75rem;--digi--dialog--content--width--medium:42.1875rem;--digi--dialog--content--width--large:56.25rem;--digi--dialog--content--color--primary:var(--digi--color--text--primary);--digi--dialog--content--color--background--primary:var(--digi--color--background--primary);--digi--dialog--icon--color--primary:var(--digi--color--icon--primary);--digi--dialog--icon--color--primary--hover:var(--digi--color--icon--primary)}:host .digi-dialog--primary{--DIGI--DIALOG--COLOR--BACKGROUND:var(     --digi--dialog--content--color--background--primary   );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--primary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:initial}:host .digi-dialog--secondary{--digi--dialog--content--color--secondary:var(     --digi--global--color--profile--white--base   );--digi--dialog--content--color--background--secondary:var(     --digi--global--color--profile--blue--base   );--DIGI--DIALOG--COLOR--BACKGROUND:var(     --digi--dialog--content--color--background--secondary   );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--secondary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:#b7b7ff;--digi--color--text--primary:var(--digi--dialog--content--color--secondary)}:host .digi-dialog--small{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--small)}:host .digi-dialog--medium{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--medium)}:host .digi-dialog--large{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--large)}:host .digi-dialog{background:rgba(0, 0, 0, 0.7);overflow-x:hidden;overflow-y:auto;position:var(--digi--dialog--backdrop--position);opacity:var(--digi--dialog--backdrop--opacity);z-index:var(--digi--dialog--backdrop--z--index);left:var(--digi--dialog--backdrop--left);top:var(--digi--dialog--backdrop--top);width:var(--digi--dialog--backdrop--width);height:var(--digi--dialog--backdrop--height);display:var(--digi--dialog--backdrop--display);justify-content:var(--digi--dialog--backdrop--justify--content);align-items:var(--digi--dialog--backdrop--align--items);padding:var(--digi--padding--medium);box-sizing:border-box}:host .digi-dialog__keydown-handler{width:100%;max-height:100%}:host .digi-dialog__content{background:var(--DIGI--DIALOG--COLOR--BACKGROUND);color:var(--DIGI--DIALOG--COLOR);max-width:var(--DIGI--DIALOG--CONTENT--WIDTH);width:100%;margin:var(--digi--dialog--content--margin);padding:var(--digi--padding--smaller) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding);box-sizing:border-box}:host .digi-dialog__close-button{--digi--button--color--text--function--default:var(--DIGI--DIALOG--COLOR);--digi--button--color--text--function--hover:var(--DIGI--DIALOG--COLOR);--digi--button--color--icon--function--default:var(--digi--dialog--icon--color--primary);--digi--button--color--icon--function--hover:var(--digi--dialog--icon--color--primary--hover);display:var(--digi--dialog--close--button--display);justify-content:var(--digi--dialog--close--button--justify--content);margin-right:var(--digi--dialog--close--button--margin--right)}:host .digi-dialog__button-container{display:var(--digi--dialog--button--container--display);flex-wrap:var(--digi--dialog--button--container--flex-wrap);gap:var(--digi--dialog--button--container--gap);padding-top:var(--digi--dialog--button--container--padding--top)}:host .digi-dialog__button-container digi-button,:host .digi-dialog__button-container .digi-button--medium{text-align:var(--digi--dialog--button--text--align--mobile)}:host .digi-dialog__button-container digi-button :first-of-type,:host .digi-dialog__button-container .digi-button--medium :first-of-type{--digi--button--color--border--primary--default:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY);--digi--button--color--border--primary--hover:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY)}`;
+const dialogCss = ":host{--digi--dialog--backdrop--position:fixed;--digi--dialog--backdrop--opacity:1;--digi--dialog--backdrop--z--index:999;--digi--dialog--backdrop--left:0;--digi--dialog--backdrop--top:0;--digi--dialog--backdrop--width:100vw;--digi--dialog--backdrop--height:100vh;--digi--dialog--backdrop--display:flex;--digi--dialog--backdrop--justify--content:center;--digi--dialog--backdrop--align--items:center;--digi--dialog--close--button--display:grid;--digi--dialog--close--button--justify--content:end;--digi--dialog--close--button--margin--right:-1rem;--digi--dialog--button--container--display:flex;--digi--dialog--button--container--flex-wrap:wrap;--digi--dialog--button--container--gap:var(--digi--gutter--large);--digi--dialog--button--container--padding--top:var(--digi--gutter--largest-2);--digi--dialog--button--text--align--mobile:center;--digi--dialog--content--gutter:var(--digi--gutter--largest);--digi--dialog--content--margin:var(--digi--margin--large) auto;--digi--dialog--content--padding:var(--digi--padding--large);--digi--dialog--content--width--small:28.75rem;--digi--dialog--content--width--medium:42.1875rem;--digi--dialog--content--width--large:56.25rem;--digi--dialog--content--color--primary:var(--digi--color--text--primary);--digi--dialog--content--color--background--primary:var(--digi--color--background--primary);--digi--dialog--icon--color--primary:var(--digi--color--icon--primary);--digi--dialog--icon--color--primary--hover:var(--digi--color--icon--primary)}:host .digi-dialog--primary{--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--primary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--primary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:initial}:host .digi-dialog--secondary{--digi--dialog--content--color--secondary:var(\n    --digi--global--color--profile--white--base\n  );--digi--dialog--content--color--background--secondary:var(\n    --digi--global--color--profile--blue--base\n  );--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--secondary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--secondary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:#b7b7ff;--digi--color--text--primary:var(--digi--dialog--content--color--secondary)}:host .digi-dialog--small{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--small)}:host .digi-dialog--medium{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--medium)}:host .digi-dialog--large{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--large)}:host .digi-dialog{background:rgba(0, 0, 0, 0.7);overflow-x:hidden;overflow-y:auto;position:var(--digi--dialog--backdrop--position);opacity:var(--digi--dialog--backdrop--opacity);z-index:var(--digi--dialog--backdrop--z--index);left:var(--digi--dialog--backdrop--left);top:var(--digi--dialog--backdrop--top);width:var(--digi--dialog--backdrop--width);height:var(--digi--dialog--backdrop--height);display:var(--digi--dialog--backdrop--display);justify-content:var(--digi--dialog--backdrop--justify--content);align-items:var(--digi--dialog--backdrop--align--items);padding:var(--digi--padding--medium);box-sizing:border-box}:host .digi-dialog__keydown-handler{width:100%;max-height:100%}:host .digi-dialog__content{background:var(--DIGI--DIALOG--COLOR--BACKGROUND);color:var(--DIGI--DIALOG--COLOR);max-width:var(--DIGI--DIALOG--CONTENT--WIDTH);width:100%;margin:var(--digi--dialog--content--margin);padding:var(--digi--padding--smaller) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding);box-sizing:border-box}:host .digi-dialog__close-button{--digi--button--color--text--function--default:var(--DIGI--DIALOG--COLOR);--digi--button--color--text--function--hover:var(--DIGI--DIALOG--COLOR);--digi--button--color--icon--function--default:var(--digi--dialog--icon--color--primary);--digi--button--color--icon--function--hover:var(--digi--dialog--icon--color--primary--hover);display:var(--digi--dialog--close--button--display);justify-content:var(--digi--dialog--close--button--justify--content);margin-right:var(--digi--dialog--close--button--margin--right)}:host .digi-dialog__button-container{display:var(--digi--dialog--button--container--display);flex-wrap:var(--digi--dialog--button--container--flex-wrap);gap:var(--digi--dialog--button--container--gap);padding-top:var(--digi--dialog--button--container--padding--top)}:host .digi-dialog__button-container digi-button,:host .digi-dialog__button-container .digi-button--medium{text-align:var(--digi--dialog--button--text--align--mobile)}:host .digi-dialog__button-container digi-button :first-of-type,:host .digi-dialog__button-container .digi-button--medium :first-of-type{--digi--button--color--border--primary--default:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY);--digi--button--color--border--primary--hover:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY)}";
+const DigiDialogStyle0 = dialogCss;
 const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
+        this.__registerHost();
         this.__attachShadow();
         this.afPrimaryButtonClick = createEvent(this, "afPrimaryButtonClick", 7);
         this.afSecondaryButtonClick = createEvent(this, "afSecondaryButtonClick", 7);
         this.afOnClose = createEvent(this, "afOnClose", 7);
         this._focusableElementsSelectors = 'a, input, select, textarea, button, button:not(hidden), iframe, object, [tabindex="0"]';
         this.focusableElements = [];
-        /**
-         * 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-dialog');
-        /**
-         * Sätt variation på modalen. OBS! Sekundär variant är endast en beta.
-         * @en Set variation to modal. Secondary is only in beta.
-         */
         this.afVariation = DialogVariation.PRIMARY;
-        /**
-         * Sätt storlek på modalen
-         * small = max-width: 450px,
-         * medium = max-width: 675px (standard),
-         * large = max-width: 900px
-         * @en Set size of modal window.
-         */
         this.afSize = DialogSize.MEDIUM;
-        /**
-         * Visa stäng-knapp
-         * @en Show close button
-         */
+        this.afShowDialog = undefined;
         this.afCloseButtonText = 'Stäng';
-        /**
-         * Sätt rubrikens vikt. 'h2' är förvalt.
-         * @en Set heading level. Default is 'h2'
-         */
         this.afHeadingLevel = DialogHeadingLevel.H2;
+        this.afHeading = undefined;
+        this.afPrimaryButtonText = undefined;
+        this.afSecondaryButtonText = undefined;
+        this.afFallbackElementSelector = undefined;
     }
     primaryClickHandler(e) {
         this.afPrimaryButtonClick.emit(e);
@@ -312,8 +293,8 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
             }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: 'da283fbd5b0a912196108295202513f3052a9c02' }, this.afCloseButtonText && (h("digi-button", { key: '7c502ad56a21bbf0d1c04b297431c4a34fef9c7f', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, h("digi-icon-x", { key: '7bb393f9bec6ffddc1f359d55cc57e034169282a', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: 'ff74759213789351ed6bd7b814e2c5cf213f462a', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '67858397ee97563fc6c72be0de618940177957af', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '7e09c92b7b9b2bc2b6a7328ba28aa3c0b89e43fd' }), h("div", { key: '32f8cd053a1ae5c149146997a37785fbfce87875', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: '85770a5546a3edfa6a8397cc3ee75e2f4aa93ae4', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: 'ef5e3b1b3af175edb2efcb423640badf0cfa9e9e', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
     }
     get hostElement() { return this; }
-    static get style() { return dialogCss(); }
-}, [257, "digi-dialog", {
+    static get style() { return DigiDialogStyle0; }
+}, [1, "digi-dialog", {
         "afId": [1, "af-id"],
         "afVariation": [1, "af-variation"],
         "afSize": [1025, "af-size"],
@@ -332,27 +313,27 @@ function defineCustomElement$1() {
     const components = ["digi-dialog", "digi-button", "digi-icon-x", "digi-typography", "digi-util-keydown-handler"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-dialog":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Dialog);
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Dialog);
             }
             break;
         case "digi-button":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
         case "digi-icon-x":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
         case "digi-typography":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
         case "digi-util-keydown-handler":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;

package/components/digi-expandable-accordion.js CHANGED Viewed

@@ -1,53 +1,25 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-B-pDXa1I.js';
-import { _ as _t } from './p-DsO1BTml.js';
-import { r as randomIdGenerator } from './p-BGaIliX6.js';
-import { E as ExpandableAccordionHeaderLevel } from './p-DwNlf6Sh.js';
-import { d as defineCustomElement$3 } from './p-B7ySbjLX.js';
-import { d as defineCustomElement$2 } from './p-CXvUvwhd.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
+import { _ as _t } from './p-903a27d9.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import { E as ExpandableAccordionHeaderLevel } from './p-ad16c7a1.js';
+import { d as defineCustomElement$3 } from './p-14119afa.js';
+import { d as defineCustomElement$2 } from './p-2881b363.js';
-const expandableAccordionCss = () => `.sc-digi-expandable-accordion-h{--digi--expandable-accordion--header--toggle-icon--transition:ease-in-out var(--digi--animation--duration--base) all;--digi--expandable-accordion--header--font-size:var(--digi--typography--accordion--font-size--desktop);--digi--expandable-accordion--header--font-size--small:var(--digi--typography--accordion--font-size--mobile);--digi--expandable-accordion--header--font-weight:var(--digi--typography--accordion--font-weight--desktop);--digi--expandable-accordion--icon--size:0.875rem;--digi--expandable-accordion--icon--margin-right:var(--digi--margin--medium);--digi--expandable-accordion--border-bottom-width:var(--digi--border-width--secondary);--digi--expandable-accordion--border-bottom-color:var(--digi--color--divider--cta);--digi--expandable-accordion--content--padding:var(--digi--padding--medium) 0;--digi--expandable-accordion--content--transition:ease-in-out var(--digi--animation--duration--base) height;display:block}.sc-digi-expandable-accordion-h .digi-expandable-accordion.sc-digi-expandable-accordion::after{content:"";display:block;max-width:var(--digi--paragraph-width--medium);border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-color:var(--digi--expandable-accordion--border-bottom-color);border-bottom-style:solid;margin-top:calc(var(--digi--expandable-accordion--border-bottom-width) * -1)}.sc-digi-expandable-accordion-h .digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion::after{content:"";display:block;max-width:none;border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-style:solid;margin-top:calc(var(--digi--expandable-accordion--border-bottom-width) * -1)}.digi-expandable-accordion__header.sc-digi-expandable-accordion{display:flex;align-items:center}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__header.sc-digi-expandable-accordion{max-width:var(--digi--paragraph-width--medium);border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-color:var(--digi--expandable-accordion--border-bottom-color);border-bottom-style:solid}.digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion .digi-expandable-accordion__header.sc-digi-expandable-accordion{max-width:none}.digi-expandable-accordion__toggle-icon.sc-digi-expandable-accordion{transition:var(--digi--expandable-accordion--header--toggle-icon--transition)}.digi-expandable-accordion--expanded-true.sc-digi-expandable-accordion .digi-expandable-accordion__toggle-icon.sc-digi-expandable-accordion{transform:rotate(-180deg)}.digi-expandable-accordion__heading.sc-digi-expandable-accordion{margin:0;flex:1}.digi-expandable-accordion__heading-text.sc-digi-expandable-accordion{max-width:var(--digi--paragraph-width--medium)}.digi-expandable-accordion__button.sc-digi-expandable-accordion{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--expandable-accordion--header--font-size--small);font-weight:var(--digi--expandable-accordion--header--font-weight);width:100%;display:flex;gap:var(--digi--expandable-accordion--icon--margin-right);align-items:center;text-align:start;cursor:pointer;border:none}@media (min-width: 48rem){.digi-expandable-accordion__button.sc-digi-expandable-accordion{font-size:var(--digi--expandable-accordion--header--font-size)}}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion{color:var(--digi--color--text--primary);background-color:transparent;padding:var(--digi--expandable-accordion--content--padding)}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion:hover{text-decoration:underline}.digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion{max-width:none}.digi-expandable-accordion__content.sc-digi-expandable-accordion{overflow-y:hidden}.digi-expandable-accordion--expanded-false.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion{height:0}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion>div.sc-digi-expandable-accordion{padding:var(--digi--expandable-accordion--content--padding)}.digi-expandable-accordion--variation-primary.digi-expandable-accordion--animation-true.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion{transition:var(--digi--expandable-accordion--content--transition)}.digi-expandable-accordion__toggle-inside.sc-digi-expandable-accordion{text-align:center;--digi--button--color--background--function--hover:var(--digi--color--background--primary)}@keyframes heightAnim{from{height:0%}to{height:100%}}`;
+const expandableAccordionCss = ".sc-digi-expandable-accordion-h{--digi--expandable-accordion--header--toggle-icon--transition:ease-in-out var(--digi--animation--duration--base) all;--digi--expandable-accordion--header--font-size:var(--digi--typography--accordion--font-size--desktop);--digi--expandable-accordion--header--font-size--small:var(--digi--typography--accordion--font-size--mobile);--digi--expandable-accordion--header--font-weight:var(--digi--typography--accordion--font-weight--desktop);--digi--expandable-accordion--icon--size:0.875rem;--digi--expandable-accordion--icon--margin-right:var(--digi--margin--medium);--digi--expandable-accordion--border-bottom-width:var(--digi--border-width--secondary);--digi--expandable-accordion--border-bottom-color:var(--digi--color--divider--cta);--digi--expandable-accordion--content--padding:var(--digi--padding--medium) 0;--digi--expandable-accordion--content--transition:ease-in-out var(--digi--animation--duration--base) height;display:block}.sc-digi-expandable-accordion-h .digi-expandable-accordion.sc-digi-expandable-accordion::after{content:\"\";display:block;max-width:var(--digi--paragraph-width--medium);border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-color:var(--digi--expandable-accordion--border-bottom-color);border-bottom-style:solid;margin-top:calc(var(--digi--expandable-accordion--border-bottom-width) * -1)}.sc-digi-expandable-accordion-h .digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion::after{content:\"\";display:block;max-width:none;border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-style:solid;margin-top:calc(var(--digi--expandable-accordion--border-bottom-width) * -1)}.digi-expandable-accordion__header.sc-digi-expandable-accordion{display:flex;align-items:center}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__header.sc-digi-expandable-accordion{max-width:var(--digi--paragraph-width--medium);border-bottom-width:var(--digi--expandable-accordion--border-bottom-width);border-bottom-color:var(--digi--expandable-accordion--border-bottom-color);border-bottom-style:solid}.digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion .digi-expandable-accordion__header.sc-digi-expandable-accordion{max-width:none}.digi-expandable-accordion__toggle-icon.sc-digi-expandable-accordion{transition:var(--digi--expandable-accordion--header--toggle-icon--transition)}.digi-expandable-accordion--expanded-true.sc-digi-expandable-accordion .digi-expandable-accordion__toggle-icon.sc-digi-expandable-accordion{transform:rotate(-180deg)}.digi-expandable-accordion__heading.sc-digi-expandable-accordion{margin:0;flex:1}.digi-expandable-accordion__heading-text.sc-digi-expandable-accordion{max-width:var(--digi--paragraph-width--medium)}.digi-expandable-accordion__button.sc-digi-expandable-accordion{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--expandable-accordion--header--font-size--small);font-weight:var(--digi--expandable-accordion--header--font-weight);width:100%;display:flex;gap:var(--digi--expandable-accordion--icon--margin-right);align-items:center;text-align:start;cursor:pointer;border:none}@media (min-width: 48rem){.digi-expandable-accordion__button.sc-digi-expandable-accordion{font-size:var(--digi--expandable-accordion--header--font-size)}}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion{color:var(--digi--color--text--primary);background-color:transparent;padding:var(--digi--expandable-accordion--content--padding)}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion:hover{text-decoration:underline}.digi-expandable-accordion--fullwidth.sc-digi-expandable-accordion .digi-expandable-accordion__button.sc-digi-expandable-accordion{max-width:none}.digi-expandable-accordion__content.sc-digi-expandable-accordion{overflow-y:hidden}.digi-expandable-accordion--expanded-false.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion{height:0}.digi-expandable-accordion--variation-primary.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion>div.sc-digi-expandable-accordion{padding:var(--digi--expandable-accordion--content--padding)}.digi-expandable-accordion--variation-primary.digi-expandable-accordion--animation-true.sc-digi-expandable-accordion .digi-expandable-accordion__content.sc-digi-expandable-accordion{transition:var(--digi--expandable-accordion--content--transition)}.digi-expandable-accordion__toggle-inside.sc-digi-expandable-accordion{text-align:center;--digi--button--color--background--function--hover:var(--digi--color--background--primary)}@keyframes heightAnim{from{height:0%}to{height:100%}}";
+const DigiExpandableAccordionStyle0 = expandableAccordionCss;
 const ExpandableAccordion = /*@__PURE__*/ proxyCustomElement(class ExpandableAccordion extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
+        this.__registerHost();
         this.afOnClick = createEvent(this, "afOnClick", 7);
-        /**
-         * Sätter utfällbar rubrik. 'h2' är förvalt.
-         * @en Set heading level. Default is 'h2'
-         */
+        this.afHeading = undefined;
         this.afHeadingLevel = ExpandableAccordionHeaderLevel.H2;
-        /**
-         * Gör så att komponenten tar upp 100% i bredd av ytan den befinner sig i.
-         * @en Makes the component take up 100% of the width of the surface it is in.
-         */
         this.afFullWidth = false;
-        /**
-         * Sätter läge på rubriken om den ska vara expanderad eller ej.
-         * @en Sets the state of the accordion to expanded or not.
-         */
         this.afExpanded = false;
-        /**
-         * Ställer in ifall komponenten ska ha en animation vid utfällning. Animation är påslagen som standard.
-         * @en Sets the state of the animation for the accordion's expanded area. Animation is on as default.
-         */
         this.afAnimation = true;
-        /**
-         * 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-expandable-accordion');
-        /**
-         * Sätter texten som visas på knappen som expanderar komponenten. Om inget väljs så används "Visa"
-         * @en Sets the text on the button that expands the component. Defaults to "Visa".
-         */
         this.afExpandText = _t.show;
-        /**
-         * Sätter texten som visas på knappen som kollapsar komponenten. Om inget väljs så används "Dölj"
-         * @en Sets the text on the button that collapses the component. Defaults to "Dölj".
-         */
         this.afCollapseText = _t.hide;
     }
     get cssModifiers() {
@@ -63,7 +35,7 @@ const ExpandableAccordion = /*@__PURE__*/ proxyCustomElement(class ExpandableAcc
      * @en Gets a height to the content for expandable and animate the content.
      */
     componentDidLoad() {
-        const content = this.hostElement.querySelector(`#${this.afId}-content`);
+        const content = this.hostElement.children[0].querySelector(`#${this.afId}-content`);
         if (!this.afExpanded) {
             content.setAttribute('style', 'visibility: hidden;');
         }
@@ -79,7 +51,7 @@ const ExpandableAccordion = /*@__PURE__*/ proxyCustomElement(class ExpandableAcc
         });
     }
     animateContentHeight() {
-        const content = this.hostElement.querySelector(`#${this.afId}-content`);
+        const content = this.hostElement.children[0].querySelector(`#${this.afId}-content`);
         const sectionHeight = content.firstElementChild
             .offsetHeight;
         if (!this.afExpanded && content.style.height === 'auto') {
@@ -110,16 +82,14 @@ const ExpandableAccordion = /*@__PURE__*/ proxyCustomElement(class ExpandableAcc
         this.afOnClick.emit(e);
     }
     render() {
-        return (h("article", { key: '25e76d66020522814e7777c139c6206b1c103d4e', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '2265191f9ad2394befad5da1bdf51cd758d4adba', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '4a26fe5cd756612c36b48a9b04abcff54ba70941', class: "digi-expandable-accordion__heading" }, h("button", { key: '8bb8e9ba1f25650b88f6fc0d26b9c94af9510eee', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: '2b86e033967c20cecc33b34185826b06ab4189e4', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: '8d3d486567b4e073818b35e77a8f5be92ea3cdef', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '764b758a0bd68b7a02581f620dc8204b517fa991', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: 'bad7d77ef14b2edcd80e54d52ffde7bf429caa59' }, h("digi-typography", { key: '15c4a8abc0f50f3521c0a9b39aeb06ce194e4a3b' }, h("slot", { key: '0718dba75edfab31158aec6bf04a8b2bfc60463e' }))))));
+        return (h("article", { key: '293f1af18ec10b52ff734f449e9248c0040e1550', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '43f3dd32444ebe7c7f4d89d02ae51172ee71323c', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '593d5f642ffceb433eb0c284977ff004752e5d95', class: "digi-expandable-accordion__heading" }, h("button", { key: '38f4d583fe8173137de825eb7cfead4bd02a06dc', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: '607b495071e96df847175f5ea55cf5ba3534e113', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: '9e543a4d2ec72dcec7d904c89836d8b8ea4b3c37', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '65d5666a1bba3609cc452240d2c6baaae9e1a364', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: '6d38ae958f5ebdcd3bb56dc5516b65bd5f196c2d' }, h("digi-typography", { key: '95dca191c7e197e5bc303ca88d933ab0d2c3d31c' }, h("slot", { key: '86171e79136fff82378ef011def29b38dca87955' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "afExpanded": [{
-                "animateContentHeight": 0
-            }]
+        "afExpanded": ["animateContentHeight"]
     }; }
-    static get style() { return expandableAccordionCss(); }
-}, [262, "digi-expandable-accordion", {
+    static get style() { return DigiExpandableAccordionStyle0; }
+}, [6, "digi-expandable-accordion", {
         "afHeading": [1, "af-heading"],
         "afHeadingLevel": [1, "af-heading-level"],
         "afFullWidth": [4, "af-full-width"],
@@ -129,9 +99,7 @@ const ExpandableAccordion = /*@__PURE__*/ proxyCustomElement(class ExpandableAcc
         "afExpandText": [1, "af-expand-text"],
         "afCollapseText": [1, "af-collapse-text"]
     }, undefined, {
-        "afExpanded": [{
-                "animateContentHeight": 0
-            }]
+        "afExpanded": ["animateContentHeight"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -140,17 +108,17 @@ function defineCustomElement$1() {
     const components = ["digi-expandable-accordion", "digi-icon-chevron-down", "digi-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-expandable-accordion":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), ExpandableAccordion);
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ExpandableAccordion);
             }
             break;
         case "digi-icon-chevron-down":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
         case "digi-typography":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;

package/components/digi-expandable-faq-item.js CHANGED Viewed

@@ -1,47 +1,23 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-B-pDXa1I.js';
-import { E as ExpandableFaqItemHeadingLevel, a as ExpandableFaqItemVariation } from './p-C6B2KRZo.js';
-import { r as randomIdGenerator } from './p-BGaIliX6.js';
-import { d as defineCustomElement$3 } from './p-B7ySbjLX.js';
-import { d as defineCustomElement$2 } from './p-CXvUvwhd.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
+import { E as ExpandableFaqItemHeadingLevel, a as ExpandableFaqItemVariation } from './p-f40f4b2a.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import { d as defineCustomElement$3 } from './p-14119afa.js';
+import { d as defineCustomElement$2 } from './p-2881b363.js';
-const expandableFaqItemCss = () => `.sc-digi-expandable-faq-item-h{--digi--expandable-faq-item--header--background-color--primary:var(--digi--color--background--pop-out);--digi--expandable-faq-item--header--background-color--secondary:var(--digi--color--background--secondary);--digi--expandable-faq-item--header--background-color--tertiary:var(--digi--color--background--primary);--digi--expandable-faq-item--header--toggle-icon--transition:ease-in-out var(--digi--animation--duration--base) all;--digi--expandable-faq-item--content--transition:ease-in-out var(--digi--animation--duration--base) height;--digi--expandable-faq-item--icon--size:0.875rem;--digi--expandable-faq-item--icon--margin-right:var(--digi--margin--medium);--digi--expandable-faq-item--header--font-size:var(--digi--typography--preamble--font-size--desktop);--digi--expandable-faq-item--header--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--expandable-faq-item--border-width:var(--digi--border-width--secondary);--digi--expandable-faq-item--border-bottom-width:var(--digi--border-width--secondary);--digi--expandable-faq-item--content--padding:var(--digi--gutter--largest-2);display:block}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--primary.sc-digi-expandable-faq-item{--BACKGROUND:var(--digi--expandable-faq-item--header--background-color--primary)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--secondary.sc-digi-expandable-faq-item{--BACKGROUND:var(--digi--expandable-faq-item--header--background-color--secondary)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--tertiary.sc-digi-expandable-faq-item{--BACKGROUND:var(--digi--expandable-faq-item--header--background-color--tertiary)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item.sc-digi-expandable-faq-item{margin-bottom:var(--digi--global--spacing--smallest-4);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--expanded.sc-digi-expandable-faq-item{border-bottom-color:var(--BACKGROUND)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item{background-color:var(--BACKGROUND);width:100%;max-width:calc(var(--digi--paragraph-width--medium) + var(--digi--padding--largest-2))}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item .digi-expandable-faq-item--fullwidth.sc-digi-expandable-faq-item{max-width:none}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header-text.sc-digi-expandable-faq-item{max-width:var(--digi--paragraph-width--medium)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h1.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h2.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h3.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h4.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h5.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h6.sc-digi-expandable-faq-item{margin:0}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon.sc-digi-expandable-faq-item{margin-right:var(--digi--expandable-faq-item--icon--margin-right);transition:var(--digi--expandable-faq-item--header--toggle-icon--transition)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon--expanded.sc-digi-expandable-faq-item{transform:rotate(-180deg)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon.sc-digi-expandable-faq-item-s>[slot^=icon],.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon .sc-digi-expandable-faq-item-s>[slot^=icon]{--digi--icon--width:var(--digi--expandable-faq-item--icon--size);--digi--icon--height:var(--digi--expandable-faq-item--icon--size)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--fullwidth.sc-digi-expandable-faq-item .digi-expandable-faq-item__header.sc-digi-expandable-faq-item{max-width:none}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__button.sc-digi-expandable-faq-item{color:var(--digi--color--text--primary);background-color:var(--BACKGROUND);border:none;border-radius:0;padding:var(--digi--expandable-faq-item--content--padding);font-size:var(--digi--expandable-faq-item--header--font-size);font-weight:var(--digi--expandable-faq-item--header--font-weight);width:100%;display:flex;align-items:center;text-align:left;cursor:pointer;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__button.sc-digi-expandable-faq-item:hover{text-decoration:underline}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__button.sc-digi-expandable-faq-item:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content.sc-digi-expandable-faq-item{overflow-y:hidden}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content.sc-digi-expandable-faq-item>div.sc-digi-expandable-faq-item{padding:var(--digi--expandable-faq-item--content--padding);box-sizing:border-box;max-width:var(--digi--paragraph-width--medium)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content--animation.sc-digi-expandable-faq-item{transition:var(--digi--expandable-faq-item--content--transition)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content--hidden.sc-digi-expandable-faq-item{height:0}`;
+const expandableFaqItemCss = ".sc-digi-expandable-faq-item-h{--digi--expandable-faq-item--header--background-color--primary:var(--digi--color--background--pop-out);--digi--expandable-faq-item--header--background-color--secondary:var(--digi--color--background--secondary);--digi--expandable-faq-item--header--background-color--tertiary:var(--digi--color--background--primary);--digi--expandable-faq-item--header--toggle-icon--transition:ease-in-out var(--digi--animation--duration--base) all;--digi--expandable-faq-item--content--transition:ease-in-out var(--digi--animation--duration--base) height;--digi--expandable-faq-item--icon--size:0.875rem;--digi--expandable-faq-item--icon--margin-right:var(--digi--margin--medium);--digi--expandable-faq-item--header--font-size:var(--digi--typography--preamble--font-size--desktop);--digi--expandable-faq-item--header--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--expandable-faq-item--border-width:var(--digi--border-width--secondary);--digi--expandable-faq-item--border-bottom-width:var(--digi--border-width--secondary);--digi--expandable-faq-item--content--padding:var(--digi--gutter--largest-2);display:block}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--primary.sc-digi-expandable-faq-item{--BACKGROUND:var(--digi--expandable-faq-item--header--background-color--primary)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--secondary.sc-digi-expandable-faq-item{--BACKGROUND:var(--digi--expandable-faq-item--header--background-color--secondary)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--tertiary.sc-digi-expandable-faq-item{--BACKGROUND:var(--digi--expandable-faq-item--header--background-color--tertiary)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item.sc-digi-expandable-faq-item{margin-bottom:var(--digi--global--spacing--smallest-4);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--expanded.sc-digi-expandable-faq-item{border-bottom-color:var(--BACKGROUND)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item{background-color:var(--BACKGROUND);width:100%;max-width:calc(var(--digi--paragraph-width--medium) + var(--digi--padding--largest-2))}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item .digi-expandable-faq-item--fullwidth.sc-digi-expandable-faq-item{max-width:none}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header-text.sc-digi-expandable-faq-item{max-width:var(--digi--paragraph-width--medium)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h1.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h2.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h3.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h4.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h5.sc-digi-expandable-faq-item,.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header.sc-digi-expandable-faq-item h6.sc-digi-expandable-faq-item{margin:0}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon.sc-digi-expandable-faq-item{margin-right:var(--digi--expandable-faq-item--icon--margin-right);transition:var(--digi--expandable-faq-item--header--toggle-icon--transition)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon--expanded.sc-digi-expandable-faq-item{transform:rotate(-180deg)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon.sc-digi-expandable-faq-item-s>[slot^=icon],.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__header--toggle-icon .sc-digi-expandable-faq-item-s>[slot^=icon]{--digi--icon--width:var(--digi--expandable-faq-item--icon--size);--digi--icon--height:var(--digi--expandable-faq-item--icon--size)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item--fullwidth.sc-digi-expandable-faq-item .digi-expandable-faq-item__header.sc-digi-expandable-faq-item{max-width:none}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__button.sc-digi-expandable-faq-item{color:var(--digi--color--text--primary);background-color:var(--BACKGROUND);border:none;border-radius:0;padding:var(--digi--expandable-faq-item--content--padding);font-size:var(--digi--expandable-faq-item--header--font-size);font-weight:var(--digi--expandable-faq-item--header--font-weight);width:100%;display:flex;align-items:center;text-align:left;cursor:pointer;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__button.sc-digi-expandable-faq-item:hover{text-decoration:underline}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__button.sc-digi-expandable-faq-item:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content.sc-digi-expandable-faq-item{overflow-y:hidden}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content.sc-digi-expandable-faq-item>div.sc-digi-expandable-faq-item{padding:var(--digi--expandable-faq-item--content--padding);box-sizing:border-box;max-width:var(--digi--paragraph-width--medium)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content--animation.sc-digi-expandable-faq-item{transition:var(--digi--expandable-faq-item--content--transition)}.sc-digi-expandable-faq-item-h .digi-expandable-faq-item__content--hidden.sc-digi-expandable-faq-item{height:0}";
+const DigiExpandableFaqItemStyle0 = expandableFaqItemCss;
 const ExpandableFaqItem = /*@__PURE__*/ proxyCustomElement(class ExpandableFaqItem extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
+        this.__registerHost();
         this.afOnClick = createEvent(this, "afOnClick", 7);
-        /**
-         * Sätter rubriknivå. 'h3' är förvalt.
-         * @en Set heading level. Default is 'h3'
-         */
+        this.afHeading = undefined;
         this.afHeadingLevel = ExpandableFaqItemHeadingLevel.H3;
-        /**
-         * Gör så att komponenten tar upp 100% i bredd av ytan den befinner sig i.
-         * @en Makes the component take up 100% of the width of the surface it is in.
-         */
         this.afFullWidth = false;
-        /**
-         * Sätter läge på FAQ-frågan om den ska vara expanderad eller ej.
-         * @en Sets the state of the FAQ item to expanded or not.
-         */
         this.afExpanded = false;
-        /**
-         * Sätter variant. Kan vara 'Primary' eller 'Secondary'
-         * @en Set variation. Can be 'Primary' or 'Secondary'
-         */
         this.afVariation = ExpandableFaqItemVariation.PRIMARY;
-        /**
-         * Ställer in ifall komponenten ska ha en animation vid utfällning. Animation är påslagen som standard.
-         * @en Sets the state of the animation for the accordion's expanded area. Animation is on as default.
-         */
         this.afAnimation = true;
-        /**
-         * 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-expandable-faq-item');
     }
     get cssModifiers() {
@@ -58,7 +34,7 @@ const ExpandableFaqItem = /*@__PURE__*/ proxyCustomElement(class ExpandableFaqIt
      * @en Gets a height to the content for FAQ and animate the content.
      */
     componentDidLoad() {
-        const content = this.hostElement.querySelector(`#${this.afId}-content`);
+        const content = this.hostElement.children[0].querySelector(`#${this.afId}-content`);
         if (!this.afExpanded) {
             content.setAttribute('style', 'visibility: hidden;');
         }
@@ -74,7 +50,7 @@ const ExpandableFaqItem = /*@__PURE__*/ proxyCustomElement(class ExpandableFaqIt
         });
     }
     animateContentHeight() {
-        const content = this.hostElement.querySelector(`#${this.afId}-content`);
+        const content = this.hostElement.children[0].querySelector(`#${this.afId}-content`);
         const sectionHeight = content.firstElementChild
             .offsetHeight;
         if (!this.afExpanded && content.style.height === 'auto') {
@@ -97,27 +73,25 @@ const ExpandableFaqItem = /*@__PURE__*/ proxyCustomElement(class ExpandableFaqIt
         }
     }
     render() {
-        return (h("article", { key: '6d3c64be92f3bf878a6319f8bc6a74b944b9621d', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '7c2929a9fbef5158ba44cc9822cd4592072fdeb1', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: '79e19f80b947765f4ec9e342849ebfef121f1694' }, h("button", { key: 'e08fe43a72da2004e977ecad16383100de0b49c7', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
+        return (h("article", { key: '77cebf9e6024110a7a13e0a8b8bad26443783f3f', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: 'cfcd9dd4602a738d93c588e78aacf3a1d680be7f', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: '070e9ce1ae568f76a98c790eecd9f6c8170882eb' }, h("button", { key: 'bd22294c7b556c2f048a9168e7ef6623df5f7344', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
                 e.preventDefault();
                 this.afExpanded = !this.afExpanded;
                 this.afOnClick.emit(e);
-            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '245e1d2578b3e15d0fc83aaf82ca5b19a292ab20', class: {
+            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '8d32c3b205fb19bd82887eaeb586e823f43f275a', class: {
                 'digi-expandable-faq-item__header--toggle-icon': true,
                 'digi-expandable-faq-item__header--toggle-icon--expanded': this.afExpanded
-            } }), h("div", { key: '6b37c5b10fee03cb1e8fbaebf4afa879131fef08', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: '5d0083596a6a9d8dc17db3814dd7fc5b7672def1', class: {
+            } }), h("div", { key: '8f3a9b920c46c0bd7604fc263eee364aab0530bc', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: '0044fcff40a354d5aa2eab9cd3aa8bb8f84a655e', class: {
                 'digi-expandable-faq-item__content': true,
                 'digi-expandable-faq-item__content--animation': this.afAnimation,
                 'digi-expandable-faq-item__content--hidden': !this.afExpanded
-            }, id: `${this.afId}-content` }, h("div", { key: '1c11f15e328118a0adc6c5fb0cb88b7c8f3b8470' }, h("digi-typography", { key: '0253266ad670b87a5a9291101d965899f14f0b16' }, h("slot", { key: '7c277acd32d84ccc6b1c14913aebde586a2ea148' }))))));
+            }, id: `${this.afId}-content` }, h("div", { key: '57d0847d6c133b95366884299109f728b72f9cdf' }, h("digi-typography", { key: 'a7ac9df70a7e68d0f55b6f745d456884ab3527ac' }, h("slot", { key: '49f68abb221c4b439269ea016c8f66e7dd5c37ea' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "afExpanded": [{
-                "animateContentHeight": 0
-            }]
+        "afExpanded": ["animateContentHeight"]
     }; }
-    static get style() { return expandableFaqItemCss(); }
-}, [262, "digi-expandable-faq-item", {
+    static get style() { return DigiExpandableFaqItemStyle0; }
+}, [6, "digi-expandable-faq-item", {
         "afHeading": [1, "af-heading"],
         "afHeadingLevel": [1, "af-heading-level"],
         "afFullWidth": [4, "af-full-width"],
@@ -126,9 +100,7 @@ const ExpandableFaqItem = /*@__PURE__*/ proxyCustomElement(class ExpandableFaqIt
         "afAnimation": [4, "af-animation"],
         "afId": [1, "af-id"]
     }, undefined, {
-        "afExpanded": [{
-                "animateContentHeight": 0
-            }]
+        "afExpanded": ["animateContentHeight"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -137,17 +109,17 @@ function defineCustomElement$1() {
     const components = ["digi-expandable-faq-item", "digi-icon-chevron-down", "digi-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-expandable-faq-item":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), ExpandableFaqItem);
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ExpandableFaqItem);
             }
             break;
         case "digi-icon-chevron-down":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
         case "digi-typography":
-            if (!customElements.get(transformTag(tagName))) {
+            if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;

package/components/digi-expandable-faq.js CHANGED Viewed

@@ -1,24 +1,17 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-B-pDXa1I.js';
-import { E as ExpandableFaqHeadingLevel, a as ExpandableFaqVariation } from './p-CES5gUEo.js';
-import { l as logger } from './p-DdB9j8uV.js';
+import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
+import { E as ExpandableFaqHeadingLevel, a as ExpandableFaqVariation } from './p-1f68d501.js';
+import { l as logger } from './p-e3d2e899.js';
-const expandableFaqCss = () => `.sc-digi-expandable-faq-h{display:block}`;
+const expandableFaqCss = ".sc-digi-expandable-faq-h{display:block}";
+const DigiExpandableFaqStyle0 = expandableFaqCss;
 const ExpandableFaq = /*@__PURE__*/ proxyCustomElement(class ExpandableFaq extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Sätter rubriknivå. 'h2' är förvalt.
-         * @en Set heading level. Default is 'h2'
-         */
+        this.__registerHost();
+        this.isExpanded = undefined;
+        this.afHeading = undefined;
         this.afHeadingLevel = ExpandableFaqHeadingLevel.H2;
-        /**
-         * Sätter variant. Kan vara 'Primary' eller 'Secondary'
-         * @en Set variation. Can be 'Primary' or 'Secondary'
-         */
         this.afVariation = ExpandableFaqVariation.PRIMARY;
         this.listItems = [];
     }
@@ -62,8 +55,8 @@ const ExpandableFaq = /*@__PURE__*/ proxyCustomElement(class ExpandableFaq exten
             } }, h(this.afHeadingLevel, { key: 'f2e2dfac429cdfed99c9f71071770918cf38df70' }, this.afHeading), h("slot", { key: 'a9289be94c96e969748c8bc76a701efb2e2b56d7' })));
     }
     get hostElement() { return this; }
-    static get style() { return expandableFaqCss(); }
-}, [262, "digi-expandable-faq", {
+    static get style() { return DigiExpandableFaqStyle0; }
+}, [6, "digi-expandable-faq", {
         "afHeading": [1, "af-heading"],
         "afHeadingLevel": [1, "af-heading-level"],
         "afVariation": [1, "af-variation"],
@@ -77,8 +70,8 @@ function defineCustomElement$1() {
     const components = ["digi-expandable-faq"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-expandable-faq":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), ExpandableFaq);
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ExpandableFaq);
             }
             break;
     } });