@designsystem-se/af 35.2.1-beta.0 → 35.2.1-beta.2

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-d803f3a6.js → typography-variation.enum-6077eba3.js}

@@ -51,33 +51,6 @@ exports.DialogVariation = void 0;
     DialogVariation["SECONDARY"] = "secondary";
 })(exports.DialogVariation || (exports.DialogVariation = {}));
 
-exports.ExpandableAccordionHeaderLevel = void 0;
-(function (ExpandableAccordionHeaderLevel) {
-    ExpandableAccordionHeaderLevel["H1"] = "h1";
-    ExpandableAccordionHeaderLevel["H2"] = "h2";
-    ExpandableAccordionHeaderLevel["H3"] = "h3";
-    ExpandableAccordionHeaderLevel["H4"] = "h4";
-    ExpandableAccordionHeaderLevel["H5"] = "h5";
-    ExpandableAccordionHeaderLevel["H6"] = "h6";
-})(exports.ExpandableAccordionHeaderLevel || (exports.ExpandableAccordionHeaderLevel = {}));
-
-exports.ExpandableFaqItemHeadingLevel = void 0;
-(function (ExpandableFaqItemHeadingLevel) {
-    ExpandableFaqItemHeadingLevel["H1"] = "h1";
-    ExpandableFaqItemHeadingLevel["H2"] = "h2";
-    ExpandableFaqItemHeadingLevel["H3"] = "h3";
-    ExpandableFaqItemHeadingLevel["H4"] = "h4";
-    ExpandableFaqItemHeadingLevel["H5"] = "h5";
-    ExpandableFaqItemHeadingLevel["H6"] = "h6";
-})(exports.ExpandableFaqItemHeadingLevel || (exports.ExpandableFaqItemHeadingLevel = {}));
-
-exports.ExpandableFaqItemVariation = void 0;
-(function (ExpandableFaqItemVariation) {
-    ExpandableFaqItemVariation["PRIMARY"] = "primary";
-    ExpandableFaqItemVariation["SECONDARY"] = "secondary";
-    ExpandableFaqItemVariation["TERTIARY"] = "tertiary";
-})(exports.ExpandableFaqItemVariation || (exports.ExpandableFaqItemVariation = {}));
-
 exports.FooterVariation = void 0;
 (function (FooterVariation) {
     FooterVariation["LARGE"] = "large";
@@ -94,6 +67,42 @@ exports.FormErrorListHeadingLevel = void 0;
     FormErrorListHeadingLevel["H6"] = "h6";
 })(exports.FormErrorListHeadingLevel || (exports.FormErrorListHeadingLevel = {}));
 
+exports.FormInputMode = void 0;
+(function (FormInputMode) {
+    FormInputMode["DEFAULT"] = "";
+    FormInputMode["NONE"] = "none";
+    FormInputMode["TEXT"] = "text";
+    FormInputMode["DECIMAL"] = "decimal";
+    FormInputMode["NUMERIC"] = "numeric";
+    FormInputMode["TEL"] = "tel";
+    FormInputMode["SEARCH"] = "search";
+    FormInputMode["EMAIL"] = "email";
+    FormInputMode["URL"] = "url";
+})(exports.FormInputMode || (exports.FormInputMode = {}));
+
+exports.FormInputValidation = void 0;
+(function (FormInputValidation) {
+    FormInputValidation["SUCCESS"] = "success";
+    FormInputValidation["ERROR"] = "error";
+    FormInputValidation["WARNING"] = "warning";
+    FormInputValidation["NEUTRAL"] = "neutral";
+})(exports.FormInputValidation || (exports.FormInputValidation = {}));
+
+exports.FormInputVariation = void 0;
+(function (FormInputVariation) {
+    FormInputVariation["SMALL"] = "small";
+    FormInputVariation["MEDIUM"] = "medium";
+    FormInputVariation["LARGE"] = "large";
+})(exports.FormInputVariation || (exports.FormInputVariation = {}));
+
+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";
@@ -141,6 +150,21 @@ exports.FormSelectFilterValidation = void 0;
     FormSelectFilterValidation["NEUTRAL"] = "neutral";
 })(exports.FormSelectFilterValidation || (exports.FormSelectFilterValidation = {}));
 
+exports.FormSelectValidation = void 0;
+(function (FormSelectValidation) {
+    FormSelectValidation["SUCCESS"] = "success";
+    FormSelectValidation["ERROR"] = "error";
+    FormSelectValidation["WARNING"] = "warning";
+    FormSelectValidation["NEUTRAL"] = "neutral";
+})(exports.FormSelectValidation || (exports.FormSelectValidation = {}));
+
+exports.FormSelectVariation = void 0;
+(function (FormSelectVariation) {
+    FormSelectVariation["SMALL"] = "small";
+    FormSelectVariation["MEDIUM"] = "medium";
+    FormSelectVariation["LARGE"] = "large";
+})(exports.FormSelectVariation || (exports.FormSelectVariation = {}));
+
 exports.HeaderCenterContentWidth = void 0;
 (function (HeaderCenterContentWidth) {
     HeaderCenterContentWidth["DEFAULT"] = "none";
@@ -184,38 +208,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.LogoColor = void 0;
-(function (LogoColor) {
-    LogoColor["PRIMARY"] = "primary";
-    LogoColor["SECONDARY"] = "secondary";
-})(exports.LogoColor || (exports.LogoColor = {}));
-
-exports.LogoVariation = void 0;
-(function (LogoVariation) {
-    LogoVariation["SMALL"] = "small";
-    LogoVariation["LARGE"] = "large";
-})(exports.LogoVariation || (exports.LogoVariation = {}));
-
 exports.NotificationAlertHeadingLevel = void 0;
 (function (NotificationAlertHeadingLevel) {
     NotificationAlertHeadingLevel["H1"] = "h1";
@@ -275,22 +267,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,18 @@ export class Calendar {
         this.afMaxDate = undefined;
         this.afMultipleDates = false;
         this.afYearSelect = false;
+        this.activeCalendar = [];
+    }
+    focusedDateChanged() {
+        this.drawCalendar(this.focusedDate);
+    }
+    afOpenCalendarToChangeHandler() {
+        this.determineFocusedDate();
     }
     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 +42,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 +68,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 +91,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 +121,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 +174,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 +234,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 +266,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 +301,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 +319,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 +355,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 +379,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: '2951c3cb75fbace29267998e7e17ed48fd7c934f', 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: '0afa63be62669edd3ecef28953711892810a308b', class: "digi-calendar__header" }, h("div", { key: '37d19ca99a173d0195179a361d7460c18e3e75db', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '6c5cde1508e7948b675d4495190f04a69c321570', 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: '2ac58393e542efb8dab01da4aa3367107646f524', 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: '0c715aeece50ada4c13173e95a431b4bf3b2d584', class: "digi-calendar__header" }, h("div", { key: '7183e490dbfe41f705b06e525907c63a11d13c7d', class: "digi-calendar__header--month-step" }, h("button", { key: '1ac729938041d87ee0a2588211c09ff8eaedafae', 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: '2fc849f377c0d817d2c03b2f365f5f35ae2ae422', slot: "icon", "aria-hidden": "true" }), h("span", { key: '9a454f6a75c8525d0559013f420083461e59e38c', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: 'fe11bd1a3e7fe57152136e6cd05763735d64c164', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '1b46134446f5fb21be57b3d9b492a227c732aded', 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: '07efeb5a1b3341814e6a9fd3cbe9c81fdf8d55fb', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: 'f16b49b2d05d06a928b944f515b9706d21a860d7', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: 'dc86ed3df6e5f70384b9e2ada473f4af2a11ccca', 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: 'f493df85506b3482066bc542e19630311180d224', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'b2f33f1dc3b75c4406df209e0cd37ff6e915dfa4' }, h("tr", { key: '74baa5b744116ad187f5cb04ff5b160117698adc', role: "row" }, this.afShowWeekNumber && (h("th", { key: '4cd7f3261eb3fb270a0299a23f4ced5d21301270', 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: '40266516692ee0a3b67781ff51881bf71fa325ba', 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 +411,7 @@ export class Calendar {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: 'ed2cf3c305f6db73a00e838beb786fc088045634', name: "calendar-footer" })));
+        })))), h("slot", { key: 'a1d6061116378a7f60fbc8d779999db45cf04b86', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -451,9 +440,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 +450,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 +468,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 +488,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 +562,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 +635,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 +658,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 +674,8 @@ export class Calendar {
         return {
             "selectedDates": {},
             "focusedDate": {},
-            "dirty": {}
+            "dirty": {},
+            "activeCalendar": {}
         };
     }
     static get events() {
@@ -789,6 +755,12 @@ export class Calendar {
     }
     static get watchers() {
         return [{
+                "propName": "focusedDate",
+                "methodName": "focusedDateChanged"
+            }, {
+                "propName": "afOpenCalendarTo",
+                "methodName": "afOpenCalendarToChangeHandler"
+            }, {
                 "propName": "afSelectedDate",
                 "methodName": "afSelectedDateChangeHandler"
             }, {