@designsystem-se/af 35.4.0 → 36.0.0

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

@@ -7,6 +7,7 @@ import { CalendarDatepickerValidation } from "./calendar-datepicker-validation.e
 import { detectClickOutside } from "../../../global/utils/detectClickOutside";
 /**
  * @swedishName Datumväljare
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export class CalendarDatepicker {
     constructor() {
@@ -18,25 +19,44 @@ export class CalendarDatepicker {
         this.userInput = '';
         this.afId = randomIdGenerator('digi-calendar-datepicker');
         this.afLabel = _t.calendar.datepicker.label;
-        this.afLabelDescription = _t.calendar.datepicker.description;
+        this.afLabelDescription = undefined;
+        this.afName = undefined;
         this.afOpenCalendarAriaLabel = _t.calendar.datepicker.openCalendarAriaLabel;
         this.afCloseCalendarAriaLabel = _t.calendar.datepicker.closeCalendarAriaLabel;
         this.afValidation = CalendarDatepickerValidation.NEUTRAL;
         this.afValidationText = undefined;
-        this.afInvalid = false;
-        this.afValidationMessage = _t.calendar.datepicker.validationMessage;
         this.afValidationWrongFormat = _t.calendar.datepicker.validationWrongFormat;
         this.afValidationDisabledDate = _t.calendar.datepicker.validationDisabledDate;
         this.afRequired = undefined;
-        this.afDisableValidation = undefined;
+        this.afDisableValidation = false;
         this.afRequiredText = undefined;
         this.afSelectedDates = [];
+        this.afYearSelect = false;
         this.value = [];
         this.afMinDate = undefined;
         this.afMaxDate = undefined;
         this.afShowWeekNumber = false;
         this.afMultipleDates = false;
         this.afCloseOnSelect = false;
+        this.afOpenCalendarTo = undefined;
+        this.afErrorMessageIsAlert = true;
+    }
+    afDisableValidationChangeHandler(newVal) {
+        if (!newVal) {
+            const dates = this.userInput !== ''
+                ? this.parseInputString(this.userInput)
+                : this.afSelectedDates;
+            this.validateInputAndShowErrors(dates);
+        }
+        else {
+            this.showWrongFormatError = false;
+            this.showDisabledDateError = false;
+        }
+    }
+    afSelectedDatesChangeHandler(newVal) {
+        if (!this.afDisableValidation && newVal.length > 0) {
+            this.validateInputAndShowErrors(newVal);
+        }
     }
     valueChangeHandler(newVal) {
         if (this.afDisableValidation && this.afSelectedDates.length > 0) {
@@ -51,6 +71,16 @@ export class CalendarDatepicker {
             this.userInput = '';
         }
     }
+    afMinDateChangeHandler(newVal) {
+        if (!this.afDisableValidation && newVal) {
+            this.validateInputAndShowErrors(this.afSelectedDates);
+        }
+    }
+    afMaxDateChangeHandler(newVal) {
+        if (!this.afDisableValidation && newVal) {
+            this.validateInputAndShowErrors(this.afSelectedDates);
+        }
+    }
     afMultipleDatesChangeHandler() {
         var _a;
         if (!this.afMultipleDates && this.afSelectedDates.length > 1) {
@@ -58,6 +88,10 @@ export class CalendarDatepicker {
             this.value = (_a = this.afSelectedDates) !== null && _a !== void 0 ? _a : [];
         }
     }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
     clickHandler(e) {
         const target = e.target;
         const selector = `#${this.afId}-datepicker`;
@@ -65,6 +99,13 @@ export class CalendarDatepicker {
             this.showCalendar = false;
         }
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     connectedCallback() {
         this.hostElement.addEventListener('keyup', this.keyUpHandler.bind(this));
     }
@@ -77,10 +118,15 @@ export class CalendarDatepicker {
             this.setValue(this.value);
         }
     }
+    componentDidUpdate() {
+        if (this.showCalendar) {
+            this.positionCalendar();
+        }
+    }
     get cssModifiers() {
         return {
             'digi-calendar-datepicker__show-week-numbers': this.afShowWeekNumber,
-            'digi-calendar-datepicker__show-error': this.getShowError(),
+            'digi-calendar-datepicker__show-error': this.hasBuiltInValidationError() || this.hasCustomValidationError(),
             'digi-calendar-datepicker__show-calendar': this.showCalendar
         };
     }
@@ -91,11 +137,27 @@ export class CalendarDatepicker {
             e.stopPropagation();
         }
     }
+    focusOnCalendarInput() {
+        const input = this.hostElement.querySelector(`#${this.afId}-datepicker input`);
+        input === null || input === void 0 ? void 0 : input.focus();
+    }
     focusOnCalendarButton() {
         const calendarButton = this.hostElement.querySelector(`#${this.afId}-button`);
         calendarButton.focus();
     }
+    positionCalendar() {
+        const btn = this.hostElement.querySelector(`#${this.afId}-button`);
+        const datepickerEl = this.hostElement.querySelector(`#${this.afId}-datepicker`);
+        if (!btn || !datepickerEl)
+            return;
+        const btnRect = btn.getBoundingClientRect();
+        const containerRect = datepickerEl.getBoundingClientRect();
+        datepickerEl.style.setProperty('--digi--datepicker--calendar--popup-top', `${btnRect.bottom - containerRect.top + 5}px`);
+    }
     toggleCalendar() {
+        if (!this.showCalendar) {
+            this.positionCalendar();
+        }
         this.showCalendar = !this.showCalendar;
         if (this.showCalendar) {
             this.screenReaderUpdateTrigger = !this.screenReaderUpdateTrigger;
@@ -103,29 +165,47 @@ export class CalendarDatepicker {
     }
     parseInputString(value) {
         return value
-            .split(/[&,]|och/g)
+            .split(new RegExp(`[&,]|${_t.and}`, 'g'))
             .map((text) => this.parseDateString(text.trim()));
     }
     resetValueAndState() {
         this.showWrongFormatError = false;
         this.showDisabledDateError = false;
         this.setValue([]);
-        this.afOnDateChange.emit(['']);
+        this.afOnDateChange.emit([]);
         this.afSelectedDates = [];
     }
+    removeDuplicateDates(dates) {
+        const seen = new Set();
+        return dates.filter((date) => {
+            if (!(date instanceof Date) || isNaN(date.getTime())) {
+                return true;
+            }
+            const key = date.toISOString().split('T')[0]; // yyyy-mm-dd
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
     validateInputAndShowErrors(dates) {
         this.showWrongFormatError = !!dates.find((date) => !isValid(date));
         this.showDisabledDateError = !!dates.find((date) => !this.isDateSelectable(date));
+        const inputIsValid = !this.showWrongFormatError && !this.showDisabledDateError;
+        this.afOnValidationChange.emit({
+            isValid: inputIsValid,
+            validationText: inputIsValid
+                ? undefined
+                : this.showWrongFormatError
+                    ? this.afValidationWrongFormat
+                    : this.afValidationDisabledDate
+        });
     }
     setValue(value) {
         this.afSelectedDates = value;
         this.value = value;
     }
-    /*
-    
-      Metoden tar både Stencil-specifika och vanliga DOM-event, extraherar texten användaren matat in, hanterar tom inmatning, par­sar till Date[], kör intern validering, uppdaterar komponentens state och slutligen emitterar alltid en string[] med exakt det användaren skrev – vilket gör det smidigare för Angular-value-accessorn att jobba vidare med.
-    
-    */
     parseInput(evt) {
         let newValue = '';
         if (evt.detail && typeof evt.detail.value === 'string') {
@@ -139,32 +219,42 @@ export class CalendarDatepicker {
             this.resetValueAndState();
             return;
         }
-        const dates = this.parseInputString(newValue);
-        this.setValue(dates); // target.value
-        if (!this.afDisableValidation) {
-            this.validateInputAndShowErrors(dates);
-            if (this.getShowError()) {
-                this.afOnDateChange.emit([]);
-            }
-            else {
-                this.afOnDateChange.emit(this.afSelectedDates);
+        let dates = this.parseInputString(newValue);
+        // Single dates - acceptera inte flera datum inskrivna
+        if (!this.afDisableValidation &&
+            !this.afMultipleDates &&
+            dates.length > 1) {
+            this.showWrongFormatError = true;
+            this.afOnValidationChange.emit({
+                isValid: false,
+                validationText: this.afValidationWrongFormat
+            });
+            return;
+        }
+        // Multiple dates - filtrera bort dubbletter
+        if (!this.afDisableValidation && this.afMultipleDates) {
+            const uniqueDates = this.removeDuplicateDates(dates);
+            if (uniqueDates.length !== dates.length) {
+                dates = uniqueDates;
+                this.userInput = this.datesToInputString(dates);
             }
         }
-        else {
-            const dateStrs = newValue.split(/[&,]|och/g).map((s) => s.trim());
-            this.afOnDateChange.emit([...dateStrs]); // evt.detail
+        this.setValue(dates);
+        if (!this.afDisableValidation) {
+            this.validateInputAndShowErrors(dates);
         }
+        this.afOnDateChange.emit(dates);
     }
     parseCalendar(evt) {
         if (!(evt === null || evt === void 0 ? void 0 : evt.detail))
             return;
         if (!this.afDisableValidation) {
-            this.afInvalid = false;
             this.showWrongFormatError = false;
             this.showDisabledDateError = false;
         }
         this.userInput = '';
         this.setValue(evt.detail);
+        this.afOnDateChangeRawText.emit(this.inputValue);
         if (this.afCloseOnSelect) {
             this.toggleCalendar();
             this.focusOnCalendarButton();
@@ -172,9 +262,9 @@ export class CalendarDatepicker {
         this.afOnDateChange.emit(this.afSelectedDates);
     }
     /*
-    
+  
       Metoden överskrider JavaScripts inbyggda "isValid"-funktion, då den tillåter att ex., "1" är rätt format medans ex., "13" är fel format vid YYYY-MM-DD krav på inmatat format.
-    
+  
     */
     parseDateString(s) {
         const raw = s.trim().replace(/[./]/g, '-');
@@ -227,17 +317,22 @@ export class CalendarDatepicker {
     dateWithoutTime(date) {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
-    getShowError() {
-        return (this.afInvalid || this.showWrongFormatError || this.showDisabledDateError);
+    hasBuiltInValidationError() {
+        return this.showWrongFormatError || this.showDisabledDateError;
+    }
+    hasCustomValidationError() {
+        return (this.afValidation &&
+            this.afValidation !== CalendarDatepickerValidation.NEUTRAL);
     }
     getErrorText() {
-        var _a;
-        if (this.afInvalid) {
-            return (_a = this.afValidationText) !== null && _a !== void 0 ? _a : this.afValidationMessage;
+        if (this.hasBuiltInValidationError()) {
+            return this.showWrongFormatError
+                ? this.afValidationWrongFormat
+                : this.afValidationDisabledDate;
+        }
+        if (this.hasCustomValidationError()) {
+            return this.afValidationText;
         }
-        return this.showWrongFormatError
-            ? this.afValidationWrongFormat
-            : this.afValidationDisabledDate;
     }
     get inputValue() {
         if (this.userInput !== '') {
@@ -252,7 +347,7 @@ export class CalendarDatepicker {
     datesToInputString(dates) {
         return dates.every((date) => date instanceof Date && !isNaN(date.getTime()))
             ? dates
-                .map((date) => date.toLocaleDateString('sv-SE'))
+                .map((date) => date.toLocaleDateString(_t.locale))
                 .flatMap((date, index, all) => {
                 const isLast = index == all.length - 1;
                 const isFirst = index === 0;
@@ -260,7 +355,7 @@ export class CalendarDatepicker {
                     return date;
                 }
                 else if (isLast) {
-                    return [' och ', date];
+                    return [` ${_t.and} `, date];
                 }
                 else {
                     return [', ', date];
@@ -270,44 +365,45 @@ export class CalendarDatepicker {
             : '';
     }
     get getSelectedDates() {
-        if (this.afDisableValidation && this.getShowError()) {
-            return this.afSelectedDates;
-        }
-        if (this.getShowError()) {
+        if (!this.afDisableValidation && this.hasBuiltInValidationError()) {
             return [];
         }
         return this.afSelectedDates;
     }
     render() {
-        return (h(Host, { key: '8112725ba8c875e94cc556da8921a74390d9c31e' }, h("div", { key: '4c3df5468b902a4d26fea152ebaeaea0c9bf3dd9', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: 'bcc79305b5bb0911e5f33f2ca8641ba1a3a5c588', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'cfe6189b8a529db4bda725f483ec899fe66b87cc', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afValue: this.inputValue, afValidation: this.getShowError()
+        return (h(Host, { key: '5e9ee0185fda2fceed01ef3a0ef9e9941327076e', tabindex: -1 }, h("div", { key: 'f29f484b2f6142edf6a227ac6247a2ba6fc1c477', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: 'bb3d5ef0b2e9e5d5527b688dba878207cd62e392', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: '3651941e78877658f4ffbd5e796d3021d0426a96', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
                 ? FormInputValidation.ERROR
-                : FormInputValidation.NEUTRAL, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
+                : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseInput(evt);
-            } }, h("button", { key: '3126acc01f2f9aef0a02990ef22acbde7c3ed3c7', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            }, onAfOnBlur: (evt) => {
+                evt.stopImmediatePropagation();
+                this.afOnDateChangeRawText.emit(this.inputValue);
+            }, onKeyDown: (e) => {
+                // Focus trap: Catch backwards tab from input field and direct it to date button.
+                if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
+                    return;
+                if (e.target.tagName !== 'INPUT')
+                    return;
+                e.preventDefault();
+                const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
+                focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
+            } }, h("button", { key: '6da9af2e346980786f80387ff5e28324d79b98ab', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
                 ? this.afCloseCalendarAriaLabel
-                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: 'b48fc72cea6c3a94bd9821f2ec9416a4707e13d1', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: 'd7c78a170d2d855cca3c001427d1c64ebab48fb3', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '5651e12f6e3e06bfc879bb5c2aaf9920f9faf2e7', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
+                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: 'b80a484cd80858500a59466f5571ec3e8828188f', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: '3aeb7033d8e341b6099d8ec87711fd24e062ac7c', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: 'd5159315333e3958021de98759478a90115c513f', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), h("digi-calendar", { key: '952ce82bb05beae68436d6a1a86bb00fefa2c3cb', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, onAfOnDateSelectedChange: (evt) => {
+            : ''), h("digi-calendar", { key: '560cb8fc8833605f68fca26a9079274a8a51dd5a', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
-            }, onAfOnFocusOutside: (evt) => {
-                if (this.showCalendar) {
-                    const relatedTarget = evt.detail.relatedTarget;
-                    if (!relatedTarget)
-                        return;
-                    evt.preventDefault();
-                    const isDateButton = relatedTarget.classList.contains('digi-calendar__date');
-                    const isToggleButton = relatedTarget.id === `${this.afId}-button`;
-                    if (isDateButton) {
-                        this.focusOnCalendarButton();
-                    }
-                    else if (isToggleButton) {
-                        const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
-                        focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-                    }
-                }
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '53f3d90d7a8864b323f9e23ffaf78330babf191e', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
+            }, onKeyDown: (e) => {
+                // Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
+                if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
+                    return;
+                if (!e.target.classList.contains('digi-calendar__date'))
+                    return;
+                e.preventDefault();
+                this.focusOnCalendarInput();
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '7d47148698ed15e8e98c756f0d103517df884306', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -338,9 +434,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Sets an id attribute. Standard \u00E4r slumpm\u00E4ssig str\u00E4ng."
+                            "text": "Sets an id attribute for the input field, and serves as the base for other ids in the component"
                         }],
-                    "text": "S\u00E4tter ett id attribut."
+                    "text": "S\u00E4tter attributet id f\u00F6r inputf\u00E4ltet, och utg\u00F6r basen f\u00F6r andra id:n i komponenten"
                 },
                 "getter": false,
                 "setter": false,
@@ -363,7 +459,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "The label text"
                         }],
-                    "text": "Texten till labelelementet"
+                    "text": "Texten till etiketten"
                 },
                 "getter": false,
                 "setter": false,
@@ -386,13 +482,34 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "Optional description text"
                         }],
-                    "text": "Valfri beskrivande text"
+                    "text": "Beskrivande text som b\u00F6r ange det f\u00F6rv\u00E4ntade formatet och/eller andra krav"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "af-label-description",
-                "reflect": false,
-                "defaultValue": "_t.calendar.datepicker.description"
+                "reflect": false
+            },
+            "afName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets the 'name' attribute on the inner input element"
+                        }],
+                    "text": "S\u00E4tter attributet 'name' p\u00E5 det inre input-elementet"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-name",
+                "reflect": false
             },
             "afOpenCalendarAriaLabel": {
                 "type": "string",
@@ -461,7 +578,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "Set input validation status"
                         }],
-                    "text": "S\u00E4tter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting."
+                    "text": "S\u00E4tter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting. Om v\u00E4rdet \u00E4r 'error' s\u00E4tts ocks\u00E5 aria-invalid=\"true\" p\u00E5 input-elementet."
                 },
                 "getter": false,
                 "setter": false,
@@ -482,61 +599,15 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set input validation message"
+                            "text": "Set input validation message for custom validation"
                         }],
-                    "text": "S\u00E4tter valideringsmeddelandet"
+                    "text": "S\u00E4tter valideringsmeddelandet f\u00F6r egen validering"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "af-validation-text",
                 "reflect": false
             },
-            "afInvalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Set input validation message when using afInvalid property"
-                        }],
-                    "text": "S\u00E4tter valideringsmeddelandet n\u00E4r du anv\u00E4nder afInvalid"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-invalid",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "afValidationMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Set input validation message when using afInvalid property"
-                        }],
-                    "text": "S\u00E4tter valideringsmeddelandet n\u00E4r du anv\u00E4nder afInvalid"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-validation-message",
-                "reflect": false,
-                "defaultValue": "_t.calendar.datepicker.validationMessage"
-            },
             "afValidationWrongFormat": {
                 "type": "string",
                 "mutable": false,
@@ -550,9 +621,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set input validation message"
+                            "text": "Set input validation message for the built-in format validation"
                         }],
-                    "text": "S\u00E4tter valideringsmeddelandet"
+                    "text": "S\u00E4tter valideringsmeddelandet f\u00F6r den inbyggda formatvalideringen. Default \u00E4r \"Fel format\""
                 },
                 "getter": false,
                 "setter": false,
@@ -573,9 +644,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set input validation message"
+                            "text": "Set input validation message for the built-in when date is not selectable"
                         }],
-                    "text": "S\u00E4tter valideringsmeddelandet"
+                    "text": "S\u00E4tter valideringsmeddelandet f\u00F6r den inbyggda valideringen n\u00E4r man anger datum som inte \u00E4r valbara. Default \u00E4r \"Ej valbart datum\""
                 },
                 "getter": false,
                 "setter": false,
@@ -598,7 +669,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "Input required attribute"
                         }],
-                    "text": "S\u00E4tter attributet 'required'."
+                    "text": "S\u00E4tter attributet 'required'"
                 },
                 "getter": false,
                 "setter": false,
@@ -618,14 +689,15 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true to disable internal validation."
+                            "text": "Set this to true to disable internal validation"
                         }],
-                    "text": "S\u00E4tt denna till true f\u00F6r att st\u00E4nga av komponentens egna validering."
+                    "text": "S\u00E4tt denna till true f\u00F6r att st\u00E4nga av komponentens egna validering"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "af-disable-validation",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "afRequiredText": {
                 "type": "string",
@@ -640,9 +712,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set text for afRequired."
+                            "text": "Replaces the text \"obligatorisk\" in the label"
                         }],
-                    "text": "S\u00E4tter text f\u00F6r afRequired."
+                    "text": "Ers\u00E4tter texten \"obligatorisk\" i f\u00E4ltetiketten"
                 },
                 "getter": false,
                 "setter": false,
@@ -679,6 +751,29 @@ export class CalendarDatepicker {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "afYearSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Set this to true to change the previous/next month buttons to dropdowns for selecting month and year. Recommended when the expected date is many months back or forward in time, such as a birthdate."
+                        }],
+                    "text": "S\u00E4tts till true f\u00F6r att byta knapparna f\u00F6r f\u00F6reg\u00E5ende och n\u00E4sta m\u00E5nad till dropdowns f\u00F6r att v\u00E4lja m\u00E5nad och \u00E5r. Rekommenderas d\u00E5 f\u00F6rv\u00E4ntat datum \u00E4r m\u00E5nga m\u00E5nader bak\u00E5t eller fram\u00E5t i tiden, som exempelvis ett f\u00F6delsedatum."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-year-select",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "unknown",
                 "mutable": false,
@@ -775,9 +870,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Show week number in the calander. Default is false"
+                            "text": "Show week number in the calander."
                         }],
-                    "text": "Visa veckonummer i kalender. F\u00F6rvalt \u00E4r false"
+                    "text": "Visa veckonummer i kalender"
                 },
                 "getter": false,
                 "setter": false,
@@ -798,9 +893,9 @@ export class CalendarDatepicker {
                 "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 select multiple dates in the calander"
                         }],
-                    "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 kunna markera mer en ett datum i kalendern"
                 },
                 "getter": false,
                 "setter": false,
@@ -821,15 +916,63 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true if the calendar should close when a date is selected. Default is false"
+                            "text": "Set this to true if the calendar should close when a date is selected"
                         }],
-                    "text": "S\u00E4tt denna till true om kalendern ska st\u00E4ngas n\u00E4r anv\u00E4ndaren v\u00E4ljer ett datum. F\u00F6rvalt \u00E4r false"
+                    "text": "S\u00E4tt denna till true om kalendern ska st\u00E4ngas n\u00E4r anv\u00E4ndaren v\u00E4ljer ett datum"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "af-close-on-select",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "afOpenCalendarTo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "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 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 eller dagens datum."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "afErrorMessageIsAlert": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "If the value is true, the error message gets the attribute role=\"alert\".\nIf the error is shown together with multiple errors (for example after server-side validation), the value should be set to false."
+                        }],
+                    "text": "Om v\u00E4rdet \u00E4r true f\u00E5r felmeddelandet attributet role=\"alert\".\nOm felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska v\u00E4rdet s\u00E4ttas till false."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-error-message-is-alert",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -851,13 +994,13 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "When date is updated"
+                            "text": "Sends the value as an array of Date objects when the date is updated"
                         }],
-                    "text": "Sker vid datum uppdatering"
+                    "text": "Skickar v\u00E4rdet som en array av Date-objekt n\u00E4r datumet uppdateras"
                 },
                 "complexType": {
-                    "original": "Date[] | string[] | []",
-                    "resolved": "Date[] | [] | string[]",
+                    "original": "Date[]",
+                    "resolved": "Date[]",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -865,13 +1008,67 @@ export class CalendarDatepicker {
                         }
                     }
                 }
+            }, {
+                "method": "afOnDateChangeRawText",
+                "name": "afOnDateChangeRawText",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sends the string displayed in the input field when the date is updated"
+                        }],
+                    "text": "Skickar str\u00E4ngen som visas i inputf\u00E4ltet n\u00E4r datumet uppdateras"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "afOnValidationChange",
+                "name": "afOnValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Emits the validation result"
+                        }],
+                    "text": "Skickar resultatet n\u00E4r validering sker"
+                },
+                "complexType": {
+                    "original": "ValidationChange",
+                    "resolved": "ValidationChange",
+                    "references": {
+                        "ValidationChange": {
+                            "location": "import",
+                            "path": "./calendar-datepicker.types",
+                            "id": "src/components/_calendar/calendar-datepicker/calendar-datepicker.types.ts::ValidationChange"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "afDisableValidation",
+                "methodName": "afDisableValidationChangeHandler"
+            }, {
+                "propName": "afSelectedDates",
+                "methodName": "afSelectedDatesChangeHandler"
+            }, {
                 "propName": "value",
                 "methodName": "valueChangeHandler"
+            }, {
+                "propName": "afMinDate",
+                "methodName": "afMinDateChangeHandler"
+            }, {
+                "propName": "afMaxDate",
+                "methodName": "afMaxDateChangeHandler"
             }, {
                 "propName": "afMultipleDates",
                 "methodName": "afMultipleDatesChangeHandler"
@@ -884,6 +1081,12 @@ export class CalendarDatepicker {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }