@beeq/core 1.8.0-beta.9 → 1.8.1

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

@@ -2,12 +2,99 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { DATE_PICKER_TYPE } from "./bq-date-picker.types";
-import { hasSlotContent, isDefined, isEventTargetChildOfElement, isHTMLElement, validatePropValue, } from "../../shared/utils";
+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.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-date-picker
+ *   first-day-of-week="1"
+ *   locale="en-GB"
+ *   months-per-view="single"
+ *   months="2"
+ *   name="bq-date-picker"
+ *   placeholder="Enter your date"
+ *   placement="bottom-end"
+ *   show-outside-days="false"
+ *   type="range"
+ *   validation-status="none"
+ *   value="2024-05-25"
+ * >
+ *   <label class="flex flex-grow items-center" slot="label">
+ *     Date picker label
+ *   </label>
+ * </bq-date-picker>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-dropdown
+ * @dependency bq-icon
+ *
+ * @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.
+ * @attr {string} clear-button-label - The clear button aria label.
+ * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.
+ * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.
+ * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.
+ * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
+ * @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
+ * @attr {string} form - The ID of the form that the Date picker input belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
+ * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
+ * @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
+ * @attr {string} max - The latest date that can be selected.
+ * @attr {string} min - The earliest date that can be selected.
+ * @attr {number} months - Number of months to show when range is `true`.
+ * @attr {string} name - The Date picker input name.
+ * @attr {boolean} open - If `true`, the Date picker panel will be visible.
+ * @attr {string} panel-height - When set, it will override the height of the Date picker panel.
+ * @attr {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} placement - Position of the Date picker panel.
+ * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.
+ * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.
+ * @attr {boolean} show-outside-days - Whether to show days outside the month.
+ * @attr {string} strategy - Defines the strategy to position the Date picker panel.
+ * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.
+ * @attr {"single" | "multi" | "range"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.
+ * @attr {"error" | "none" | "success" | "warning"} validation-status - The validation status of the Select input.
+ * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.
+ *
+ * @method clear - Clears the selected value.
+ *
+ * @event bqBlur - Callback handler emitted when the input loses focus.
+ * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
+ * @event bqClear - Callback handler emitted when the input value has been cleared.
+ * @event bqFocus - Callback handler emitted when the input has received focus.
+ *
  * @part base - The component's base wrapper.
  * @part button - The native HTML button used under the hood in the clear button.
+ * @part calendar__button - Any button used in the calendar-month component.
+ * @part calendar__button - Any button within the calendar-range component.
+ * @part calendar__container - The calendar-range container for the entire component.
+ * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.
+ * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.
+ * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.
+ * @part calendar__head - The calendar-month table's header row.
+ * @part calendar__header - The calendar-range container for the heading and buttons.
+ * @part calendar__heading - The calendar-month heading container that labels the month.
+ * @part calendar__heading - The calendar-range heading containing the month and year.
+ * @part calendar__next - The next page button on the calendar-range component.
+ * @part calendar__outside - Any days which are outside the current month.
+ * @part calendar__previous - The previous page button on the calendar-range component.
+ * @part calendar__range-end - The day at the end of a date range.
+ * @part calendar__range-inner - Any days between the start and end of a date range.
+ * @part calendar__range-start - The day at the start of a date range.
+ * @part calendar__selected - Any days which are selected.
+ * @part calendar__table - The calendar-month <table> element.
+ * @part calendar__td - The calendar-month table's body cells.
+ * @part calendar__th - The calendar-month table's header cells.
+ * @part calendar__today - The Today's day.
+ * @part calendar__tr - Any row within the table on the calendar-month component.
+ * @part calendar__week - The calendar-month table's body rows.
  * @part clear-btn - The clear button.
  * @part control - The input control wrapper.
  * @part input - The native HTML input element used under the hood.
@@ -15,33 +102,30 @@ import { hasSlotContent, isDefined, isEventTargetChildOfElement, isHTMLElement,
  * @part panel - The date picker panel container
  * @part prefix - The prefix slot container.
  * @part suffix - The suffix slot container.
-
-// Parts from the Cally library for calendar-date and calendar-range components:
- * @part calendar__container - The container for the entire component.
- * @part calendar__header - The container for heading and button's.
- * @part calendar__button - Any button within the component.
- * @part calendar__previous - The previous page button.
- * @part calendar__next - The next page button.
- * @part calendar__disabled - A button that is disabled due to min/max.
- * @part calendar__heading - The heading containing the month and year.
-
-// Parts specific to the calendar-month component:
- * @part calendar__heading - The heading that labels the month.
- * @part calendar__table - The <table> element.
- * @part calendar__tr - Any row within the table.
- * @part calendar__head - The table's header row.
- * @part calendar__week - The table's body rows.
- * @part calendar__th - The table's header cells.
- * @part calendar__td - The table's body cells.
- * @part calendar__button - Any button used in the component.
- * @part calendar__day - The buttons corresponding to each day in the grid.
- * @part calendar__selected - Any days which are selected.
- * @part calendar__today - Today's day.
- * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.
- * @part calendar__outside - Any days which are outside the current month.
- * @part calendar__range-start - The day at the start of a date range.
- * @part calendar__range-end - The day at the end of a date range.
- * @part calendar__range-inner - Any days between the start and end of a date range.
+ *
+ * @cssprop --bq-date-picker--background-color - Date picker background color.
+ * @cssprop --bq-date-picker--border-color - Date picker border color.
+ * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.
+ * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.
+ * @cssprop --bq-date-picker--border-radius - Date picker border radius.
+ * @cssprop --bq-date-picker--border-style - Date picker border style.
+ * @cssprop --bq-date-picker--border-width - Date picker border width.
+ * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.
+ * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.
+ * @cssprop --bq-date-picker--day-size - Date picker button day size.
+ * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.
+ * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.
+ * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.
+ * @cssprop --bq-date-picker--label-text-color - Date picker label text color.
+ * @cssprop --bq-date-picker--label-text-size - Date picker label text size.
+ * @cssprop --bq-date-picker--padding-end - Date picker padding end.
+ * @cssprop --bq-date-picker--padding-start - Date picker padding start.
+ * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.
+ * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.
+ * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.
+ * @cssprop --bq-date-picker--text-color - Date picker text color.
+ * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.
+ * @cssprop --bq-date-picker--text-size - Date picker text size.
  */
 export class BqDatePicker {
     constructor() {
@@ -64,6 +148,7 @@ export class BqDatePicker {
             year: 'numeric',
         };
         this.form = undefined;
+        this.formValidationMessage = undefined;
         this.isDateDisallowed = undefined;
         this.locale = 'en-GB';
         this.max = undefined;
@@ -97,16 +182,20 @@ export class BqDatePicker {
     BUTTON_EXPORT_PARTS = 'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';
     // Reference to host HTML element
     // ===================================
+    internals;
     el;
     // Prop lifecycle events
     // =======================
     handleValueChange() {
-        if (Array.isArray(this.value)) {
-            this.hasValue = this.value.some((val) => val.length > 0);
+        const { formatDisplayValue, internals, value } = this;
+        internals.setFormValue(!isNil(value) ? `${value}` : undefined);
+        this.updateFormValidity();
+        if (Array.isArray(value)) {
+            this.hasValue = value.some((val) => val.length > 0);
             return;
         }
-        this.hasValue = isDefined(this.value);
-        this.displayDate = this.formatDisplayValue(this.value);
+        this.hasValue = isDefined(value);
+        this.displayDate = formatDisplayValue(value);
         this.setFocusedDate();
     }
     checkPropValues() {
@@ -129,12 +218,22 @@ export class BqDatePicker {
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
-    connectedCallback() {
-        this.handleValueChange();
+    async connectedCallback() {
+        if (!isClient())
+            return;
+        await import('cally');
     }
     componentWillLoad() {
         this.handleValueChange();
     }
+    formAssociatedCallback() {
+        this.updateFormValidity();
+    }
+    formResetCallback() {
+        if (isNil(this.value))
+            return;
+        this.clear();
+    }
     // Listeners
     // ==============
     handleOpenChange(ev) {
@@ -172,6 +271,7 @@ export class BqDatePicker {
         if (this.disabled)
             return;
         this.value = undefined;
+        this.internals.setFormValue(undefined);
         this.bqClear.emit(this.el);
     }
     // Local methods
@@ -193,9 +293,8 @@ export class BqDatePicker {
             return;
         // We need to set the focused date in the calendar component via a ref
         // because it doesn't work when passed as a prop (the Cally element does not re-render)
-        this.callyElem.focusedDate = this.value
-            ? this.formatFocusedDate(this.value)
-            : new Date().toLocaleDateString('fr-CA');
+        this.focusedDate = this.value ? this.formatFocusedDate(this.value) : new Date().toLocaleDateString('fr-CA');
+        this.callyElem.focusedDate = this.focusedDate;
     };
     handleChange = (ev) => {
         if (this.disabled)
@@ -207,6 +306,7 @@ export class BqDatePicker {
             // 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}`);
             this.bqChange.emit({ value: this.value, el: this.el });
         }
     };
@@ -216,6 +316,7 @@ export class BqDatePicker {
         this.displayDate = this.formatDisplayValue(this.value);
         this.inputElem.value = this.displayDate;
         this.inputElem.focus();
+        this.internals.setFormValue(`${this.value}`);
         this.bqChange.emit({ value: this.value, el: this.el });
         this.open = this.type === 'multi';
     };
@@ -234,6 +335,7 @@ export class BqDatePicker {
         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();
     };
@@ -301,6 +403,20 @@ export class BqDatePicker {
         }
         return dateFormatter.format(new Date(value));
     };
+    updateFormValidity = () => {
+        const { formValidationMessage, internals, required, value, inputElem } = this;
+        // Clear the validity state
+        internals?.states.clear();
+        if (required && (!value || value.toString().trim() === '')) {
+            // Set validity state to invalid
+            internals?.states.add('invalid');
+            internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);
+            return;
+        }
+        // Set validity state to valid if textarea has value or is not required
+        internals?.states.add('valid');
+        internals?.setValidity({});
+    };
     get CalendarType() {
         const componentTypes = {
             single: 'calendar-date',
@@ -316,20 +432,21 @@ export class BqDatePicker {
     render() {
         const CallyCalendar = this.CalendarType;
         const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: 'fecf008fc4d06999e00cf4c3934d74938532d6f2', class: "bq-date-picker", part: "base" }, h("label", { key: '1d90b1bea164099d02a6f89565812b6a6a8a8b4f', 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: 'e87e7ba439ab6815aa511c77804cc1534b33f077', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '3133b6b891614878c705587ffc60c930f1f1289d', 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: '22acc32aebfa68babf19daff7b9996c44b8a6493', class: {
+        return (h("div", { key: 'e8f22e620ad4f2a33b5e6cf17d06dea4e3a5328c', class: "bq-date-picker", part: "base" }, h("label", { key: '06159c31b2667bf23cb41ba7bd49bb2bb744aa9d', 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: 'a5867bd9084a542ddffa76953884a9b3625dc1e9', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: 'f78a7a75900b3f795c0338cfb37e5b033e14a997', 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: '4dd3aac0da4871b4e97fa82be481522ca3d68c2e', class: {
                 'bq-date-picker__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '4eedc11f668fd443ed43203c7351822578b57965', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'a68aadcbf45fe56a97b214ef1de89956db7a30f5', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: 'a76ac38f10cc2f5e0c9d0662d3bc1da8ac017234', 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",
+            }, part: "control", slot: "trigger" }, h("span", { key: '67c9b385d576295ab035baa826b958ba5992c68a', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '765167de053bf1224e6121941da6624b410e9025', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: 'c45dc15c722835a7866d73765e604d80b25915cd', 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 && (
         // 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: '959a737f939b2edb28e6f3ba49a2a2f2a7737ea0', 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: '268726c361f74822b7a203745a41d6c03a4592db', name: "clear-icon" }, h("bq-icon", { key: 'f9342e15716577e3129ea09d6b9c3f99b39223a9', weight: "bold", name: "x-circle", class: "flex" })))), h("span", { key: '7c1a5096ebee64156a6c76efd9c34f01f70ed6f6', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'ba3d95b9b94398ca0a0e88647ff5ef6f9dc2538d', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '38cf9be76e35e5b02141a5e0d6a938aebbff39b0', name: "calendar-blank", weight: "bold", class: "flex" })))), h(CallyCalendar, { key: '8cdb5f879e00437a8f36d61dcd8a0d9f1d85a47d', 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: 'e0313d7bd9c231b4cea839549a27489d0e1d35dc', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '5d03ea06201aef51de86cf75c631c38a92e9cef7', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '16d28cdca9784a6f96cf1f6182df03028f34c0d6', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths())))));
+        h("bq-button", { key: '574b10d000d9275abac464de5c9473d79042e92a', 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: '02e81e9e2ee7b7cb571c0c39c6be222cc3da66d5', name: "clear-icon" }, h("bq-icon", { key: '2d1920b1b1eca52a0542c965f9398eaf82265b7c', name: "x-circle", class: "flex" })))), h("span", { key: '68797b6c996f697e8f01217ab7191937a229d5c0', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'cd94b9245d59b4ef86ceeb8b74c9ef72475b2c36', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '2c32713289de85a77eb1fbcae84da27b793fb5fb', name: "calendar-blank", class: "flex" })))), h(CallyCalendar, { key: '1136bfbb834a2828bb1d9bb1bd776678fe173be5', 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: '19f783025540bc02c2e9fb93719020b13fc91eb5', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '84a730adaaabe2b6956e4830fb5938094aecd1f1', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '4ca76cf6cc8607fd2f1311a85b046d5093008928', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths())))));
     }
     static get is() { return "bq-date-picker"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["./scss/bq-date-picker.scss"]
@@ -356,6 +473,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "If `true`, the Date picker input will be focused on component render"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autofocus",
                 "reflect": true
             },
@@ -373,6 +492,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The clear button aria label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clear-button-label",
                 "reflect": true,
                 "defaultValue": "'Clear value'"
@@ -391,6 +512,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "If `true`, the clear button won't be displayed"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-clear",
                 "reflect": true,
                 "defaultValue": "false"
@@ -409,6 +532,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Indicates whether the Date picker input is disabled or not.\nIf `true`, the Date picker is disabled and cannot be interacted with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -427,6 +552,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Represents the distance (gutter or margin) between the Date picker panel and the input element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "distance",
                 "reflect": true,
                 "defaultValue": "8"
@@ -451,6 +578,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The first day of the week, where Sunday is 0, Monday is 1, etc"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "first-day-of-week",
                 "reflect": true,
                 "defaultValue": "1"
@@ -474,6 +603,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The options to use when formatting the displayed value.\nDetails: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n  }"
             },
             "form": {
@@ -490,9 +621,30 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The ID of the form that the Date picker input belongs to."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": true
             },
+            "formValidationMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The native form validation message (mandatory if `required` is set)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "form-validation-message",
+                "reflect": false
+            },
             "isDateDisallowed": {
                 "type": "unknown",
                 "mutable": false,
@@ -511,7 +663,9 @@ export class BqDatePicker {
                 "docs": {
                     "tags": [],
                     "text": "A function that takes a date and returns true if the date should not be selectable"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "locale": {
                 "type": "string",
@@ -532,6 +686,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The locale for formatting dates. If not set, will use the browser's locale.\nDetails: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "locale",
                 "reflect": true,
                 "defaultValue": "'en-GB'"
@@ -550,6 +706,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The latest date that can be selected"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": true
             },
@@ -567,6 +725,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The earliest date that can be selected"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": true
             },
@@ -584,6 +744,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Number of months to show when range is `true`"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "months",
                 "reflect": true
             },
@@ -601,6 +763,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Specifies how the next/previous buttons should navigate the calendar.\n- single: The buttons will navigate by a single month at a time.\n- months: The buttons will navigate by the number of months displayed per view."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "months-per-view",
                 "reflect": true,
                 "defaultValue": "'single'"
@@ -619,6 +783,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The Date picker input name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -636,6 +802,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "If `true`, the Date picker panel will be visible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -654,6 +822,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "When set, it will override the height of the Date picker panel."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "panel-height",
                 "reflect": true,
                 "defaultValue": "'auto'"
@@ -672,6 +842,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The Date picker input placeholder text value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -695,6 +867,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Position of the Date picker panel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'bottom-end'"
@@ -713,6 +887,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Indicates whether or not the Date picker input is required to be filled out before submitting the form."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": true
             },
@@ -730,6 +906,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Represents the skidding between the Date picker panel and the input element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "skidding",
                 "reflect": true,
                 "defaultValue": "0"
@@ -748,6 +926,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Whether to show days outside the month"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-outside-days",
                 "reflect": true,
                 "defaultValue": "false"
@@ -766,6 +946,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "Defines the strategy to position the Date picker panel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "strategy",
                 "reflect": true,
                 "defaultValue": "'fixed'"
@@ -784,6 +966,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The date that is tentatively selected e.g. the start of a range selection"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tentative",
                 "reflect": true
             },
@@ -807,6 +991,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'single'"
@@ -834,6 +1020,8 @@ export class BqDatePicker {
                         }],
                     "text": "The validation status of the Select input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-status",
                 "reflect": true,
                 "defaultValue": "'none'"
@@ -852,6 +1040,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\nAll dates are expected in ISO-8601 format (YYYY-MM-DD)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             }
@@ -1003,5 +1193,6 @@ export class BqDatePicker {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=bq-date-picker.js.map