@haiilo/catalyst 5.4.0 → 6.0.1

package/dist/collection/components/cat-datepicker/cat-datepicker.js

@@ -1,20 +1,11 @@
-import { Host, h } from '@stencil/core';
-import log from 'loglevel';
-import dayjs from './dayjs.config';
-import Datepicker, { getDatepickerOptions } from './vanillajs-datepicker.config';
-/**
- * Inputs are used to allow users to provide text input when the expected input
- * is short. As well as plain text, Input supports various types of text,
- * including passwords and numbers.
- *
- * @slot hint - Optional hint element to be displayed with the input.
- * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
- * @part label - The label content.
- */
-export class CatDatepicker {
+import { h } from '@stencil/core';
+import flatpickr from 'flatpickr';
+import weekSelectPlugin from 'flatpickr/dist/plugins/weekSelect/weekSelect';
+import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
+import { getFormat } from './cat-datepicker.config';
+import { getLocale } from './cat-datepicker.locale';
+export class CatDatepickerFlat {
   constructor() {
-    this.hasSlottedLabel = false;
-    this.hasSlottedHint = false;
     this.requiredMarker = 'optional';
     this.horizontal = false;
     this.autoComplete = undefined;
@@ -22,204 +13,106 @@ export class CatDatepicker {
     this.disabled = false;
     this.hint = undefined;
     this.icon = undefined;
-    this.iconLeft = false;
+    this.iconRight = false;
     this.identifier = undefined;
     this.label = '';
     this.labelHidden = false;
     this.max = undefined;
     this.min = undefined;
+    this.mode = 'date';
     this.name = undefined;
     this.placeholder = undefined;
     this.textPrefix = undefined;
     this.textSuffix = undefined;
     this.readonly = false;
     this.required = false;
-    this.format = 'mm/dd/yyyy';
-    this.weekNumbers = true;
-    this.type = 'date';
-    this.datesDisabled = undefined;
+    this.step = 5;
     this.value = undefined;
     this.errors = undefined;
     this.errorUpdate = 0;
     this.nativeAttributes = undefined;
   }
+  get input() {
+    return this._input?.shadowRoot?.querySelector('input') ?? undefined;
+  }
+  componentDidLoad() {
+    const input = this.input;
+    if (input) {
+      const locale = getLocale(i18n.getLocale());
+      const format = getFormat(i18n.getLocale(), this.mode);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const plugins = this.mode === 'week' ? [new weekSelectPlugin({})] : [];
+      this.pickr = flatpickr(input, {
+        locale,
+        plugins,
+        altInput: true,
+        prevArrow: '←',
+        nextArrow: '→',
+        dateFormat: this.dateFormat,
+        altFormat: format,
+        ariaDateFormat: format,
+        mode: this.mode === 'daterange' ? 'range' : 'single',
+        minDate: this.min,
+        maxDate: this.max,
+        enableTime: this.mode === 'time' || this.mode === 'datetime',
+        noCalendar: this.mode === 'time',
+        weekNumbers: true,
+        minuteIncrement: this.step,
+        onChange: (dates, dateStr, flatpickr) => {
+          if (this.mode === 'week') {
+            this.value = dates[0] ? flatpickr.config.getWeek(dates[0]).toString() : undefined;
+          }
+          else {
+            this.value = dateStr;
+          }
+          this.catChange.emit(this.value);
+        }
+      });
+    }
+  }
   /**
-   * Programmatically move focus to the input. Use this method instead of
+   * Programmatically move focus to the datepicker. Use this method instead of
    * `input.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
   async doFocus(options) {
-    this.input.focus(options);
+    this._input?.doFocus(options);
   }
   /**
-   * Programmatically remove focus from the input. Use this method instead of
+   * Programmatically remove focus from the datepicker. Use this method instead of
    * `input.blur()`.
    */
   async doBlur() {
-    this.input.blur();
-  }
-  /**
-   * Programmatically simulate a click on the input.
-   */
-  async doClick() {
-    this.input.click();
-  }
-  /**
-   * Clear the input.
-   */
-  async clear() {
-    this.value = '';
-  }
-  componentWillRender() {
-    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    this._input?.doBlur();
   }
   render() {
-    return (h(Host, null, h("cat-input", { ref: el => (this.catInput = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: !this.iconLeft, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: event => this.onCatChange(event), onCatFocus: event => this.onCatFocus(event.detail), onCatBlur: event => this.onCatBlur(event.detail) }, this.hasSlottedLabel && (h("span", { slot: "label" }, h("slot", { name: "label" }))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" }))))));
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.hostElement) {
-      const inputWrapper = (_a = this.catInput.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-wrapper');
-      const inputElement = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('input');
-      if (inputElement) {
-        this.input = inputElement;
-      }
-      else {
-        log.error('[CatInput] Missing input element', this);
-        return;
-      }
-      this.datepicker = new Datepicker(inputElement, Object.assign(Object.assign({}, getDatepickerOptions(this.type, this.value)), { container: inputWrapper, maxDate: this.max, minDate: this.min, datesDisabled: this.datesDisabled, prevArrow: '←', nextArrow: '→', weekNumbers: this.weekNumbers ? 1 : 0, format: {
-          toValue: (dateStr) => this.type === 'week' ? this.fromISOWeek(dateStr) : Datepicker.parseDate(dateStr, this.dateFormat),
-          toDisplay: (date) => this.type === 'week' ? this.toISOWeek(date).toString() : Datepicker.formatDate(date, this.dateFormat)
-        }, beforeShowDay: (date) => (this.shouldHighlightAsToday(date) ? 'today' : null), beforeShowMonth: (date) => (this.shouldHighlightAsToday(date) ? 'today' : null), beforeShowYear: (date) => (this.shouldHighlightAsToday(date) ? 'today' : null) }));
-      if (this.type === 'week') {
-        this.datepicker.pickerElement.classList.add('weekly');
-      }
-      this.input.addEventListener('show', this.handleWeekDays.bind(this));
-      this.input.addEventListener('changeDate', this.handleDateChange.bind(this));
-      this.input.addEventListener('changeMonth', this.handleWeekDays.bind(this));
-      this.input.addEventListener('changeView', this.handleWeekDays.bind(this));
-      this.input.addEventListener('keydown', this.focusAllWeekDays.bind(this));
-    }
-  }
-  disconnectedCallback() {
-    this.input.removeEventListener('show', this.handleWeekDays.bind(this));
-    this.input.removeEventListener('changeDate', this.handleDateChange.bind(this));
-    this.input.removeEventListener('changeMonth', this.handleWeekDays.bind(this));
-    this.input.removeEventListener('changeView', this.handleWeekDays.bind(this));
-    this.input.removeEventListener('keydown', this.focusAllWeekDays.bind(this));
-  }
-  handleDateChange(event) {
-    this.selectAllWeekDays(event.detail.date);
-    this.value = this.input.value;
-    this.catChange.emit();
-  }
-  handleWeekDays(event) {
-    this.selectAllWeekDays(event);
-    this.focusAllWeekDays();
-  }
-  selectAllWeekDays(event) {
-    var _a, _b;
-    const date = event instanceof Date ? event : (_a = event.detail) === null || _a === void 0 ? void 0 : _a.date;
-    if (this.type !== 'week') {
-      return;
-    }
-    if ((_b = this.input) === null || _b === void 0 ? void 0 : _b.value) {
-      const firstDayOfWeek = dayjs(date).startOf('isoWeek');
-      if (!firstDayOfWeek.isSame(dayjs(date).startOf('day'))) {
-        this.datepicker.setDate(firstDayOfWeek.toDate());
-      }
-      else {
-        this.addClassToAllWeekDays('selected');
-      }
-    }
-  }
-  focusAllWeekDays() {
-    const date = dayjs(this.datepicker.picker.viewDate);
-    if (this.type !== 'week' || !date) {
-      return;
-    }
-    const firstDayOfWeek = dayjs(date).startOf('isoWeek');
-    if (!firstDayOfWeek.isSame(dayjs(date).startOf('day'))) {
-      this.datepicker.setFocusedDate(firstDayOfWeek.toDate());
-    }
-    this.addClassToAllWeekDays('focused');
+    return (h("cat-input", { ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+        e.stopPropagation();
+        this.pickr?.setDate(e.detail);
+        if (this.value !== (e.detail || undefined)) {
+          this.value = e.detail || undefined;
+          this.catChange.emit(this.value);
+        }
+      }, onCatFocus: e => {
+        e.stopPropagation();
+        this.catFocus.emit(e.detail);
+      }, onCatBlur: e => {
+        e.stopPropagation();
+        this.catBlur.emit(e.detail);
+      } }));
   }
-  addClassToAllWeekDays(className) {
-    let weekdaysCount = 7;
-    const pickerElement = this.datepicker.pickerElement;
-    let selected = pickerElement.querySelector(`.datepicker-cell:not(.month):not(.year).${className}`);
-    while (weekdaysCount > 1) {
-      if (selected) {
-        selected = selected.nextElementSibling;
-        selected === null || selected === void 0 ? void 0 : selected.classList.add(className);
-        weekdaysCount--;
-      }
-      else {
-        break;
-      }
+  get dateFormat() {
+    if (this.mode === 'week') {
+      return 'W';
     }
-  }
-  onCatChange(event) {
-    this.value = this.input.value;
-    this.catChange.emit(event);
-  }
-  onCatFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onCatBlur(event) {
-    this.catBlur.emit(event);
-  }
-  shouldHighlightAsToday(date) {
-    const now = new Date();
-    const isSameYear = now.getFullYear() === date.getFullYear();
-    const isSameMonth = now.getMonth() === date.getMonth();
-    const isSameDay = now.getDate() === date.getDate();
-    switch (this.type) {
-      case 'date':
-        return isSameYear && isSameMonth && isSameDay;
-      case 'week':
-        return isSameYear && this.toISOWeek(now) === this.toISOWeek(date);
-      case 'month':
-        return isSameYear && isSameMonth;
-      case 'year':
-        return isSameYear;
-      default:
-        return false;
+    else if (this.mode === 'time') {
+      return 'H:i';
     }
-  }
-  // ----- Date handling
-  get dateFormat() {
-    const date = new Date(Date.UTC(3333, 10, 22));
-    const dateStr = new Intl.DateTimeFormat('en-US', {
-      year: 'numeric',
-      month: this.type !== 'year' ? 'numeric' : undefined,
-      day: this.type === 'date' || this.type === 'week' ? 'numeric' : undefined
-    }).format(date);
-    return dateStr.replace('22', 'dd').replace('11', 'mm').replace('3333', 'yyyy');
-  }
-  fromISOWeek(week) {
-    if (typeof week === 'string' || typeof week === 'number') {
-      const weekNumber = parseInt(week.toString(), 10);
-      return isNaN(weekNumber) ? new Date() : this.fromISOWeekNumber(weekNumber);
+    else {
+      return 'Z';
     }
-    return week;
-  }
-  fromISOWeekNumber(weekNumber, year = new Date().getFullYear()) {
-    const refDate = new Date(Date.UTC(year, 0, 4)); // January 4th
-    const diffDays = (weekNumber - 1) * 7 - (refDate.getUTCDay() || 7) + 1;
-    const date = new Date(refDate);
-    date.setUTCDate(date.getUTCDate() + diffDays);
-    return date;
-  }
-  toISOWeek(date) {
-    const currentDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-    currentDate.setUTCDate(currentDate.getUTCDate() + 4 - (currentDate.getUTCDay() || 7));
-    const firstDayOfYear = new Date(Date.UTC(currentDate.getUTCFullYear(), 0, 1));
-    return Math.ceil(((currentDate.getTime() - firstDayOfYear.getTime()) / 86400000 + 1) / 7);
   }
   static get is() { return "cat-datepicker"; }
   static get encapsulation() { return "shadow"; }
@@ -358,7 +251,7 @@ export class CatDatepicker {
         "attribute": "icon",
         "reflect": false
       },
-      "iconLeft": {
+      "iconRight": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -370,9 +263,9 @@ export class CatDatepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Display the icon on the left."
+          "text": "Display the icon on the right."
         },
-        "attribute": "icon-left",
+        "attribute": "icon-right",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -430,39 +323,57 @@ export class CatDatepicker {
         "defaultValue": "false"
       },
       "max": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number | string",
-          "resolved": "number | string | undefined",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A maximum value for date, time and numeric values."
+          "text": "A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
         },
         "attribute": "max",
         "reflect": false
       },
       "min": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number | string",
-          "resolved": "number | string | undefined",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A minimum value for date, time and numeric values."
+          "text": "A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
         },
         "attribute": "min",
         "reflect": false
       },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'date' | 'time' | 'datetime' | 'daterange' | 'week'",
+          "resolved": "\"date\" | \"daterange\" | \"datetime\" | \"time\" | \"week\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The mode of the datepicker, to select a date, time, both, a date range or a week number."
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'date'"
+      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -567,86 +478,23 @@ export class CatDatepicker {
         "reflect": false,
         "defaultValue": "false"
       },
-      "format": {
-        "type": "string",
+      "step": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The date format after picker selection."
+          "text": "The step size to use when changing the time."
         },
-        "attribute": "format",
+        "attribute": "step",
         "reflect": false,
-        "defaultValue": "'mm/dd/yyyy'"
-      },
-      "weekNumbers": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the picker should show the week numbers."
-        },
-        "attribute": "week-numbers",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DatepickerType",
-          "resolved": "\"date\" | \"month\" | \"week\" | \"year\"",
-          "references": {
-            "DatepickerType": {
-              "location": "import",
-              "path": "./datepicker-type"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of datepicker ('date', 'week', 'month', 'year')."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'date'"
-      },
-      "datesDisabled": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<Date> | Array<string>",
-          "resolved": "Date[] | string[]",
-          "references": {
-            "Array": {
-              "location": "global"
-            },
-            "Date": {
-              "location": "global"
-            }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Dates that should be disabled inside the picker"
-        }
+        "defaultValue": "5"
       },
       "value": {
         "type": "string",
@@ -660,7 +508,7 @@ export class CatDatepicker {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the control."
+          "text": "The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string."
         },
         "attribute": "value",
         "reflect": false
@@ -722,12 +570,6 @@ export class CatDatepicker {
       }
     };
   }
-  static get states() {
-    return {
-      "hasSlottedLabel": {},
-      "hasSlottedHint": {}
-    };
-  }
   static get events() {
     return [{
         "method": "catChange",
@@ -740,13 +582,9 @@ export class CatDatepicker {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
-          "references": {
-            "InputEvent": {
-              "location": "global"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         }
       }, {
         "method": "catFocus",
@@ -811,7 +649,7 @@ export class CatDatepicker {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Programmatically move focus to the input. Use this method instead of\n`input.focus()`.",
+          "text": "Programmatically move focus to the datepicker. Use this method instead of\n`input.focus()`.",
           "tags": [{
               "name": "param",
               "text": "options An optional object providing options to control aspects of\nthe focusing process."
@@ -830,44 +668,11 @@ export class CatDatepicker {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Programmatically remove focus from the input. Use this method instead of\n`input.blur()`.",
-          "tags": []
-        }
-      },
-      "doClick": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically simulate a click on the input.",
-          "tags": []
-        }
-      },
-      "clear": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Clear the input.",
+          "text": "Programmatically remove focus from the datepicker. Use this method instead of\n`input.blur()`.",
           "tags": []
         }
       }
     };
   }
-  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=cat-datepicker.js.map

package/dist/collection/components/cat-datepicker/cat-datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-datepicker.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAG3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,UAAU,EAAE,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAEjF;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;2BAOG,KAAK;0BAEN,KAAK;0BAKkE,UAAU;sBAKtF,KAAK;;qBAUN,KAAK;oBAKN,KAAK;;;oBAeL,KAAK;;iBAUR,EAAE;uBAKI,KAAK;;;;;;;oBAmCR,KAAK;oBAKL,KAAK;kBAKP,YAAY;uBAKP,IAAI;gBAKK,MAAM;;;;uBA2BG,CAAC;;;EAsBzC;;;;;;KAMG;EAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;EACpB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,OAAO;IACX,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;EAClB,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC1E,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,iBACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAyB,CAAC,EACtD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC7C,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAClD,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;QAE/C,IAAI,CAAC,eAAe,IAAI,CACvB,YAAM,IAAI,EAAC,OAAO;UAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR;QACA,IAAI,CAAC,cAAc,IAAI,CACtB,YAAM,IAAI,EAAC,MAAM;UACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACR,CACS,CACP,CACR,CAAC;EACJ,CAAC;EAED,gBAAgB;;IACd,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAgB,CAAC;MAC9F,MAAM,YAAY,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;MAE1D,IAAI,YAAY,EAAE;QAChB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;OAC3B;WAAM;QACL,GAAG,CAAC,KAAK,CAAC,kCAAkC,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO;OACR;MAED,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,YAAY,kCACxC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAC9C,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,GAAG,EACd,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACrC,MAAM,EAAE;UACN,OAAO,EAAE,CAAC,OAA+B,EAAQ,EAAE,CACjD,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC;UACnG,SAAS,EAAE,CAAC,IAAU,EAAU,EAAE,CAChC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;SACxG,EACD,aAAa,EAAE,CAAC,IAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EACnF,eAAe,EAAE,CAAC,IAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EACrF,cAAc,EAAE,CAAC,IAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IACpF,CAAC;MAEH,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;QACxB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OACvD;MAED,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MACpE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC;MAC7F,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MAC3E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MAC1E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC1E;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC;IAChG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9E,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7E,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;EAC9E,CAAC;EAEO,gBAAgB,CAAC,KAAkB;IACzC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,cAAc,CAAC,KAAmB;IACxC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAEO,iBAAiB,CAAC,KAAmB;;IAC3C,MAAM,IAAI,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAC,KAAqB,CAAC,MAAM,0CAAE,IAAI,CAAC;IACjF,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACxB,OAAO;KACR;IACD,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE;MACrB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;MAEtD,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;QACtD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC;OAClD;WAAM;QACL,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;OACxC;KACF;EACH,CAAC;EAEO,gBAAgB;IACtB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,EAAE;MACjC,OAAO;KACR;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEtD,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;MACtD,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;EACxC,CAAC;EAEO,qBAAqB,CAAC,SAAiB;IAC7C,IAAI,aAAa,GAAG,CAAC,CAAC;IACtB,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAA4B,CAAC;IACnE,IAAI,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,2CAA2C,SAAS,EAAE,CAAC,CAAC;IACnG,OAAO,aAAa,GAAG,CAAC,EAAE;MACxB,IAAI,QAAQ,EAAE;QACZ,QAAQ,GAAG,QAAQ,CAAC,kBAAkB,CAAC;QACvC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACnC,aAAa,EAAE,CAAC;OACjB;WAAM;QACL,MAAM;OACP;KACF;EACH,CAAC;EAEO,WAAW,CAAC,KAAc;IAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAmB,CAAC,CAAC;EAC3C,CAAC;EAEO,UAAU,CAAC,KAAiB;IAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,SAAS,CAAC,KAAiB;IACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;EAEO,sBAAsB,CAAC,IAAU;IACvC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,MAAM,UAAU,GAAG,GAAG,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;IAC5D,MAAM,WAAW,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;IACvD,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;IACnD,QAAQ,IAAI,CAAC,IAAI,EAAE;MACjB,KAAK,MAAM;QACT,OAAO,UAAU,IAAI,WAAW,IAAI,SAAS,CAAC;MAChD,KAAK,MAAM;QACT,OAAO,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;MACpE,KAAK,OAAO;QACV,OAAO,UAAU,IAAI,WAAW,CAAC;MACnC,KAAK,MAAM;QACT,OAAO,UAAU,CAAC;MACpB;QACE,OAAO,KAAK,CAAC;KAChB;EACH,CAAC;EAED,sBAAsB;EAEtB,IAAY,UAAU;IACpB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;MAC/C,IAAI,EAAE,SAAS;MACf,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;MACnD,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KAC1E,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAChB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;EACjF,CAAC;EAEO,WAAW,CAAC,IAA4B;IAC9C,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MACxD,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;MACjD,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KAC5E;IACD,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,iBAAiB,CAAC,UAAkB,EAAE,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;IAC3E,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;IAC9D,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,QAAQ,CAAC,CAAC;IAC9C,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,SAAS,CAAC,IAAU;IAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC5F,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACtF,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9E,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,cAAc,CAAC,OAAO,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;EAC5F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport log from 'loglevel';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { DatepickerType } from './datepicker-type';\nimport dayjs from './dayjs.config';\nimport Datepicker, { getDatepickerOptions } from './vanillajs-datepicker.config';\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepicker {\n  private input!: HTMLInputElement;\n  private catInput!: HTMLCatInputElement;\n  private datepicker!: any;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the left.\n   */\n  @Prop() iconLeft = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The date format after picker selection.\n   */\n  @Prop() format = 'mm/dd/yyyy';\n\n  /**\n   * Whether the picker should show the week numbers.\n   */\n  @Prop() weekNumbers = true;\n\n  /**\n   * Type of datepicker ('date', 'week', 'month', 'year').\n   */\n  @Prop() type: DatepickerType = 'date';\n\n  /**\n   * Dates that should be disabled inside the picker\n   */\n  @Prop() datesDisabled!: Array<Date> | Array<string>;\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the input.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  render() {\n    return (\n      <Host>\n        <cat-input\n          ref={el => (this.catInput = el as HTMLCatInputElement)}\n          requiredMarker={this.requiredMarker}\n          horizontal={this.horizontal}\n          autoComplete={this.autoComplete}\n          clearable={this.clearable}\n          disabled={this.disabled}\n          hint={this.hint}\n          icon={this.icon}\n          iconRight={!this.iconLeft}\n          identifier={this.identifier}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          name={this.name}\n          placeholder={this.placeholder}\n          textPrefix={this.textPrefix}\n          textSuffix={this.textSuffix}\n          readonly={this.readonly}\n          required={this.required}\n          value={this.value}\n          errors={this.errors}\n          errorUpdate={this.errorUpdate}\n          nativeAttributes={this.nativeAttributes}\n          onCatChange={event => this.onCatChange(event)}\n          onCatFocus={event => this.onCatFocus(event.detail)}\n          onCatBlur={event => this.onCatBlur(event.detail)}\n        >\n          {this.hasSlottedLabel && (\n            <span slot=\"label\">\n              <slot name=\"label\"></slot>\n            </span>\n          )}\n          {this.hasSlottedHint && (\n            <span slot=\"hint\">\n              <slot name=\"hint\"></slot>\n            </span>\n          )}\n        </cat-input>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (this.hostElement) {\n      const inputWrapper = this.catInput.shadowRoot?.querySelector('.input-wrapper') as HTMLElement;\n      const inputElement = inputWrapper?.querySelector('input');\n\n      if (inputElement) {\n        this.input = inputElement;\n      } else {\n        log.error('[CatInput] Missing input element', this);\n        return;\n      }\n\n      this.datepicker = new Datepicker(inputElement, {\n        ...getDatepickerOptions(this.type, this.value),\n        container: inputWrapper,\n        maxDate: this.max,\n        minDate: this.min,\n        datesDisabled: this.datesDisabled,\n        prevArrow: '←',\n        nextArrow: '→',\n        weekNumbers: this.weekNumbers ? 1 : 0,\n        format: {\n          toValue: (dateStr: string | Date | number): Date =>\n            this.type === 'week' ? this.fromISOWeek(dateStr) : Datepicker.parseDate(dateStr, this.dateFormat),\n          toDisplay: (date: Date): string =>\n            this.type === 'week' ? this.toISOWeek(date).toString() : Datepicker.formatDate(date, this.dateFormat)\n        },\n        beforeShowDay: (date: Date) => (this.shouldHighlightAsToday(date) ? 'today' : null),\n        beforeShowMonth: (date: Date) => (this.shouldHighlightAsToday(date) ? 'today' : null),\n        beforeShowYear: (date: Date) => (this.shouldHighlightAsToday(date) ? 'today' : null)\n      });\n\n      if (this.type === 'week') {\n        this.datepicker.pickerElement.classList.add('weekly');\n      }\n\n      this.input.addEventListener('show', this.handleWeekDays.bind(this));\n      this.input.addEventListener('changeDate', this.handleDateChange.bind(this) as EventListener);\n      this.input.addEventListener('changeMonth', this.handleWeekDays.bind(this));\n      this.input.addEventListener('changeView', this.handleWeekDays.bind(this));\n      this.input.addEventListener('keydown', this.focusAllWeekDays.bind(this));\n    }\n  }\n\n  disconnectedCallback() {\n    this.input.removeEventListener('show', this.handleWeekDays.bind(this));\n    this.input.removeEventListener('changeDate', this.handleDateChange.bind(this) as EventListener);\n    this.input.removeEventListener('changeMonth', this.handleWeekDays.bind(this));\n    this.input.removeEventListener('changeView', this.handleWeekDays.bind(this));\n    this.input.removeEventListener('keydown', this.focusAllWeekDays.bind(this));\n  }\n\n  private handleDateChange(event: CustomEvent) {\n    this.selectAllWeekDays(event.detail.date);\n    this.value = this.input.value;\n    this.catChange.emit();\n  }\n\n  private handleWeekDays(event: Event | Date) {\n    this.selectAllWeekDays(event);\n    this.focusAllWeekDays();\n  }\n\n  private selectAllWeekDays(event: Event | Date) {\n    const date = event instanceof Date ? event : (event as CustomEvent).detail?.date;\n    if (this.type !== 'week') {\n      return;\n    }\n    if (this.input?.value) {\n      const firstDayOfWeek = dayjs(date).startOf('isoWeek');\n\n      if (!firstDayOfWeek.isSame(dayjs(date).startOf('day'))) {\n        this.datepicker.setDate(firstDayOfWeek.toDate());\n      } else {\n        this.addClassToAllWeekDays('selected');\n      }\n    }\n  }\n\n  private focusAllWeekDays() {\n    const date = dayjs(this.datepicker.picker.viewDate);\n    if (this.type !== 'week' || !date) {\n      return;\n    }\n\n    const firstDayOfWeek = dayjs(date).startOf('isoWeek');\n\n    if (!firstDayOfWeek.isSame(dayjs(date).startOf('day'))) {\n      this.datepicker.setFocusedDate(firstDayOfWeek.toDate());\n    }\n\n    this.addClassToAllWeekDays('focused');\n  }\n\n  private addClassToAllWeekDays(className: string) {\n    let weekdaysCount = 7;\n    const pickerElement = this.datepicker.pickerElement as HTMLElement;\n    let selected = pickerElement.querySelector(`.datepicker-cell:not(.month):not(.year).${className}`);\n    while (weekdaysCount > 1) {\n      if (selected) {\n        selected = selected.nextElementSibling;\n        selected?.classList.add(className);\n        weekdaysCount--;\n      } else {\n        break;\n      }\n    }\n  }\n\n  private onCatChange(event: unknown) {\n    this.value = this.input.value;\n    this.catChange.emit(event as InputEvent);\n  }\n\n  private onCatFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onCatBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private shouldHighlightAsToday(date: Date) {\n    const now = new Date();\n    const isSameYear = now.getFullYear() === date.getFullYear();\n    const isSameMonth = now.getMonth() === date.getMonth();\n    const isSameDay = now.getDate() === date.getDate();\n    switch (this.type) {\n      case 'date':\n        return isSameYear && isSameMonth && isSameDay;\n      case 'week':\n        return isSameYear && this.toISOWeek(now) === this.toISOWeek(date);\n      case 'month':\n        return isSameYear && isSameMonth;\n      case 'year':\n        return isSameYear;\n      default:\n        return false;\n    }\n  }\n\n  // ----- Date handling\n\n  private get dateFormat(): string {\n    const date = new Date(Date.UTC(3333, 10, 22));\n    const dateStr = new Intl.DateTimeFormat('en-US', {\n      year: 'numeric',\n      month: this.type !== 'year' ? 'numeric' : undefined,\n      day: this.type === 'date' || this.type === 'week' ? 'numeric' : undefined\n    }).format(date);\n    return dateStr.replace('22', 'dd').replace('11', 'mm').replace('3333', 'yyyy');\n  }\n\n  private fromISOWeek(week: string | Date | number): Date {\n    if (typeof week === 'string' || typeof week === 'number') {\n      const weekNumber = parseInt(week.toString(), 10);\n      return isNaN(weekNumber) ? new Date() : this.fromISOWeekNumber(weekNumber);\n    }\n    return week;\n  }\n\n  private fromISOWeekNumber(weekNumber: number, year = new Date().getFullYear()): Date {\n    const refDate = new Date(Date.UTC(year, 0, 4)); // January 4th\n    const diffDays = (weekNumber - 1) * 7 - (refDate.getUTCDay() || 7) + 1;\n    const date = new Date(refDate);\n    date.setUTCDate(date.getUTCDate() + diffDays);\n    return date;\n  }\n\n  private toISOWeek(date: Date): number {\n    const currentDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));\n    currentDate.setUTCDate(currentDate.getUTCDate() + 4 - (currentDate.getUTCDay() || 7));\n    const firstDayOfYear = new Date(Date.UTC(currentDate.getUTCFullYear(), 0, 1));\n    return Math.ceil(((currentDate.getTime() - firstDayOfYear.getTime()) / 86400000 + 1) / 7);\n  }\n}\n"]}
+{"version":3,"file":"cat-datepicker.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Method, EventEmitter, Prop, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport weekSelectPlugin from 'flatpickr/dist/plugins/weekSelect/weekSelect';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getFormat } from './cat-datepicker.config';\nimport { getLocale } from './cat-datepicker.locale';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: 'date' | 'time' | 'datetime' | 'daterange' | 'week' = 'date';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    const input = this.input;\n    if (input) {\n      const locale = getLocale(i18n.getLocale());\n      const format = getFormat(i18n.getLocale(), this.mode);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const plugins = this.mode === 'week' ? [new (weekSelectPlugin as any)({})] : [];\n      this.pickr = flatpickr(input, {\n        locale,\n        plugins,\n        altInput: true,\n        prevArrow: '←',\n        nextArrow: '→',\n        dateFormat: this.dateFormat,\n        altFormat: format,\n        ariaDateFormat: format,\n        mode: this.mode === 'daterange' ? 'range' : 'single',\n        minDate: this.min,\n        maxDate: this.max,\n        enableTime: this.mode === 'time' || this.mode === 'datetime',\n        noCalendar: this.mode === 'time',\n        weekNumbers: true,\n        minuteIncrement: this.step,\n        onChange: (dates, dateStr, flatpickr) => {\n          if (this.mode === 'week') {\n            this.value = dates[0] ? flatpickr.config.getWeek(dates[0]).toString() : undefined;\n          } else {\n            this.value = dateStr;\n          }\n          this.catChange.emit(this.value);\n        }\n      });\n    }\n  }\n\n  /**\n   * Programmatically move focus to the datepicker. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this._input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the datepicker. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this._input?.doBlur();\n  }\n\n  render() {\n    return (\n      <cat-input\n        ref={el => (this._input = el)}\n        requiredMarker={this.requiredMarker}\n        horizontal={this.horizontal}\n        autoComplete={this.autoComplete}\n        clearable={this.clearable}\n        disabled={this.disabled}\n        hint={this.hint}\n        icon={this.icon}\n        iconRight={this.iconRight}\n        identifier={this.identifier}\n        label={this.label}\n        labelHidden={this.labelHidden}\n        name={this.name}\n        placeholder={this.placeholder}\n        textPrefix={this.textPrefix}\n        textSuffix={this.textSuffix}\n        readonly={this.readonly}\n        required={this.required}\n        value={this.value}\n        errors={this.errors}\n        errorUpdate={this.errorUpdate}\n        nativeAttributes={this.nativeAttributes}\n        onCatChange={e => {\n          e.stopPropagation();\n          this.pickr?.setDate(e.detail);\n          if (this.value !== (e.detail || undefined)) {\n            this.value = e.detail || undefined;\n            this.catChange.emit(this.value);\n          }\n        }}\n        onCatFocus={e => {\n          e.stopPropagation();\n          this.catFocus.emit(e.detail);\n        }}\n        onCatBlur={e => {\n          e.stopPropagation();\n          this.catBlur.emit(e.detail);\n        }}\n      ></cat-input>\n    );\n  }\n\n  private get dateFormat(): string {\n    if (this.mode === 'week') {\n      return 'W';\n    } else if (this.mode === 'time') {\n      return 'H:i';\n    } else {\n      return 'Z';\n    }\n  }\n}\n"]}