@designsystem-se/af 35.2.1-beta.1 → 35.3.0

package/dist/cjs/digi-calendar_2.cjs.entry.js

@@ -0,0 +1,469 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7a477838.js');
+const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
+const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
+const logger_util = require('./logger.util-fdafc086.js');
+const text = require('./text-3157012b.js');
+const index$1 = require('./index-e8333bcc.js');
+const index$2 = require('./index-cad91a90.js');
+require('./detectClosest.util-85b3507b.js');
+
+const calendarCss = ".sc-digi-calendar-h{--digi--calendar--display:inline-block;--digi--calendar--header--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--header--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--header--display:flex;--digi--calendar--header--align-items:center;--digi--calendar--header--justify-content:space-between;--digi--calendar--header--text-align:center;--digi--calendar--header--button--padding:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--calendar--header--button--background:transparent;--digi--calendar--header--button--box-shadow:none;--digi--calendar--header--button--background--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--table--border-spacing:0;--digi--calendar--table--border-collapse:collapse;--digi--calendar--table--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--table--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--table-header--padding:var(--digi--gutter--larger) 0;--digi--calendar--table-header--font-weight-normal:var(--digi--typography--body--font-weight--desktop);--digi--calendar--date--border-color:none;--digi--calendar--date--box-shadow:none;--digi--calendar--date--background-color:var(--digi--color--background--interactive--default--secondary);--digi--calendar--date--background-color--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--padding:var(--digi--gutter--large);--digi--calendar--date--color:var(--digi--color--text--primary);--digi--calendar--date--focused--background-color:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--today--circle-border:2px solid var(--digi--color--marking--indication--secondary);--digi--calendar--date--today--circle-margin:10%;--digi--calendar--date--selected--color:var(--digi--color--text--interactive--secondary);--digi--calendar--date--selected--background-color:var(--digi--color--background--interactive--selected--primary);--digi--calendar--date--not-selectable-strike--color:var(--digi--color--marking--indication--tertiary);--digi--calendar--week--font-style:italic;--digi--calendar--week--font-size:var(--digi--global--typography--font-size--small);--digi--calendar--week--border-color:var(--digi--color--divider--primary);--digi--calendar--week--border-width:var(--digi--border-width--primary)}.sc-digi-calendar-h .digi-calendar.sc-digi-calendar{display:var(--digi--calendar--display);background:var(--digi--calendar--header--button--background);padding:0px 1px 3px 1px;overflow:hidden;max-width:23.4375rem}.sc-digi-calendar-h .digi-calendar--hide.sc-digi-calendar{--digi--calendar--display:none}.sc-digi-calendar-h .digi-calendar__header.sc-digi-calendar{display:var(--digi--calendar--header--display);align-items:var(--digi--calendar--header--align-items);justify-content:var(--digi--calendar--header--justify-content);text-align:var(--digi--calendar--header--text-align);font-size:var(--digi--global--typography--font-size--base);font-family:var(--digi--calendar--header--font-family);font-weight:var(--digi--calendar--header--font-weight)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar{display:inherit;justify-content:center;margin:0 auto}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:first-child{margin-right:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:last-child{width:5rem}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar select.sc-digi-calendar{padding-inline-end:2rem}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar{flex:auto;display:inherit;align-items:inherit;justify-content:inherit}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-name.sc-digi-calendar{padding-inline:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar{font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--digi--calendar--date--color);display:flex;align-items:center;background:var(--digi--calendar--header--button--background);border:var(--digi--calendar--date--box-shadow);padding:var(--digi--calendar--header--button--padding)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:last-child{border-radius:0 4px 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:first-child{border-radius:4px 0 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible:not(.digi-calendar__date--not-selectable),.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:active:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(\n    --digi--calendar--header--button--background--hover\n  );text-decoration:underline;cursor:pointer}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(\n      --digi--calendar--header--button--background--hover\n    );text-decoration:underline;cursor:pointer}}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__table.sc-digi-calendar{border-collapse:var(--digi--calendar--table--border-collapse);border-spacing:var(--digi--calendar--table--border-spacing);font-family:var(--digi--calendar--table--font-family);table-layout:fixed;margin-bottom:var(--digi--margin--medium)}.sc-digi-calendar-h .digi-calendar__table-header-week.sc-digi-calendar{font-style:italic;padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table-header--font-weight-normal);width:50px}.sc-digi-calendar-h .digi-calendar__table-header.sc-digi-calendar{padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table--font-weight);width:46px}.sc-digi-calendar-h .digi-calendar__td-week.sc-digi-calendar{border-right:var(--digi--calendar--week--border-width) solid var(--digi--calendar--week--border-color)}.sc-digi-calendar-h .digi-calendar__td.sc-digi-calendar{text-align:right}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar{font-style:var(--digi--calendar--week--font-style);font-size:var(--digi--calendar--week--font-size);display:table-cell;text-align:center}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar:hover{cursor:default}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar{position:relative;padding:var(--digi--calendar--date--padding);color:var(--digi--calendar--date--color);background-color:var(--digi--calendar--date--background-color);border-color:var(--digi--calendar--date--border-color);border-radius:var(--digi--border-radius--secondary);font-family:inherit;font-size:inherit;font-weight:inherit;text-align:center;border:none;width:44px;height:44px}.sc-digi-calendar-h .digi-calendar__date--disabled.sc-digi-calendar{--digi--calendar--date--color:transparent;pointer-events:none}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar{position:relative}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar::after{display:block;content:\" \";position:absolute;top:var(--digi--calendar--date--today--circle-margin);bottom:var(--digi--calendar--date--today--circle-margin);left:var(--digi--calendar--date--today--circle-margin);right:var(--digi--calendar--date--today--circle-margin);border:var(--digi--calendar--date--today--circle-border);border-radius:50%}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){cursor:pointer}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable):not(.digi-calendar__date--selected){--digi--calendar--date--box-shadow:var(--digi--calendar--date--box-shadow--hover);--digi--calendar--date--background-color:var(--digi--calendar--date--background-color--hover)}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable) span.sc-digi-calendar{text-decoration:underline}}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color);--digi--calendar--date--color:var(--digi--calendar--date--selected--color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover span.sc-digi-calendar{text-decoration:none}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar{cursor:not-allowed}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar::after{display:block;content:\" \";width:0px;height:100%;border:1px solid #757575;transform:rotate(-45deg);position:absolute;top:0%;left:50%}.sc-digi-calendar-h .digi-calendar__date--focused.sc-digi-calendar:focus-visible:not(.digi-calendar__date--selected):not(.digi-calendar__date--not-selectable){--digi--calendar--date--background-color:var(--digi--calendar--date--focused--background-color);outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-s digi-form-label{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}";
+const DigiCalendarStyle0 = calendarCss;
+
+const Calendar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnDateSelectedChange = index.createEvent(this, "afOnDateSelectedChange", 7);
+        this.afOnFocusOutside = index.createEvent(this, "afOnFocusOutside", 7);
+        this.afOnClickOutside = index.createEvent(this, "afOnClickOutside", 7);
+        this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
+        this.activeCalendar = [];
+        this.months = [];
+        this.selectedDates = [];
+        this.focusedDate = undefined;
+        this.dirty = false;
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-calendar');
+        this.afInitSelectedMonth = new Date().getMonth();
+        this.afInitSelectedDate = new Date();
+        this.afShowWeekNumber = false;
+        this.afSelectedDate = undefined;
+        this.afSelectedDates = [];
+        this.afActive = true;
+        this.afMinDate = undefined;
+        this.afMaxDate = undefined;
+        this.afMultipleDates = false;
+        this.afYearSelect = false;
+    }
+    afSelectedDateChangeHandler() {
+        if (index$1.isValid(this.afSelectedDate)) {
+            this.selectedDates = [this.afSelectedDate];
+        }
+        else {
+            this.selectedDates = [];
+        }
+    }
+    afSelectedDatesChangeHandler() {
+        if (this.afSelectedDates.length > 0) {
+            if (this.afMultipleDates) {
+                const invalidDate = this.afSelectedDates.find((date) => !index$1.isValid(date));
+                if (invalidDate === undefined) {
+                    this.selectedDates = this.afSelectedDates;
+                }
+            }
+            else if (index$1.isValid(this.afSelectedDates[0])) {
+                this.selectedDates = [this.afSelectedDates[0]];
+            }
+        }
+        else {
+            this.selectedDates = [];
+        }
+    }
+    focusoutHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-calendar`;
+        if (detectFocusOutside_util.detectFocusOutside(target, selector)) {
+            this.afOnFocusOutside.emit(e);
+        }
+    }
+    clickHandler(e) {
+        const target = e.target;
+        const selector = `#${this.afId}-calendar`;
+        if (detectClickOutside_util.detectClickOutside(target, selector)) {
+            this.afOnClickOutside.emit(e);
+        }
+    }
+    drawCalendar(focusedDate) {
+        const date = {
+            year: focusedDate.getFullYear(),
+            month: focusedDate.getMonth()
+        };
+        this.lastWeekOfPreviousMonth = this.getWeekDays(this.getLastDayOfPrevMonth(date));
+        this.firstWeekOfNextMonth = this.getWeekDays(this.getFirstDayOfNextMonth(date));
+        this.weeksBetween = this.getWeeksBetween(this.getLastDayOfPrevMonth(date), this.getFirstDayOfNextMonth(date));
+        this.weekDaysbetween = this.getWeekdaysOfMonth(this.weeksBetween);
+        this.months = [
+            'januari',
+            'februari',
+            'mars',
+            'april',
+            'maj',
+            'juni',
+            'juli',
+            'augusti',
+            'september',
+            'oktober',
+            'november',
+            'december'
+        ];
+        this.activeCalendar = this.appendFirstWeekOfNextMonth()
+            ? [
+                this.lastWeekOfPreviousMonth,
+                ...this.weekDaysbetween,
+                this.appendFirstWeekOfNextMonth()
+            ]
+            : [this.lastWeekOfPreviousMonth, ...this.weekDaysbetween];
+        this.appendFirstWeekOfNextMonth();
+        if (this.afShowWeekNumber) {
+            this.activeCalendar.forEach((el, i) => {
+                this.activeCalendar[i].unshift(this.getWeekNumbers(el[0]));
+            });
+        }
+    }
+    appendFirstWeekOfNextMonth() {
+        const lastArray = JSON.stringify(this.weekDaysbetween.slice(-1)[0]);
+        const stringFirstweek = JSON.stringify(this.firstWeekOfNextMonth);
+        if (!this.firstWeekOfNextMonth.some((date) => this.isSameMonth(date, this.focusedDate))) {
+            return;
+        }
+        else if (lastArray !== stringFirstweek) {
+            return this.firstWeekOfNextMonth;
+        }
+    }
+    getLastDayOfPrevMonth(date) {
+        return new Date(date.year, date.month, 0);
+    }
+    getWeekDays(date) {
+        const today = date || new Date();
+        const week = [];
+        for (let i = 1; i <= 7; i++) {
+            const first = today.getDate() - today.getDay() + i;
+            const day = new Date(today.setDate(first));
+            week.push(day);
+        }
+        return week;
+    }
+    getFirstDayOfNextMonth(date) {
+        return new Date(date.year, date.month + 1, 1);
+    }
+    getWeeksBetween(lastDayOfPrevMonth, firstDayOnNextMonth) {
+        const week = 7 * 24 * 60 * 60 * 1000;
+        const d1ms = lastDayOfPrevMonth.getTime();
+        const d2ms = firstDayOnNextMonth.getTime();
+        const diff = Math.abs(d2ms - d1ms);
+        return Math.floor(diff / week);
+    }
+    getWeekdaysOfMonth(weeksBetween) {
+        let weeks = [];
+        for (let i = 1; i <= weeksBetween; i++) {
+            weeks = [...weeks, this.getWeekDays(this.getUpcoming(i))];
+        }
+        return weeks;
+    }
+    getUpcoming(weeks) {
+        return new Date(this.focusedDate.getFullYear(), this.focusedDate.getMonth(), 7 * weeks);
+    }
+    onDirty() {
+        if (!this.dirty) {
+            this.dirty = true;
+            this.afOnDirty.emit(this.dirty);
+        }
+    }
+    selectDateHandler(dateSelected) {
+        this.onDirty();
+        if (!this.isDateSelectable(dateSelected))
+            return;
+        if (this.isDateSelected(dateSelected)) {
+            this.selectedDates = this.afMultipleDates
+                ? this.selectedDates.filter((d) => {
+                    return !this.isSameDate(d, dateSelected);
+                })
+                : [];
+        }
+        else {
+            this.selectedDates = this.afMultipleDates
+                ? [...this.selectedDates, dateSelected]
+                : [dateSelected];
+        }
+        this.focusedDate = new Date(dateSelected);
+        this.afOnDateSelectedChange.emit(this.selectedDates);
+    }
+    getMonthName(monthNumber) {
+        return new Date(1992, monthNumber, 1)
+            .toLocaleDateString('default', {
+            month: 'short'
+        })
+            .replace('.', '');
+    }
+    getFullMonthName(monthNumber) {
+        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString('default', {
+            month: 'long',
+            year: 'numeric'
+        });
+    }
+    // Get the week number of a specific date. Taken from https://weeknumber.com/how-to/javascript
+    getWeekNumbers(dateInput) {
+        const date = new Date(dateInput);
+        date.getTime();
+        date.setHours(0, 0, 0, 0);
+        date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));
+        const week1 = new Date(date.getFullYear(), 0, 4);
+        return (1 +
+            Math.round(((date.getTime() - week1.getTime()) / 86400000 -
+                3 +
+                ((week1.getDay() + 6) % 7)) /
+                7));
+    }
+    isSameMonth(date, currentDate) {
+        if (date instanceof Date && date instanceof Date) {
+            return (`${date.getFullYear()}${date.getMonth()}` ===
+                `${currentDate.getFullYear()}${currentDate.getMonth()}`);
+        }
+        return false;
+    }
+    isSameDate(date, newDate) {
+        return this.getDateString(date) === this.getDateString(newDate);
+    }
+    getDateString(date) {
+        return `${date.getDate()}${date.getMonth()}${date.getFullYear()}`;
+    }
+    isDateSelected(date) {
+        return !!this.selectedDates.find((d) => this.isSameDate(date, d));
+    }
+    isDateSelectable(date) {
+        if (this.afMinDate && this.isBefore(date, this.afMinDate))
+            return false;
+        if (this.afMaxDate && this.isAfter(date, this.afMaxDate))
+            return false;
+        return true;
+    }
+    isBefore(a, b) {
+        return index$2.isBefore(this.dateWithoutTime(a), this.dateWithoutTime(b));
+    }
+    isAfter(a, b) {
+        return index$2.isAfter(this.dateWithoutTime(a), this.dateWithoutTime(b));
+    }
+    dateWithoutTime(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    isInAnotherMonth(date) {
+        return !this.isSameMonth(date, this.focusedDate);
+    }
+    subtractMonth() {
+        const month = new Date(this.focusedDate);
+        const currentDay = month.getDate();
+        month.setMonth(month.getMonth() - 1, 1);
+        const lastDayOfPrevMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+        month.setDate(Math.min(currentDay, lastDayOfPrevMonth));
+        this.afInitSelectedMonth = month.getMonth();
+        this.focusedDate = month;
+    }
+    addMonth() {
+        const month = new Date(this.focusedDate);
+        const currentDay = month.getDate();
+        month.setMonth(month.getMonth() + 1, 1);
+        const lastDayOfNextMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+        month.setDate(Math.min(currentDay, lastDayOfNextMonth));
+        this.afInitSelectedMonth = month.getMonth();
+        this.focusedDate = month;
+    }
+    getCurrent(date) {
+        return this.isSameDate(date, new Date()) ? 'date' : null;
+    }
+    setTabIndex(date) {
+        if (this.dirty) {
+            return this.isSameDate(date, this.focusedDate) ? 0 : -1;
+        }
+        else {
+            return this.isSameMonth(date, new Date())
+                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
+                    ? 0
+                    : -1
+                : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1
+                    ? 0
+                    : -1;
+        }
+    }
+    navigateHandler(e, daysToAdd) {
+        !!e.detail && e.detail.preventDefault();
+        if (e.detail.key === 'Tab') {
+            return;
+        }
+        this.onDirty();
+        const date = new Date(e.detail.target.dataset.date);
+        const newDate = new Date(date.setDate(date.getDate() + daysToAdd));
+        this.focusedDate = newDate;
+        this.afInitSelectedMonth = this.focusedDate.getMonth();
+        this.resetFocus();
+    }
+    resetFocus() {
+        setTimeout(() => {
+            const dates = this._tbody.querySelectorAll('.digi-calendar__date');
+            if (dates.length <= 0) {
+                logger_util.logger.warn(`Could not find an element with data-date attribute matching navigated date.`, this._tbody);
+                return;
+            }
+            Array.from(dates).map((date) => {
+                const d = date;
+                d.tabIndex = -1;
+                d.classList.remove('digi-calendar__date--focused');
+                if (d.dataset.date === this.getFullDate(this.focusedDate)) {
+                    d.focus();
+                    d.tabIndex = 0;
+                    d.classList.add('digi-calendar__date--focused');
+                }
+            });
+        }, 100);
+    }
+    getFullDate(date) {
+        return date.toLocaleString(text._t.locale, {
+            day: 'numeric',
+            month: 'numeric',
+            year: 'numeric'
+        });
+    }
+    getDateName(date) {
+        return date.toLocaleString(text._t.locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    }
+    setFocused(date) {
+        if (this.dirty) {
+            return this.isSameDate(date, this.focusedDate);
+        }
+        else {
+            return this.isSameMonth(date, new Date())
+                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
+                : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
+        }
+    }
+    ariaPressed(date) {
+        return this.selectedDates.length > 0 &&
+            !!this.selectedDates.find((d) => this.isSameDate(d, date))
+            ? 'true'
+            : 'false';
+    }
+    selectMonth(evt) {
+        const tempDate = new Date(this.focusedDate);
+        const selectedMonth = parseInt(evt.target.value, 10);
+        const currentDay = tempDate.getDate();
+        tempDate.setMonth(selectedMonth, 1);
+        const lastDayOfSelectedMonth = new Date(tempDate.getFullYear(), selectedMonth + 1, 0).getDate();
+        tempDate.setDate(Math.min(currentDay, lastDayOfSelectedMonth));
+        this.afInitSelectedMonth = selectedMonth;
+        this.focusedDate = tempDate;
+        this.drawCalendar(this.focusedDate);
+    }
+    selectYear(evt) {
+        const tempDate = this.focusedDate;
+        tempDate.setFullYear(evt.target.value);
+        this.afInitSelectedDate = evt.target.value;
+        this.focusedDate = tempDate;
+        this.drawCalendar(this.focusedDate);
+    }
+    earliestSelectableYear() {
+        if (this.afMinDate)
+            return this.afMinDate.getFullYear();
+        return 1900;
+    }
+    latestSelectableYear() {
+        if (this.afMaxDate)
+            return this.afMaxDate.getFullYear();
+        return new Date(Date.now()).getFullYear() + 10;
+    }
+    allSelectableYears() {
+        const allYears = [];
+        let currentYear = this.earliestSelectableYear();
+        while (currentYear <= this.latestSelectableYear()) {
+            allYears.push(currentYear++);
+        }
+        return allYears;
+    }
+    componentWillLoad() {
+        if (this.afInitSelectedDate) {
+            this.afInitSelectedMonth = this.afInitSelectedDate.getMonth();
+            this.focusedDate = this.afInitSelectedDate;
+            this.drawCalendar(this.afInitSelectedDate);
+        }
+        else {
+            const startSelectedMonth = new Date(new Date().getFullYear(), this.afInitSelectedMonth);
+            this.focusedDate = startSelectedMonth;
+            this.drawCalendar(startSelectedMonth);
+        }
+    }
+    componentWillUpdate() {
+        this.drawCalendar(this.focusedDate);
+    }
+    async componentDidLoad() {
+        if (index$1.isValid(this.afSelectedDate))
+            this.selectedDates = [this.afSelectedDate];
+        else
+            this.afSelectedDatesChangeHandler();
+        await customElements.whenDefined('digi-form-select');
+    }
+    cssDateModifiers(date) {
+        const shownMonth = this.focusedDate.getMonth();
+        return {
+            'digi-calendar__date--today': this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date),
+            'digi-calendar__date--disabled': this.isInAnotherMonth(date),
+            'digi-calendar__date--focused': this.setFocused(date),
+            'digi-calendar__date--selected': this.isDateSelected(date) && date.getMonth() === shownMonth,
+            'digi-calendar__date--not-selectable': !this.isInAnotherMonth(date) && !this.isDateSelectable(date)
+        };
+    }
+    render() {
+        return (index.h("div", { key: 'f2d44d7100e9aec3a91c56663360624f83745c0f', class: {
+                'digi-calendar': true,
+                'digi-calendar--hide': !this.afActive
+            }, id: `${this.afId}-calendar` }, this.afYearSelect && (index.h("div", { key: 'fbc3332a363201be4ece13ce849fa10ab324ac13', class: "digi-calendar__header" }, index.h("div", { key: '88de6a25891a17617d6d59cc79ff40a16c1f8467', class: "digi-calendar__header--year-select" }, index.h("digi-form-select", { key: 'bf76a067c841709388f5d8d9dc7ce572f370ca49', afLabel: "M\u00E5nad", "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
+                this.selectMonth(evt);
+            } }, this.months.map((month, index$1) => {
+            return index.h("option", { value: index$1 }, month);
+        })), index.h("digi-form-select", { key: '8f822faced5e7dff2aa72a0ce678ea1013d9e299', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+                this.selectYear(evt);
+            } }, this.allSelectableYears().map((year) => (index.h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (index.h("div", { key: 'f51013760c858eb00656e8596fb04adb619cc0eb', class: "digi-calendar__header" }, index.h("div", { key: 'a37f3fd65b74345d4c8bfeaa64185a0ba046317d', class: "digi-calendar__header--month-step" }, index.h("button", { key: 'da8f4803fc250194a567bcc7df6582adb35f8510', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth - 1) +
+                ', föregående månad', onClick: () => this.subtractMonth() }, index.h("digi-icon-chevron-left", { key: '6019efab7ae1dc1fa643459d7c2b5feb977cf6aa', slot: "icon", "aria-hidden": "true" }), index.h("span", { key: 'f5e14ed6c5e6cbf31bceeed46bf78454a30e76d5', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth - 1))), index.h("div", { key: '5426dea9943af11f1e537318b44450c4504f63a4', class: "digi-calendar__month" }, this.getFullMonthName(this.afInitSelectedMonth)), index.h("button", { key: '8c836f8ed0b7027569fdb9b2fec5d295d0fc417e', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth + 1) +
+                ', nästa månad', onClick: () => this.addMonth() }, index.h("span", { key: '9403efa5fa67432f7f23f885d8f99ebc54473516', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth + 1)), index.h("digi-icon-chevron-right", { key: '02eafcde2c6327a23e8ffe82682430af43eb4d02', slot: "icon", "aria-hidden": "true" }))))), index.h("digi-util-keydown-handler", { key: '233fc35cb48bf86f84fb8c781a5bdf1e53c153c5', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, index.h("table", { key: 'ea2e505e70411a3d07119130b0788dafbbbeef07', role: "grid", class: "digi-calendar__table" }, index.h("thead", { key: 'eace14b22601d0f85cf6f8c276716491140389fb' }, index.h("tr", { key: 'f6678cdfa52220c5e19729fc7bc567ba8c5e06c6', role: "row" }, this.afShowWeekNumber && (index.h("th", { key: '7fa670bd34fd0186c8f154ed6cac0481c30b90cd', role: "columnheader", abbr: text._t.calendar.week, class: "digi-calendar__table-header-week" }, text._t.calendar.week.toLowerCase())), Object.keys(text._t.calendar.weekdays).map((day) => (index.h("th", { role: "columnheader", "aria-label": text._t.calendar.weekdays[day], abbr: text._t.calendar.weekdays[day], class: "digi-calendar__table-header" }, text._t.calendar.weekdays_short[day].toLowerCase()))))), index.h("tbody", { key: '7ecdf08d9a497dfe74f7e95b3d89566ea8789489', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
+            return (index.h("tr", null, week.map((day, i) => {
+                if (this.afShowWeekNumber && i === 0) {
+                    return (index.h("th", { role: "rowheader", "aria-label": text._t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
+                }
+                else {
+                    return this.isInAnotherMonth(day) ? (index.h("td", null)) : (index.h("td", { role: "gridcell", class: "digi-calendar__td" }, index.h("button", { key: this.getFullDate(day), type: "button", class: Object.assign(Object.assign({}, this.cssDateModifiers(day)), { 'digi-calendar__date': true }), onClick: () => this.selectDateHandler(day), "aria-current": this.isSameDate(day, new Date()) ? 'date' : null, "aria-label": `
+                                ${!this.isDateSelectable(day)
+                            ? text._t.calendar.disabledDate
+                            : ''} ${this.getDateName(day)}
+                              `, "aria-disabled": !this.isDateSelectable(day) ? 'true' : null, tabindex: this.setTabIndex(day), "data-date": this.getFullDate(day), "aria-pressed": this.isDateSelectable(day)
+                            ? this.ariaPressed(day)
+                            : null }, index.h("span", { "aria-hidden": "true" }, day.getDate()))));
+                }
+            })));
+        })))), index.h("slot", { key: 'ed2cf3c305f6db73a00e838beb786fc088045634', name: "calendar-footer" })));
+    }
+    static get watchers() { return {
+        "afSelectedDate": ["afSelectedDateChangeHandler"],
+        "afSelectedDates": ["afSelectedDatesChangeHandler"]
+    }; }
+};
+Calendar.style = DigiCalendarStyle0;
+
+const iconCalendarAltCss = ".sc-digi-icon-calendar-alt-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-calendar-alt-h svg.sc-digi-icon-calendar-alt{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconCalendarAltStyle0 = iconCalendarAltCss;
+
+const IconCalendarAlt = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: 'a6ec2c4b11faec248eb480572ebf820374ea1bb4', class: "digi-icon-calendar-alt", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '222bed926cfc92e16323edde4747daeb40642624', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'b4172902e5450dbb7cef5239d159061a08971960' }, this.afDesc), index.h("path", { key: '15cbf1b7e21e7838abe26c982a7a0d775691c17a', class: "digi-icon-calendar-alt__shape", d: "M21.41 8.125H.59a.601.601 0 01-.59-.61V5.689C0 4.341 1.056 3.25 2.357 3.25h2.357V.61c0-.336.265-.61.59-.61h1.964c.324 0 .59.274.59.61v2.64h6.285V.61c0-.336.265-.61.59-.61h1.963c.325 0 .59.274.59.61v2.64h2.357C20.944 3.25 22 4.342 22 5.688v1.828c0 .335-.265.609-.59.609zM.59 9.75h20.82c.325 0 .59.274.59.61v13.203C22 24.907 20.944 26 19.643 26H2.357C1.056 26 0 24.908 0 23.562V10.36c0-.335.265-.609.59-.609zm5.696 10.36a.601.601 0 00-.59-.61H3.732a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.325 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.59-.61H3.732a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.325 0 .59-.274.59-.61v-2.03zm6.285 6.5a.601.601 0 00-.589-.61h-1.964a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.589-.61h-1.964a.601.601 0 00-.59.61v2.03c0 .336.266.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm6.286 6.5a.601.601 0 00-.59-.61h-1.963a.601.601 0 00-.59.61v2.03c0 .336.265.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03zm0-6.5a.601.601 0 00-.59-.61h-1.963a.601.601 0 00-.59.61v2.03c0 .336.265.61.59.61h1.964c.324 0 .59-.274.59-.61v-2.03z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconCalendarAlt.style = DigiIconCalendarAltStyle0;
+
+exports.digi_calendar = Calendar;
+exports.digi_icon_calendar_alt = IconCalendarAlt;

package/dist/cjs/digi-chart-line.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-81fc5a97.js');
+const index = require('./index-7a477838.js');
 const text = require('./text-3157012b.js');
 const linear = require('./linear-86314cb2.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
@@ -2305,7 +2305,7 @@ const ChartLine = class {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (index.h("host", { key: '3fd0ff05a416b160b504118a59440c3cd45540e1', ref: (el) => (this._host = el) }, index.h("div", { key: '72f480c3f41004e8892ecc758efb5f17f19975d6', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: '14e57f41d3bdddc8d4dbf4a427d49c8f8efe4042', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '1d7f6264bc92f59cb3435e52f2c9c6d543b1f1ff', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: 'e30a5c70a165006be7d26ae7d2dce0194f7ef1db', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '736bc6dca71ac63039af38291b83954319823f86', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '785c60026da5b10357c576536fc961b4de240bc8', slot: "icon" }), "Visa diagram"), index.h("div", { key: '80c1446c2d0ed934240c76594b4d57c473ebe287', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: 'c1967d458dff110cac2c38ad5c6c7b1c0a9349ff', class: "chartTooltip", id: this.afId }, index.h("div", { key: '18c1ac0babb851fd86f8ebc82587179142cf427c', class: "tooltipHead" }, index.h("digi-icon-x", { key: '7eec9f8fc3c154e3e26c998d618d02da66d7e380', class: "close" }), ' '), index.h("div", { key: '358497a7f175754f43fb106d3a9d26e310923653', class: "tooltipBody" })), index.h("div", { key: '0013f988af31ddc540efe0d29ea1760eab60b34d', class: "chart", ref: (el) => (this._chartDiv = el) }), index.h("div", { key: '222ca9c2fe1acaef91fed817f5a885fb9bf89565', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: 'f6990353582af550e483ed78f06b5776c55811da', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (index.h("host", { key: '0aab34e11f412e3fea690e806cd2d9067bcafe09', ref: (el) => (this._host = el) }, index.h("div", { key: '941eef6b6e130641acec11ec4ee893611a811d75', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: '2f4a69e973def39e52ef01bea01d2c6fe9accc47', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: 'e7b8e1e0a202b33b1a3a32af43d642fd925dff90', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '5dbedd2ceed7ef62100f610c57496675a2b2254b', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '9a0d402143c1087582f88ec8b8a12152fe665a3d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '082bd94e92917727ed627cce01daf437f71fcf39', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'e0c445ff5e9c6832831d45ee1e8bd1c37c8c6ecc', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: 'f012774817ee966de745cc20dd2410a44c7562d7', class: "chartTooltip", id: this.afId }, index.h("div", { key: 'da2b1f257ff3fb7b6b141af96fd85ebf3442accd', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'a50f73e003c912a4123a83f4c64cd5cc03bf6c68', class: "close" }), ' '), index.h("div", { key: '25013c3bd2d261beed1bafce41d599b7625b5bbe', class: "tooltipBody" })), index.h("div", { key: '7d8ee22026572d3c6cdce7200c98c3b665ba948b', class: "chart", ref: (el) => (this._chartDiv = el) }), index.h("div", { key: 'bf0d27d67c1c86d701401828ec59bd6f873a96f7', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: 'b3539e60f97683d40b50e91be789eb78ab6d7061', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-code-example.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-81fc5a97.js');
+const index = require('./index-7a477838.js');
 const codeExampleVariation_enum = require('./code-example-variation.enum-1611825e.js');
 const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
 const text = require('./text-3157012b.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
 
-const codeExampleCss = ".sc-digi-code-example-h{--digi--code-example--background:var(--digi--color--background--primary);--digi--code-example--controls--width:16.25rem;display:block}.digi-code-example.sc-digi-code-example{background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:var(--digi--border-width--primary) solid var(--digi--color--divider--primary--light);height:100%;display:flex;flex-direction:row;border-radius:0.3rem;position:relative}@media (max-width: 35.9375rem){.digi-code-example.sc-digi-code-example{min-width:360px}}.digi-code-example--light.sc-digi-code-example{background-color:#ffffff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%)}.digi-code-example--dark.sc-digi-code-example{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}.digi-code-example__container.sc-digi-code-example{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;position:relative}.digi-code-example--no-controls.sc-digi-code-example{flex-direction:column}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button.sc-digi-code-example{margin-top:0;align-self:flex-end;margin-bottom:0.2rem;z-index:1;position:absolute;bottom:0;right:0}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button--dark.sc-digi-code-example{--digi--button--color--text--function--default:var(--digi--color--text--secondary);--digi--button--color--text--function--hover:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--secondary);--digi--button--color--icon--function--hover:var(--digi--color--text--secondary)}.digi-code-example__example.sc-digi-code-example{height:100%;padding:var(--digi--padding--largest-2);overflow-x:auto}@media (max-width: 48rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--medium)}}@media (max-width: 35.9375rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--small)}}.digi-code-example__copy-button.sc-digi-code-example{align-self:start;margin-top:var(--digi--padding--large);margin-right:var(--digi--padding--small)}.digi-code-example__codeblock.sc-digi-code-example digi-code-block.sc-digi-code-example{--digi--code-block--border-radius:0;--digi--code-block--border:none}.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--medium);background:var(--digi--color--background--secondary);display:flex;flex:0 var(--digi--code-example--controls--width);flex-direction:column;align-self:stretch;flex-shrink:0;justify-content:space-between;gap:var(--digi--gutter--medium)}@media (max-width: 48rem){.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--smaller)}}.digi-code-example__controls[hidden].sc-digi-code-example{display:none}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__code.sc-digi-code-example{display:flex;flex-direction:column;flex-grow:1}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{flex-grow:1;height:64px;overflow-y:hidden;position:relative}.digi-code-example__code-expand.sc-digi-code-example{display:flex;align-items:center;justify-content:center;gap:var(--digi--gutter--icon);width:100%;padding:0.875rem 0;background:#272727;color:var(--digi--color--text--secondary);font-size:var(--digi--typography--body--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);cursor:pointer;border:none}.digi-code-example__code-expand.sc-digi-code-example:hover{background:var(--digi--grayscale--900);text-decoration:underline}.digi-code-example__code-expand.sc-digi-code-example:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-code-example--no-controls.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{height:64px}.digi-code-example__copy-button.sc-digi-code-example{--digi--button--padding--small:0;--digi--button--padding--medium:0;--digi--button--padding--large:0}.digi-code-example__code-expand-icon.sc-digi-code-example{--digi--icon--color:var(--digi--color--text--secondary);transition:ease-in-out var(--digi--animation--duration--base) all}.digi-code-example__code-expand-icon--open.sc-digi-code-example{transform:rotate(180deg)}.digi-code-example__fade.sc-digi-code-example{position:absolute;width:100%;bottom:0;height:var(--digi--padding--largest-2)}.digi-code-example__fade--light.sc-digi-code-example{background-image:linear-gradient(0deg, white, transparent)}.digi-code-example__fade--dark.sc-digi-code-example{--digi--color--background--inverted-3:#272727;background-image:linear-gradient(0deg, var(--digi--grayscale--900), transparent)}.slot__controls.sc-digi-code-example{margin-bottom:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls{display:flex;flex-direction:column;gap:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls[hidden]{display:none}.sc-digi-code-example-s .slot__controls digi-form-fieldset,.sc-digi-code-example-s .slot__controls digi-form-select,.sc-digi-code-example-s .slot__controls digi-form-fieldset+digi-form-checkbox,.sc-digi-code-example-s .slot__controls .divider{display:block;border-bottom:1px solid var(--digi--color--divider--primary--light);padding-bottom:var(--digi--padding--smaller);margin-bottom:var(--digi--padding--medium)}";
+const codeExampleCss = ".sc-digi-code-example-h{--digi--code-example--background:var(--digi--color--background--primary);--digi--code-example--controls--width:16.25rem;display:block}.digi-code-example.sc-digi-code-example{background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:var(--digi--border-width--primary) solid var(--digi--color--divider--primary--light);height:100%;display:flex;flex-direction:row;border-radius:0.3rem;position:relative}@media (max-width: 35.9375rem){.digi-code-example.sc-digi-code-example{min-width:360px}}.digi-code-example--light.sc-digi-code-example{background-color:#ffffff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%)}.digi-code-example--dark.sc-digi-code-example{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}.digi-code-example__container.sc-digi-code-example{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;position:relative}.digi-code-example--no-controls.sc-digi-code-example{flex-direction:column}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button.sc-digi-code-example{margin-top:0;align-self:flex-end;margin-bottom:0.2rem;z-index:1;position:absolute;bottom:0;right:0}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button--dark.sc-digi-code-example{--digi--button--color--text--function--default:var(--digi--color--text--secondary);--digi--button--color--text--function--hover:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--secondary);--digi--button--color--icon--function--hover:var(--digi--color--text--secondary)}.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--largest-2);overflow-x:auto}@media (max-width: 48rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--medium)}}@media (max-width: 35.9375rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--small)}}.digi-code-example__copy-button.sc-digi-code-example{align-self:start;margin-top:var(--digi--padding--large);margin-right:var(--digi--padding--small)}.digi-code-example__codeblock.sc-digi-code-example digi-code-block.sc-digi-code-example{--digi--code-block--border-radius:0;--digi--code-block--border:none}.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--medium);background:var(--digi--color--background--secondary);display:flex;flex:0 var(--digi--code-example--controls--width);flex-direction:column;align-self:stretch;flex-shrink:0;justify-content:space-between;gap:var(--digi--gutter--medium)}@media (max-width: 48rem){.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--smaller)}}.digi-code-example__controls[hidden].sc-digi-code-example{display:none}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__code.sc-digi-code-example{display:flex;flex-direction:column;flex-grow:1}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{flex-grow:1;height:64px;overflow-y:hidden;position:relative}.digi-code-example__code-expand.sc-digi-code-example{display:flex;align-items:center;justify-content:center;gap:var(--digi--gutter--icon);width:100%;padding:0.875rem 0;background:#272727;color:var(--digi--color--text--secondary);font-size:var(--digi--typography--body--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);cursor:pointer;border:none}.digi-code-example__code-expand.sc-digi-code-example:hover{background:var(--digi--grayscale--900);text-decoration:underline}.digi-code-example__code-expand.sc-digi-code-example:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-code-example--no-controls.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{height:64px}.digi-code-example__copy-button.sc-digi-code-example{--digi--button--padding--small:0;--digi--button--padding--medium:0;--digi--button--padding--large:0}.digi-code-example__code-expand-icon.sc-digi-code-example{--digi--icon--color:var(--digi--color--text--secondary);transition:ease-in-out var(--digi--animation--duration--base) all}.digi-code-example__code-expand-icon--open.sc-digi-code-example{transform:rotate(180deg)}.digi-code-example__fade.sc-digi-code-example{position:absolute;width:100%;bottom:0;height:var(--digi--padding--largest-2)}.digi-code-example__fade--light.sc-digi-code-example{background-image:linear-gradient(0deg, white, transparent)}.digi-code-example__fade--dark.sc-digi-code-example{--digi--color--background--inverted-3:#272727;background-image:linear-gradient(0deg, var(--digi--grayscale--900), transparent)}.slot__controls.sc-digi-code-example{margin-bottom:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls{display:flex;flex-direction:column;gap:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls[hidden]{display:none}.sc-digi-code-example-s .slot__controls digi-form-fieldset,.sc-digi-code-example-s .slot__controls digi-form-select,.sc-digi-code-example-s .slot__controls digi-form-fieldset+digi-form-checkbox,.sc-digi-code-example-s .slot__controls .divider{display:block;border-bottom:1px solid var(--digi--color--divider--primary--light);padding-bottom:var(--digi--padding--smaller);margin-bottom:var(--digi--padding--medium)}";
 const DigiCodeExampleStyle0 = codeExampleCss;
 
 const CodeExample = class {
@@ -136,17 +136,17 @@ const CodeExample = class {
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (index.h("div", { key: '92832626f4ab9639e40dcd035b19cda093241fa8', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, index.h("div", { key: '34065a2b928886bcdafee852c8bbde3cbcaa0fcb', class: {
+        return (index.h("div", { key: '2504eb214d681d53d5db5f7ee4bbf070da4ac6bd', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, index.h("div", { key: 'a0ceb68001efe0e88fa477ad8c2d01c9b1dd8644', class: {
                 'digi-code-example__container': true
-            } }, index.h("div", { key: '35d295b3357c3cbd52a1355b1bf4bde93a1adc47', class: "digi-code-example__example" }, index.h("slot", { key: '1f6be5b28348188541226eb3c9a34442003ab634' })), !this.afHideCode && (index.h("div", { key: '297c430dbb2ae80a9b189477a04b399bbdae573b', class: "digi-code-example__code" }, this.showMoreButton && (index.h("button", { key: '5021875d50836b270b8cedbe27e0811d6c7b12d3', class: "digi-code-example__code-expand", "aria-label": this.isActive ? text._t.code.show_less : text._t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? text._t.code.show_less : text._t.code.show_more, ' ', index.h("digi-icon-chevron-down", { key: '750c97bbebe294c414c77a644e2f9f37f678b448', class: {
+            } }, index.h("div", { key: '175257f48da6faf68791e79cca21b7ac32fcc7bf', class: "digi-code-example__example" }, index.h("slot", { key: '9f4c44dcc64eb3b3b8a471218052a59c2fd415e5' })), !this.afHideCode && (index.h("div", { key: '438208775e65656d25cccae3870a5efb892d176e', class: "digi-code-example__code" }, this.showMoreButton && (index.h("button", { key: '8fcbeaa3373450f5811d27bae2a2e7920f7949ea', class: "digi-code-example__code-expand", "aria-label": this.isActive ? text._t.code.show_less : text._t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? text._t.code.show_less : text._t.code.show_more, ' ', index.h("digi-icon-chevron-down", { key: 'df424b79ffa72a86c9af76c5445d8ba6af01c0bc', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), index.h("div", { key: 'b7179ceec32acda3f2e6f2f9baec813ce791e72d', class: {
+            }, "aria-hidden": "true" }))), index.h("div", { key: 'bda1ff7309767aafa1feef42769b197d16c4484b', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, index.h("digi-code-block", { key: '83dc582d0daffeeef6722bd7bfe5db78e465dd58', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (index.h("div", { class: {
+            } }, index.h("digi-code-block", { key: 'e9a3ac82bbe4a6aca0ce15aa697efdb5ec5ec9f5', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (index.h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'

package/dist/cjs/digi-code.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-81fc5a97.js');
+const index = require('./index-7a477838.js');
 const codeVariation_enum = require('./code-variation.enum-c4a4e6fd.js');
 const prismGit = require('./prism-git-df985529.js');
 
@@ -34,7 +34,7 @@ const Code = class {
         };
     }
     render() {
-        return (index.h("span", { key: 'fe5bd7c4e18d5038c0edb7d3be15451069a86388', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, index.h("code", { key: 'f5a186e1fd1c8021216c26bb2220460b4cd47921', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (index.h("span", { key: '8b58df902f5d794e1874e6b0f6f7790b5a10985d', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, index.h("code", { key: '3e26521ae19d2c7e08ab30a24e1c328ee709fa94', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get watchers() { return {
         "afCode": ["formatCode"]

package/dist/cjs/digi-context-menu.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-81fc5a97.js');
+const index = require('./index-7a477838.js');
 const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
 const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
@@ -206,13 +206,13 @@ const ContextMenu = class {
     }
     render() {
         const menuItems = this.afMenuItems;
-        return (index.h(index.Host, { key: '4e8d4eaef09ba8221c86c8f902dfd1a87e9fa7af' }, index.h("div", { key: 'cfd85763e955b4d86e8c15c9fe59cd5142cf299d', id: `${this.afId}-identifier`, class: {
+        return (index.h(index.Host, { key: '05f0aa648455a460d01445826cac91e121f6e974' }, index.h("div", { key: 'fe5f214df8bd04210fb1876f748ef7642b930a69', id: `${this.afId}-identifier`, class: {
                 'digi-navigation-context-menu': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, index.h("digi-button", { key: '27e62fa02246723e52b0595013e657bce4b36951', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && index.h(this.digiIcon, { key: 'bfe44549892617cfbcfdb6d94380974ba26495d5', slot: "icon" }), this.afTitle, index.h("digi-icon-chevron-down", { key: 'b4b68d61df1505026533a9e82f76b5a1aed58d62', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: '11f1abdd973720de6fdba6bf2b8b7861b1dc2e44', class: {
+            } }, index.h("digi-button", { key: 'bbc293206364535d9953f6e2ce164e833de852ff', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && index.h(this.digiIcon, { key: '3301de13c63332bf848f9be86a635cec1a182960', slot: "icon" }), this.afTitle, index.h("digi-icon-chevron-down", { key: 'd3dd829dc660fdb344cc9e877f02dead696c6c6d', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: '822c9707ddb437c19ed88f23ec434dc534744e62', class: {
                 'digi-navigation-context-menu__list': true,
                 'digi-navigation-context-menu__list--active': this.visible
-            } }, index.h("div", { key: '7fc365e19c6cf31845fa99fc14906d2e84359aa3', onKeyDown: (e) => {
+            } }, index.h("div", { key: '09875b0e4342ce6269d6375f82f8be3c3c2d1449', onKeyDown: (e) => {
                 this.handleKey(e);
             }, id: `${this.afId}-dropdown`, style: {
                 visibility: this.visible ? 'visible' : 'hidden'