@beeq/core 1.11.0 → 1.11.2

package/dist/collection/components/date-picker/bq-date-picker.js

@@ -3,9 +3,9 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { h } from "@stencil/core";
+import { hasSlotContent, isClient, isDefined, isEventTargetChildOfElement, isHTMLElement, isNil, parseDateInput, validatePropValue, } from "../../shared/utils";
 import { DATE_PICKER_TYPE } from "./bq-date-picker.types";
 import { isCallyLibraryLoaded, loadCallyLibrary } from "./helper/callyLibrary";
-import { hasSlotContent, isClient, isDefined, isEventTargetChildOfElement, isHTMLElement, isNil, validatePropValue, } from "../../shared/utils";
 /**
  * The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.
  *
@@ -138,6 +138,7 @@ export class BqDatePicker {
     prefixElem;
     suffixElem;
     fallbackInputId = 'date-picker';
+    LOCALE_DATE = 'fr-CA';
     // Export parts of the calendar-month component
     COMMON_EXPORT_PARTS = 'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';
     BUTTON_EXPORT_PARTS = 'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';
@@ -357,7 +358,7 @@ export class BqDatePicker {
         const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;
         if (!(callyElem && isCallyLoaded))
             return;
-        const nextFocused = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');
+        const nextFocused = value ? formatFocusedDate(value) : new Date().toLocaleDateString(this.LOCALE_DATE);
         if (this.focusedDate === nextFocused)
             return;
         this.focusedDate = nextFocused;
@@ -367,17 +368,47 @@ export class BqDatePicker {
             callyElem.focusedDate = this.focusedDate;
         }
     };
+    clampDateToRange = (dateStr) => {
+        if (this.min && dateStr < this.min)
+            return this.min;
+        if (this.max && dateStr > this.max)
+            return this.max;
+        return dateStr;
+    };
     handleChange = (ev) => {
         if (this.disabled || !isHTMLElement(ev.target, 'input'))
             return;
-        const dateValue = new Date(ev.target.value + 'T00:00:00');
-        if (!isNaN(dateValue.getTime())) {
-            // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale
-            this.value = dateValue.toLocaleDateString('fr-CA');
-            this.displayDate = this.formatDisplayValue(this.value);
-            this.internals.setFormValue(`${this.value}`);
+        const inputValue = ev.target.value.trim();
+        if (!inputValue) {
+            this.clearValue();
             this.bqChange.emit({ value: this.value, el: this.el });
+            return;
+        }
+        // Try to parse as date with locale awareness
+        const dateValue = parseDateInput(inputValue, this.locale);
+        if (!dateValue) {
+            // Invalid date: don't update component value to avoid side effects
+            this.internals.setFormValue(undefined);
+            this.updateFormValidity();
+            this.bqChange.emit({ value: inputValue, el: this.el });
+            return;
         }
+        // Check if date is disallowed
+        if (this.isDateDisallowed?.(dateValue)) {
+            this.internals.setFormValue(undefined);
+            this.updateFormValidity();
+            this.bqChange.emit({ value: inputValue, el: this.el });
+            return;
+        }
+        // Valid date: normalize to ISO format and clamp to range if needed
+        // Note: clamping is done based on string comparison of ISO dates and only when min/max are set
+        let isoDate = dateValue.toLocaleDateString(this.LOCALE_DATE);
+        isoDate = this.clampDateToRange(isoDate);
+        this.value = isoDate;
+        this.displayDate = this.formatDisplayValue(isoDate);
+        this.internals.setFormValue(isoDate);
+        this.updateFormValidity();
+        this.bqChange.emit({ value: this.value, el: this.el });
     };
     handleCalendarChange = (ev) => {
         if (this.isInternalUpdate)
@@ -408,14 +439,18 @@ export class BqDatePicker {
         if (this.disabled)
             return;
         this.inputElem.value = '';
-        this.value = this.inputElem.value;
+        this.clearValue();
         this.hasRangeEnd = false;
         this.bqClear.emit(this.el);
         this.bqChange.emit({ value: this.value, el: this.el });
-        this.internals.setFormValue(undefined);
         this.inputElem.focus();
         ev.stopPropagation();
     };
+    clearValue = () => {
+        this.value = undefined;
+        this.displayDate = undefined;
+        this.internals.setFormValue(undefined);
+    };
     handleSlotChange = () => {
         this.hasLabel = hasSlotContent(this.labelElem);
         this.hasPrefix = hasSlotContent(this.prefixElem);
@@ -424,7 +459,7 @@ export class BqDatePicker {
     generateCalendarMonth = (offset, className = '') => {
         if (!this.isCallyLoaded)
             return null;
-        return (h("calendar-month", { offset: offset, class: className, exportparts: `${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}` }));
+        return (h("calendar-month", { class: className, exportparts: `${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`, offset: offset }));
     };
     /**
      * Generates an array of Elements representing the calendar months.
@@ -471,30 +506,31 @@ export class BqDatePicker {
             return undefined;
         const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);
         if (this.type === 'range') {
-            const [start, end] = value.split('/').map((dateStr) => new Date(dateStr + 'T00:00:00'));
+            const [start, end] = value.split('/').map((dateStr) => new Date(`${dateStr}T00:00:00`));
             return dateFormatter.formatRange(start, end);
         }
         if (this.type === 'multi') {
-            const dates = value.split(' ').map((dateStr) => new Date(dateStr + 'T00:00:00'));
+            const dates = value.split(' ').map((dateStr) => new Date(`${dateStr}T00:00:00`));
             return dates.map((date) => dateFormatter.format(date)).join(', ');
         }
-        return dateFormatter.format(new Date(value + 'T00:00:00'));
+        return dateFormatter.format(new Date(`${value}T00:00:00`));
     };
     updateFormValidity = () => {
         const { formValidationMessage, internals, required, value, inputElem } = this;
         // Clear the validity state
         internals?.states.clear();
+        // Check if value is required but missing
         if (required && (!value || value.toString().trim() === '')) {
             // Set validity state to invalid
             internals?.states.add('invalid');
             internals?.setValidity({ valueMissing: true }, formValidationMessage ?? 'Please, input or select a valid date', inputElem);
             return;
         }
-        // Set validity state to valid if textarea has value or is not required
+        // Set validity state to valid if the input has value or is not required
         internals?.states.add('valid');
         internals?.setValidity({});
     };
-    get CalendarType() {
+    get calendarType() {
         const componentTypes = {
             single: 'calendar-date',
             multi: 'calendar-multi',
@@ -507,18 +543,26 @@ export class BqDatePicker {
     // Always the last one in the class.
     // ===================================
     render() {
-        const CallyCalendar = this.CalendarType;
+        const CallyCalendar = this.calendarType;
         const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '70f13329ea64ee9b34923e4a63f15567b8599647', class: "bq-date-picker", part: "base" }, h("label", { key: '380eff87152f9f1b32c6a245fb1076c9bfd49718', id: labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, "aria-label": this.name || this.fallbackInputId, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '8c2af1ac6b86069943ee9f800fca5e34a8330de8', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'f2a23bdfa18984900b54414f9f9adedcffd7da44', class: "bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto", disabled: this.disabled, distance: this.distance, open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy, exportparts: "panel" }, h("div", { key: 'da8b3eee06bba4fba6a6bd0afa34f276013e3e24', class: {
+        return (h("div", { key: '7dd5177513441e3a23967959d67bcc5310327c12', class: "bq-date-picker", part: "base" }, h("label", { key: '8eab1a4fd300bc8b16d926133a7eff6afe79773c', "aria-labelledby": labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, part: "label", ref: (labelElem) => {
+                this.labelElem = labelElem;
+            } }, h("slot", { key: '8733cacff45646645cf21f2bc28e83c48a684a79', id: labelId, name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'c85bba63e2078ddb0fa5472aa188ce3c880d4e47', class: "bq-date-picker__dropdown is-full [&::part(panel)]:is-auto [&::part(panel)]:p-m", disabled: this.disabled, distance: this.distance, exportparts: "panel", open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy }, h("div", { key: 'd37010f0e2c682c77d4005c28008cf76d1e08235', class: {
                 'bq-date-picker__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '7c02c1554af91b2bd5500b88c0e5d727603a2b9b', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '103cc4ffe2cb2b37a4cc232a69ef78b6e8b8c6e4', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: '39cd9c82215df7a7e6fc0460915328056f221978', id: this.name || this.fallbackInputId, class: "bq-date-picker__control--input", autoComplete: "off", autoCapitalize: "off", "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `${this.name}`, "aria-haspopup": "dialog", disabled: this.disabled, form: this.form, name: this.name, placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => (this.inputElem = inputElem), required: this.required, spellcheck: false, type: "text", value: this.displayDate, part: "input",
-            // Events
-            onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange }), this.hasValue && !this.disabled && !this.disableClear && (
+            }, part: "control", slot: "trigger" }, h("span", { key: '42cc62ab392dd011530d4626dae40a08ae5faf7e', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
+                this.prefixElem = spanElem;
+            } }, h("slot", { key: '77b9d64b0072bb3ff4e4dcca0d285970f1febf77', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: 'b078734fe5d27716a99cb57deabb73229cbe5c96', "aria-controls": `${this.name}`, "aria-describedby": this.hasLabel ? labelId : null, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.validationStatus === 'error' ? 'true' : 'false', "aria-haspopup": "dialog", autoCapitalize: "off", autoComplete: "off", class: "bq-date-picker__control--input", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, part: "input", placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => {
+                this.inputElem = inputElem;
+            }, required: this.required, spellcheck: false, type: "text", value: this.displayDate }), this.hasValue && !this.disabled && !this.disableClear && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: 'f23e4d77b45f88920d96be228a55af493b0306f4', class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'a0cb283da14c276bdb7851c5c9664b9f5fd2b3a4', name: "clear-icon" }, h("bq-icon", { key: '02663a817097d5426c71569019de176044a247f0', name: "x-circle", class: "flex" })))), h("span", { key: '872be19c196b4a2b7523e22140b9f7b81feab81a', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '5b687ae35fa37326fd83f141c7788e3441ac4e75', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'cbb17aafed0f39fbc14047afb68ce2f18752529e', name: "calendar-blank", class: "flex" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '12185dc3e6650ef7d640e709c5bb3b2ed3ef2a72', isDateDisallowed: this.isDateDisallowed, locale: this.locale, value: this.value, min: this.min, max: this.max, months: this.months, tentative: this.tentative, pageBy: this.monthsPerView, firstDayOfWeek: this.firstDayOfWeek, showOutsideDays: this.showOutsideDays, onChange: this.handleCalendarChange, onRangestart: this.handleCalendarRangeStart, onRangeend: this.handleCalendarRangeEnd, exportparts: "container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading", ref: (elem) => (this.callyElem = elem) }, h("bq-icon", { key: '19820e69ed798053e0b63f6a9d19547244c6f165', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '7e71a521ef61c8eece31eb76b99584f52ea34897', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '62291115d74800609cc82dc200cb40e1ddc464e4', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
+        h("bq-button", { key: 'ecab571d159a203701bd5e1c83d750bb6739c413', appearance: "text", "aria-label": this.clearButtonLabel, class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden", exportparts: "button", onBqClick: this.handleClearClick, part: "clear-btn", size: "small" }, h("slot", { key: '46713d03aa0a0c08080351d7f8f4b63d41eb0f11', name: "clear-icon" }, h("bq-icon", { key: 'fe839e6ea4f466c1fe333d78b9cb16284085b7fa', class: "flex", name: "x-circle" })))), h("span", { key: '39425b0e92626e37a5f5c50d06c5c4d77c223ac8', class: "bq-date-picker__control--suffix", part: "suffix", ref: (spanElem) => {
+                this.suffixElem = spanElem;
+            } }, h("slot", { key: 'bb94c519c5764b4c866e1d6a3348b52df70e2d03', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '945d516274d55ce6202eacc2bea75706aaca01ed', class: "flex", name: "calendar-blank" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '6b969b34c5459f822aec362d4df635aafb27bab6', "aria-labelledby": labelId, "aria-modal": "true", exportparts: "container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading", firstDayOfWeek: this.firstDayOfWeek, isDateDisallowed: this.isDateDisallowed, locale: this.locale, max: this.max, min: this.min, months: this.months, onChange: this.handleCalendarChange, onRangeend: this.handleCalendarRangeEnd, onRangestart: this.handleCalendarRangeStart, pageBy: this.monthsPerView, ref: (elem) => {
+                this.callyElem = elem;
+            }, role: "dialog", showOutsideDays: this.showOutsideDays, tentative: this.tentative, value: this.value }, h("bq-icon", { key: '0184fb53e84a2f0dc02140d6ca6d16f4a2572b28', color: "text--primary", label: "Previous", name: "caret-left", slot: "previous" }), h("bq-icon", { key: '6eaac0b7c395b76b49cda6a726d889dc30336ef3', color: "text--primary", label: "Next", name: "caret-right", slot: "next" }), h("div", { key: '8646ac81ebf39bd06deda107d436313192afed70', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
     }
     static get is() { return "bq-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -538,7 +582,6 @@ export class BqDatePicker {
         return {
             "autofocus": {
                 "type": "boolean",
-                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -553,11 +596,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "autofocus"
             },
             "clearButtonLabel": {
                 "type": "string",
-                "attribute": "clear-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -573,11 +616,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "clear-button-label",
                 "defaultValue": "'Clear value'"
             },
             "disableClear": {
                 "type": "boolean",
-                "attribute": "disable-clear",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -593,11 +636,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disable-clear",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -613,11 +656,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "distance": {
                 "type": "number",
-                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -633,11 +676,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "distance",
                 "defaultValue": "8"
             },
             "firstDayOfWeek": {
                 "type": "number",
-                "attribute": "first-day-of-week",
                 "mutable": false,
                 "complexType": {
                     "original": "DaysOfWeek",
@@ -659,11 +702,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "first-day-of-week",
                 "defaultValue": "1"
             },
             "formatOptions": {
                 "type": "unknown",
-                "attribute": "format-options",
                 "mutable": false,
                 "complexType": {
                     "original": "Intl.DateTimeFormatOptions",
@@ -687,7 +730,6 @@ export class BqDatePicker {
             },
             "form": {
                 "type": "string",
-                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -702,11 +744,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "form"
             },
             "formValidationMessage": {
                 "type": "string",
-                "attribute": "form-validation-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -721,11 +763,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form-validation-message"
             },
             "isDateDisallowed": {
                 "type": "unknown",
-                "attribute": "is-date-disallowed",
                 "mutable": false,
                 "complexType": {
                     "original": "(date: Date) => boolean",
@@ -748,7 +790,6 @@ export class BqDatePicker {
             },
             "locale": {
                 "type": "string",
-                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "Intl.LocalesArgument",
@@ -769,11 +810,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "locale",
                 "defaultValue": "'en-GB'"
             },
             "max": {
                 "type": "string",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -788,11 +829,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "max"
             },
             "min": {
                 "type": "string",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -807,11 +848,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "min"
             },
             "months": {
                 "type": "number",
-                "attribute": "months",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -826,11 +867,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "months"
             },
             "monthsPerView": {
                 "type": "string",
-                "attribute": "months-per-view",
                 "mutable": false,
                 "complexType": {
                     "original": "'single' | 'months'",
@@ -846,11 +887,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "months-per-view",
                 "defaultValue": "'single'"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -865,11 +906,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "name"
             },
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -885,11 +926,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "panelHeight": {
                 "type": "string",
-                "attribute": "panel-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -905,11 +946,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "panel-height",
                 "defaultValue": "'auto'"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -924,11 +965,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "placeholder"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -950,11 +991,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'bottom-end'"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -969,11 +1010,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "required"
             },
             "skidding": {
                 "type": "number",
-                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -989,11 +1030,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "skidding",
                 "defaultValue": "0"
             },
             "showOutsideDays": {
                 "type": "boolean",
-                "attribute": "show-outside-days",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1009,11 +1050,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "show-outside-days",
                 "defaultValue": "false"
             },
             "strategy": {
                 "type": "string",
-                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "'fixed' | 'absolute'",
@@ -1029,11 +1070,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "strategy",
                 "defaultValue": "'fixed'"
             },
             "tentative": {
                 "type": "string",
-                "attribute": "tentative",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1048,11 +1089,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "tentative"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TDatePickerType",
@@ -1074,11 +1115,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "'single'"
             },
             "validationStatus": {
                 "type": "string",
-                "attribute": "validation-status",
                 "mutable": false,
                 "complexType": {
                     "original": "TInputValidation",
@@ -1103,11 +1144,11 @@ export class BqDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "validation-status",
                 "defaultValue": "'none'"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1122,7 +1163,8 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             }
         };
     }