@beeq/core 1.8.4-beta.0 → 1.8.5-beta.2

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

@@ -2,7 +2,7 @@
  * 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 { isCallyLibraryLoaded, loadCallyLibrary } from "./helper/callyLibrary";
 import { hasSlotContent, isClient, isDefined, isEventTargetChildOfElement, isHTMLElement, isNil, validatePropValue, } from "../../shared/utils";
@@ -448,14 +448,14 @@ export class BqDatePicker {
      */
     formatFocusedDate = (value) => {
         if (!value)
-            return;
+            return undefined;
         const dateRegex = /\b\d{4}-\d{2}-\d{2}\b/;
         const match = dateRegex.exec(value);
-        return match ? match[0] : null;
+        return match ? match[0] : undefined;
     };
     formatDisplayValue = (value) => {
         if (!value)
-            return;
+            return undefined;
         const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);
         if (this.type === 'range') {
             const [start, end] = value.split('/').map((dateStr) => new Date(dateStr));
@@ -496,16 +496,16 @@ export class BqDatePicker {
     render() {
         const CallyCalendar = this.CalendarType;
         const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '069f903344826b0ebcae55e8ef856b7f482c233a', class: "bq-date-picker", part: "base" }, h("label", { key: 'f59992a4898eb30b3d31eb9c6b72f6e904c473c8', 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: 'aebcf5dadd8678765f0116b07d2bad4f2d52af6e', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'ccb991f3c53db36c33f7b300cd2c5495ad8dbe16', 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: 'bf2e9ac59a47f5e6ace0d28b48ed16c2c8645679', class: {
+        return (h("div", { key: '90e43244086cd211ea29a2e4c2b38a53d61fb6e3', class: "bq-date-picker", part: "base" }, h("label", { key: 'afa9d4e4c5b1961155f96b5cf2c862491fe252e8', 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: '0e6087b6d570604cfa0ff6c0199ee15b4509fb1f', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'e5314f0cec550603250010c170872823df644a66', 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: 'cc9a24028deb548153c81be9269c26ee7d4be8c9', class: {
                 'bq-date-picker__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '27a2f44c0a81cc0b7302d152e8731199828bbc54', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '0c23dd1c1a4221a207fc56a231413e7aac5dc5c9', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: 'faba190997324a83c461f1577e2344fbef5f313a', 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: 'b548441675b48af77eeff1cd2a7ab94b6e722a2c', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'e0f4ab4a054073c602cf4ec89ce0fb2edcbc4502', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: '548cf75c23c5ba24fe800f5edc882e9af0a712d2', 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: 'c2378ba7fa91f2ba97a365b4c112f7bdd9133768', 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: '834c2e4ceca2f3750aa3387997b9e109243ea31b', name: "clear-icon" }, h("bq-icon", { key: 'fb69b669c5945d0d1837d78132cd50cee58d0ae8', name: "x-circle", class: "flex" })))), h("span", { key: '6a62e719ff5351a3fe5adcfee6d305fdccadeace', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '41feb65276d71d1f385e10c678090a38f1665152', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '041dd77ea0b03bcf0632f9f7f58fe4ed88fa527e', name: "calendar-blank", class: "flex" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '1c49606beca0c95a7af42519c4a38716bba10bc5', 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: '995826eb972580a6f63052bee35324aa9a2add6c', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: 'c5139a4bc0e92dcfc7ea3be691f6f553c2c4efb9', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: 'c7ca5ac86a07e2d0681261ceb9045675df7a3881', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
+        h("bq-button", { key: '94c186cfce884edd7c2d63a49f6533d8448fb683', 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: 'f0caaec8283a7ca0298b82f157bd36933b0541b4', name: "clear-icon" }, h("bq-icon", { key: '2549f5bce9f4d7e836ff5babaa04750831482b40', name: "x-circle", class: "flex" })))), h("span", { key: '8c504c8a885061eec62e4704e425b5f3779cd69e', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '8220188ec1b41908b45301503d3351a6038e1dd5', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'ba52169baa77e1103e09fcb538f7ba7067ca5474', name: "calendar-blank", class: "flex" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '7d27a2ab38209ebe4d1801bb235da417321904b4', 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: '671b9b78eb566a2f4862525e396749e50be679a8', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '6219184ad134f80b515aeb4dd5a52a2efe1ccf8a', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '438fecb7af23bb5a6e10f2e65c310ce904fbae00', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
     }
     static get is() { return "bq-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -525,6 +525,7 @@ export class BqDatePicker {
         return {
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -539,11 +540,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": true
             },
             "clearButtonLabel": {
                 "type": "string",
+                "attribute": "clear-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -558,12 +559,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-button-label",
                 "reflect": true,
                 "defaultValue": "'Clear value'"
             },
             "disableClear": {
                 "type": "boolean",
+                "attribute": "disable-clear",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -578,12 +579,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disable-clear",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -598,12 +599,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "distance": {
                 "type": "number",
+                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -618,12 +619,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "distance",
                 "reflect": true,
                 "defaultValue": "8"
             },
             "firstDayOfWeek": {
                 "type": "number",
+                "attribute": "first-day-of-week",
                 "mutable": false,
                 "complexType": {
                     "original": "DaysOfWeek",
@@ -644,12 +645,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "first-day-of-week",
                 "reflect": true,
                 "defaultValue": "1"
             },
             "formatOptions": {
                 "type": "unknown",
+                "attribute": "format-options",
                 "mutable": false,
                 "complexType": {
                     "original": "Intl.DateTimeFormatOptions",
@@ -673,6 +674,7 @@ export class BqDatePicker {
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -687,11 +689,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": true
             },
             "formValidationMessage": {
                 "type": "string",
+                "attribute": "form-validation-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -706,11 +708,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form-validation-message",
                 "reflect": false
             },
             "isDateDisallowed": {
                 "type": "unknown",
+                "attribute": "is-date-disallowed",
                 "mutable": false,
                 "complexType": {
                     "original": "(date: Date) => boolean",
@@ -733,6 +735,7 @@ export class BqDatePicker {
             },
             "locale": {
                 "type": "string",
+                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "Intl.LocalesArgument",
@@ -752,12 +755,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "locale",
                 "reflect": true,
                 "defaultValue": "'en-GB'"
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -772,11 +775,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": true
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -791,11 +794,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": true
             },
             "months": {
                 "type": "number",
+                "attribute": "months",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -810,11 +813,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "months",
                 "reflect": true
             },
             "monthsPerView": {
                 "type": "string",
+                "attribute": "months-per-view",
                 "mutable": false,
                 "complexType": {
                     "original": "'single' | 'months'",
@@ -829,12 +832,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "months-per-view",
                 "reflect": true,
                 "defaultValue": "'single'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -849,11 +852,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -868,12 +871,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "panelHeight": {
                 "type": "string",
+                "attribute": "panel-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -888,12 +891,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "panel-height",
                 "reflect": true,
                 "defaultValue": "'auto'"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -908,11 +911,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": true
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -933,12 +936,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'bottom-end'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -953,11 +956,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": true
             },
             "skidding": {
                 "type": "number",
+                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -972,12 +975,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "skidding",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "showOutsideDays": {
                 "type": "boolean",
+                "attribute": "show-outside-days",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -992,12 +995,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-outside-days",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "strategy": {
                 "type": "string",
+                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "'fixed' | 'absolute'",
@@ -1012,12 +1015,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "strategy",
                 "reflect": true,
                 "defaultValue": "'fixed'"
             },
             "tentative": {
                 "type": "string",
+                "attribute": "tentative",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1032,11 +1035,11 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tentative",
                 "reflect": true
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TDatePickerType",
@@ -1057,12 +1060,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'single'"
             },
             "validationStatus": {
                 "type": "string",
+                "attribute": "validation-status",
                 "mutable": false,
                 "complexType": {
                     "original": "TInputValidation",
@@ -1086,12 +1089,12 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation-status",
                 "reflect": true,
                 "defaultValue": "'none'"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1106,7 +1109,6 @@ export class BqDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             }
         };