npm - @getflip/swirl-components - Versions diffs - 0.13.0 → 0.14.0 - Mend

@getflip/swirl-components 0.13.0 → 0.14.0

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.

Files changed (913) hide show

package/dist/collection/components/swirl-autocomplete/swirl-autocomplete.js CHANGED Viewed

@@ -1,16 +1,9 @@
 import { autoUpdate, computePosition, offset, } from "@floating-ui/dom";
-import { Component, Element, Event, h, Host, Listen, Prop, State, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { debounce } from "../../utils";
 export class SwirlAutocomplete {
   constructor() {
-    this.clearable = true;
-    this.clearButtonLabel = "Clear input";
-    this.generateSuggestions = async () => [];
-    this.menuLabel = "Suggestions";
-    this.active = false;
-    this.loading = false;
-    this.suggestions = [];
     this.onChange = debounce(async (event) => {
       this.value = event.detail;
       this.valueChange.emit(this.value);
@@ -49,6 +42,24 @@ export class SwirlAutocomplete {
         this.listboxEl.querySelector('[role="listbox"]').focus();
       }
     };
+    this.autoSelect = undefined;
+    this.clearable = true;
+    this.clearButtonLabel = "Clear input";
+    this.disabled = undefined;
+    this.generateSuggestions = async () => [];
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.maxLength = undefined;
+    this.menuLabel = "Suggestions";
+    this.mode = undefined;
+    this.required = undefined;
+    this.spellCheck = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.active = false;
+    this.loading = false;
+    this.position = undefined;
+    this.suggestions = [];
   }
   componentWillLoad() {
     const index = document.querySelectorAll("swirl-datepicker").length;
@@ -105,308 +116,315 @@ export class SwirlAutocomplete {
     const className = classnames("autocomplete", {
       "autocomplete--inactive": !this.active,
     });
-    return (h(Host, null,
-      h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown },
-        h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }),
-        h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
-            top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
-            left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-            width: `${((_c = this.inputEl) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) + 32}px`,
-          } },
-          this.loading && (h("div", { class: "autocomplete__spinner" },
-            h("swirl-spinner", null))),
-          this.suggestions.length > 0 && (h("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: [this.value] }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: this.value === suggestion.label, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.label })))))))));
+    return (h(Host, null, h("div", { class: className, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: this.value }), h("div", { class: "autocomplete__listbox-container", ref: (el) => (this.listboxContainerEl = el), style: {
+        top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+        left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+        width: `${((_c = this.inputEl) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) + 32}px`,
+      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: [this.value] }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: this.value === suggestion.label, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.label })))))))));
   }
   static get is() { return "swirl-autocomplete"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-autocomplete.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-autocomplete.css"]
-  }; }
-  static get properties() { return {
-    "autoSelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "auto-select",
-      "reflect": false
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "clearButtonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-autocomplete.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-autocomplete.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-select",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "clear-button-label",
-      "reflect": false,
-      "defaultValue": "\"Clear input\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "clearButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clear-button-label",
+        "reflect": false,
+        "defaultValue": "\"Clear input\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
       },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "generateSuggestions": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "(\n    currentValue: string\n  ) => Promise<SwirlAutocompleteSuggestion[]>",
-        "resolved": "(currentValue: string) => Promise<SwirlAutocompleteSuggestion[]>",
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "SwirlAutocompleteSuggestion": {
-            "location": "local"
+      "generateSuggestions": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "(\n    currentValue: string\n  ) => Promise<SwirlAutocompleteSuggestion[]>",
+          "resolved": "(currentValue: string) => Promise<SwirlAutocompleteSuggestion[]>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SwirlAutocompleteSuggestion": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-autocomplete/swirl-autocomplete.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "async () => []"
-    },
-    "inline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "inline",
-      "reflect": false
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "async () => []"
       },
-      "attribute": "invalid",
-      "reflect": false
-    },
-    "maxLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": false
       },
-      "attribute": "max-length",
-      "reflect": false
-    },
-    "menuLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-length",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "menuLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-label",
+        "reflect": false,
+        "defaultValue": "\"Suggestions\""
       },
-      "attribute": "menu-label",
-      "reflect": false,
-      "defaultValue": "\"Suggestions\""
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "SwirlTextInputMode",
-        "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-        "references": {
-          "SwirlTextInputMode": {
-            "location": "import",
-            "path": "../swirl-text-input/swirl-text-input"
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlTextInputMode",
+          "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "references": {
+            "SwirlTextInputMode": {
+              "location": "import",
+              "path": "../swirl-text-input/swirl-text-input"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mode",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false
-    },
-    "spellCheck": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
       },
-      "attribute": "spell-check",
-      "reflect": false
-    },
-    "swirlAriaDescribedby": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "spellCheck": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "spell-check",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "swirlAriaDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "swirl-aria-describedby",
+        "reflect": false
       },
-      "attribute": "swirl-aria-describedby",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "active": {},
-    "loading": {},
-    "position": {},
-    "suggestions": {}
-  }; }
-  static get events() { return [{
-      "method": "valueChange",
-      "name": "valueChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "active": {},
+      "loading": {},
+      "position": {},
+      "suggestions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onWindowClick",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onWindowClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }