@beeq/core 1.8.0-beta.15 → 1.8.0-beta.17

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

@@ -2,12 +2,98 @@
  * 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 {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 +101,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() {
@@ -97,16 +180,19 @@ 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);
+        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 +215,19 @@ 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();
     }
+    formResetCallback() {
+        if (isNil(this.value))
+            return;
+        this.clear();
+    }
     // Listeners
     // ==============
     handleOpenChange(ev) {
@@ -172,6 +265,7 @@ export class BqDatePicker {
         if (this.disabled)
             return;
         this.value = undefined;
+        this.internals.setFormValue(undefined);
         this.bqClear.emit(this.el);
     }
     // Local methods
@@ -193,9 +287,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 +300,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 +310,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 +329,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();
     };
@@ -316,20 +412,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: 'a57d42ab93384c7651889baeea5ea146818a3dee', class: "bq-date-picker", part: "base" }, h("label", { key: '777023ccf239d31fc67a6a72b33b1ab1117b5b9a', 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: 'cee666c7a557a4b5184a2625ce74a4994ea52d95', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: 'f2426d665016b1ff9e1442eb0c69df87f179011b', 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: '023bbf7f472330cf870ad119821bdd4507c70427', 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: '53710b70220e4607bc8082093895d83a216aee5c', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'c9bc9ce08486d01f5499241ad1d58d43bf67fdec', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: 'f8adc9401e0a7d7c5e0d5da3fa943f91946d65e3', 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: '58af7f620e8f5899c73b97d225aa536a131296d6', name: "x-circle", class: "flex" })))), h("span", { key: 'e1e5188ed4abb1f5aebff511c70fcf9f9276d976', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'd50b5a86358959510cce72d353b9b084f9fa3267', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '9f2160c13a3bd1a1b753cd293638f1b8d07f1bf2', name: "calendar-blank", class: "flex" })))), h(CallyCalendar, { key: 'd7fa35597e662797de4984523957c3b22c8c9d60', 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: '0dc6348a8f1a2e5447b498389edf4f7eb2e0b8e4', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '30404417e12ae0611a5a214f1432169f027eaf5d', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '9e0c618785d7a0f5ee71d68d2fcbc33ef98b9a2f', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths())))));
+        h("bq-button", { key: '78fd0d0183a50359186ff2cf28b83c43c12bcd73', 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: '958200937e120bbd3d1a7b30ad1db95634bf7cf8', name: "clear-icon" }, h("bq-icon", { key: '5c8d8fb1dca411f47243f0714f31ecf543187bbb', name: "x-circle", class: "flex" })))), h("span", { key: '37f016b728e7cb8721d6a922316d9b550fb5834c', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '44e2c0aad725ce5665168f3c822b9febe94b005c', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: 'fd580409ad727e911768cc7a18f7fceab8a783b4', name: "calendar-blank", class: "flex" })))), h(CallyCalendar, { key: '0bacd5a7c8597b525d432fa55df031074a3aaa50', 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: '38987742b1760d103bb4760c5771dcd1dcf04374', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '6da9e8c674ddb27733fdc4245a5c821bea57bf5a', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '270bb1e78ec8fa6fd71a9b45a5d4c2cd7e578a9b', 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 +453,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 +472,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 +492,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 +512,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 +532,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 +558,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 +583,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,6 +601,8 @@ 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
             },
@@ -511,7 +624,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 +647,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 +667,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The latest date that can be selected"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": true
             },
@@ -567,6 +686,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The earliest date that can be selected"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": true
             },
@@ -584,6 +705,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 +724,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 +744,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The Date picker input name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -636,6 +763,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 +783,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 +803,8 @@ export class BqDatePicker {
                     "tags": [],
                     "text": "The Date picker input placeholder text value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -695,6 +828,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 +848,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 +867,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 +887,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 +907,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 +927,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 +952,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 +981,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 +1001,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 +1154,6 @@ export class BqDatePicker {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=bq-date-picker.js.map