@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/collection/components/ez-chip/ez-chip.css

@@ -0,0 +1,163 @@
+:host {
+  /* dimensions */
+  /*@doc Define a altura do chip.*/
+  --ez-label-chip--height: 30px;
+
+  /* Label */
+  /*@doc Define o tamanho do label.*/
+  --ez-label-chip__label--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do label.*/
+  --ez-label-chip__label--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label.*/
+  --ez-label-chip__label--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define o espaçamento do label.*/
+  --ez-label-chip__label--space--medium: var(--space--medium, 12px);
+  /*@doc Define a cor do texto.*/
+  --ez-label-chip__label--title--primary: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do ícone.*/
+  --ez-label-chip__label--text--primary: var(--text--primary, #626e82);
+
+  /* Label Container */
+  /*@doc Define o raio da borda do container do chip.*/
+  --ez-label-chip__label__container--border-radius: var(--border--radius-large, 24px);
+  /*@doc Define o estilo da borda do container.*/
+  --ez-label-chip__label__container--border: 1px solid;
+  /*@doc Define a cor da borda do container.*/
+  --ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
+  /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
+  --ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
+  /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
+  --ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor de fundo do container quando ativo.*/
+  --ez-label-chip__label__container--background-color: var(--color--primary-300);
+  /*@doc Define a cor da borda do container quando ativo.*/
+  --ez-label-chip__label__container--border-color: #0085610F;
+  /*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
+  --ez-label-chip__label__container--default--border-color--active: var(--color--primary, #007a5a);
+  /*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
+  --ez-label-chip__label__container--default--background-color--hover: var(--color--primary-300, #f2faf8);
+  /*@doc Define a cor do texto quando o cursor está sobre ele.*/
+  --ez-label-chip__label__container--default--color--hover: var(--color--primary, #f2faf8);
+  /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
+  --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor da borda quando o componente está ativo.*/
+  --ez-label-chip__label__container--default--border-color--active: var(--color--primary);
+}
+
+.lbl {
+  /*private*/
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  /*public*/
+  color: var(--ez-label-chip__label--title--primary);
+  height: var(--ez-label-chip--height);
+  font-family: var(--ez-label-chip__label--font-family);
+  font-size: var(--ez-label-chip__label--font-size);
+  font-weight: var(--ez-label-chip__label--font-weight);
+}
+
+.lbl--active {
+  /*public*/
+  color: var(--ez-label-chip__label__container--default--color--hover);
+}
+
+.lbl--disabled {
+  /*public*/
+  color: var(--ez-label-chip__label__container--text--disabled);
+}
+
+.label__container {
+  /*private*/
+  cursor: pointer;
+  width: max-content;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  background-color: #FFFFFF;
+  /*public*/
+  color: var(--ez-label-chip__label--text--primary);
+  fill: var(--ez-label-chip__label--text--primary);
+  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+  border: var(--ez-label-chip__label__container--border);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  border-color: var(--ez-label-chip__label__container--border-color-strokes);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
+  outline-color: var(--ez-label-chip__label__container--default--border-color--active);
+}
+
+.label__content {
+  /*private*/
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+}
+
+.label__container--disabled {
+  cursor: default;
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  fill: var(--ez-label-chip__label__container--text--disabled);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+}
+
+.label__container--active {
+  border-color: var(--ez-label-chip__label__container--default--background-color--hover);
+  background-color: var(--ez-label-chip__label__container--default--background-color--hover);
+  color: var(--ez-label-chip__label__container--default--color--hover);
+  fill: var(--ez-label-chip__label__container--default--color--hover);
+  --ez-icon--color: var(--ez-label-chip__label__container--default--color--hover);
+}
+
+.label__container:hover {
+  border-color: var(--ez-label-chip__label__container--default--border-color--active);
+}
+
+.label__container:focus {
+  outline: var(--border--medium) var(--ez-label-chip__label__container--default--border-color--active);
+}
+
+.label__container--disabled:hover {
+  cursor: default;
+  border: var(--ez-label-chip__label__container--border);
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  fill: var(--ez-label-chip__label__container--text--disabled);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+}
+
+.label__content__icon {
+  display: flex;
+  cursor: pointer;
+  color: var(--ez-label-chip__label--text--primary);
+  fill: var(--ez-label-chip__label--text--primary);
+  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+}
+
+.label__container--row-reverse{
+ flex-direction: row-reverse;
+}
+
+.label__container .btn-close {
+  padding: 0px 0px 0px 8px;
+}
+
+.label__container--row-reverse .btn-close{
+  padding: 0px 8px 0px 0px;
+ }
+
+
+.cursor-disable{
+  cursor: default;
+}
+
+ez-icon {
+  --ez-icon--color: inherit;
+}

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

@@ -0,0 +1,312 @@
+import { h } from "@stencil/core";
+import { ElementIDUtils } from '@sankhyalabs/core';
+export class EzChip {
+  constructor() {
+    this.label = undefined;
+    this.enabled = true;
+    this.removePosition = undefined;
+    this.mode = undefined;
+    this.value = false;
+    this.showNativeTooltip = true;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Aplica o foco no ez-chip.
+   */
+  async setFocus() {
+    this._containerElem.focus();
+  }
+  /**
+   * Remove o foco do ez-chip.
+   */
+  async setBlur() {
+    this._containerElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
+  }
+  handleValueChange() {
+    this.swichState();
+    this.valueChange.emit(this.value);
+  }
+  handleClick(ev) {
+    const target = ev.target;
+    if (!this.enabled)
+      return;
+    if (this.mode === "action")
+      return this.actionClick.emit();
+    if (target.tagName.toLowerCase() !== "ez-icon")
+      return this.handleValueChange();
+    if (target.classList.contains("btn-close"))
+      return this.removeChip.emit();
+  }
+  swichState() {
+    if (this.enabled) {
+      this.value = !this.value;
+    }
+  }
+  formatLabel() {
+    if (this.label.length > ChipSize.CHAR_LIMIT) {
+      return this.label.substring(0, ChipSize.CHAR_LIMIT) + "...";
+    }
+    return this.label;
+  }
+  observeValue() {
+    (this.value && this.mode !== "action") ? this._containerElem.classList.add("label__container--active") : this._containerElem.classList.remove("label__container--active");
+  }
+  observeEnabled() {
+    if (this.enabled) {
+      this._containerElem.classList.remove("label__container--disabled");
+      this._labelElem.classList.remove("lbl--disabled");
+      this._labelElem.classList.remove("cursor-disable");
+    }
+    else {
+      this._containerElem.classList.add("label__container--disabled");
+      this._labelElem.classList.add("lbl--disabled");
+      this._labelElem.classList.add("cursor-disable");
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'ezChip');
+    }
+    if (this._containerElem) {
+      this.observeValue();
+      this.observeEnabled();
+      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
+    }
+  }
+  render() {
+    const labelTitle = this.showNativeTooltip ? this.label : undefined;
+    return (h("button", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._containerElem = el }, h("div", { class: "label__content" }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el, title: labelTitle }, this.formatLabel()), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
+  }
+  static get is() { return "ez-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-chip.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do ez-chip."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o ez-chip."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "removePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\" | undefined",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina o posicionamento do bot\u00E3o de remover (n\u00E3o dispon\u00EDvel no modo `action`). \nSe n\u00E3o informado, n\u00E3o exibe o bot\u00E3o."
+        },
+        "attribute": "remove-position",
+        "reflect": true
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"label\" | \"action\"",
+          "resolved": "\"action\" | \"label\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de uso do ez-chip."
+        },
+        "attribute": "mode",
+        "reflect": true
+      },
+      "value": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do ez-chip."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showNativeTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento."
+        },
+        "attribute": "show-native-tooltip",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do ez-chip."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "removeChip",
+        "name": "removeChip",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o bot\u00E3o de remo\u00E7\u00E3o \u00E9 acionado."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "actionClick",
+        "name": "actionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido no modo \"action\" quando o usu\u00E1rio clica no ez-chip."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no ez-chip.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do ez-chip.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "observeValue"
+      }, {
+        "propName": "enabled",
+        "methodName": "observeEnabled"
+      }];
+  }
+}
+var ChipSize;
+(function (ChipSize) {
+  ChipSize[ChipSize["CHAR_LIMIT"] = 28] = "CHAR_LIMIT";
+})(ChipSize || (ChipSize = {}));