@beeq/core 1.3.3 → 1.5.0

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

@@ -0,0 +1,920 @@
+/*!
+ * Built by Endavans
+ * © https://beeq.design - Apache 2 License.
+ */
+import { h } from "@stencil/core";
+import { DATE_PICKER_TYPE } from "./bq-date-picker.types";
+import { hasSlotContent, isDefined, isHTMLElement, validatePropValue } from "../../shared/utils";
+/**
+ * @part base - The component's base wrapper.
+ * @part button - The native HTML button used under the hood in the clear button.
+ * @part clear-btn - The clear button.
+ * @part control - The input control wrapper.
+ * @part input - The native HTML input element used under the hood.
+ * @part label - The label slot container.
+ * @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 container - The container for the entire component.
+ * @part header - The container for heading and button's.
+ * @part button - Any button within the component.
+ * @part previous - The previous page button.
+ * @part next - The next page button.
+ * @part disabled - A button that is disabled due to min/max.
+ * @part heading - The heading containing the month and year.
+
+// Parts specific to the calendar-month component:
+ * @part heading - The heading that labels the month.
+ * @part table - The <table> element.
+ * @part tr - Any row within the table.
+ * @part head - The table's header row.
+ * @part week - The table's body rows.
+ * @part th - The table's header cells.
+ * @part td - The table's body cells.
+ * @part button - Any button used in the component.
+ * @part day - The buttons corresponding to each day in the grid.
+ * @part selected - Any days which are selected.
+ * @part today - Today's day.
+ * @part disallowed - Any day that has been disallowed via isDateDisallowed.
+ * @part outside - Any days which are outside the current month.
+ * @part range-start - The day at the start of a date range.
+ * @part range-end - The day at the end of a date range.
+ * @part range-inner - Any days between the start and end of a date range.
+ */
+export class BqDatePicker {
+    constructor() {
+        this.fallbackInputId = 'date-picker';
+        // Export parts of the calendar-month component
+        this.COMMON_EXPORT_PARTS = 'heading,table,tr,head,week,th,td';
+        this.BUTTON_EXPORT_PARTS = 'button,day,selected,today,disallowed,outside,range-start,range-end,range-inner';
+        // Local methods
+        // Internal business logic.
+        // These methods cannot be called from the host element.
+        // =======================================================
+        this.handleBlur = () => {
+            if (this.disabled)
+                return;
+            this.bqBlur.emit(this.el);
+        };
+        this.handleFocus = () => {
+            if (this.disabled)
+                return;
+            this.bqFocus.emit(this.el);
+        };
+        this.handleChange = (ev) => {
+            if (this.disabled)
+                return;
+            if (!isHTMLElement(ev.target, 'input'))
+                return;
+            const dateValue = new Date(ev.target.value);
+            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.formattedDate = this.formatDate(this.value);
+                this.bqChange.emit({ value: this.value, el: this.el });
+            }
+        };
+        this.handleCalendarChange = (ev) => {
+            const { value } = ev.target;
+            this.value = value;
+            this.formattedDate = this.formatDate(this.value);
+            this.inputElem.value = this.formattedDate;
+            this.inputElem.focus();
+            this.bqChange.emit({ value: this.value, el: this.el });
+            this.open = this.type === 'multi';
+        };
+        this.handleClearClick = (ev) => {
+            if (this.disabled)
+                return;
+            this.inputElem.value = '';
+            this.value = this.inputElem.value;
+            this.bqClear.emit(this.el);
+            this.bqChange.emit({ value: this.value, el: this.el });
+            this.inputElem.focus();
+            ev.stopPropagation();
+        };
+        this.handleLabelSlotChange = () => {
+            this.hasLabel = hasSlotContent(this.labelElem);
+        };
+        this.handlePrefixSlotChange = () => {
+            this.hasPrefix = hasSlotContent(this.prefixElem);
+        };
+        this.handleSuffixSlotChange = () => {
+            this.hasSuffix = hasSlotContent(this.suffixElem);
+        };
+        this.generateCalendarMonth = (offset, className = '') => {
+            return (h("calendar-month", { offset: offset, class: className, exportparts: `${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}` }));
+        };
+        /**
+         * Generates an array of JSX.Element representing calendar months.
+         *
+         * If the type of the date picker is 'range' or 'multi' and the number of months is specified,
+         * it generates an array of calendar months with the specified length. Each month will have an offset
+         * and a class name based on its position in the array. The offset is used to determine the month to display,
+         * and the class name is used for responsive design.
+         *
+         * If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,
+         * it generates an array with a single calendar month.
+         *
+         * @returns {JSX.Element[]} An array of JSX.Element representing calendar months.
+         */
+        this.generateCalendarMonths = () => {
+            if (this.type === 'range' || (this.type === 'multi' && this.months)) {
+                return Array.from({ length: this.months }, (_, i) => {
+                    const offset = i > 0 ? i : undefined;
+                    const className = offset ? 'hidden sm:block' : '';
+                    return this.generateCalendarMonth(offset, className);
+                });
+            }
+            return [this.generateCalendarMonth()];
+        };
+        /**
+         * Extracts and returns the first date part from a given string.
+         * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value
+         * should be the focused date in the calendar.
+         *
+         * @param value - The value to be processed, can be a string.
+         * @returns The extracted last date portion of the value.
+         */
+        this.focusedDate = (value) => {
+            if (!value)
+                return;
+            const dateRegex = /\b\d{4}-\d{2}-\d{2}\b/;
+            const match = dateRegex.exec(value);
+            return match ? match[0] : null;
+        };
+        this.formatDate = (value) => {
+            if (!value)
+                return;
+            const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);
+            if (this.type === 'range') {
+                const [start, end] = value.split('/').map((dateStr) => new Date(dateStr));
+                return dateFormatter.formatRange(start, end);
+            }
+            if (this.type === 'multi') {
+                const dates = value.split(' ').map((dateStr) => new Date(dateStr));
+                return dates.map((date) => dateFormatter.format(date)).join(', ');
+            }
+            return dateFormatter.format(new Date(value));
+        };
+        this.formattedDate = undefined;
+        this.hasLabel = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        this.hasValue = false;
+        this.autofocus = undefined;
+        this.clearButtonLabel = 'Clear value';
+        this.disableClear = false;
+        this.disabled = false;
+        this.distance = 8;
+        this.firstDayOfWeek = 1;
+        this.formatOptions = {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+        };
+        this.form = undefined;
+        this.isDateDisallowed = undefined;
+        this.locale = 'en-GB';
+        this.max = undefined;
+        this.min = undefined;
+        this.months = undefined;
+        this.monthsPerView = 1;
+        this.name = undefined;
+        this.open = false;
+        this.panelHeight = 'auto';
+        this.placeholder = undefined;
+        this.placement = 'bottom-end';
+        this.required = undefined;
+        this.skidding = 0;
+        this.showOutsideDays = false;
+        this.strategy = 'fixed';
+        this.type = 'single';
+        this.validationStatus = 'none';
+        this.value = undefined;
+    }
+    // Prop lifecycle events
+    // =======================
+    handleValueChange() {
+        if (Array.isArray(this.value)) {
+            this.hasValue = this.value.some((val) => val.length > 0);
+            return;
+        }
+        this.formattedDate = this.formatDate(this.value);
+        this.hasValue = isDefined(this.value);
+    }
+    checkPropValues() {
+        validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');
+    }
+    // Component lifecycle events
+    // Ordered by their natural call order
+    // =====================================
+    componentDidLoad() {
+        this.handleValueChange();
+    }
+    // Listeners
+    // ==============
+    handleOpenChange(ev) {
+        if (!ev.composedPath().includes(this.el))
+            return;
+        this.open = ev.detail.open;
+    }
+    // Public methods API
+    // These methods are exposed on the host element.
+    // Always use two lines.
+    // Public Methods must be async.
+    // Requires JSDocs for public API documentation.
+    // ===============================================
+    /**
+     * Clears the selected value.
+     *
+     * @return {Promise<void>}
+     * @memberof BqInput
+     */
+    async clear() {
+        if (this.disabled)
+            return;
+        this.value = undefined;
+        this.bqClear.emit(this.el);
+    }
+    get CalendarType() {
+        const componentTypes = {
+            single: 'calendar-date',
+            multi: 'calendar-multi',
+            range: 'calendar-range',
+        };
+        // Return the corresponding component type, based on the type prop value
+        return componentTypes[this.type] || componentTypes.single;
+    }
+    // render() function
+    // Always the last one in the class.
+    // ===================================
+    render() {
+        const CallyCalendar = this.CalendarType;
+        const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;
+        return (h("div", { key: 'df35ce5297fda3dc59c88f2e3c6a06e81d7dfb85', class: "bq-date-picker", part: "base" }, h("label", { key: '0ceb3db82238ef54d193d7e1a62e14af837d8e8c', id: labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '05a62c89da28bfc958d606931af4a02c558e1a60', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: 'c031406764fcb7d053fba4cd94bc86dc133fc05f', class: "bq-date-picker__dropdown w-full [&::part(panel)]:w-auto [&::part(panel)]:p-m", 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: 'bc5f93af9af5314ce6e6f7a74c929be12b974d5b', class: {
+                'bq-date-picker__control': true,
+                [`validation-${this.validationStatus}`]: true,
+                disabled: this.disabled,
+            }, part: "control", slot: "trigger" }, h("span", { key: '8b74505e49ba28441c53dfdc259d6e6836a0337e', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '1d088c73628b00f492765e6f712d817c7e6218dc', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: 'aa4c4adcb892a6378664739d583cde9d395fcd9c', id: this.name || this.fallbackInputId, class: "bq-date-picker__control--input", autoComplete: "off", autoCapitalize: "off", autoFocus: this.autofocus, "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.formattedDate, 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: 'ba2b203dac9f3cdbbbf3261de22f9dd200774532', 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: '6fa6b03d2ef5c9d047d8fae4dffec6c5936471a6', name: "clear-icon" }, h("bq-icon", { key: 'be4d9fcddcdf44dcc12b6dc877ca550a2d6d1ac1', weight: "bold", name: "x-circle", class: "flex" })))), h("span", { key: 'e39ea85dd0552d8bf2ef5e09c1ca739b71a08574', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '2df089de0d33a4792de1e5747601cc68ca54bbd1', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: 'e5f8639ef10ab86af5489e9bc7596d4094362bf5', name: "calendar-blank", weight: "bold", class: "flex" })))), h("div", { key: '0b1d96b7b24a684367b520a6c27d97cbf420449c', class: "flex items-center justify-center" }, h(CallyCalendar, { key: 'c8f9c078979af83eca9c000feead81f93bc9f9df', isDateDisallowed: this.isDateDisallowed, locale: this.locale, value: this.value, min: this.min, max: this.max, months: this.monthsPerView, focusedDate: this.focusedDate(this.value), firstDayOfWeek: this.firstDayOfWeek, showOutsideDays: this.showOutsideDays, onChange: this.handleCalendarChange, exportparts: "container,header,button,previous,next,disabled,heading" }, h("bq-icon", { key: '71b97efbf26c6a9fa9da15c6f953c6eb53dd11aa', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '8b5864fd18af8b6fda8be4422257903dfc34d978', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '7b3ec9daef1d3efce65ed73aa4274637c44df062', 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 originalStyleUrls() {
+        return {
+            "$": ["./scss/bq-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scss/bq-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the Date picker input will be focused on component render"
+                },
+                "attribute": "autofocus",
+                "reflect": true
+            },
+            "clearButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The clear button aria label"
+                },
+                "attribute": "clear-button-label",
+                "reflect": true,
+                "defaultValue": "'Clear value'"
+            },
+            "disableClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the clear button won't be displayed"
+                },
+                "attribute": "disable-clear",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the Date picker input is disabled or not.\nIf `true`, the Date picker is disabled and cannot be interacted with."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "distance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents the distance (gutter or margin) between the Date picker panel and the input element."
+                },
+                "attribute": "distance",
+                "reflect": true,
+                "defaultValue": "8"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "DaysOfWeek",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "DaysOfWeek": {
+                            "location": "import",
+                            "path": "./bq-date-picker.types",
+                            "id": "../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts::DaysOfWeek"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The first day of the week, where Sunday is 0, Monday is 1, etc"
+                },
+                "attribute": "first-day-of-week",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "formatOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Intl.DateTimeFormatOptions",
+                    "resolved": "DateTimeFormatOptions",
+                    "references": {
+                        "Intl": {
+                            "location": "global",
+                            "id": "global::Intl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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"
+                },
+                "defaultValue": "{\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n  }"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the form that the Date picker input belongs to."
+                },
+                "attribute": "form",
+                "reflect": true
+            },
+            "isDateDisallowed": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A function that takes a date and returns true if the date should not be selectable"
+                }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Intl.LocalesArgument",
+                    "resolved": "Locale | readonly (string | Locale)[] | string",
+                    "references": {
+                        "Intl": {
+                            "location": "global",
+                            "id": "global::Intl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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"
+                },
+                "attribute": "locale",
+                "reflect": true,
+                "defaultValue": "'en-GB'"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The latest date that can be selected"
+                },
+                "attribute": "max",
+                "reflect": true
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The earliest date that can be selected"
+                },
+                "attribute": "min",
+                "reflect": true
+            },
+            "months": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of months to show when range is `true`"
+                },
+                "attribute": "months",
+                "reflect": true
+            },
+            "monthsPerView": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of months to display per page when using next/previous buttons."
+                },
+                "attribute": "months-per-view",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Date picker input name."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the Date picker panel will be visible."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "panelHeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, it will override the height of the Date picker panel."
+                },
+                "attribute": "panel-height",
+                "reflect": true,
+                "defaultValue": "'auto'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The Date picker input placeholder text value"
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FloatingUIPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "FloatingUIPlacement": {
+                            "location": "import",
+                            "path": "../../services/interfaces",
+                            "id": "../../packages/beeq/src/services/interfaces/index.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the Date picker panel"
+                },
+                "attribute": "placement",
+                "reflect": true,
+                "defaultValue": "'bottom-end'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether or not the Date picker input is required to be filled out before submitting the form."
+                },
+                "attribute": "required",
+                "reflect": true
+            },
+            "skidding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents the skidding between the Date picker panel and the input element."
+                },
+                "attribute": "skidding",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "showOutsideDays": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show days outside the month"
+                },
+                "attribute": "show-outside-days",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fixed' | 'absolute'",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the strategy to position the Date picker panel"
+                },
+                "attribute": "strategy",
+                "reflect": true,
+                "defaultValue": "'fixed'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TDatePickerType",
+                    "resolved": "\"multi\" | \"range\" | \"single\"",
+                    "references": {
+                        "TDatePickerType": {
+                            "location": "import",
+                            "path": "./bq-date-picker.types",
+                            "id": "../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts::TDatePickerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection"
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'single'"
+            },
+            "validationStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TInputValidation",
+                    "resolved": "\"error\" | \"none\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TInputValidation": {
+                            "location": "import",
+                            "path": "../input/bq-input.types",
+                            "id": "../../packages/beeq/src/components/input/bq-input.types.ts::TInputValidation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "remarks",
+                            "text": "This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n- `'none'`: No validation status is set.\n- `'error'`: The input has a validation error.\n- `'warning'`: The input has a validation warning.\n- `'success'`: The input has passed validation."
+                        }],
+                    "text": "The validation status of the Select input."
+                },
+                "attribute": "validation-status",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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)."
+                },
+                "attribute": "value",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formattedDate": {},
+            "hasLabel": {},
+            "hasPrefix": {},
+            "hasSuffix": {},
+            "hasValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bqBlur",
+                "name": "bqBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback handler emitted when the input loses focus"
+                },
+                "complexType": {
+                    "original": "HTMLBqDatePickerElement",
+                    "resolved": "HTMLBqDatePickerElement",
+                    "references": {
+                        "HTMLBqDatePickerElement": {
+                            "location": "global",
+                            "id": "global::HTMLBqDatePickerElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "bqChange",
+                "name": "bqChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback handler emitted when the input value has changed and the input loses focus.\nThis handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field."
+                },
+                "complexType": {
+                    "original": "{ value: string; el: HTMLBqDatePickerElement }",
+                    "resolved": "{ value: string; el: HTMLBqDatePickerElement; }",
+                    "references": {
+                        "HTMLBqDatePickerElement": {
+                            "location": "global",
+                            "id": "global::HTMLBqDatePickerElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "bqClear",
+                "name": "bqClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback handler emitted when the input value has been cleared"
+                },
+                "complexType": {
+                    "original": "HTMLBqDatePickerElement",
+                    "resolved": "HTMLBqDatePickerElement",
+                    "references": {
+                        "HTMLBqDatePickerElement": {
+                            "location": "global",
+                            "id": "global::HTMLBqDatePickerElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "bqFocus",
+                "name": "bqFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback handler emitted when the input has received focus"
+                },
+                "complexType": {
+                    "original": "HTMLBqDatePickerElement",
+                    "resolved": "HTMLBqDatePickerElement",
+                    "references": {
+                        "HTMLBqDatePickerElement": {
+                            "location": "global",
+                            "id": "global::HTMLBqDatePickerElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the selected value.",
+                    "tags": [{
+                            "name": "return",
+                            "text": undefined
+                        }, {
+                            "name": "memberof",
+                            "text": "BqInput"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "type",
+                "methodName": "checkPropValues"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bqOpen",
+                "method": "handleOpenChange",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bq-date-picker.js.map