@ptcwebops/ptcw-design 1.4.7 → 1.4.9

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

@@ -1,240 +1,247 @@
-import { h, Host } from '@stencil/core';
-export class PtcSearchField {
-  constructor() {
-    this.textValue = undefined;
-    this.placeholderLabel = undefined;
-    this.darkTheme = undefined;
-    this.elevation = 'small';
-    this.enableMobileClear = false;
-    this.styles = undefined;
-  }
-  textChangedHandler(event) {
-    this.valueChanged.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
-    });
-  }
-  buttonClickHandler(event) {
-    this.clicked.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
-    });
-  }
-  keyDownHandler(event) {
-    if (event.key == 'Enter') {
-      this.clicked.emit({
-        'sender': this,
-        'event': event,
-        'searchTerm': this.getSearchValue()
-      });
-    }
-    if (this.getSearchValue() && this.enableMobileClear) {
-    }
-  }
-  getSearchValue() {
-    let result = '';
-    let input = this.el.shadowRoot.querySelector('input');
-    if (input) {
-      result = input.value;
-    }
-    return result;
-  }
-  async clearSearchValue() {
-    this.textValue = "";
-    let input = this.el.shadowRoot.querySelector('input');
-    if (input) {
-      input.value = "";
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const clearIconColor = this.darkTheme ? "white" : "black";
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("input", { type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableMobileClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(e); } })), h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['dark']: this.darkTheme ? true : false,
-      [this.elevation]: true,
-      ['enable-clear']: this.enableMobileClear
-    };
-  }
-  static get is() { return "ptc-search-field"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-search-field.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-search-field.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "textValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text-value",
-        "reflect": false
-      },
-      "placeholderLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder-label",
-        "reflect": false
-      },
-      "darkTheme": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dark-theme",
-        "reflect": false
-      },
-      "elevation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "elevation",
-        "reflect": false,
-        "defaultValue": "'small'"
-      },
-      "enableMobileClear": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "enable-mobile-clear",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Injected CSS styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChanged",
-        "name": "valueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "clicked",
-        "name": "clicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "clearSearchValue": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { h, Host } from '@stencil/core';
+export class PtcSearchField {
+  constructor() {
+    this.textValue = undefined;
+    this.placeholderLabel = undefined;
+    this.darkTheme = undefined;
+    this.elevation = 'small';
+    this.enableClear = false;
+    this.styles = undefined;
+  }
+  textChangedHandler(event) {
+    this.valueChanged.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.getSearchValue()
+    });
+  }
+  buttonClickHandler(event) {
+    this.clicked.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.getSearchValue()
+    });
+  }
+  keyDownHandler(event) {
+    if (event.key == 'Enter') {
+      this.clicked.emit({
+        'sender': this,
+        'event': event,
+        'searchTerm': this.getSearchValue()
+      });
+    }
+    if (this.getSearchValue() && this.enableClear) {
+    }
+  }
+  keyUpHandler() {
+    if (!this.darkTheme) {
+      this.enableClear = !(this.getSearchValue() == "");
+    }
+  }
+  getSearchValue() {
+    let result = '';
+    let input = this.el.shadowRoot.querySelector('input');
+    if (input) {
+      result = input.value;
+    }
+    return result;
+  }
+  async clearSearchValue() {
+    this.textValue = "";
+    let input = this.el.shadowRoot.querySelector('input');
+    ;
+    if (input) {
+      input.value = "";
+      this.enableClear = false;
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const clearIconColor = this.darkTheme ? "white" : "black";
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: 'input-wrap' }, h("input", { type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(e); } }))), h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['dark']: this.darkTheme ? true : false,
+      [this.elevation]: true,
+      ['enable-clear']: this.enableClear
+    };
+  }
+  static get is() { return "ptc-search-field"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-search-field.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-search-field.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "textValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-value",
+        "reflect": false
+      },
+      "placeholderLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder-label",
+        "reflect": false
+      },
+      "darkTheme": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dark-theme",
+        "reflect": false
+      },
+      "elevation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "elevation",
+        "reflect": false,
+        "defaultValue": "'small'"
+      },
+      "enableClear": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "enable-clear",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "clicked",
+        "name": "clicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clearSearchValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}