@haiilo/catalyst 10.19.1 → 10.19.3

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

@@ -13329,6 +13329,7 @@ const CatTime = class {
         this.hasSlottedHint = false;
         this.selectionTime = null;
         this.isAm = true;
+        this.valueChangedBySelection = false;
         this.requiredMarker = 'optional';
         this.horizontal = false;
         this.autoComplete = undefined;
@@ -13365,7 +13366,17 @@ const CatTime = class {
             this.reclamp('max', max);
         }
     }
+    onValueChanged(value, oldValue) {
+        if (this.valueChangedBySelection) {
+            this.valueChangedBySelection = false;
+        }
+        else if (value !== oldValue) {
+            this.set12hFormat();
+            this.syncValue(value);
+        }
+    }
     componentWillLoad() {
+        this.set12hFormat();
         this.syncValue(this.value ?? '');
     }
     componentWillRender() {
@@ -13397,6 +13408,7 @@ const CatTime = class {
      */
     async select(date) {
         const oldValue = this.value;
+        let newValue = this.value;
         if (!date) {
             this.selectionTime = null;
             this.value = undefined;
@@ -13405,16 +13417,21 @@ const CatTime = class {
             const time = clampTime(this.min ?? null, date, this.max ?? null);
             this.isAm = this.format(time).toLowerCase().includes('am');
             this.selectionTime = time;
-            this.value = formatIso(time);
+            newValue = formatIso(time);
         }
         // we need to set the input explicitly to sync the input even without a
         // rerender (if the value is not changed)
         if (this.input) {
             this.input.value = this.format(this.selectionTime, false);
         }
-        if (oldValue !== this.value) {
+        if (oldValue !== newValue) {
+            this.valueChangedBySelection = true;
+            this.value = newValue;
             this.catChange.emit(this.value);
         }
+        else {
+            this.valueChangedBySelection = false;
+        }
     }
     /**
      * Programmatically move focus to the input. Use this method instead of
@@ -13440,14 +13457,14 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: 'e9bfaeee8aa39aa58ac287afeaed1a2fc39d7b83' }, index.h("cat-input", { key: '1e200e6041b06a0859e392cfc6b6b03668b3eb35', class: "cat-time-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.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: 'e91e3e12272c24858a71b485e00e54cf00d7386f', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '2449ea042497293868bcc767b1626070b3a1dcec', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '3bab583a7629d01350fbd9e54d3fe1f113e0b372', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '8340d31e70e30ebe1d020f456b3a7bc5bed6b998', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'e6bb50abe2c3296cee7c3d5c02a6cef7c69f8678', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: 'e79b7f58ffdc4d356e94f3e96afb6727d3e9be26', slot: "addon", placement: this.placement }, index.h("cat-button", { key: 'd6bd905d7760e0ae7e9ab8c23e87f7c926769aa9', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'c2ae49020a1e8cafedd27b8a7e061e63dbb4c6d2', slot: "content", class: "cat-nav" }, index.h("ul", { key: 'b918672be1b65ca3a1c2daa239a196d4117b52f7' }, this.timeArray().map(time => {
+        return (index.h(index.Host, { key: '257e8034002a6c0cfd53d2d8b99d32953ecd229a' }, index.h("cat-input", { key: 'b0572967e133b2b099e9010f6e9ce67168f9592c', class: "cat-time-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.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '5b21ff245c6f582803756c7b5177d735a1e360fb', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: 'e5dfa72756d8698f1e0bfc55e45fb0791c272157', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'ea2ac13fb8bddf7168448d7f3f50bd2703391393', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '50cedc1bf604b00ba062dff0881cad36f3eb62d3', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: '238e1a4005a877ab8dd0fa2d23d2cafdf48dab38', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '42367ea0ef47e851555ca3aae23d51169069158b', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '8cd18784f5f4077b66dd0f5e134ff6fae83ce79b', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'e89d88df8d6612eb48bb211954ef4b924f9e2d15', slot: "content", class: "cat-nav" }, index.h("ul", { key: '631bcc9f06b20e71fd175951671c66abaafaf5c0' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (index.h("li", null, index.h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (index.h("span", { key: '817f2b58417911affc39ce6977160998c39ebf71', slot: "hint" }, index.h("slot", { key: 'a1ffdd541103064abf49311801088fe15d5ed88d', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (index.h("span", { key: 'f2d0bf13097fac363af4a309ac69b77114b01168', slot: "hint" }, index.h("slot", { key: 'e44ce224148d9bf82803a4eff9bbed89fbb04dc2', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13469,6 +13486,12 @@ const CatTime = class {
             ? new Date(2000, 5, 1, hh, mm, 0)
             : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0));
     }
+    set12hFormat() {
+        const [, hh] = this.value?.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
+        if (this.locale.timeFormat === '12') {
+            this.isAm = hh === 0 || hh < 12;
+        }
+    }
     toggleAm() {
         if (this.selectionTime) {
             this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));
@@ -13505,7 +13528,8 @@ const CatTime = class {
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "min": ["onMinChanged"],
-        "max": ["onMaxChanged"]
+        "max": ["onMaxChanged"],
+        "value": ["onValueChanged"]
     }; }
 };
 CatTime.style = CatTimeStyle0;