@designsystem-se/af 39.2.1 → 39.2.3

package/dist/cjs/{digi-button_5.cjs.entry.js → digi-calendar-week-view.cjs.entry.js}

@@ -1,135 +1,12 @@
 'use strict';
 
-var index = require('./index-Cn1hHaSy.js');
-var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
-var buttonVariation_enum = require('./button-variation.enum-ngMqFLdW.js');
-var buttonType_enum = require('./button-type.enum-2UH0KkO-.js');
+var index$1 = require('./index-Cn1hHaSy.js');
 var text = require('./text-Cu3CaHGj.js');
-var index$2 = require('./index-Bdlw-Iuy.js');
+var index = require('./index-DUQtADgG.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var logger_util = require('./logger.util-DUhrcCTY.js');
+var buttonVariation_enum = require('./button-variation.enum-DkUalo9f.js');
 var calendarWeekViewHeadingLevel_enum = require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
-var index$1 = require('./index-Snltmefx.js');
-
-const buttonCss = () => `@charset "UTF-8";.sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--background--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--focus:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--active:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--secondary--default:var(--digi--color--background--interactive--default--secondary);--digi--button--color--background--secondary--hover:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--focus:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--active:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--hover:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--focus:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--active:var(--digi--color--text--interactive--secondary);--digi--button--color--text--secondary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--hover:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--focus:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--active:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--function--default:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--hover:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--focus:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--active:var(--digi--color--text--interactive--primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--border--primary--focus:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--active:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--secondary--default:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--hover:var(--digi--color--border--interactive--hover--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--active:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--hover:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--focus:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--active:var(--digi--color--icon--secondary);--digi--button--color--icon--secondary--default:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--hover:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--focus:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--active:var(--digi--color--icon--brand-primary);--digi--button--color--icon--function--default:var(--digi--color--icon--cta);--digi--button--color--icon--function--hover:var(--digi--color--icon--cta);--digi--button--color--icon--function--focus:var(--digi--color--icon--cta);--digi--button--color--icon--function--active:var(--digi--color--icon--cta);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--padding--large:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--box-shadow:none;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--primary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--primary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--primary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--primary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--primary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--primary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--secondary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--secondary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--secondary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--secondary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--secondary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--secondary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--secondary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--secondary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--secondary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--secondary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--function--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--function--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--function--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--function--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--function--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--function--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-large.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--large);--PADDING:var(--digi--button--padding--large);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);box-shadow:var(--digi--button--box-shadow);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}@media (any-hover: hover){.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(--digi--button--text-align--full-width);--digi--button--justify-content--default:var(--digi--button--justify-content--full-width)}`;
-
-const Button = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afOnClick = index.createEvent(this, "afOnClick", 7);
-        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
-        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
-        this.afOnReady = index.createEvent(this, "afOnReady", 3);
-        /**
-         * Sätter knappens storlek. 'medium' är förvalt.
-         * @en Set button size. Defaults to medium size.
-         */
-        this.afSize = buttonVariation_enum.ButtonSize.MEDIUM;
-        /**
-         * Sätt variant. Om varianten är 'tertiary' så krävs även en ikon.
-         * @en Set button variation. If set to FUNCTION, the button also needs an icon.
-         */
-        this.afVariation = buttonVariation_enum.ButtonVariation.PRIMARY;
-        /**
-         * Sätt attributet 'type'.
-         * @en Set button `type` attribute.
-         */
-        this.afType = buttonType_enum.ButtonType.BUTTON;
-        /**
-         * 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_util.randomIdGenerator('digi-button');
-        /**
-         * Sätter knappens bredd till 100%.
-         * @en Set button width to 100%.
-         */
-        this.afFullWidth = false;
-    }
-    fullWidthHandler() {
-        this.isFullSize = this.afFullWidth;
-    }
-    /**
-     * Hämta en referens till buttonelementet. Bra för att t.ex. sätta fokus programmatiskt.
-     * @en Returns a reference to the button element. Handy for setting focus programmatically.
-     */
-    async afMGetButtonElement() {
-        return this._button;
-    }
-    componentWillLoad() {
-        this.setHasIcon();
-        this.fullWidthHandler();
-    }
-    componentWillUpdate() {
-        this.setHasIcon();
-    }
-    componentDidLoad() {
-        this.afOnReady.emit();
-    }
-    setHasIcon() {
-        const icon = !!this.hostElement.querySelector('[slot="icon"]');
-        const iconSecondary = !!this.hostElement.querySelector('[slot="icon-secondary"]');
-        if (icon) {
-            this.hasIcon = icon;
-        }
-        if (iconSecondary) {
-            this.hasIconSecondary = iconSecondary;
-        }
-    }
-    get cssModifiers() {
-        return {
-            [`digi-button--variation-${this.afVariation}`]: !!this.afVariation,
-            [`digi-button--size-${this.afSize}`]: !!this.afSize,
-            'digi-button--icon': this.hasIcon,
-            'digi-button--icon-secondary': this.hasIconSecondary,
-            'digi-button--full-width': this.isFullSize
-        };
-    }
-    get pressedState() {
-        if (this.afAriaPressed === null || this.afAriaPressed === undefined) {
-            return;
-        }
-        return this.afAriaPressed ? 'true' : 'false';
-    }
-    get expandedState() {
-        if (this.afAriaExpanded === null || this.afAriaExpanded === undefined) {
-            return;
-        }
-        return this.afAriaExpanded ? 'true' : 'false';
-    }
-    get hasPopup() {
-        if (this.afAriaHaspopup === null || this.afAriaHaspopup === undefined) {
-            return;
-        }
-        return this.afAriaHaspopup ? 'true' : 'false';
-    }
-    clickHandler(e) {
-        this.afOnClick.emit(e);
-    }
-    focusHandler(e) {
-        this.afOnFocus.emit(e);
-    }
-    blurHandler(e) {
-        this.afOnBlur.emit(e);
-    }
-    render() {
-        return (index.h(index.Host, { key: '3a398d75ad83e3caa9ec54928544d5bf8315d30f' }, index.h("button", { key: '2159552d7e8064acbb6da5c02c28ead3d4985e85', class: Object.assign({ 'digi-button': true }, this.cssModifiers), type: this.afType, role: this.afRole, ref: (el) => {
-                var _a, _b, _c;
-                this._button = el;
-                (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
-                // Stencil has a bug wiith form attribute so we need to set it like this
-                // https://github.com/ionic-team/stencil/issues/2703
-                this.afForm
-                    ? (_b = this._button) === null || _b === void 0 ? void 0 : _b.setAttribute('form', this.afForm)
-                    : (_c = this._button) === null || _c === void 0 ? void 0 : _c.removeAttribute('form');
-            }, id: this.afId, tabindex: this.afTabindex, "aria-label": this.afAriaLabel, "aria-labelledby": this.afAriaLabelledby, "aria-controls": this.afAriaControls, "aria-pressed": this.pressedState, "aria-expanded": this.expandedState, "aria-haspopup": this.hasPopup, "aria-current": this.afAriaCurrent, "aria-checked": this.afAriaChecked, onClick: (e) => this.clickHandler(e), onFocus: (e) => this.focusHandler(e), onBlur: (e) => this.blurHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null, form: this.afForm, lang: this.afLang, dir: this.afDir }, this.hasIcon && (index.h("span", { key: '1188d5cb005a51e4e065b70663d06877db3a1477', class: "digi-button__icon" }, index.h("slot", { key: 'f90319563c18e1f82fa13f478b4d4d13ce3e9bf7', name: "icon" }))), index.h("span", { key: '17dce8eed2e845ca6166cf85a1c0252c2c0b8037', class: "digi-button__text" }, index.h("slot", { key: '2f637e48b837ecd0f0f2333349f328c497aee650' })), this.hasIconSecondary && (index.h("span", { key: '49ffd3361b0cc00c074e1ce332dab2de33127fcc', class: "digi-button__icon digi-button__icon--secondary" }, index.h("slot", { key: '367d3ba37e2fd0b7e83d600f35d02d4df303c1c0', name: "icon-secondary" }))))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "afFullWidth": [{
-                "fullWidthHandler": 0
-            }]
-    }; }
-};
-Button.style = buttonCss();
 
 /**
  * @name addDays
@@ -155,9 +32,9 @@ Button.style = buttonCss();
  */
 
 function addDays(dirtyDate, dirtyAmount) {
-  index$1.requiredArgs(2, arguments);
-  var date = index$1.toDate(dirtyDate);
-  var amount = index$2.toInteger(dirtyAmount);
+  index.requiredArgs(2, arguments);
+  var date = index.toDate(dirtyDate);
+  var amount = index.toInteger(dirtyAmount);
 
   if (isNaN(amount)) {
     return new Date(NaN);
@@ -205,18 +82,18 @@ function addDays(dirtyDate, dirtyAmount) {
  */
 
 function startOfWeek(dirtyDate, dirtyOptions) {
-  index$1.requiredArgs(1, arguments);
+  index.requiredArgs(1, arguments);
   var options = dirtyOptions || {};
   var locale = options.locale;
   var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
-  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index$2.toInteger(localeWeekStartsOn);
-  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index$2.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
+  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index.toInteger(localeWeekStartsOn);
+  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
 
   if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
     throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
   }
 
-  var date = index$1.toDate(dirtyDate);
+  var date = index.toDate(dirtyDate);
   var day = date.getDay();
   var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
   date.setDate(date.getDate() - diff);
@@ -250,7 +127,7 @@ function startOfWeek(dirtyDate, dirtyOptions) {
  */
 
 function startOfISOWeek(dirtyDate) {
-  index$1.requiredArgs(1, arguments);
+  index.requiredArgs(1, arguments);
   return startOfWeek(dirtyDate, {
     weekStartsOn: 1
   });
@@ -287,8 +164,8 @@ function startOfISOWeek(dirtyDate) {
  */
 
 function getISOWeekYear(dirtyDate) {
-  index$1.requiredArgs(1, arguments);
-  var date = index$1.toDate(dirtyDate);
+  index.requiredArgs(1, arguments);
+  var date = index.toDate(dirtyDate);
   var year = date.getFullYear();
   var fourthOfJanuaryOfNextYear = new Date(0);
   fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
@@ -335,7 +212,7 @@ function getISOWeekYear(dirtyDate) {
  */
 
 function startOfISOWeekYear(dirtyDate) {
-  index$1.requiredArgs(1, arguments);
+  index.requiredArgs(1, arguments);
   var year = getISOWeekYear(dirtyDate);
   var fourthOfJanuary = new Date(0);
   fourthOfJanuary.setFullYear(year, 0, 4);
@@ -442,8 +319,8 @@ var MILLISECONDS_IN_DAY = 86400000; // This function will be a part of public AP
 // See issue: https://github.com/date-fns/date-fns/issues/376
 
 function getUTCDayOfYear(dirtyDate) {
-  index$1.requiredArgs(1, arguments);
-  var date = index$1.toDate(dirtyDate);
+  index.requiredArgs(1, arguments);
+  var date = index.toDate(dirtyDate);
   var timestamp = date.getTime();
   date.setUTCMonth(0, 1);
   date.setUTCHours(0, 0, 0, 0);
@@ -550,7 +427,7 @@ var formatters = {
   },
   // Local week-numbering year
   Y: function (date, token, localize, options) {
-    var signedWeekYear = index$2.getUTCWeekYear(date, options); // Returns 1 for 1 BC (which is year 0 in JavaScript)
+    var signedWeekYear = index.getUTCWeekYear(date, options); // Returns 1 for 1 BC (which is year 0 in JavaScript)
 
     var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; // Two digit year
 
@@ -571,7 +448,7 @@ var formatters = {
   },
   // ISO week-numbering year
   R: function (date, token) {
-    var isoWeekYear = index$2.getUTCISOWeekYear(date); // Padding
+    var isoWeekYear = index.getUTCISOWeekYear(date); // Padding
 
     return addLeadingZeros(isoWeekYear, token.length);
   },
@@ -754,7 +631,7 @@ var formatters = {
   },
   // Local week of year
   w: function (date, token, localize, options) {
-    var week = index$2.getUTCWeek(date, options);
+    var week = index.getUTCWeek(date, options);
 
     if (token === 'wo') {
       return localize.ordinalNumber(week, {
@@ -766,7 +643,7 @@ var formatters = {
   },
   // ISO week of year
   I: function (date, token, localize) {
-    var isoWeek = index$2.getUTCISOWeek(date);
+    var isoWeek = index.getUTCISOWeek(date);
 
     if (token === 'Io') {
       return localize.ordinalNumber(isoWeek, {
@@ -1639,21 +1516,21 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
  */
 
 function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
-  index$1.requiredArgs(2, arguments);
+  index.requiredArgs(2, arguments);
   var formatStr = String(dirtyFormatStr);
   var options = dirtyOptions || {};
-  var locale = options.locale || index$2.locale;
+  var locale = options.locale || index.locale;
   var localeFirstWeekContainsDate = locale.options && locale.options.firstWeekContainsDate;
-  var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : index$2.toInteger(localeFirstWeekContainsDate);
-  var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : index$2.toInteger(options.firstWeekContainsDate); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
+  var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : index.toInteger(localeFirstWeekContainsDate);
+  var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : index.toInteger(options.firstWeekContainsDate); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
 
   if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
     throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
   }
 
   var localeWeekStartsOn = locale.options && locale.options.weekStartsOn;
-  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index$2.toInteger(localeWeekStartsOn);
-  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index$2.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
+  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index.toInteger(localeWeekStartsOn);
+  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
 
   if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
     throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
@@ -1667,17 +1544,17 @@ function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
     throw new RangeError('locale must contain formatLong property');
   }
 
-  var originalDate = index$1.toDate(dirtyDate);
+  var originalDate = index.toDate(dirtyDate);
 
-  if (!index$1.isValid(originalDate)) {
+  if (!index.isValid(originalDate)) {
     throw new RangeError('Invalid time value');
   } // Convert the date in system timezone to the same date in UTC+00:00 timezone.
   // This ensures that when UTC functions will be implemented, locales will be compatible with them.
   // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376
 
 
-  var timezoneOffset = index$2.getTimezoneOffsetInMilliseconds(originalDate);
-  var utcDate = index$2.subMilliseconds(originalDate, timezoneOffset);
+  var timezoneOffset = index.getTimezoneOffsetInMilliseconds(originalDate);
+  var utcDate = index.subMilliseconds(originalDate, timezoneOffset);
   var formatterOptions = {
     firstWeekContainsDate: firstWeekContainsDate,
     weekStartsOn: weekStartsOn,
@@ -1688,7 +1565,7 @@ function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
     var firstCharacter = substring[0];
 
     if (firstCharacter === 'p' || firstCharacter === 'P') {
-      var longFormatter = index$2.longFormatters[firstCharacter];
+      var longFormatter = index.longFormatters[firstCharacter];
       return longFormatter(substring, locale.formatLong, formatterOptions);
     }
 
@@ -1708,12 +1585,12 @@ function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
     var formatter = formatters[firstCharacter];
 
     if (formatter) {
-      if (!options.useAdditionalWeekYearTokens && index$2.isProtectedWeekYearToken(substring)) {
-        index$2.throwProtectedError(substring, dirtyFormatStr, dirtyDate);
+      if (!options.useAdditionalWeekYearTokens && index.isProtectedWeekYearToken(substring)) {
+        index.throwProtectedError(substring, dirtyFormatStr, dirtyDate);
       }
 
-      if (!options.useAdditionalDayOfYearTokens && index$2.isProtectedDayOfYearToken(substring)) {
-        index$2.throwProtectedError(substring, dirtyFormatStr, dirtyDate);
+      if (!options.useAdditionalDayOfYearTokens && index.isProtectedDayOfYearToken(substring)) {
+        index.throwProtectedError(substring, dirtyFormatStr, dirtyDate);
       }
 
       return formatter(utcDate, substring, locale.localize, formatterOptions);
@@ -1758,8 +1635,8 @@ var MILLISECONDS_IN_WEEK = 604800000;
  */
 
 function getISOWeek(dirtyDate) {
-  index$1.requiredArgs(1, arguments);
-  var date = index$1.toDate(dirtyDate);
+  index.requiredArgs(1, arguments);
+  var date = index.toDate(dirtyDate);
   var diff = startOfISOWeek(date).getTime() - startOfISOWeekYear(date).getTime(); // Round the number of days to the nearest integer
   // because the number of milliseconds in a week is not constant
   // (e.g. it's different in the week of the daylight saving time clock shift)
@@ -1791,8 +1668,8 @@ function getISOWeek(dirtyDate) {
  */
 
 function subDays(dirtyDate, dirtyAmount) {
-  index$1.requiredArgs(2, arguments);
-  var amount = index$2.toInteger(dirtyAmount);
+  index.requiredArgs(2, arguments);
+  var amount = index.toInteger(dirtyAmount);
   return addDays(dirtyDate, -amount);
 }
 
@@ -1828,19 +1705,19 @@ function subDays(dirtyDate, dirtyAmount) {
  * //=> Sun Sep 07 2014 00:00:00
  */
 function setDay(dirtyDate, dirtyDay, dirtyOptions) {
-  index$1.requiredArgs(2, arguments);
+  index.requiredArgs(2, arguments);
   var options = {};
   var locale = options.locale;
   var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
-  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index$2.toInteger(localeWeekStartsOn);
-  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index$2.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
+  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : index.toInteger(localeWeekStartsOn);
+  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : index.toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
 
   if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
     throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
   }
 
-  var date = index$1.toDate(dirtyDate);
-  var day = index$2.toInteger(dirtyDay);
+  var date = index.toDate(dirtyDate);
+  var day = index.toInteger(dirtyDay);
   var currentDay = date.getDay();
   var remainder = day % 7;
   var dayIndex = (remainder + 7) % 7;
@@ -1962,15 +1839,15 @@ var dateTimeFormats = {
   short: '{{date}} {{time}}'
 };
 var formatLong = {
-  date: index$2.buildFormatLongFn({
+  date: index.buildFormatLongFn({
     formats: dateFormats,
     defaultWidth: 'full'
   }),
-  time: index$2.buildFormatLongFn({
+  time: index.buildFormatLongFn({
     formats: timeFormats,
     defaultWidth: 'full'
   }),
-  dateTime: index$2.buildFormatLongFn({
+  dateTime: index.buildFormatLongFn({
     formats: dateTimeFormats,
     defaultWidth: 'full'
   })
@@ -2092,26 +1969,26 @@ function ordinalNumber(dirtyNumber) {
 
 var localize = {
   ordinalNumber: ordinalNumber,
-  era: index$2.buildLocalizeFn({
+  era: index.buildLocalizeFn({
     values: eraValues,
     defaultWidth: 'wide'
   }),
-  quarter: index$2.buildLocalizeFn({
+  quarter: index.buildLocalizeFn({
     values: quarterValues,
     defaultWidth: 'wide',
     argumentCallback: function (quarter) {
       return Number(quarter) - 1;
     }
   }),
-  month: index$2.buildLocalizeFn({
+  month: index.buildLocalizeFn({
     values: monthValues,
     defaultWidth: 'wide'
   }),
-  day: index$2.buildLocalizeFn({
+  day: index.buildLocalizeFn({
     values: dayValues,
     defaultWidth: 'wide'
   }),
-  dayPeriod: index$2.buildLocalizeFn({
+  dayPeriod: index.buildLocalizeFn({
     values: dayPeriodValues,
     defaultWidth: 'wide',
     formattingValues: formattingDayPeriodValues,
@@ -2171,20 +2048,20 @@ var parseDayPeriodPatterns = {
   }
 };
 var match = {
-  ordinalNumber: index$2.buildMatchPatternFn({
+  ordinalNumber: index.buildMatchPatternFn({
     matchPattern: matchOrdinalNumberPattern,
     parsePattern: parseOrdinalNumberPattern,
     valueCallback: function (value) {
       return parseInt(value, 10);
     }
   }),
-  era: index$2.buildMatchFn({
+  era: index.buildMatchFn({
     matchPatterns: matchEraPatterns,
     defaultMatchWidth: 'wide',
     parsePatterns: parseEraPatterns,
     defaultParseWidth: 'any'
   }),
-  quarter: index$2.buildMatchFn({
+  quarter: index.buildMatchFn({
     matchPatterns: matchQuarterPatterns,
     defaultMatchWidth: 'wide',
     parsePatterns: parseQuarterPatterns,
@@ -2193,19 +2070,19 @@ var match = {
       return index + 1;
     }
   }),
-  month: index$2.buildMatchFn({
+  month: index.buildMatchFn({
     matchPatterns: matchMonthPatterns,
     defaultMatchWidth: 'wide',
     parsePatterns: parseMonthPatterns,
     defaultParseWidth: 'any'
   }),
-  day: index$2.buildMatchFn({
+  day: index.buildMatchFn({
     matchPatterns: matchDayPatterns,
     defaultMatchWidth: 'wide',
     parsePatterns: parseDayPatterns,
     defaultParseWidth: 'any'
   }),
-  dayPeriod: index$2.buildMatchFn({
+  dayPeriod: index.buildMatchFn({
     matchPatterns: matchDayPeriodPatterns,
     defaultMatchWidth: 'any',
     parsePatterns: parseDayPeriodPatterns,
@@ -2243,10 +2120,10 @@ const calendarWeekViewCss = () => `.sc-digi-calendar-week-view-h{--digi--calenda
 
 const CalendarWeekView = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afOnWeekChange = index.createEvent(this, "afOnWeekChange", 7);
-        this.afOnDateChange = index.createEvent(this, "afOnDateChange", 7);
-        this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        index$1.registerInstance(this, hostRef);
+        this.afOnWeekChange = index$1.createEvent(this, "afOnWeekChange", 7);
+        this.afOnDateChange = index$1.createEvent(this, "afOnDateChange", 7);
+        this.afOnReady = index$1.createEvent(this, "afOnReady", 3);
         this.minDate = new Date();
         this.maxDate = new Date();
         this.dates = [];
@@ -2287,7 +2164,30 @@ const CalendarWeekView = class {
         this.weekDays = [...newDates];
     }
     afDatesUpdate() {
-        const dateList = [...JSON.parse(this.afDates)];
+        // Angular/React can connect the element before afDates is set.
+        if (this.afDates == null || this.afDates === '') {
+            return;
+        }
+        const hadDates = this.dates.length > 0;
+        let dateList;
+        try {
+            if (Array.isArray(this.afDates)) {
+                dateList = [...this.afDates];
+            }
+            else if (typeof this.afDates === 'string') {
+                dateList = JSON.parse(this.afDates);
+            }
+            else {
+                return;
+            }
+        }
+        catch (_a) {
+            logger_util.logger.warn(`Invalid JSON in "af-dates" attribute`, this.hostElement);
+            return;
+        }
+        if (!Array.isArray(dateList)) {
+            return;
+        }
         this.dates = [
             ...dateList.sort((a, b) => {
                 const c = new Date(a);
@@ -2295,6 +2195,9 @@ const CalendarWeekView = class {
                 return this.getTime(c) - this.getTime(d);
             })
         ];
+        if (!hadDates && this.dates.length > 0) {
+            this.initDates();
+        }
     }
     /**
      * Kan användas för att manuellt sätta om det aktiva datumet. Formatet måste vara 'yyyy-MM-dd'.
@@ -2318,6 +2221,9 @@ const CalendarWeekView = class {
         this.afOnWeekChange.emit('next');
     }
     initDates() {
+        if (this.dates.length === 0) {
+            return;
+        }
         this.minDate = new Date(this.dates[0]);
         this.maxDate = new Date(this.dates[this.dates.length - 1]);
         this.selectedDate = format(new Date(this.dates[0]), 'yyyy-MM-dd', {
@@ -2329,9 +2235,23 @@ const CalendarWeekView = class {
     }
     componentWillLoad() {
         this.afDatesUpdate();
-        this.initDates();
+        // Angular attaches the host first and binds `[afDates]` on the next frame
+        // (Stencil 4.36+). @Watch skips that first assignment, so if dates are not
+        // here yet, wait one frame. React/vanilla that already set the prop skip
+        // the delay.
+        if (this.dates.length === 0) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.afDatesUpdate();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
+        if (this.dates.length === 0) {
+            this.afDatesUpdate();
+        }
         this.afOnReady.emit();
     }
     get prevWeekText() {
@@ -2355,7 +2275,7 @@ const CalendarWeekView = class {
                 format(new Date(lastDate), 'MMMM yyyy', { locale: locale });
     }
     render() {
-        return (index.h("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, index.h("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, index.h("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, index.h("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, index.h("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, index.h(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, index.h("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), index.h("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), index.h("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
+        return (index$1.h("div", { key: '44d49828a7f43a1f3943aaf0af4139f402844bf0', class: "digi-calendar-week-view" }, index$1.h("nav", { key: '44ba98a7c433077c2c11c55b150a5cc2f1d38ac2', class: "digi-calendar-week-view__timepicker" }, index$1.h("div", { key: '160ce73dc293abd69193c2b1750c9fd7400b8804', class: "digi-calendar-week-view__dates" }, index$1.h("div", { key: '2d60245978d9c7615f3ff5ec7b9d8d628e16f843', class: "digi-calendar-week-view__flex" }, index$1.h("digi-typography", { key: '23a1c94d0575061951f67f46782144de52e5e662' }, index$1.h(this.afHeadingLevel, { key: 'a183705a035f4d3d57ced74920221f40bbe6019f', role: "status", class: "digi-calendar-week-view__heading" }, index$1.h("span", { key: '147910745991716f3557491c6e6aa702f479e8c7', class: "digi-calendar-week-view__month" }, this.currentMonth), index$1.h("span", { key: '0d91367cd6066a2b35349edd0ff93e20b5326f04', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), index$1.h("ul", { key: 'fdff670cf241e05920e19e0ce6e601b62ae9a3f0', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
             const date = format(new Date(dateItem), 'd', {
                 locale: locale
             });
@@ -2365,26 +2285,27 @@ const CalendarWeekView = class {
             const fullDay = format(new Date(dateItem), 'EEEE ', {
                 locale: locale
             });
-            return (index.h("li", { class: "digi-calendar-week-view__date-list-item", "aria-current": dateItem === this.todaysDate && 'date' }, index.h("digi-button", { onClick: () => (this.selectedDate = dateItem), afAriaLabel: `${fullDay} ${date}`, "aria-hidden": !this.dates.includes(dateItem) ? 'true' : 'false', "af-tabindex": !this.dates.includes(dateItem) ? -1 : null, "aria-pressed": this.selectedDate == dateItem ? 'true' : 'false', class: {
+            return (index$1.h("li", { class: "digi-calendar-week-view__date-list-item", "aria-current": dateItem === this.todaysDate && 'date' }, index$1.h("digi-button", { onClick: () => (this.selectedDate = dateItem), afAriaLabel: `${fullDay} ${date}`, "aria-hidden": !this.dates.includes(dateItem) ? 'true' : 'false', "af-tabindex": !this.dates.includes(dateItem) ? -1 : null, "aria-pressed": this.selectedDate == dateItem ? 'true' : 'false', class: {
                     'digi-calendar-week-view__date-button': true,
                     'digi-calendar-week-view__date-button--active': this.selectedDate == dateItem,
                     'digi-calendar-week-view__date-button--no-value': !this.dates.includes(dateItem)
-                }, "af-variation": buttonVariation_enum.ButtonVariation.SECONDARY }, index.h("span", { class: "digi-calendar-week-view__date-button-content", "aria-hidden": "true" }, index.h("span", { class: {
+                }, "af-variation": buttonVariation_enum.ButtonVariation.SECONDARY }, index$1.h("span", { class: "digi-calendar-week-view__date-button-content", "aria-hidden": "true" }, index$1.h("span", { class: {
                     'digi-calendar-week-view__date-button-day': this.selectedDate != dateItem,
                     'digi-calendar-week-view__date-button-day--active': this.selectedDate == dateItem
-                } }, day), index.h("span", { class: "digi-calendar-week-view__date-button-date" }, date), index.h("span", { "aria-hidden": "true", class: {
+                } }, day), index$1.h("span", { class: "digi-calendar-week-view__date-button-date" }, date), index$1.h("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), index.h("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
+        })))), index$1.h("digi-button", { key: 'dbae5227d0316a5a67febc7de83b1c4c5cfc1044', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, index.h("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), index.h("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, index$1.h("digi-icon-chevron-left", { key: '65d0f656a0d35911d39f9b8e9ade224be54d4371', slot: "icon" }), this.prevWeekText), index$1.h("digi-button", { key: '68d9b3d6c929d0185f412add980a542b3c86fbb2', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, index.h("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), index.h("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, index.h("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, index.h("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
+            }, "af-variation": "secondary" }, index$1.h("digi-icon-chevron-right", { key: 'a9e688f815a5053aa709cfeb9359131f73df21c0', slot: "icon-secondary" }), this.nextWeekText)), index$1.h("div", { key: '7d1073f6cd1982fda2ce7dcb60532c94bd1d0634', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, index$1.h("digi-typography", { key: 'db7ce0ca80485df1e4ae67200f2cd90cc80938d5' }, index$1.h("slot", { key: 'f08f447ae89612dfcea56c638024220bc29e7914' })))));
     }
+    get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
         "selectedDate": [{
                 "selectedDateChangeHandler": 0
@@ -2399,69 +2320,4 @@ const CalendarWeekView = class {
 };
 CalendarWeekView.style = calendarWeekViewCss();
 
-const iconChevronLeftCss = () => `.sc-digi-icon-chevron-left-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-left-h svg.sc-digi-icon-chevron-left{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
-
-const IconChevronLeft = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * För att dölja ikonen för skärmläsare. Default är satt till true.
-         * @en Hides the icon for screen readers. Default is set to true.
-         */
-        this.afSvgAriaHidden = true;
-        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
-    }
-    render() {
-        return (index.h("svg", { key: 'def846a254699c1487c6650595a307d69570b03b', class: "digi-icon-chevron-left", width: "9", height: "14", viewBox: "0 0 9 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined }, this.afTitle && index.h("title", { key: '07e54926302b1524b1040b2a807060670448c0f8', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'af3cae8cfe1b8451e4698e1ec43aeb52122d0f81' }, this.afDesc), index.h("path", { key: 'd98281b3481fbbc3853c5a34d1fdd35f58b0056c', class: "digi-icon-chevron-left__shape", d: "M8 13L2 6.926 7.853 1", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
-    }
-};
-IconChevronLeft.style = iconChevronLeftCss();
-
-const iconChevronRightCss = () => `.sc-digi-icon-chevron-right-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-right-h svg.sc-digi-icon-chevron-right{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
-
-const IconChevronRight = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * För att dölja ikonen för skärmläsare. Default är satt till true.
-         * @en Hides the icon for screen readers. Default is set to true.
-         */
-        this.afSvgAriaHidden = true;
-        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
-    }
-    render() {
-        return (index.h("svg", { key: '8a7349c8865c737830b6af0e3ea9aa7c6bd50f6f', class: "digi-icon-chevron-right", width: "9", height: "14", viewBox: "0 0 9 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
-                ? this.afSvgAriaLabelledby
-                : this.afTitle
-                    ? this.titleId
-                    : undefined }, this.afTitle && index.h("title", { key: '83176271f8248b1ad42e1e5baf2f31ddc244cb0a', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'c22c051704141e87412e98ab3733afab36bf0bf3' }, this.afDesc), index.h("path", { key: '5f3f04a5512ca21c49e25797401bf68ac726c9d7', class: "digi-icon-chevron-right__shape", d: "M1 13l6-6.074L1.147 1", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
-    }
-};
-IconChevronRight.style = iconChevronRightCss();
-
-const typographyCss = () => `digi-typography{--digi--typography--h1--margin--small:var(--digi--margin--h1-small);--digi--typography--h1--margin--medium:var(--digi--margin--h1-medium);--digi--typography--h1--margin--large:var(--digi--margin--h1-large);--digi--typography--h2--margin--small:var(--digi--margin--h2-small);--digi--typography--h2--margin--large:var(--digi--margin--h2-large);--digi--typography--h3--margin--small:var(--digi--margin--h3-small);--digi--typography--h3--margin--large:var(--digi--margin--h3-large);--digi--typography--h4--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h4--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--h5--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h6--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--paragraph--margin--small:var(--digi--margin--text-small);--digi--typography--paragraph--margin--large:var(--digi--margin--text-large);--digi--typography--paragraph--margin-top:initial;--digi--typography--color--text:var(--digi--color--text--primary);--digi--typography--text-decoration-thickness--hover:0.156em;--digi--typography--text-decoration-thickness--default:0.05em;--digi--typography--text-underline-offset:3px;font-family:var(--digi--global--typography--font-family--default);color:var(--digi--typography--color--text);font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);--FONT-SIZE--BODY:var(--digi--typography--body--font-size--mobile);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--mobile);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--mobile);--TEXT-DECORATION--BODY:var(     --digi--typography--body--text-decoration--mobile   );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--mobile);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--mobile);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--mobile);--TEXT-DECORATION--LINK:var(     --digi--typography--link--text-decoration--mobile   );--FONT-SIZE--HEADING-1:var(--digi--typography--heading-1--font-size--mobile);--LINE-HEIGHT--HEADING-1:var(     --digi--typography--heading-1--line-height--mobile   );--FONT-WEIGHT--HEADING-1:var(     --digi--typography--heading-1--font-weight--mobile   );--TEXT-DECORATION--HEADING-1:var(     --digi--typography--heading-1--text-decoration--mobile   );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--small);--FONT-SIZE--HEADING-2:var(--digi--typography--heading-2--font-size--mobile);--LINE-HEIGHT--HEADING-2:var(     --digi--typography--heading-2--line-height--mobile   );--FONT-WEIGHT--HEADING-2:var(     --digi--typography--heading-2--font-weight--mobile   );--TEXT-DECORATION--HEADING-2:var(     --digi--typography--heading-2--text-decoration--mobile   );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(--digi--typography--heading-3--font-size--mobile);--LINE-HEIGHT--HEADING-3:var(     --digi--typography--heading-3--line-height--mobile   );--FONT-WEIGHT--HEADING-3:var(     --digi--typography--heading-3--font-weight--mobile   );--TEXT-DECORATION--HEADING-3:var(     --digi--typography--heading-3--text-decoration--mobile   );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-4:var(     --digi--typography--heading-4--line-height--mobile   );--FONT-WEIGHT--HEADING-4:var(     --digi--typography--heading-4--font-weight--mobile   );--TEXT-DECORATION--HEADING-4:var(     --digi--typography--heading-4--text-decoration--mobile   );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-5:var(     --digi--typography--heading-4--line-height--mobile   );--FONT-WEIGHT--HEADING-5:var(     --digi--typography--heading-4--font-weight--mobile   );--TEXT-DECORATION--HEADING-5:var(     --digi--typography--heading-4--text-decoration--mobile   );--MARGIN--HEADING-5:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-6:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-6:var(     --digi--typography--heading-4--line-height--mobile   );--FONT-WEIGHT--HEADING-6:var(     --digi--typography--heading-4--font-weight--mobile   );--TEXT-DECORATION--HEADING-6:var(     --digi--typography--heading-4--text-decoration--mobile   );--MARGIN--HEADING-6:var(--digi--typography--h4--margin--small)}@media (min-width: 61.9375rem){digi-typography{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--desktop);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--desktop);--TEXT-DECORATION--BODY:var(       --digi--typography--body--text-decoration--desktop     );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--desktop);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--desktop);--TEXT-DECORATION--LINK:var(       --digi--typography--link--text-decoration--desktop     );--FONT-SIZE--HEADING-1:var(       --digi--typography--heading-1--font-size--desktop     );--LINE-HEIGHT--HEADING-1:var(       --digi--typography--heading-1--line-height--desktop     );--FONT-WEIGHT--HEADING-1:var(       --digi--typography--heading-1--font-weight--desktop     );--TEXT-DECORATION--HEADING-1:var(       --digi--typography--heading-1--text-decoration--desktop     );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var(       --digi--typography--heading-2--font-size--desktop     );--LINE-HEIGHT--HEADING-2:var(       --digi--typography--heading-2--line-height--desktop     );--FONT-WEIGHT--HEADING-2:var(       --digi--typography--heading-2--font-weight--desktop     );--TEXT-DECORATION--HEADING-2:var(       --digi--typography--heading-2--text-decoration--desktop     );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(       --digi--typography--heading-3--font-size--desktop     );--LINE-HEIGHT--HEADING-3:var(       --digi--typography--heading-3--line-height--desktop     );--FONT-WEIGHT--HEADING-3:var(       --digi--typography--heading-3--font-weight--desktop     );--TEXT-DECORATION--HEADING-3:var(       --digi--typography--heading-3--text-decoration--desktop     );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(       --digi--typography--heading-4--font-size--desktop     );--LINE-HEIGHT--HEADING-4:var(       --digi--typography--heading-4--line-height--desktop     );--FONT-WEIGHT--HEADING-4:var(       --digi--typography--heading-4--font-weight--desktop     );--TEXT-DECORATION--HEADING-4:var(       --digi--typography--heading-4--text-decoration--desktop     );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(       --digi--typography--heading-4--font-size--desktop     );--LINE-HEIGHT--HEADING-5:var(       --digi--typography--heading-4--line-height--desktop     );--FONT-WEIGHT--HEADING-5:var(       --digi--typography--heading-4--font-weight--desktop     );--TEXT-DECORATION--HEADING-5:var(       --digi--typography--heading-4--text-decoration--desktop     );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var(       --digi--typography--heading-4--font-size--desktop     );--LINE-HEIGHT--HEADING-6:var(       --digi--typography--heading-4--line-height--desktop     );--FONT-WEIGHT--HEADING-6:var(       --digi--typography--heading-4--font-weight--desktop     );--TEXT-DECORATION--HEADING-6:var(       --digi--typography--heading-4--text-decoration--desktop     );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}}digi-typography h1,digi-typography h2,digi-typography h3,digi-typography h4,digi-typography h5,digi-typography h6{margin-top:0;}digi-typography h1,digi-typography .digi-h1{font-size:var(--FONT-SIZE--HEADING-1);line-height:var(--LINE-HEIGHT--HEADING-1);font-weight:var(--FONT-WEIGHT--HEADING-1);text-decoration:var(--TEXT-DECORATION--HEADING-1);margin-bottom:var(--MARGIN--HEADING-1)}digi-typography h2,digi-typography .digi-h2{font-size:var(--FONT-SIZE--HEADING-2);line-height:var(--LINE-HEIGHT--HEADING-2);font-weight:var(--FONT-WEIGHT--HEADING-2);text-decoration:var(--TEXT-DECORATION--HEADING-2);margin-bottom:var(--MARGIN--HEADING-2)}digi-typography h3,digi-typography .digi-h3{font-size:var(--FONT-SIZE--HEADING-3);line-height:var(--LINE-HEIGHT--HEADING-3);font-weight:var(--FONT-WEIGHT--HEADING-3);text-decoration:var(--TEXT-DECORATION--HEADING-3);margin-bottom:var(--MARGIN--HEADING-3)}digi-typography h4,digi-typography .digi-h4{font-size:var(--FONT-SIZE--HEADING-4);line-height:var(--LINE-HEIGHT--HEADING-4);font-weight:var(--FONT-WEIGHT--HEADING-4);text-decoration:var(--TEXT-DECORATION--HEADING-4);margin-bottom:var(--MARGIN--HEADING-4)}digi-typography h5,digi-typography .digi-h5{font-size:var(--FONT-SIZE--HEADING-5);line-height:var(--LINE-HEIGHT--HEADING-5);font-weight:var(--FONT-WEIGHT--HEADING-5);text-decoration:var(--TEXT-DECORATION--HEADING-5);margin-bottom:var(--MARGIN--HEADING-5)}digi-typography h6,digi-typography .digi-h6{font-size:var(--FONT-SIZE--HEADING-6);line-height:var(--LINE-HEIGHT--HEADING-6);font-weight:var(--FONT-WEIGHT--HEADING-6);text-decoration:var(--TEXT-DECORATION--HEADING-6);margin-bottom:var(--MARGIN--HEADING-6)}digi-typography p,digi-typography blockquote{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);margin-top:initial;margin-bottom:var(--MARGIN--BODY);max-width:var(--digi--paragraph-width--medium)}digi-typography p:last-child,digi-typography blockquote:last-child{margin-bottom:0}digi-typography blockquote{margin-inline:0}digi-typography digi-typography-preamble{display:block;margin-bottom:var(--MARGIN--BODY)}digi-typography digi-typography-preamble:last-child{margin-bottom:0}digi-typography ul,digi-typography ol,digi-typography dl{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);max-width:var(--digi--paragraph-width--medium);margin-bottom:var(--MARGIN--BODY)}digi-typography ul,digi-typography ol{margin:0 0 var(--MARGIN--BODY) 0;padding-inline-start:1.5rem}digi-typography ul li,digi-typography ol li{margin-top:initial;margin-bottom:0.5rem;box-sizing:border-box;width:100%;padding-left:0}digi-typography ul li:last-child,digi-typography ol li:last-child{margin-bottom:0}digi-typography a{font-size:1em;line-height:var(--LINE-HEIGHT--LINK);font-weight:inherit;text-decoration:var(--TEXT-DECORATION--LINK);color:var(--digi--color--text--interactive--primary);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--default);text-underline-offset:var(--digi--typography--text-underline-offset)}digi-typography a:hover{text-decoration:var(--TEXT-DECORATION--LINK);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover)}digi-typography a:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}digi-typography a:visited{color:var(--digi--color--text--interactive--visited)}digi-typography .digi-typography--hide-visited a:visited{color:var(--digi--color--text--interactive--primary)}digi-typography strong{font-weight:var(--digi--typography--label--font-weight--desktop)}`;
-
-const Typography = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get cssModifiers() {
-        return {
-            'digi-typography--hide-visited': this.hideVisitedColor
-        };
-    }
-    render() {
-        return (index.h("div", { key: '2b78d2c69b94e258feb4c99d5835cc58507d7886', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, index.h("slot", { key: '1f952d99d2331fb09a1b6d549a6ea97440302346' })));
-    }
-};
-Typography.style = typographyCss();
-
-exports.digi_button = Button;
 exports.digi_calendar_week_view = CalendarWeekView;
-exports.digi_icon_chevron_left = IconChevronLeft;
-exports.digi_icon_chevron_right = IconChevronRight;
-exports.digi_typography = Typography;