Static Site

Static/package/dist/collection/components/search-field/search-field.js

@@ -0,0 +1,190 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+export class SearchField {
+  constructor() {
+    this.handleInput = () => {
+      const query = this.inputElement.value;
+      this.value = query; // update the value property when input changes
+      this.ifxInput.emit(this.value);
+    };
+    this.handleDelete = () => {
+      this.inputElement.value = '';
+      this.value = "";
+      this.ifxInput.emit(null);
+    };
+    this.value = '';
+    this.insideDropdown = false;
+    this.showDeleteIcon = false;
+    this.showDeleteIconInternalState = false;
+    this.disabled = false;
+    this.size = 'l';
+    this.isFocused = false;
+  }
+  handleOutsideClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this.inputElement)) {
+      this.isFocused = false;
+    }
+  }
+  valueWatcher(newValue) {
+    if (newValue !== this.inputElement.value) {
+      this.inputElement.value = newValue;
+    }
+  }
+  focusInput() {
+    this.inputElement.focus();
+    this.isFocused = true;
+  }
+  componentWillUpdate() {
+    if (this.value !== "") {
+      this.showDeleteIconInternalState = true;
+    }
+    else
+      this.showDeleteIconInternalState = false;
+  }
+  render() {
+    return (h("div", { "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { icon: "search-16", class: "search-icon" }), h("input", { ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: "Search...", disabled: this.disabled, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+  }
+  getSizeClass() {
+    return `${this.size}` === "s"
+      ? "search-field__wrapper-s"
+      : "";
+  }
+  getWrapperClassNames() {
+    return classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
+  }
+  static get is() { return "ifx-search-field"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["search-field.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["search-field.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "showDeleteIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-delete-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'l'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "insideDropdown": {},
+      "showDeleteIconInternalState": {},
+      "isFocused": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxInput",
+        "name": "ifxInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "String",
+          "resolved": "String",
+          "references": {
+            "String": {
+              "location": "global",
+              "id": "global::String"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "mousedown",
+        "method": "handleOutsideClick",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=search-field.js.map