@designsystem-se/af 39.2.3-beta.darkmode.1 → 39.3.0

package/dist/esm/digi-expandable-faq-item.entry.js

@@ -0,0 +1,124 @@
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-BnKuq1L7.js';
+import { E as ExpandableFaqItemHeadingLevel, a as ExpandableFaqItemVariation } from './expandable-faq-item-variation.enum-C6B2KRZo.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.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 ExpandableFaqItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnClick = createEvent(this, "afOnClick", 7);
+        /**
+         * Sätter rubriknivå. 'h3' är förvalt.
+         * @en Set heading level. Default is 'h3'
+         */
+        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() {
+        return {
+            'digi-expandable-faq-item--expanded': this.afExpanded,
+            'digi-expandable-faq-item--fullwidth': this.afFullWidth,
+            'digi-expandable-faq-item--primary': this.afVariation === ExpandableFaqItemVariation.PRIMARY,
+            'digi-expandable-faq-item--secondary': this.afVariation === ExpandableFaqItemVariation.SECONDARY,
+            'digi-expandable-faq-item--tertiary': this.afVariation === ExpandableFaqItemVariation.TERTIARY
+        };
+    }
+    /**
+     * Hämtar en höjden till innehållet i vanliga frågor och svar och animera innehållet.
+     * @en Gets a height to the content for FAQ and animate the content.
+     */
+    componentDidLoad() {
+        const content = this.hostElement.querySelector(`#${this.afId}-content`);
+        if (!this.afExpanded) {
+            content.style.visibility = 'hidden';
+        }
+        else {
+            content.style.height = 'auto';
+            content.style.overflowY = 'inherit';
+        }
+        content.addEventListener('transitionend', () => {
+            if (!this.afExpanded) {
+                content.style.visibility = 'hidden';
+                content.style.height = '0px';
+            }
+            else {
+                content.style.height = 'auto';
+                content.style.overflowY = 'inherit';
+            }
+        });
+    }
+    animateContentHeight() {
+        const content = this.hostElement.querySelector(`#${this.afId}-content`);
+        const sectionHeight = content.firstElementChild
+            .offsetHeight;
+        if (!this.afExpanded && content.style.height === 'auto') {
+            content.style.height = sectionHeight + 'px';
+            setTimeout(() => {
+                content.style.height = '0';
+                content.style.overflowY = 'hidden';
+            });
+            return;
+        }
+        if (this.afExpanded) {
+            content.style.height = sectionHeight + 'px';
+            content.style.visibility = 'visible';
+            if (!this.afAnimation) {
+                setTimeout(() => {
+                    content.style.height = 'auto';
+                    content.style.overflowY = 'inherit';
+                });
+            }
+        }
+        else {
+            content.style.height = '0px';
+        }
+    }
+    render() {
+        return (h("article", { key: 'e0931c4256d2c4162911fe232132b6179968425f', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '8f6befff5c82c63d5d1f10755f444791f17dafb7', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: 'b9d58dcd28eb430d7b84365ba1bba99d3e86ebc9' }, h("button", { key: 'b2c20566cc84a2b4cbcbe2dcc2a35e44e8f0fcc9', 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: '40e0a896b3d7d44bf282e8462a24c43060a29eff', class: {
+                'digi-expandable-faq-item__header--toggle-icon': true,
+                'digi-expandable-faq-item__header--toggle-icon--expanded': this.afExpanded
+            } }), h("div", { key: 'f58aa361553f3063bf1e5171f8d320e6cb8189c6', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: 'b4d0dd00a3e6fe9e8367ef5a6f197696de55f4fd', 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: 'e9a9147164d3934584cd5da5cfc8080ba9374c76' }, h("digi-typography", { key: '398a0c4e0aa1092db5f4a2e3182218ebbe0c3624' }, h("slot", { key: 'be924dc541b7c41b19b4392d3a988b492144d585' }))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afExpanded": [{
+                "animateContentHeight": 0
+            }]
+    }; }
+};
+ExpandableFaqItem.style = expandableFaqItemCss();
+
+export { ExpandableFaqItem as digi_expandable_faq_item };

package/dist/esm/digi-expandable-faq.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as getElement } from './index-CS9j_cSH.js';
+import { r as registerInstance, h, d as getElement } from './index-BnKuq1L7.js';
 import { E as ExpandableFaqHeadingLevel, a as ExpandableFaqVariation } from './expandable-faq-variation.enum-CES5gUEo.js';
 import { l as logger } from './logger.util-DdB9j8uV.js';
 

package/dist/esm/digi-footer-card.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { F as FooterCardVariation } from './footer-card-variation.enum-DzSu1-K0.js';
+
+const footerCardCss = () => `.sc-digi-footer-card-h{--digi--footer-card--text--color:var(--digi--color--text--secondary);--digi--footer-card--border-bottom:solid var(--digi--border-width--primary) var(--digi--color--divider--on-brand-primary);--digi--footer-card--link--font-weight:var(--digi--typography--link-bold--font-weight--desktop)}.sc-digi-footer-card-h .digi-footer-card.sc-digi-footer-card{--BORDER:unset;--LINK-DECORATION:underline;--LINK-DECORATION--HOVER:underline;--LINK-SIZE:inherit;--PADDING-BOTTOM:var(--digi--container-gutter--larger);--MARGIN-BOTTOM:var(--digi--container-gutter--larger);margin-bottom:var(--MARGIN-BOTTOM);padding-bottom:var(--PADDING-BOTTOM);border-bottom:var(--BORDER)}@media (min-width: 61.9375rem){.sc-digi-footer-card-h .digi-footer-card.sc-digi-footer-card{--BORDER:0;--PADDING-BOTTOM:var(--digi--container-gutter--large)}}.sc-digi-footer-card-h .digi-footer-card--border.sc-digi-footer-card{--BORDER:var(--digi--footer-card--border-bottom);--LINK-SIZE:var(--digi--typography--heading-3--font-size--mobile)}@media (min-width: 61.9375rem){.sc-digi-footer-card-h .digi-footer-card--border.sc-digi-footer-card{--LINK-SIZE:var(--digi--typography--heading-3--font-size--desktop)}}.sc-digi-footer-card-h .digi-footer-card--icon.sc-digi-footer-card{--LINK-DECORATION:none}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h2,.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h3,.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h4,.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h5,.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h6{color:var(--digi--footer--text--color);margin-top:0}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h2{font-size:var(--digi--typography--heading-3--font-size--mobile)}@media (min-width: 61.9375rem){.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s h2{font-size:var(--digi--typography--heading-3--font-size--desktop)}}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s p{color:var(--digi--footer--text--color)}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s a{font-size:var(--LINK-SIZE);color:var(--digi--footer--text--color);font-weight:var(--digi--footer-card--link--font-weight);display:flex;align-items:flex-start;text-decoration:var(--LINK-DECORATION)}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s a:hover{text-decoration:var(--LINK-DECORATION--HOVER)}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s a svg{--digi--icon--color:var(--digi--footer-card-text--color);--digi--icon--height:1em;--digi--icon--width:1em;margin-right:var(--digi--gutter--small)}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s ul{padding:0;margin:0;list-style:none}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s ul li{margin-bottom:var(--digi--gutter--largest-2)}.sc-digi-footer-card-h .digi-footer-card .sc-digi-footer-card-s ul li:last-child{margin-bottom:0}`;
+
+const FooterFooterCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Sätter innehållstyp för footerkortet, så som länklista med, utan ikon eller om kortet ska ha en kantlinje
+         * @en Sets content typ for the footercard, such as linklist with and without icon and if the card should have a border or not.
+         */
+        this.afType = FooterCardVariation.NONE;
+    }
+    get cssModifiers() {
+        return {
+            'digi-footer-card--icon': this.afType == FooterCardVariation.ICON,
+            'digi-footer-card--border': this.afType == FooterCardVariation.BORDER
+        };
+    }
+    render() {
+        return (h(Host, { key: 'a15273fc73e9e7e9fc9084dafb28c4bdd211a304' }, h("div", { key: '80d2759e16e78a4018a94b8a83cbabdb7d50ce96', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: 'f305ebb61e11f1e3b6862d02eb8be3dc6ca00e4c', class: "digi-footer-card__content" }, h("slot", { key: '4928d8f14f35856a3adee2d7d8d44f9dffaebd1b' })))));
+    }
+    get hostElement() { return getElement(this); }
+};
+FooterFooterCard.style = footerCardCss();
+
+export { FooterFooterCard as digi_footer_card };

package/dist/esm/digi-footer.entry.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { F as FooterVariation } from './typography-variation.enum-D0J6vKy3.js';
+import './badge-notification-shape.enum-CKoZU0-H.js';
+import './badge-status-variation.enum-C0A-p3cU.js';
+import './button-size.enum-C7xgnp99.js';
+import './button-type.enum-DShzaNrQ.js';
+import './button-variation.enum-y5Nm4oWF.js';
+import './calendar-week-view-heading-level.enum-DH_-wpLB.js';
+import './bar-chart-variation.enum-DPeoHh1J.js';
+import './code-example-variation.enum-DGI7Jkg2.js';
+import './code-variation.enum-qc6KRZue.js';
+import './expandable-accordion-header-level.enum-DwNlf6Sh.js';
+import './expandable-faq-item-variation.enum-C6B2KRZo.js';
+import './expandable-faq-variation.enum-CES5gUEo.js';
+import './footer-card-variation.enum-DzSu1-K0.js';
+import './form-checkbox-variation.enum-6-MpaVf8.js';
+import './form-file-upload-variation.enum-BfyJgcLA.js';
+import './form-input-search-variation.enum-BvWKyXb_.js';
+import './form-input-type.enum-BSJH8Lpg.js';
+import './form-select-variation.enum-f5Ytsp48.js';
+import './form-radiogroup-validation.enum-DcnvI7UR.js';
+import './form-textarea-variation.enum-DogB9kfH.js';
+import './form-validation-message-variation.enum-B8hpiXmh.js';
+import './info-card-multi-type.enum-u37CGyZ9.js';
+import './info-card-variation.enum-PuRFa9pe.js';
+import './layout-container-max-width.enum-CuhrrYGE.js';
+import { L as LayoutBlockVariation } from './layout-block-variation.enum-CWFirwyE.js';
+import './layout-columns-variation.enum-DJCufAhy.js';
+import './link-button-variation.enum-CPzcg9n3.js';
+import './list-type.enum-CsNHGpkJ.js';
+import './loader-skeleton-variation.enum-D_VIx0pC.js';
+import './loader-spinner-size.enum-ArGkfrXt.js';
+import './logo-color.enum-Chk3GCYK.js';
+import './media-figure-alignment.enum-evtVuhQt.js';
+import './navigation-sidebar-variation.enum-V-HTxO5a.js';
+import './navigation-vertical-menu-variation.enum-DPkRL9Bv.js';
+import './progress-circle-heading-level.enum-D0CENVum.js';
+import './progress-indicator-heading-level.enum-DE6sqPn9.js';
+import './progress-list-item-variation.enum-DXqRzyRP.js';
+import './progress-list-variation.enum-DoZkBEe8.js';
+import './progressbar-variation.enum-m9xS70Ez.js';
+import './quote-image-inner-position.enum-CmH9mJ43.js';
+import './table-variation.enum-DBcU_EnL.js';
+import './tag-media-icon.enum-BvcVTm_t.js';
+import './tag-size.enum-bQJ38En_.js';
+import './tools-feedback-banner-type.enum-DrVSK7Ws.js';
+import './tools-feedback-rating-variation.enum-CAmn5qzb.js';
+import './tools-theme-provider.brand.enum-DpDyNuVC.js';
+import './typography-heading-jumbo-variation.enum-DNjGvZvz.js';
+import './typography-meta-variation.enum-CHxBAbI8.js';
+import './typography-time-variation.enum-rhVqmQwC.js';
+import './util-breakpoint-observer-breakpoints.enum-DPq588Q4.js';
+
+const footerCss = () => `.sc-digi-footer-h{--digi--footer--text--color:var(--digi--color--text--secondary);--digi--footer--text--font-family:var(--digi--global--typography--font-family--default);--digi--footer--text--font-size:var(--digi--typography--body--font-size--desktop);--digi--footer--text--font-weight:var(--digi--typography--description--font-weight--desktop);--digi--footer--link--color--default:var(--digi--color--text--secondary);--digi--footer--link--color--hover:var(--digi--color--text--secondary);--digi--footer--link--border-color--default:var(--digi--color--text--secondary);--digi--footer--link--border-color--hover:var(--digi--color--text--secondary);--digi--footer--padding-top:var(--digi--container-gutter--largest);--digi--footer--margin-top:var(--digi--container-gutter--large);--digi--footer--logo-vertical-padding:var(--digi--container-gutter--large)}.sc-digi-footer-h .digi-footer.sc-digi-footer{--MARGIN-TOP:var(--digi--footer--margin-top);color:var(--digi--footer--text--color);font-family:var(--digi--footer--text--font-family);font-size:var(--digi--footer--text--font-size);font-weight:var(--digi--footer--text--font-weight);line-height:normal}.sc-digi-footer-h .digi-footer.sc-digi-footer-s>[slot^=content-top],.sc-digi-footer-h .digi-footer .sc-digi-footer-s>[slot^=content-top]{grid-template-columns:repeat(1, 1fr)}@media (min-width: 61.9375rem){.sc-digi-footer-h .digi-footer.sc-digi-footer-s>[slot^=content-top],.sc-digi-footer-h .digi-footer .sc-digi-footer-s>[slot^=content-top]{grid-template-columns:repeat(4, 1fr)}.sc-digi-footer-h .digi-footer--small.sc-digi-footer-s>[slot^=content-top]>*:first-child,.sc-digi-footer-h .digi-footer--small .sc-digi-footer-s>[slot^=content-top]>*:first-child{grid-column:1/3}}@container (max-width: 600px){.sc-digi-footer-h .digi-footer.sc-digi-footer-s>[slot^=content-top],.sc-digi-footer-h .digi-footer .sc-digi-footer-s>[slot^=content-top]{grid-template-columns:repeat(1, 1fr)}}.sc-digi-footer-h .digi-footer__content-top.sc-digi-footer{container-type:inline-size;padding-top:var(--digi--footer--padding-top)}.sc-digi-footer-h .digi-footer__content-bottom.sc-digi-footer{display:flex;justify-content:space-between;flex-wrap:wrap;padding:var(--digi--footer--padding-top) 0}@media (max-width: 61.9375rem){.sc-digi-footer-h .digi-footer__content-bottom.sc-digi-footer{justify-content:center}}@container (max-width: 600px){.sc-digi-footer-h .digi-footer__content-bottom{justify-content:center}}.sc-digi-footer-h .sc-digi-footer-s digi-logo{--digi--logo--padding--large--wide:0}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-top],.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-top]{display:grid;grid-template-rows:repeat(2, auto);column-gap:var(--digi--gutter--largest)}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-left],.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-left]{flex-basis:100%;display:flex;justify-content:center}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-left] .digi-logo,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-left] .digi-logo{padding:var(--digi--footer--logo-vertical-padding) 0}@media (min-width: 61.9375rem){.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-left],.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-left]{flex-basis:auto}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-left] .digi-logo,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-left] .digi-logo{padding:0}}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right],.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right]{display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:center;margin-top:var(--MARGIN-TOP)}@media (min-width: 61.9375rem){.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right],.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right]{--MARGIN-TOP:0}}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] p,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] p,.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] span,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] span,.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a{color:var(--digi--footer--text--color);padding:var(--digi--gutter--small);margin:0}@media (min-width: 61.9375rem){.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] p,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] p,.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] span,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] span,.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a{padding:var(--digi--gutter--largest-2) var(--digi--gutter--small)}}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a{color:var(--digi--footer--link--color--default);border-color:var(--digi--footer--link--border-color--default);margin:0}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a:visited,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a:visited{color:var(--digi--footer--link--color--default)}.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a:hover,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a:hover,.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a:focus,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a:focus,.sc-digi-footer-h.sc-digi-footer-s>[slot^=content-bottom-right] a:active,.sc-digi-footer-h .sc-digi-footer-s>[slot^=content-bottom-right] a:active{background:transparent;color:var(--digi--footer--link--color--hover);border-color:var(--digi--footer--link--border-color--hover)}`;
+
+const FooterFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Sätter variation. Kan vara stor eller liten
+         * @en Set variation. Can be 'large' or 'small'
+         */
+        this.afVariation = FooterVariation.LARGE;
+    }
+    get cssModifiers() {
+        return {
+            'digi-footer--small': this.afVariation == FooterVariation.SMALL
+        };
+    }
+    render() {
+        return (h(Host, { key: '133c1439937cd5c605b46960487caad993847dd3' }, h("footer", { key: '77ad14d88b16d7452ffe5406b0b0bf78c552d3ad', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: 'd695e51d7fed7bdacd5c2706804287e0cd67e94a' }, h("digi-layout-block", { key: '9dd0f463665ae8402445f2ff8b6ddc8b198836dd', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: 'a8b72e661ee8f878ae6cf5a2d5da65bf1fb4fc7f', "af-no-gutter": true }, h("div", { key: '518a65a77376a7648e0c4298c1fd07c19dc725a4', class: "digi-footer__content-top" }, h("slot", { key: '87b6ba476ca0ef0f1a8c96926da133b0a5d27d3c', name: "content-top" })), h("div", { key: '4c43eec28c77d7dd793031beeb1c1962a7d997eb', class: "digi-footer__content-bottom" }, h("slot", { key: 'a2086ff384d987ae36cdadd758647bd950ff08ca', name: "content-bottom-left" }), h("slot", { key: '9a1147e4665ba559a87c0282412298d0be3a4794', name: "content-bottom-right" }))))))));
+    }
+    get hostElement() { return getElement(this); }
+};
+FooterFooter.style = footerCss();
+
+export { FooterFooter as digi_footer };

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

@@ -0,0 +1,150 @@
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+
+const formCategoryFilterCss = () => `.sc-digi-form-category-filter-h{--digi--form-category-filter--gap:var(--digi--padding--small)}.sc-digi-form-category-filter-h .digi-form-category-filter.sc-digi-form-category-filter{display:flex;flex-wrap:wrap;gap:var(--digi--form-category-filter--gap)}.sc-digi-form-category-filter-h .digi-form-category-filter--category.sc-digi-form-category-filter{--digi--button--icon--spacing:0px}.sc-digi-form-category-filter-h .digi-form-category-filter--category--not-selected.sc-digi-form-category-filter{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--quaternary);--digi--button--color--text--primary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--quaternary)}.sc-digi-form-category-filter-h .digi-form-category-filter--category--thin-text.sc-digi-form-category-filter{font-weight:400}`;
+
+const FormCategoryFilter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnSelectedCategoryChange = createEvent(this, "afOnSelectedCategoryChange", 7);
+        /**
+         * En lista av kategorier
+         * @en A list of categories
+         */
+        this.afCategories = [];
+        /**
+         * Ifall listan ska börja med en knapp för 'Alla kategorier'
+         * @en If the list should start with a button for 'All categories'
+         */
+        this.afAllCategories = true;
+        /**
+         * Ifall 'Alla kategorier' kategorin ska vara vald från start
+         * @en If the 'All categories' category should be selected from start
+         */
+        this.afAllCategoriesSelected = true;
+        /**
+         * Namnet på 'Alla kategorier'-kategorin
+         * @en The name of the 'All categories' category
+         */
+        this.afAllCategoriesText = 'Alla kategorier';
+        /**
+         * Antal synliga kategorier när listan är kollapsad (ifall det finns färre valbara kategorier än detta värde så syns inte 'Visa fler/färre'-knappen)
+         * @en Number of visible categories when the list is collapsed (the 'Show more/less'-button is not shown if there are fewer selectable categories than this number)
+         */
+        this.afVisibleCollapsed = 0;
+        /**
+         * Ifall listan ska vara kollapsad från början
+         * @en If the list should be collapsed from start
+         */
+        this.afStartCollapsed = false;
+        /**
+         * Välj om man ska kunna filtrera på flera kategorier åt gången.
+         * @en Set if filtering should use multiselect.
+         */
+        this.afMultiselect = true;
+        /**
+         * Visa alla kategorier och dölj knappen för att visa fler/färre
+         * @en Show all categories and hide button to show more/fewer
+         */
+        this.afHideToggle = false;
+        this.selectedCategories = [];
+        this.collapsed = false;
+    }
+    afCategoriesChangeHandler() {
+        this.selectedCategories = this.afCategories
+            .filter((category) => category.selected)
+            .map((category) => category.name);
+        if (this.selectedCategories.length === 0 &&
+            this.afAllCategories &&
+            this.afAllCategoriesSelected)
+            this.selectedCategories = [this.afAllCategoriesText];
+    }
+    componentDidLoad() {
+        this.afCategoriesChangeHandler();
+        this.collapsed = this.afStartCollapsed;
+    }
+    displayCategories() {
+        if (this.afHideToggle) {
+            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
+        }
+        if (this.afAllCategories) {
+            if (this.collapsed &&
+                this.afCategories.length + 1 > this.afVisibleCollapsed)
+                return [
+                    { name: this.afAllCategoriesText },
+                    ...this.afCategories.slice(0, this.afVisibleCollapsed - 1)
+                ];
+            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
+        }
+        if (this.collapsed && this.afCategories.length > this.afVisibleCollapsed)
+            return this.afCategories.slice(0, this.afVisibleCollapsed);
+        return this.afCategories;
+    }
+    toggleCategory(category) {
+        if (!this.afMultiselect) {
+            if (this.afAllCategories && category.name === this.afAllCategoriesText) {
+                if (this.selectedCategories.includes(this.afAllCategoriesText)) {
+                    this.selectedCategories = [];
+                    this.afOnSelectedCategoryChange.emit([]);
+                }
+                else {
+                    this.selectedCategories = [this.afAllCategoriesText];
+                    this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
+                }
+            }
+            // Not allCategories
+            this.selectedCategories = [category.name];
+            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
+            return;
+        }
+        if (this.afAllCategories && category.name === this.afAllCategoriesText) {
+            if (this.selectedCategories.includes(this.afAllCategoriesText)) {
+                this.selectedCategories = [];
+                this.afOnSelectedCategoryChange.emit([]);
+            }
+            else {
+                this.selectedCategories = [this.afAllCategoriesText];
+                this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
+            }
+        }
+        else {
+            if (this.selectedCategories.findIndex((name) => name === category.name) >= 0)
+                this.selectedCategories = this.selectedCategories.filter((name) => name !== category.name);
+            else if (this.afAllCategories)
+                this.selectedCategories = [
+                    ...this.selectedCategories.filter((name) => name !== this.afAllCategoriesText),
+                    category.name
+                ];
+            else
+                this.selectedCategories = [...this.selectedCategories, category.name];
+            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
+        }
+    }
+    toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+    }
+    toggleHidden() {
+        this.afHideToggle = !this.toggleHidden;
+    }
+    render() {
+        return (h(Host, { key: 'ec8e3838a29d5f77462b0c7e8e5ddb510eac2bc9' }, h("div", { key: '085c916fa62b00636a188ac8b225af8f370c25ff', class: {
+                'digi-form-category-filter': true
+            } }, this.displayCategories().map((category) => (h("digi-button", { class: {
+                'digi-form-category-filter--category': true,
+                'digi-form-category-filter--category--not-selected': !this.selectedCategories.includes(category.name)
+            }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
+                this.toggleCategory(category);
+            } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '2c8459757e7940cc6840132d6bf58d765ad3bef1' }, h("digi-button", { key: 'cf326f63112f4301fafd93bbbe0ae6a604ce6790', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+                this.toggleCollapsed();
+            } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afCategories": [{
+                "afCategoriesChangeHandler": 0
+            }]
+    }; }
+};
+FormCategoryFilter.style = formCategoryFilterCss();
+
+export { FormCategoryFilter as digi_form_category_filter };