@getflip/swirl-components 0.413.1 → 0.413.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-11-26T08:20:14",
2
+ "timestamp": "2025-11-28T10:51:01",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.35.0",
@@ -189,6 +189,13 @@ const SwirlDateInput = class {
189
189
  return newString;
190
190
  },
191
191
  });
192
+ // Listen for when the mask is cleared to reset the value
193
+ this.mask.on("accept", () => {
194
+ if (this.mask.value === "") {
195
+ this.value = "";
196
+ this.valueChange.emit("");
197
+ }
198
+ });
192
199
  this.updateValue();
193
200
  }
194
201
  updateValue() {
@@ -215,7 +222,7 @@ const SwirlDateInput = class {
215
222
  const className = index$2.classnames("date-input", {
216
223
  "date-input--inline": this.inline,
217
224
  });
218
- return (index.h(index.Host, { key: '6aa51d90858ac6c8859a87faf8deb5763079ec64' }, index.h("div", { key: 'e1e14f023fdd49bec8b2f4ce6ade2eba141fdb4b', class: className }, index.h("input", { key: '6c128e01c25dbd186dd493907f40a15e4fca3e6b', "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.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (index.h("swirl-popover-trigger", { key: 'bb75ffcb88e00ef6ff2e097b7dfe64d0477425ab', swirlPopover: `popover-${this.id}` }, index.h("button", { key: '1114e3727ac36d55b3f4a5c70cb799fd54e2d2e6', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: 'a3c9866bc901772f0b15cc21f67f66f641241796', size: this.iconSize }))))), !(this.disabled || this.readonly) && (index.h("swirl-popover", { key: '7c2404322d5948db2439f9abca6266700141d586', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { key: '59132a95ef4adf202ec0cb2e6d798941299d24e0', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
225
+ return (index.h(index.Host, { key: '77aaf0846db36ae3c53aedfe95f6b8b1f1760572' }, index.h("div", { key: '346e4f7f711d8fa13203083e2812d24a2f6c5471', class: className }, index.h("input", { key: '1a851268aa0479639893a6975be78713353c8e8f', "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.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (index.h("swirl-popover-trigger", { key: '8e5da94d520dcc92deebfe8c9e17a9d7c4dddb81', swirlPopover: `popover-${this.id}` }, index.h("button", { key: 'ae641758c00ff228020ad06959fbaa58f51f3b06', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: 'a19d5137d01c3a7381109eafeafc4d4a1529ad4e', size: this.iconSize }))))), !(this.disabled || this.readonly) && (index.h("swirl-popover", { key: 'dac1e2a9d8190f24e532944b6aabd91c484982c2', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { key: '0d26e6a36dbc28b0c877f34f1ff5b993faa01fa6', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
219
226
  }
220
227
  get el() { return index.getElement(this); }
221
228
  static get watchers() { return {
@@ -182,6 +182,13 @@ export class SwirlDateInput {
182
182
  return newString;
183
183
  },
184
184
  });
185
+ // Listen for when the mask is cleared to reset the value
186
+ this.mask.on("accept", () => {
187
+ if (this.mask.value === "") {
188
+ this.value = "";
189
+ this.valueChange.emit("");
190
+ }
191
+ });
185
192
  this.updateValue();
186
193
  }
187
194
  updateValue() {
@@ -208,7 +215,7 @@ export class SwirlDateInput {
208
215
  const className = classnames("date-input", {
209
216
  "date-input--inline": this.inline,
210
217
  });
211
- return (h(Host, { key: '6aa51d90858ac6c8859a87faf8deb5763079ec64' }, h("div", { key: 'e1e14f023fdd49bec8b2f4ce6ade2eba141fdb4b', class: className }, h("input", { key: '6c128e01c25dbd186dd493907f40a15e4fca3e6b', "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.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: 'bb75ffcb88e00ef6ff2e097b7dfe64d0477425ab', swirlPopover: `popover-${this.id}` }, h("button", { key: '1114e3727ac36d55b3f4a5c70cb799fd54e2d2e6', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a3c9866bc901772f0b15cc21f67f66f641241796', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '7c2404322d5948db2439f9abca6266700141d586', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '59132a95ef4adf202ec0cb2e6d798941299d24e0', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
218
+ return (h(Host, { key: '77aaf0846db36ae3c53aedfe95f6b8b1f1760572' }, h("div", { key: '346e4f7f711d8fa13203083e2812d24a2f6c5471', class: className }, h("input", { key: '1a851268aa0479639893a6975be78713353c8e8f', "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.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '8e5da94d520dcc92deebfe8c9e17a9d7c4dddb81', swirlPopover: `popover-${this.id}` }, h("button", { key: 'ae641758c00ff228020ad06959fbaa58f51f3b06', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a19d5137d01c3a7381109eafeafc4d4a1529ad4e', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: 'dac1e2a9d8190f24e532944b6aabd91c484982c2', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '0d26e6a36dbc28b0c877f34f1ff5b993faa01fa6', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
212
219
  }
213
220
  static get is() { return "swirl-date-input"; }
214
221
  static get encapsulation() { return "scoped"; }