@haiilo/catalyst 6.3.0 → 6.3.1

package/dist/cjs/cat-alert_26.cjs.entry.js

@@ -4144,16 +4144,16 @@ const CatDatepickerFlat = class {
       this.catChange.emit(undefined);
     }
   }
-  onDisabledChanged(value) {
-    this.pickr?.set('clickOpens', !value && !this.readonly);
-  }
-  onReadonlyChanged(value) {
-    this.pickr?.set('clickOpens', !value && !this.disabled);
+  onDisabledChanged() {
+    // Dynamically changing 'disabled' value is not working due to a bug in the
+    // library. We thus need to fully recreate the date picker after the value
+    // has been updated.
+    this.pickr?.destroy();
+    this.pickr = undefined;
+    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
   }
   componentDidLoad() {
-    if (this.input) {
-      this.pickr = this.initDatepicker(this.input);
-    }
+    this.pickr = this.initDatepicker(this.input);
   }
   /**
    * Programmatically move focus to the datepicker. Use this method instead of
@@ -4185,6 +4185,9 @@ const CatDatepickerFlat = class {
       } }));
   }
   initDatepicker(input) {
+    if (this.disabled || this.readonly || !input) {
+      return;
+    }
     return flatpickr(input, getConfig({
       locale: getLocale(of.catI18nRegistry.getLocale()),
       format: getFormat(of.catI18nRegistry.getLocale(), this.mode),
@@ -4200,7 +4203,7 @@ const CatDatepickerFlat = class {
   static get watchers() { return {
     "value": ["onValueChanged"],
     "disabled": ["onDisabledChanged"],
-    "readonly": ["onReadonlyChanged"]
+    "readonly": ["onDisabledChanged"]
   }; }
 };
 CatDatepickerFlat.style = catDatepickerCss;
@@ -4229,18 +4232,16 @@ const CatDatepickerInline = class {
       this.catChange.emit(undefined);
     }
   }
-  onDisabledChanged(value) {
+  onDisabledChanged() {
     // Dynamically unsetting 'enabled' value to undefined is not working due to
-    // a bug in the library. We thus need to fully recreate the date picker.
+    // a bug in the library. We thus need to fully recreate the date picker
+    // after the value has been updated.
     this.pickr?.destroy();
-    if (this.input) {
-      this.pickr = this.initDatepicker(this.input, value);
-    }
+    this.pickr = undefined;
+    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
   }
   componentDidLoad() {
-    if (this.input) {
-      this.pickr = this.initDatepicker(this.input, this.disabled);
-    }
+    this.pickr = this.initDatepicker(this.input);
   }
   render() {
     return (index.h(index.Host, null, index.h("div", { tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
@@ -4249,7 +4250,10 @@ const CatDatepickerInline = class {
         'datepicker-readonly': this.readonly
       } }, index.h("input", { ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
   }
-  initDatepicker(input, disabled) {
+  initDatepicker(input) {
+    if (!input) {
+      return;
+    }
     return flatpickr(input, getConfig({
       locale: getLocale(of.catI18nRegistry.getLocale()),
       format: getFormat(of.catI18nRegistry.getLocale(), this.mode),
@@ -4257,17 +4261,18 @@ const CatDatepickerInline = class {
       min: this.min,
       max: this.max,
       step: this.step,
-      disabled,
+      disabled: this.disabled,
       readonly: this.readonly,
       applyChange: value => (this.value = value)
     }, {
-      ...(disabled ? { enable: [] } : {}),
+      ...(this.disabled ? { enable: [] } : {}),
       inline: true
     }));
   }
   static get watchers() { return {
     "value": ["onValueChanged"],
-    "disabled": ["onDisabledChanged"]
+    "disabled": ["onDisabledChanged"],
+    "readonly": ["onDisabledChanged"]
   }; }
 };
 CatDatepickerInline.style = catDatepickerInlineCss;