@haiilo/catalyst 6.2.2 → 6.2.3

package/dist/components/cat-datepicker.js

@@ -2765,39 +2765,22 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
   get input() {
     return this._input?.shadowRoot?.querySelector('input') ?? undefined;
   }
+  onValueChanged(value) {
+    if (value) {
+      this.pickr?.setDate(value, false);
+      this.catChange.emit(value);
+    }
+    else {
+      this.pickr?.clear(false);
+      this.catChange.emit(undefined);
+    }
+  }
+  onDisabledChaned(value) {
+    this.pickr?.set('clickOpens', !value);
+  }
   componentDidLoad() {
-    const input = this.input;
-    if (input) {
-      const locale = getLocale(catI18nRegistry.getLocale());
-      const format = getFormat(catI18nRegistry.getLocale(), this.mode);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const plugins = this.mode === 'week' ? [new weekSelect({})] : [];
-      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);
-        }
-      });
+    if (this.input) {
+      this.pickr = this.initDatepicker(this.input);
     }
   }
   /**
@@ -2820,11 +2803,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
   render() {
     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);
-        }
+        this.value = e.detail || undefined;
       }, onCatFocus: e => {
         e.stopPropagation();
         this.catFocus.emit(e.detail);
@@ -2833,6 +2812,38 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
         this.catBlur.emit(e.detail);
       } }));
   }
+  initDatepicker(input) {
+    const locale = getLocale(catI18nRegistry.getLocale());
+    const format = getFormat(catI18nRegistry.getLocale(), this.mode);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const plugins = this.mode === 'week' ? [new weekSelect({})] : [];
+    return 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,
+      clickOpens: !this.disabled,
+      onChange: (dates, dateStr, flatpickr) => {
+        if (this.mode === 'week') {
+          this.value = dates[0] ? flatpickr.config.getWeek(dates[0]).toString() : undefined;
+        }
+        else {
+          this.value = dateStr || undefined;
+        }
+      }
+    });
+  }
   get dateFormat() {
     if (this.mode === 'week') {
       return 'W';
@@ -2844,6 +2855,10 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
       return 'Z';
     }
   }
+  static get watchers() { return {
+    "value": ["onValueChanged"],
+    "disabled": ["onDisabledChaned"]
+  }; }
   static get style() { return catDatepickerCss; }
 }, [1, "cat-datepicker", {
     "requiredMarker": [1, "required-marker"],