@getflip/swirl-components 0.245.0 → 0.246.0

package/dist/collection/components/swirl-date-input/swirl-date-input.js

@@ -14,7 +14,6 @@ export class SwirlDateInput {
             const value = event.target.value;
             if (value === "") {
                 this.value = undefined;
-                this.valueChange.emit(undefined);
             }
             const newDate = parse(value, this.format, new Date());
             // First, escape any backslashes in the format string
@@ -30,7 +29,6 @@ export class SwirlDateInput {
             }
             const newValue = format(newDate, internalDateFormat);
             this.value = newValue;
-            this.valueChange.emit(newValue);
         };
         this.onInput = (event) => {
             this.onChange(event);
@@ -60,7 +58,6 @@ export class SwirlDateInput {
             const newDateValue = event.detail;
             const newValue = format(newDateValue, internalDateFormat);
             this.value = newValue;
-            this.valueChange.emit(newValue);
             this.setReadOnly(true);
             this.pickerPopover.close();
         };
@@ -105,6 +102,11 @@ export class SwirlDateInput {
     watchFormat() {
         this.setupMask();
     }
+    watchValue(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.valueChange.emit(newValue);
+        }
+    }
     focus() {
         setTimeout(() => {
             this.inputEl.focus();
@@ -146,7 +148,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'bcbd418fe0467ed1ca0440ffa5ce167b12ea703e' }, h("div", { key: 'e6ac9a33a6d32cb18fb932d71b3437a45ce15720', class: className }, h("input", { key: 'bdf41ad2373d3fbe612c2a3adf86b9403bf54020', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: 'b947576ce2847fbe26b1073eec2999f363920b93', swirlPopover: `popover-${this.id}` }, h("button", { key: '63c04a4720cc7f0227defe104364c698e8b8d815', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'bd49e731e2fd501ce77d9bd50114d859db3da61c', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'efa80e93beeec8e2785ecb606dd2775f6d605884', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'a02844a5305039dd728a037ab60986482ca928c0', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '4fecdc2c5c3c8867366412afb5bd291dd54c80a9' }, h("div", { key: '86985bdee20db680754d5c4ac43600d98c7925e6', class: className }, h("input", { key: 'c176c65c65304c05da96e75a439b2a0cd5c2f7d7', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '61deaa551a562cf9db853ac9f8d5c0c219df63c3', swirlPopover: `popover-${this.id}` }, h("button", { key: '6410e2ea408f1c31999acb4f0730ce8a1cf3d03e', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'f613cf3eee53f7f77326988526ac9b4cd4824b96', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '693df7dab5cbf40b292d2a1ef7f8380e106a45d4', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'c13127734a990e3cbb1c3c8831e9aec6398b40d7', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }
@@ -512,6 +514,9 @@ export class SwirlDateInput {
         return [{
                 "propName": "format",
                 "methodName": "watchFormat"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
             }];
     }
 }