@haiilo/catalyst 10.19.2 → 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;
@@ -13366,11 +13367,16 @@ const CatTime = class {
         }
     }
     onValueChanged(value, oldValue) {
-        if (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() {
@@ -13402,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;
@@ -13410,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
@@ -13445,14 +13457,14 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: 'e8e1ce6233982a53633893f6821665511ec2a09c' }, index.h("cat-input", { key: 'cdb8318f5cf1aadea614ea92f12fcbf4b9f9bbd0', 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: 'c0a0ab5e6c869c7e152dbd0efe518410c390e450', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '3136de4f0a814706c3e17d2ebc7994b9f300b0e3', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '605627b2b58ae30426a5eebb96392d27c119a1c5', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '4b68598ab85c1c5673369bcd30a3b1991694f696', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: '9da13a2d77af3c2b973f542e863f9ca2f4d56d3d', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '806e88cdaeecf208bfc7a440600a51cc53b0b426', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '866209cdca6617c440d5fb4fa91504cd09786c8a', 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: '704f9854c55c3d8f84f37474fa05326d8390898d', slot: "content", class: "cat-nav" }, index.h("ul", { key: '5039ca6ce902e6796bda9c16e7f7101c8a0fd72f' }, 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: '034daef728e22d9bf13514d5b5a6597355af5960', slot: "hint" }, index.h("slot", { key: '56bd873c145f9f582873355b0a72522a9476bef3', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (index.h("span", { key: 'f2d0bf13097fac363af4a309ac69b77114b01168', slot: "hint" }, index.h("slot", { key: 'e44ce224148d9bf82803a4eff9bbed89fbb04dc2', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13474,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));