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

package/dist/cjs/{typography-variation.enum-c6bb12f2.js → typography-variation.enum-6077eba3.js}

@@ -165,22 +165,6 @@ exports.FormSelectVariation = void 0;
     FormSelectVariation["LARGE"] = "large";
 })(exports.FormSelectVariation || (exports.FormSelectVariation = {}));
 
-exports.FormTextareaValidation = void 0;
-(function (FormTextareaValidation) {
-    FormTextareaValidation["SUCCESS"] = "success";
-    FormTextareaValidation["ERROR"] = "error";
-    FormTextareaValidation["WARNING"] = "warning";
-    FormTextareaValidation["NEUTRAL"] = "neutral";
-})(exports.FormTextareaValidation || (exports.FormTextareaValidation = {}));
-
-exports.FormTextareaVariation = void 0;
-(function (FormTextareaVariation) {
-    FormTextareaVariation["SMALL"] = "small";
-    FormTextareaVariation["MEDIUM"] = "medium";
-    FormTextareaVariation["LARGE"] = "large";
-    FormTextareaVariation["AUTO"] = "auto";
-})(exports.FormTextareaVariation || (exports.FormTextareaVariation = {}));
-
 exports.HeaderCenterContentWidth = void 0;
 (function (HeaderCenterContentWidth) {
     HeaderCenterContentWidth["DEFAULT"] = "none";

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

@@ -10,15 +10,11 @@ import { _t } from "../../../text";
  */
 export class Calendar {
     constructor() {
-        var _a;
-        this.locale = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang) || 'sv-SE';
-        this.activeCalendar = [];
-        this.months = [];
         this.selectedDates = [];
         this.focusedDate = undefined;
         this.dirty = false;
         this.afId = randomIdGenerator('digi-calendar');
-        this.afInitFocusDate = undefined;
+        this.afOpenCalendarTo = undefined;
         this.afShowWeekNumber = false;
         this.afSelectedDate = undefined;
         this.afSelectedDates = [];
@@ -27,6 +23,13 @@ export class Calendar {
         this.afMaxDate = undefined;
         this.afMultipleDates = false;
         this.afYearSelect = false;
+        this.activeCalendar = [];
+    }
+    focusedDateChanged() {
+        this.drawCalendar(this.focusedDate);
+    }
+    afOpenCalendarToChangeHandler() {
+        this.determineFocusedDate();
     }
     afSelectedDateChangeHandler() {
         this.afSelectedDates = isValid(this.afSelectedDate)
@@ -39,24 +42,12 @@ export class Calendar {
                 const invalidDate = this.afSelectedDates.find((date) => !isValid(date));
                 if (invalidDate === undefined) {
                     this.selectedDates = this.afSelectedDates;
-                    if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
-                        this.focusedDate = this.afInitFocusDate;
-                    }
-                    else {
-                        this.focusedDate = new Date(this.afSelectedDates
-                            .slice()
-                            .sort((a, b) => a.getTime() - b.getTime())[0]);
-                    }
+                    this.determineFocusedDate();
                 }
             }
             else if (isValid(this.afSelectedDates[0])) {
                 this.selectedDates = [this.afSelectedDates[0]];
-                if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
-                    this.focusedDate = this.afInitFocusDate;
-                }
-                else {
-                    this.focusedDate = new Date(this.afSelectedDates[0]);
-                }
+                this.determineFocusedDate();
             }
         }
         else {
@@ -77,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(),
@@ -86,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,
@@ -130,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;
     }
@@ -184,13 +174,13 @@ export class Calendar {
     }
     getMonthName(monthNumber) {
         return new Date(1992, monthNumber, 1)
-            .toLocaleDateString(this.locale, {
+            .toLocaleDateString(_t.locale, {
             month: 'short'
         })
             .replace('.', '');
     }
     getFullMonthName(monthNumber) {
-        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(this.locale, {
+        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(_t.locale, {
             month: 'long',
             year: 'numeric'
         });
@@ -315,8 +305,8 @@ export class Calendar {
         if (this.dirty) {
             return this.isSameDate(date, this.focusedDate);
         }
-        if (this.afInitFocusDate) {
-            return this.isSameDate(date, this.afInitFocusDate);
+        if (this.afOpenCalendarTo) {
+            return this.isSameDate(date, this.afOpenCalendarTo);
         }
         return this.isSameMonth(date, new Date())
             ? this.isSameDate(date, new Date())
@@ -337,14 +327,14 @@ export class Calendar {
         const lastDayOfSelectedMonth = new Date(tempDate.getFullYear(), selectedMonth + 1, 0).getDate();
         tempDate.setDate(Math.min(currentDay, lastDayOfSelectedMonth));
         this.focusedDate = tempDate;
-        this.drawCalendar(this.focusedDate);
     }
     selectYear(evt) {
         this.onDirty();
-        const tempDate = this.focusedDate;
-        tempDate.setFullYear(evt.target.value);
-        this.focusedDate = tempDate;
-        this.drawCalendar(this.focusedDate);
+        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)
@@ -374,20 +364,7 @@ export class Calendar {
             if (valid.length > 0)
                 this.selectedDates = valid;
         }
-        if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
-            this.focusedDate = this.afInitFocusDate;
-        }
-        else if (this.selectedDates.length > 0) {
-            this.focusedDate = this.selectedDates
-                .slice()
-                .sort((a, b) => a.getTime() - b.getTime())[0];
-        }
-        else {
-            this.focusedDate = new Date();
-        }
-        this.drawCalendar(this.focusedDate);
-    }
-    componentWillUpdate() {
+        this.determineFocusedDate();
         this.drawCalendar(this.focusedDate);
     }
     async componentDidLoad() {
@@ -408,18 +385,18 @@ export class Calendar {
         };
     }
     render() {
-        return (h("div", { key: 'a65aa1b63553ff82c432a81fa9fd9821b88a39ab', class: {
+        return (h("div", { key: '2951c3cb75fbace29267998e7e17ed48fd7c934f', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '9cdea2a354a094a7dbe68bc7dd796143ed21acb6', class: "digi-calendar__header" }, h("div", { key: '3731070e6c432b2bed6985034db41b141a27214e', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '06e3d06b3ef6d7ad262f9eeb927a12167ca8a48b', 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: '60bde04287db50b5d887ddcb31839f1fe159b09a', 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: '75b68570a03ee6f921a4b36f3fa08d6c7b52c277', class: "digi-calendar__header" }, h("div", { key: 'c4a4f28576b93368e1eca7a0fab5f88866b98cf7', class: "digi-calendar__header--month-step" }, h("button", { key: '69058f8bd1eff3d2e54a6436c36e5c4b8441422e', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
-                ', föregående månad', onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'af76697caee12f4f88920cd0fdb869b02f2b9ce5', slot: "icon", "aria-hidden": "true" }), h("span", { key: '6a0692868882f344f0a32f9d73c0c0a0ddd2b826', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '9224acc84fc325ff9d15dbfc8a9dd6592f11e9f8', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '15346caa9359c8eed3c14315b7fd862ed4786bf6', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
-                ', nästa månad', onClick: () => this.addMonth() }, h("span", { key: '69046c2421fc47d7e840ce79a30ea201846872b1', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '0c08338d76c0137d4a001cef22d2eff8d8b347ea', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: 'f49051c6fe7d5f9aa922988a681c6fc6ed981ff8', 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: 'e1b09f2fb0c93c46804dfce34ac2e9e367a9d79d', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'bc8915a5cbf3093cab17fb2778f892e1fd099d9a' }, h("tr", { key: '1b72c4136c864d3af56b1ab9db8b2963a7b0fbca', role: "row" }, this.afShowWeekNumber && (h("th", { key: 'ab422d5c5e5a23b9debdb9225a53430d4f8ec302', 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: 'af2273dae429b8d3d67f5df853d49f6508fe8f41', 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));
@@ -434,7 +411,7 @@ export class Calendar {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: '081dffb3256ce8febd43fc0842bed7bee26cd228', name: "calendar-footer" })));
+        })))), h("slot", { key: 'a1d6061116378a7f60fbc8d779999db45cf04b86', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -473,7 +450,7 @@ export class Calendar {
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-calendar')"
             },
-            "afInitFocusDate": {
+            "afOpenCalendarTo": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -491,9 +468,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Controls which month is shown from start, and which date button is the entry point for keyboard navigation. If not provided, selected date, today's date or the first day of the month is used."
+                            "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": "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, dagens datum eller m\u00E5nadens f\u00F6rsta dag."
+                    "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
@@ -511,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,
@@ -658,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,
@@ -681,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,
@@ -697,7 +674,8 @@ export class Calendar {
         return {
             "selectedDates": {},
             "focusedDate": {},
-            "dirty": {}
+            "dirty": {},
+            "activeCalendar": {}
         };
     }
     static get events() {
@@ -777,6 +755,12 @@ export class Calendar {
     }
     static get watchers() {
         return [{
+                "propName": "focusedDate",
+                "methodName": "focusedDateChanged"
+            }, {
+                "propName": "afOpenCalendarTo",
+                "methodName": "afOpenCalendarToChangeHandler"
+            }, {
                 "propName": "afSelectedDate",
                 "methodName": "afSelectedDateChangeHandler"
             }, {

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

@@ -745,10 +745,12 @@ body {
 }
 :host .digi-calendar-datepicker {
   position: relative;
+  pointer-events: none;
 }
 :host .digi-calendar-datepicker__input-field {
   position: relative;
   max-width: var(--digi--datepicker--max-width);
+  pointer-events: auto;
 }
 :host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__inactive {
   --digi--form-input--background--empty: var(--digi--datepicker--input--inactive-background);
@@ -777,7 +779,7 @@ body {
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;
 }
-:host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button:hover {
+:host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button:hover, :host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button:focus {
   background: var(--digi--color--background--interactive--hover--secondary);
 }
 :host .digi-calendar-datepicker__calendar {
@@ -797,6 +799,7 @@ body {
   position: absolute;
   top: var(--digi--datepicker--calendar--popup-top);
   left: 0;
+  pointer-events: auto;
 }
 :host .digi-calendar-datepicker__input-component {
   --digi--form-input--padding: 0 var(--digi--datepicker--input--inline-end) 0 var(--digi--datepicker--input--inline-start);