@sankhyalabs/ezui 1.1.8 → 1.1.9

package/dist/collection/components/ez-label-chip/ez-label-chip.js

@@ -1,276 +1,276 @@
-import { Component, Prop, h, Method, Watch, Event } from '@stencil/core';
-export class EzLabelChip {
-  constructor() {
-    /**
-     * Deixa o componente disponível ou não para seleção.
-     */
-    this.enabled = true;
-    /**
-     * Indica se o componente terá a opção de ser removido.
-     */
-    this.removable = false;
-    /**
-     * Indica se o componente está ou não ativado.
-     */
-    this.value = false;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._labelElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._labelElem.blur();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleClick(ev) {
-    const target = ev.target;
-    if (target.assignedSlot === null && !target.classList.contains('label__icon')) {
-      this.valueChange.emit(this.value);
-      this.swichState();
-    }
-  }
-  swichState() {
-    if (this.enabled) {
-      this.value = !this.value;
-    }
-  }
-  reflectChange() {
-    if (this._divElem) {
-      this._divElem.classList.remove('label__container--active');
-      this._divElem.classList.remove('label__container');
-      if (this.value) {
-        this._divElem.classList.add('label__container--active');
-      }
-      else {
-        this._divElem.classList.add('label__container');
-      }
-    }
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (content) {
-      content.style.position = "absolute";
-      content.style.display = "flex";
-      content.style.alignItems = "center";
-      content.style.justifyContent = "center";
-      content.style.overflow = "hidden";
-      content.style.top = "0px";
-      content.style.width = "var(--lc__icon--width)";
-      content.style.height = "var(--lc--height)";
-      if (slot.name == "leftIcon") {
-        content.style.left = "0px";
-        this._labelElem.classList.add('padding-left--small');
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.right = "0px";
-        if (this.removable) {
-          this._iconElement.classList.add('padding-right--small');
-        }
-        else {
-          this._labelElem.classList.add('padding-right--small');
-        }
-      }
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    if (this._divElem) {
-      if (this.value) {
-        this._divElem.classList.add('label__container--active');
-      }
-      else {
-        this.handleEnabledState();
-      }
-    }
-  }
-  handleEnabledState() {
-    this._divElem.classList.remove('label__container--disabled');
-    if (!this.enabled) {
-      this._divElem.classList.remove('label__container');
-      this._divElem.classList.add('label__container--disabled');
-      if (this._labelElem) {
-        this._labelElem.style.cursor = 'default';
-      }
-    }
-  }
-  render() {
-    return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el },
-      h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      h("label", { class: this.removable ? "padding-right--small" : " ", ref: (el) => this._labelElem = el }, this.label),
-      this.removable ?
-        h("ez-icon", { class: "label__icon align--middle padding-horizontal--medium", onClick: () => { this.removeChip.emit(); }, ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#close", size: "x-small" })
-        : null,
-      h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-  }
-  static get is() { return "ez-label-chip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-label-chip.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-label-chip.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo exibido no componente."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "enabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Deixa o componente dispon\u00EDvel ou n\u00E3o para sele\u00E7\u00E3o."
-      },
-      "attribute": "enabled",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "removable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indica se o componente ter\u00E1 a op\u00E7\u00E3o de ser removido."
-      },
-      "attribute": "removable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indica se o componente est\u00E1 ou n\u00E3o ativado."
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "removeChip",
-      "name": "removeChip",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ClickOptions",
-        "resolved": "ClickOptions",
-        "references": {
-          "ClickOptions": {
-            "location": "import",
-            "path": "puppeteer"
-          }
-        }
-      }
-    }, {
-      "method": "valueChange",
-      "name": "valueChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Faz o foco no componente de input",
-        "tags": []
-      }
-    },
-    "setBlur": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Remove o foco no componente de input",
-        "tags": []
-      }
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "reflectChange"
-    }, {
-      "propName": "enabled",
-      "methodName": "handleEnabledState"
-    }]; }
-}
+import { Component, Prop, h, Method, Watch, Event } from '@stencil/core';
+export class EzLabelChip {
+  constructor() {
+    /**
+     * Deixa o componente disponível ou não para seleção.
+     */
+    this.enabled = true;
+    /**
+     * Indica se o componente terá a opção de ser removido.
+     */
+    this.removable = false;
+    /**
+     * Indica se o componente está ou não ativado.
+     */
+    this.value = false;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._labelElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._labelElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleClick(ev) {
+    const target = ev.target;
+    if (target.assignedSlot === null && !target.classList.contains('label__icon')) {
+      this.valueChange.emit(this.value);
+      this.swichState();
+    }
+  }
+  swichState() {
+    if (this.enabled) {
+      this.value = !this.value;
+    }
+  }
+  reflectChange() {
+    if (this._divElem) {
+      this._divElem.classList.remove('label__container--active');
+      this._divElem.classList.remove('label__container');
+      if (this.value) {
+        this._divElem.classList.add('label__container--active');
+      }
+      else {
+        this._divElem.classList.add('label__container');
+      }
+    }
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--lc__icon--width)";
+      content.style.height = "var(--lc--height)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        this._labelElem.classList.add('padding-left--small');
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        if (this.removable) {
+          this._iconElement.classList.add('padding-right--small');
+        }
+        else {
+          this._labelElem.classList.add('padding-right--small');
+        }
+      }
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    if (this._divElem) {
+      if (this.value) {
+        this._divElem.classList.add('label__container--active');
+      }
+      else {
+        this.handleEnabledState();
+      }
+    }
+  }
+  handleEnabledState() {
+    this._divElem.classList.remove('label__container--disabled');
+    if (!this.enabled) {
+      this._divElem.classList.remove('label__container');
+      this._divElem.classList.add('label__container--disabled');
+      if (this._labelElem) {
+        this._labelElem.style.cursor = 'default';
+      }
+    }
+  }
+  render() {
+    return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el },
+      h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+      h("label", { class: this.removable ? "padding-right--small" : " ", ref: (el) => this._labelElem = el }, this.label),
+      this.removable ?
+        h("ez-icon", { class: "label__icon align--middle padding-horizontal--medium", onClick: () => { this.removeChip.emit(); }, ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#close", size: "x-small" })
+        : null,
+      h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+  }
+  static get is() { return "ez-label-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-label-chip.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-label-chip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o t\u00EDtulo exibido no componente."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o componente dispon\u00EDvel ou n\u00E3o para sele\u00E7\u00E3o."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indica se o componente ter\u00E1 a op\u00E7\u00E3o de ser removido."
+      },
+      "attribute": "removable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indica se o componente est\u00E1 ou n\u00E3o ativado."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "removeChip",
+      "name": "removeChip",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ClickOptions",
+        "resolved": "ClickOptions",
+        "references": {
+          "ClickOptions": {
+            "location": "import",
+            "path": "puppeteer"
+          }
+        }
+      }
+    }, {
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Faz o foco no componente de input",
+        "tags": []
+      }
+    },
+    "setBlur": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Remove o foco no componente de input",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "reflectChange"
+    }, {
+      "propName": "enabled",
+      "methodName": "handleEnabledState"
+    }]; }
+}