@designsystem-se/af 35.4.0 → 36.0.0

package/dist/cjs/{text-3157012b.js → text-65b1b58c.js}

@@ -13,6 +13,7 @@ const common = {
     required: 'Obligatoriskt',
     optional: 'Frivilligt',
     of: 'av',
+    and: 'och',
     today: 'Idag',
     cancel: 'Avbryt',
     canceled: 'Avbruten',
@@ -28,6 +29,24 @@ const common = {
 };
 const calendar = {
     screenReaderInstructions: 'För navigering mellan månader med piltangenterna, använd inte den virtuella markören.',
+    year: 'År',
+    month: 'Månad',
+    months: [
+        'januari',
+        'februari',
+        'mars',
+        'april',
+        'maj',
+        'juni',
+        'juli',
+        'augusti',
+        'september',
+        'oktober',
+        'november',
+        'december'
+    ],
+    previousMonth: 'föregående månad',
+    nextMonth: 'nästa månad',
     week: 'Vecka',
     weekdays: {
         mon: 'Måndag',

package/dist/cjs/typography-heading-jumbo-variation.enum-8677e099.js

@@ -0,0 +1,17 @@
+'use strict';
+
+exports.TypographyHeadingJumboLevel = void 0;
+(function (TypographyHeadingJumboLevel) {
+    TypographyHeadingJumboLevel["H1"] = "h1";
+    TypographyHeadingJumboLevel["H2"] = "h2";
+    TypographyHeadingJumboLevel["H3"] = "h3";
+    TypographyHeadingJumboLevel["H4"] = "h4";
+    TypographyHeadingJumboLevel["H5"] = "h5";
+    TypographyHeadingJumboLevel["H6"] = "h6";
+})(exports.TypographyHeadingJumboLevel || (exports.TypographyHeadingJumboLevel = {}));
+
+exports.TypographyHeadingJumboVariation = void 0;
+(function (TypographyHeadingJumboVariation) {
+    TypographyHeadingJumboVariation["PRIMARY"] = "primary";
+    TypographyHeadingJumboVariation["SECONDARY"] = "secondary";
+})(exports.TypographyHeadingJumboVariation || (exports.TypographyHeadingJumboVariation = {}));

package/dist/cjs/{typography-variation.enum-9f56fd50.js → typography-variation.enum-50512a4e.js}

@@ -67,6 +67,14 @@ exports.FormErrorListHeadingLevel = void 0;
     FormErrorListHeadingLevel["H6"] = "h6";
 })(exports.FormErrorListHeadingLevel || (exports.FormErrorListHeadingLevel = {}));
 
+exports.FormFieldsetValidation = void 0;
+(function (FormFieldsetValidation) {
+    FormFieldsetValidation["SUCCESS"] = "success";
+    FormFieldsetValidation["ERROR"] = "error";
+    FormFieldsetValidation["WARNING"] = "warning";
+    FormFieldsetValidation["NEUTRAL"] = "neutral";
+})(exports.FormFieldsetValidation || (exports.FormFieldsetValidation = {}));
+
 exports.FormRadiobuttonLayout = void 0;
 (function (FormRadiobuttonLayout) {
     FormRadiobuttonLayout["INLINE"] = "inline";
@@ -164,38 +172,6 @@ exports.InfoCardHeadingLevel = void 0;
     InfoCardHeadingLevel["H6"] = "h6";
 })(exports.InfoCardHeadingLevel || (exports.InfoCardHeadingLevel = {}));
 
-exports.LayoutBlockContainer = void 0;
-(function (LayoutBlockContainer) {
-    LayoutBlockContainer["STATIC"] = "static";
-    LayoutBlockContainer["FLUID"] = "fluid";
-    LayoutBlockContainer["NONE"] = "none";
-})(exports.LayoutBlockContainer || (exports.LayoutBlockContainer = {}));
-
-exports.LayoutContainerVariation = void 0;
-(function (LayoutContainerVariation) {
-    LayoutContainerVariation["STATIC"] = "static";
-    LayoutContainerVariation["FLUID"] = "fluid";
-    LayoutContainerVariation["NONE"] = "none";
-})(exports.LayoutContainerVariation || (exports.LayoutContainerVariation = {}));
-
-exports.LayoutContainerMaxWidth = void 0;
-(function (LayoutContainerMaxWidth) {
-    LayoutContainerMaxWidth["WIDTH_1200"] = "1200";
-    LayoutContainerMaxWidth["WIDTH_1400"] = "1400";
-})(exports.LayoutContainerMaxWidth || (exports.LayoutContainerMaxWidth = {}));
-
-exports.NavigationVerticalMenuActiveIndicatorSize = void 0;
-(function (NavigationVerticalMenuActiveIndicatorSize) {
-    NavigationVerticalMenuActiveIndicatorSize["PRIMARY"] = "primary";
-    NavigationVerticalMenuActiveIndicatorSize["SECONDARY"] = "secondary";
-})(exports.NavigationVerticalMenuActiveIndicatorSize || (exports.NavigationVerticalMenuActiveIndicatorSize = {}));
-
-exports.NavigationVerticalMenuVariation = void 0;
-(function (NavigationVerticalMenuVariation) {
-    NavigationVerticalMenuVariation["PRIMARY"] = "primary";
-    NavigationVerticalMenuVariation["SECONDARY"] = "secondary";
-})(exports.NavigationVerticalMenuVariation || (exports.NavigationVerticalMenuVariation = {}));
-
 exports.NotificationAlertHeadingLevel = void 0;
 (function (NotificationAlertHeadingLevel) {
     NotificationAlertHeadingLevel["H1"] = "h1";
@@ -255,22 +231,6 @@ exports.FeedbackVariation = void 0;
     FeedbackVariation["SECONDARY"] = "secondary";
 })(exports.FeedbackVariation || (exports.FeedbackVariation = {}));
 
-exports.TypographyHeadingJumboLevel = void 0;
-(function (TypographyHeadingJumboLevel) {
-    TypographyHeadingJumboLevel["H1"] = "h1";
-    TypographyHeadingJumboLevel["H2"] = "h2";
-    TypographyHeadingJumboLevel["H3"] = "h3";
-    TypographyHeadingJumboLevel["H4"] = "h4";
-    TypographyHeadingJumboLevel["H5"] = "h5";
-    TypographyHeadingJumboLevel["H6"] = "h6";
-})(exports.TypographyHeadingJumboLevel || (exports.TypographyHeadingJumboLevel = {}));
-
-exports.TypographyHeadingJumboVariation = void 0;
-(function (TypographyHeadingJumboVariation) {
-    TypographyHeadingJumboVariation["PRIMARY"] = "primary";
-    TypographyHeadingJumboVariation["SECONDARY"] = "secondary";
-})(exports.TypographyHeadingJumboVariation || (exports.TypographyHeadingJumboVariation = {}));
-
 exports.TypographyVariation = void 0;
 (function (TypographyVariation) {
     TypographyVariation["SMALL"] = "small";

package/dist/collection/components/_calendar/calendar/calendar.css

@@ -183,6 +183,9 @@ License: none (public domain)
   border: var(--digi--calendar--date--today--circle-border);
   border-radius: 50%;
 }
+:host .digi-calendar__date--today.digi-calendar__date--selected::after {
+  border-color: var(--digi--color--icon--secondary);
+}
 @media (any-hover: hover) {
   :host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) {
     cursor: pointer;

package/dist/collection/components/_calendar/calendar/calendar.js

@@ -10,14 +10,11 @@ import { _t } from "../../../text";
  */
 export class Calendar {
     constructor() {
-        this.activeCalendar = [];
-        this.months = [];
         this.selectedDates = [];
         this.focusedDate = undefined;
         this.dirty = false;
         this.afId = randomIdGenerator('digi-calendar');
-        this.afInitSelectedMonth = new Date().getMonth();
-        this.afInitSelectedDate = new Date();
+        this.afOpenCalendarTo = undefined;
         this.afShowWeekNumber = false;
         this.afSelectedDate = undefined;
         this.afSelectedDates = [];
@@ -26,14 +23,21 @@ export class Calendar {
         this.afMaxDate = undefined;
         this.afMultipleDates = false;
         this.afYearSelect = false;
+        this.activeCalendar = [];
+    }
+    focusedDateChanged() {
+        this.drawCalendar(this.focusedDate);
+    }
+    afOpenCalendarToChangeHandler() {
+        this.determineFocusedDate();
+    }
+    afShowWeekNumberChangeHandler() {
+        this.drawCalendar(this.focusedDate);
     }
     afSelectedDateChangeHandler() {
-        if (isValid(this.afSelectedDate)) {
-            this.selectedDates = [this.afSelectedDate];
-        }
-        else {
-            this.selectedDates = [];
-        }
+        this.afSelectedDates = isValid(this.afSelectedDate)
+            ? [this.afSelectedDate]
+            : [];
     }
     afSelectedDatesChangeHandler() {
         if (this.afSelectedDates.length > 0) {
@@ -41,10 +45,12 @@ export class Calendar {
                 const invalidDate = this.afSelectedDates.find((date) => !isValid(date));
                 if (invalidDate === undefined) {
                     this.selectedDates = this.afSelectedDates;
+                    this.determineFocusedDate();
                 }
             }
             else if (isValid(this.afSelectedDates[0])) {
                 this.selectedDates = [this.afSelectedDates[0]];
+                this.determineFocusedDate();
             }
         }
         else {
@@ -65,6 +71,20 @@ export class Calendar {
             this.afOnClickOutside.emit(e);
         }
     }
+    determineFocusedDate() {
+        if (this.dirty) {
+            return; // Don't change focused date if user has already interacted with the calendar
+        }
+        else if (this.afOpenCalendarTo && isValid(this.afOpenCalendarTo)) {
+            this.focusedDate = this.afOpenCalendarTo;
+        }
+        else if (this.selectedDates.length > 0) {
+            this.focusedDate = this.selectedDates[0];
+        }
+        else {
+            this.focusedDate = new Date();
+        }
+    }
     drawCalendar(focusedDate) {
         const date = {
             year: focusedDate.getFullYear(),
@@ -74,20 +94,6 @@ export class Calendar {
         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,
@@ -118,10 +124,9 @@ export class Calendar {
     getWeekDays(date) {
         const today = date || new Date();
         const week = [];
+        const dayOffset = today.getDay(); // 0=söndag
         for (let i = 1; i <= 7; i++) {
-            const first = today.getDate() - today.getDay() + i;
-            const day = new Date(today.setDate(first));
-            week.push(day);
+            week.push(new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOffset + i));
         }
         return week;
     }
@@ -172,13 +177,13 @@ export class Calendar {
     }
     getMonthName(monthNumber) {
         return new Date(1992, monthNumber, 1)
-            .toLocaleDateString('default', {
+            .toLocaleDateString(_t.locale, {
             month: 'short'
         })
             .replace('.', '');
     }
     getFullMonthName(monthNumber) {
-        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString('default', {
+        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(_t.locale, {
             month: 'long',
             year: 'numeric'
         });
@@ -232,39 +237,28 @@ export class Calendar {
         return !this.isSameMonth(date, this.focusedDate);
     }
     subtractMonth() {
+        this.onDirty();
         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() {
+        this.onDirty();
         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;
-        }
+        return this.isFocused(date) ? 0 : -1;
     }
     navigateHandler(e, daysToAdd) {
         !!e.detail && e.detail.preventDefault();
@@ -275,7 +269,6 @@ export class Calendar {
         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() {
@@ -311,15 +304,16 @@ export class Calendar {
             day: 'numeric'
         });
     }
-    setFocused(date) {
+    isFocused(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;
+        if (this.afOpenCalendarTo) {
+            return this.isSameDate(date, this.afOpenCalendarTo);
         }
+        return this.isSameMonth(date, new Date())
+            ? this.isSameDate(date, new Date())
+            : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
     }
     ariaPressed(date) {
         return this.selectedDates.length > 0 &&
@@ -328,22 +322,22 @@ export class Calendar {
             : 'false';
     }
     selectMonth(evt) {
+        this.onDirty();
         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);
+        this.onDirty();
+        const selectedYear = parseInt(evt.target.value, 10);
+        // Skydda mot ogiltiga datum som 29 februari
+        const day = Math.min(this.focusedDate.getDate(), new Date(selectedYear, this.focusedDate.getMonth() + 1, 0).getDate());
+        const newDate = new Date(selectedYear, this.focusedDate.getMonth(), day);
+        this.focusedDate = newDate;
     }
     earliestSelectableYear() {
         if (this.afMinDate)
@@ -364,18 +358,16 @@ export class Calendar {
         return allYears;
     }
     componentWillLoad() {
-        if (this.afInitSelectedDate) {
-            this.afInitSelectedMonth = this.afInitSelectedDate.getMonth();
-            this.focusedDate = this.afInitSelectedDate;
-            this.drawCalendar(this.afInitSelectedDate);
+        var _a;
+        if (isValid(this.afSelectedDate)) {
+            this.selectedDates = [this.afSelectedDate];
         }
-        else {
-            const startSelectedMonth = new Date(new Date().getFullYear(), this.afInitSelectedMonth);
-            this.focusedDate = startSelectedMonth;
-            this.drawCalendar(startSelectedMonth);
+        else if (((_a = this.afSelectedDates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const valid = this.afSelectedDates.filter((d) => isValid(d));
+            if (valid.length > 0)
+                this.selectedDates = valid;
         }
-    }
-    componentWillUpdate() {
+        this.determineFocusedDate();
         this.drawCalendar(this.focusedDate);
     }
     async componentDidLoad() {
@@ -390,24 +382,24 @@ export class Calendar {
         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--focused': this.isFocused(date),
             'digi-calendar__date--selected': this.isDateSelected(date) && date.getMonth() === shownMonth,
             'digi-calendar__date--not-selectable': !this.isInAnotherMonth(date) && !this.isDateSelectable(date)
         };
     }
     render() {
-        return (h("div", { key: 'f2d44d7100e9aec3a91c56663360624f83745c0f', class: {
+        return (h("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'fbc3332a363201be4ece13ce849fa10ab324ac13', class: "digi-calendar__header" }, h("div", { key: '88de6a25891a17617d6d59cc79ff40a16c1f8467', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: 'bf76a067c841709388f5d8d9dc7ce572f370ca49', afLabel: "M\u00E5nad", "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
+            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'd9667abd52111f456358d9e6a9adafca0d4ee1a0', class: "digi-calendar__header" }, h("div", { key: '98602c8c03ae35a5c2eca0f245b4d16a894fed23', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '5027e489a562e88cc3887e1899fa05c95d80c724', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
                 this.selectMonth(evt);
-            } }, this.months.map((month, index) => {
+            } }, _t.calendar.months.map((month, index) => {
             return h("option", { value: index }, month);
-        })), h("digi-form-select", { key: '8f822faced5e7dff2aa72a0ce678ea1013d9e299', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+        })), h("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
                 this.selectYear(evt);
-            } }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: 'f51013760c858eb00656e8596fb04adb619cc0eb', class: "digi-calendar__header" }, h("div", { key: 'a37f3fd65b74345d4c8bfeaa64185a0ba046317d', class: "digi-calendar__header--month-step" }, 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() }, h("digi-icon-chevron-left", { key: '6019efab7ae1dc1fa643459d7c2b5feb977cf6aa', slot: "icon", "aria-hidden": "true" }), h("span", { key: 'f5e14ed6c5e6cbf31bceeed46bf78454a30e76d5', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth - 1))), h("div", { key: '5426dea9943af11f1e537318b44450c4504f63a4', class: "digi-calendar__month" }, this.getFullMonthName(this.afInitSelectedMonth)), 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() }, h("span", { key: '9403efa5fa67432f7f23f885d8f99ebc54473516', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth + 1)), h("digi-icon-chevron-right", { key: '02eafcde2c6327a23e8ffe82682430af43eb4d02', slot: "icon", "aria-hidden": "true" }))))), 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) }, h("table", { key: 'ea2e505e70411a3d07119130b0788dafbbbeef07', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'eace14b22601d0f85cf6f8c276716491140389fb' }, h("tr", { key: 'f6678cdfa52220c5e19729fc7bc567ba8c5e06c6', role: "row" }, this.afShowWeekNumber && (h("th", { key: '7fa670bd34fd0186c8f154ed6cac0481c30b90cd', role: "columnheader", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "columnheader", "aria-label": _t.calendar.weekdays[day], abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: '7ecdf08d9a497dfe74f7e95b3d89566ea8789489', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
+            } }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '2a29c58612f574163fa45dbbcc488deb797827ff', class: "digi-calendar__header" }, h("div", { key: '6dfda3eeac53ef081aa7b4853c5a79b7b1cac390', class: "digi-calendar__header--month-step" }, h("button", { key: 'a5455fadeb481f8fe1db5094023c84c5c7392e6c', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
+                ', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: '116d16bbd8efc4c67c71fc1faf910a9ac9e628d6', slot: "icon", "aria-hidden": "true" }), h("span", { key: 'a187702c9817ad145dbbfff26a708cf6528ac619', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '953f6e9d74ab935796b3c45e056c2b96242d1fae', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: 'e3b41587612b97e9a7a370c1c5d3316a83d3adde', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
+                ', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: 'ab0f3e5fc595b0116e1c09ab511788ce312ece42', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '38816a1cba510a4d86585abb602f0616887eb4c8', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: '75b0c5dc7c567e7129064231739d96454c20fa23', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, h("table", { key: '1bc547fce844da11ca0c60cf6349316619b1830f', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'bc0c43868dfd448df74d6bba3e1037cffabf9b34' }, h("tr", { key: 'f90539a88f628bf9e4b2fe9ab057f0010571f71d', role: "row" }, this.afShowWeekNumber && (h("th", { key: '2f9eeddc560473fd2da253db45e516e68f80b865', role: "columnheader", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "columnheader", "aria-label": _t.calendar.weekdays[day], abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: '249e8d2f8d0426d78371d07f8216efb7a3313fb8', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
             return (h("tr", null, week.map((day, i) => {
                 if (this.afShowWeekNumber && i === 0) {
                     return (h("th", { role: "rowheader", "aria-label": _t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
@@ -422,7 +414,7 @@ export class Calendar {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: 'ed2cf3c305f6db73a00e838beb786fc088045634', name: "calendar-footer" })));
+        })))), h("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -451,9 +443,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-calendar' and so on. Defaults to random string."
+                            "text": "Prefix for the component's 'id' attribute. Example: 'my-cool-id' generates 'my-cool-id-calendar'. Defaults to random string."
                         }],
-                    "text": "Prefix f\u00F6r komponentens alla olika interna 'id'-attribut p\u00E5 kalendern etc. Ex. 'my-cool-id' genererar 'my-cool-id-calendar' osv. Ges inget v\u00E4rde genereras ett slumpm\u00E4ssigt."
+                    "text": "Prefix f\u00F6r komponentens 'id'-attribut. Ex. 'my-cool-id' genererar 'my-cool-id-calendar'. Ges inget v\u00E4rde genereras ett slumpm\u00E4ssigt."
                 },
                 "getter": false,
                 "setter": false,
@@ -461,30 +453,7 @@ export class Calendar {
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-calendar')"
             },
-            "afInitSelectedMonth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Selected month to display from start. Defaults to the month of todays month. (Januray = 0, December = 11)"
-                        }],
-                    "text": "Vald m\u00E5nad att visa fr\u00E5n start. F\u00F6rvalt \u00E4r den m\u00E5nad som dagens datum har. (Januari = 0, December = 11)"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-init-selected-month",
-                "reflect": false,
-                "defaultValue": "new Date().getMonth()"
-            },
-            "afInitSelectedDate": {
+            "afOpenCalendarTo": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -502,13 +471,12 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Selected month and year to display from start. Defaults to todays month and year."
+                            "text": "Controls which month is shown from start, and which date button is the entry point for keyboard navigation. If not provided, selected date or today's date is used."
                         }],
-                    "text": "Valt m\u00E5ndad och \u00E5r fr\u00E5n start. F\u00F6rvalt \u00E4r dagens m\u00E5nad och \u00E5r."
+                    "text": "Styr vilken m\u00E5nad som visas fr\u00E5n start, samt vilken datumknapp som \u00E4r ing\u00E5ngspunkt f\u00F6r tangentbordsnavigering. Om inte angiven anv\u00E4nds valt datum eller dagens datum."
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "new Date()"
+                "setter": false
             },
             "afShowWeekNumber": {
                 "type": "boolean",
@@ -523,9 +491,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Show week number in the calander. Default is false"
+                            "text": "Show week number in the calendar"
                         }],
-                    "text": "Visa veckonummer i kalender. F\u00F6rvalt \u00E4r false"
+                    "text": "Visa veckonummer i kalender"
                 },
                 "getter": false,
                 "setter": false,
@@ -597,9 +565,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Toggle calendar hide/show. Defaults to true"
+                            "text": "Toggle calendar hide/show."
                         }],
-                    "text": "Visar d\u00F6ljer kalendern. Visas som f\u00F6rvalt"
+                    "text": "Visar eller d\u00F6ljer kalendern."
                 },
                 "getter": false,
                 "setter": false,
@@ -670,9 +638,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true to be able to select multiple dates in the calander. Default is false"
+                            "text": "Set this to true to be able to allow selection of multiple dates"
                         }],
-                    "text": "S\u00E4tt denna till true f\u00F6r att kunna markera mer en ett datum i kalendern. F\u00F6rvalt \u00E4r false"
+                    "text": "S\u00E4tt denna till true f\u00F6r att till\u00E5ta val av flera datum"
                 },
                 "getter": false,
                 "setter": false,
@@ -693,9 +661,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true to be able to select year through a select component. Default is false"
+                            "text": "Set this to true to be show year selector"
                         }],
-                    "text": "S\u00E4tt denna till true f\u00F6r att kunna v\u00E4lja \u00E5r genom en v\u00E4ljare. F\u00F6rvalt \u00E4r false"
+                    "text": "S\u00E4tt denna till true f\u00F6r att visa v\u00E4ljare f\u00F6r \u00E5r"
                 },
                 "getter": false,
                 "setter": false,
@@ -709,7 +677,8 @@ export class Calendar {
         return {
             "selectedDates": {},
             "focusedDate": {},
-            "dirty": {}
+            "dirty": {},
+            "activeCalendar": {}
         };
     }
     static get events() {
@@ -789,6 +758,15 @@ export class Calendar {
     }
     static get watchers() {
         return [{
+                "propName": "focusedDate",
+                "methodName": "focusedDateChanged"
+            }, {
+                "propName": "afOpenCalendarTo",
+                "methodName": "afOpenCalendarToChangeHandler"
+            }, {
+                "propName": "afShowWeekNumber",
+                "methodName": "afShowWeekNumberChangeHandler"
+            }, {
                 "propName": "afSelectedDate",
                 "methodName": "afSelectedDateChangeHandler"
             }, {