@getflip/swirl-components 0.50.1 → 0.50.2

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-05-05T11:11:43",
+  "timestamp": "2023-05-05T12:10:55",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.0.0",

package/dist/cjs/swirl-date-input.cjs.entry.js

@@ -6316,7 +6316,7 @@ const SwirlDateInput = class {
     this.iconSize = 24;
   }
   componentWillLoad() {
-    const index = document.querySelectorAll("swirl-date-input").length;
+    const index = Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);
     this.id = `swirl-date-input-${index}`;
   }
   componentDidLoad() {
@@ -6362,8 +6362,9 @@ const SwirlDateInput = class {
     const className = index.classnames("date-input", {
       "date-input--inline": this.inline,
     });
-    return (index$1.h(index$1.Host, null, index$1.h("div", { class: className }, index$1.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), index$1.h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, type: "button" }, index$1.h("swirl-icon-today", { size: this.iconSize }))), !this.disabled && (index$1.h("swirl-popover", { animation: "scale-in-y", label: this.datePickerLabel, placement: "bottom-end", popoverId: "popover", ref: (el) => (this.pickerPopover = el), trigger: `${this.id}-trigger` }, index$1.h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    return (index$1.h(index$1.Host, null, index$1.h("div", { class: className }, index$1.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), index$1.h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, type: "button" }, index$1.h("swirl-icon-today", { size: this.iconSize }))), !this.disabled && (index$1.h("swirl-popover", { animation: "scale-in-y", label: this.datePickerLabel, placement: "bottom-end", popoverId: `popover-${this.id}`, ref: (el) => (this.pickerPopover = el), trigger: `${this.id}-trigger` }, index$1.h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
+  get el() { return index$1.getElement(this); }
   static get watchers() { return {
     "format": ["watchFormat"]
   }; }