@sankhyalabs/ezui 1.2.0-beta.9 → 2.0.0

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

@@ -115,7 +115,7 @@
 
 /******** REGULAR MODE ********/
 /*---------------------------unchecked------------------------------*/
-input.regularMode {
+input.regular-mode {
   /*private*/
   display: flex;
   flex-wrap: wrap;
@@ -135,12 +135,12 @@ input.regularMode {
 }
 
 
-input.regularMode:enabled:hover {
+input.regular-mode:enabled:hover {
   /*public*/
   background-color: var(--ez-check--hover--background-color);
 }
 
-input.regularMode:enabled:focus {
+input.regular-mode:enabled:focus {
   /*private*/
   outline: none;
 
@@ -148,13 +148,13 @@ input.regularMode:enabled:focus {
   background-color: var(--ez-check--focus--background-color);
 }
 
-input.regularMode:disabled {
+input.regular-mode:disabled {
   /*private*/
   cursor: auto;
   background: none;
 }
 
-input.regularMode::before {
+input.regular-mode::before {
   /*private*/
   box-sizing: border-box;
   content: "";
@@ -167,35 +167,35 @@ input.regularMode::before {
   border: var(--ez-check--border);
 }
 
-input.regularMode:disabled::before {
+input.regular-mode:disabled::before {
   /*public*/
   border: var(--ez-check--disabled--border);
 }
 
 /*-------------------------------checked---------------------------------*/
-input.regularMode:checked:enabled:hover {
+input.regular-mode:checked:enabled:hover {
   /*public*/
   background-color: var(--ez-check--checked--hover--background-color);
 }
 
-input.regularMode:checked:enabled:focus {
+input.regular-mode:checked:enabled:focus {
   /*public*/
   background-color: var(--ez-check--checked--focus--background-color);
 }
 
-input.regularMode:checked::before {
+input.regular-mode:checked::before {
   /*public*/
   border: var(--ez-check--checked--border);
   background-color: var(--ez-check--checked--background-color);
 }
 
-input.regularMode:checked:disabled:before {
+input.regular-mode:checked:disabled:before {
   /*public*/
   border: var(--ez-check--disabled--border);
   background-color: var(--ez-check--checked--disabled--background-color);
 }
 
-input.regularMode:checked::after {
+input.regular-mode:checked::after {
   /*private*/
   display: flex;
   position: absolute;
@@ -209,14 +209,14 @@ input.regularMode:checked::after {
   mask-image: var(--ez-check--check--image);
 }
 
-input.regularMode:checked:disabled::after {
+input.regular-mode:checked:disabled::after {
   /*public*/
   background-color: var(--ez-check--check--disabled--background-color);
 }
 
 /******** SWITCH MODE ********/
 /*-------------------------------OFF---------------------------------*/
-input.switchMode {
+input.switch-mode {
   /*private*/
   flex-shrink: 0;
   -webkit-appearance: none;
@@ -234,18 +234,18 @@ input.switchMode {
   background-color: var(--ez-switch--background-color);
 }
 
-input.switchMode:disabled {
+input.switch-mode:disabled {
   /*public*/
   background-color: var(--ez-switch--disabled--background-color);
   border: var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9);
 }
 
-input.switchMode:checked:disabled {
+input.switch-mode:checked:disabled {
   /*public*/
   background-color: var(--ez-switch--disabled--checked--background-color);
 }
 
-input.switchMode::after {
+input.switch-mode::after {
   /*private*/
   content: "";
   display: block;
@@ -264,14 +264,14 @@ input.switchMode::after {
   background-color: var(--ez-switch--pin--background-color);
 }
 
-input.switchMode:disabled::after {
+input.switch-mode:disabled::after {
   /*public*/
   background-color: var(--ez-switch--pin--disabled--background-color);
   border: var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9);
 }
 
 /*-------------------------------ON---------------------------------*/
-input.switchMode:checked {
+input.switch-mode:checked {
   /*private*/
   transition: background-color var(--transition), border var(--transition);
 
@@ -280,7 +280,7 @@ input.switchMode:checked {
   border: var(--border--small, 1px solid) var(--color--primary, #008561);
 }
 
-input.switchMode::before {
+input.switch-mode::before {
   /*private*/
   display: block;
   content: "";
@@ -297,19 +297,19 @@ input.switchMode::before {
   background-color: var(--ez-switch--pin--focus--background-color);
 }
 
-input.switchMode:focus::before {
+input.switch-mode:focus::before {
   /*private*/
   opacity: 0.24;
   transition: opacity var(--transition);
 }
 
-input.switchMode:checked:focus::before {
+input.switch-mode:checked:focus::before {
   /*private*/
   background-color: var(--ez-switch--pin--checked--focus--background-color);
   transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px));
 }
 
-input.switchMode:checked::after {
+input.switch-mode:checked::after {
   /*private*/
   transition: transform var(--transition);
   transition: background-color var(--transition);
@@ -322,7 +322,7 @@ input.switchMode:checked::after {
   border: var(--border--small, 1px solid) var(--color--primary, #008561);
 }
 
-input.switchMode:checked:disabled::after {
+input.switch-mode:checked:disabled::after {
   /*public*/
   background-color: var(--ez-switch--pin--checked--disabled--background-color);
 }
@@ -333,7 +333,6 @@ input.switchMode:checked:disabled::after {
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--ez-check--label--color);
-  text-shadow: var(--text-shadow);
   font-size: var(--ez-check--label--font-size);
   font-family: var(--ez-check--label--font-family);
   cursor: default;

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

@@ -1,4 +1,5 @@
 import { Component, Prop, h, Watch, Method, Event, Host } from '@stencil/core';
+import { CheckMode } from './CheckMode';
 export class EzCheck {
   constructor() {
     /**
@@ -11,16 +12,17 @@ export class EzCheck {
      * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
      * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
      */
-    this.mode = "regular";
+    this.mode = CheckMode.REGULAR;
   }
   observeMode() {
-    if (this.mode === "switch") {
-      this._inputElem.classList.remove("regularMode");
-      this._inputElem.classList.add("switchMode");
+    var _a;
+    if (((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH) {
+      this._inputElem.classList.remove("regular-mode");
+      this._inputElem.classList.add("switch-mode");
     }
     else {
-      this._inputElem.classList.remove("switchMode");
-      this._inputElem.classList.add("regularMode");
+      this._inputElem.classList.remove("switch-mode");
+      this._inputElem.classList.add("regular-mode");
     }
   }
   //---------------------------------------------
@@ -57,7 +59,7 @@ export class EzCheck {
   }
   render() {
     return (h(Host, null,
-      h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }),
+      h("input", { type: "checkbox", class: "regular-mode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }),
       this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
   static get is() { return "ez-check"; }
@@ -137,7 +139,7 @@ export class EzCheck {
       },
       "attribute": "mode",
       "reflect": true,
-      "defaultValue": "\"regular\""
+      "defaultValue": "CheckMode.REGULAR"
     }
   }; }
   static get events() { return [{

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

@@ -49,14 +49,15 @@
   display: flex;
   white-space: nowrap;
   align-items: center;
-  font-weight: var(--ez-label-chip__label--font-weight);
   cursor: pointer;
+  user-select: none;
+
   /*public*/
   color: var(--ez-label-chip__label--title--primary);
-  user-select: none;
   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 {
@@ -86,6 +87,7 @@
   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 {

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

@@ -53,17 +53,23 @@ export class EzChip {
       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._divElem.classList.add("label__container--active") : this._divElem.classList.remove("label__container--active");
+    (this.value && this.mode !== "action") ? this._containerElem.classList.add("label__container--active") : this._containerElem.classList.remove("label__container--active");
   }
   observeEnabled() {
     if (this.enabled) {
-      this._divElem.classList.remove("label__container--disabled");
+      this._containerElem.classList.remove("label__container--disabled");
       this._labelElem.classList.remove("lbl--disabled");
       this._labelElem.classList.remove("cursor-disable");
     }
     else {
-      this._divElem.classList.add("label__container--disabled");
+      this._containerElem.classList.add("label__container--disabled");
       this._labelElem.classList.add("lbl--disabled");
       this._labelElem.classList.add("cursor-disable");
     }
@@ -72,16 +78,16 @@ export class EzChip {
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
-    if (this._divElem) {
+    if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
     }
   }
   render() {
-    return (h("div", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._divElem = el },
+    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 }, this.label),
+        h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el, title: this.label }, 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" })));
   }
@@ -270,3 +276,7 @@ export class EzChip {
       "methodName": "observeEnabled"
     }]; }
 }
+var ChipSize;
+(function (ChipSize) {
+  ChipSize[ChipSize["CHAR_LIMIT"] = 28] = "CHAR_LIMIT";
+})(ChipSize || (ChipSize = {}));

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -80,12 +80,14 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
+  display: flex;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
   text-overflow: ellipsis;
   box-sizing: border-box;
   margin-left: 6px;
+  gap: 6px;
 
   /*public*/
   font-family: var(--ez-collapsible-box--font-family);
@@ -93,6 +95,20 @@ ez-icon {
   font-weight: var(--ez-collapsible-box--font-weight);
 }
 
+.collapsible-box__label ez-icon {
+  visibility: hidden;
+  transition: 0.25s linear;
+}
+
+.collapsible-box__label:hover ez-icon {
+  visibility: visible;
+}
+
+.collapsible-box__text-edit {
+  /*private*/
+  margin-left: 6px;
+}
+
 .collapsible-box__icon {
   /*private*/
   transform: rotate(90deg) translate(0px, 14%);

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -1,6 +1,8 @@
-import { Component, h, Prop, Event, Watch, Method } from "@stencil/core";
+import { Component, h, Prop, Event, Watch, Method, Element, State } from "@stencil/core";
+import { ApplicationUtils } from "../../utils";
 export class EzCollapsibleBox {
   constructor() {
+    this._activeEditText = false;
     /**
      * Valor externalizado que garante a exibição ou não do componente.
      */
@@ -17,9 +19,14 @@ export class EzCollapsibleBox {
     * Define se o titulo irá ocupar toda a largura do componente.
     */
     this.stretchTitle = false;
-  }
-  observeCollapsedValue() {
-    this.ezChange.emit(this.value);
+    /**
+    * Ativa o ícone para remoção do componente.
+    */
+    this.removable = false;
+    /**
+    * Ativa o ícone para edição do componente.
+    */
+    this.editable = false;
   }
   /**
    * Esconde ou revela o conteúdo do componente.
@@ -27,6 +34,23 @@ export class EzCollapsibleBox {
   async showHide() {
     this.value = !this.value;
   }
+  /**
+   * Aplica focus no campo de edição de título.
+   */
+  async applyFocusTextEdit() {
+    var _a;
+    (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
+  }
+  /**
+   * Fecha a edição de título.
+   */
+  async cancelEdition() {
+    this._activeEditText = false;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  observeCollapsedValue() {
+    this.ezChange.emit(this.value);
+  }
   /**
    * Retorna o tamanho configurado do texto e do ícone.
    */
@@ -37,15 +61,66 @@ export class EzCollapsibleBox {
     const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
     return sizeList.includes(sizeCustom) ? sizeCustom : "small";
   }
+  removeElement() {
+    this._hostElement && this._hostElement.remove();
+    this.ezRemove.emit(this);
+  }
+  editLabel(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this._activeEditText = true;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  confirmRemove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
+      .then((canRemove) => {
+      if (canRemove) {
+        this.removeElement();
+      }
+    });
+  }
+  saveEditionText(editDetails) {
+    const { newValue } = editDetails.detail;
+    let canSave = true;
+    if (this.conditionalSave) {
+      canSave = this.conditionalSave(newValue);
+    }
+    if (this.label !== newValue && canSave) {
+      this.label = newValue;
+      this._activeEditText = false;
+      this.ezSaveEditLabel.emit(editDetails.detail);
+      this.ezEditLabelMode.emit(this._activeEditText);
+    }
+  }
+  getStyledLabel() {
+    if (this._refLabel == undefined) {
+      return;
+    }
+    let styledLabel = {
+      fontSize: window.getComputedStyle(this._refLabel).getPropertyValue('font-size'),
+      fontWeight: window.getComputedStyle(this._refLabel).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(this._refLabel).getPropertyValue('font-family')
+    };
+    return styledLabel;
+  }
   render() {
     return (h("div", { class: "collapsible-box" },
       h("div", { class: "collapsible-box__header" },
-        h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
+        h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title" +
             (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
             (this.stretchTitle ? " collapsible-box__title--stretched" : "") +
-            (this.value ? " collapsible-box__title--no-margin" : "") },
+            (this.value ? " collapsible-box__title--no-margin" : "") }),
           h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }),
-          h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))),
+          !this._activeEditText ?
+            h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem },
+              h("span", null, this.label),
+              this.editable &&
+                h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }),
+              this.removable &&
+                h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+            h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() }))),
       h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") },
         h("slot", null))));
   }
@@ -146,8 +221,66 @@ export class EzCollapsibleBox {
       "attribute": "stretch-title",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ativa o \u00EDcone para remo\u00E7\u00E3o do componente."
+      },
+      "attribute": "removable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ativa o \u00EDcone para edi\u00E7\u00E3o do componente."
+      },
+      "attribute": "editable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "conditionalSave": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Function",
+        "resolved": "Function",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define uma condi\u00E7\u00E3o para salvar ou n\u00E3o uma altera\u00E7\u00E3o."
+      }
     }
   }; }
+  static get states() { return {
+    "_activeEditText": {}
+  }; }
   static get events() { return [{
       "method": "ezChange",
       "name": "ezChange",
@@ -163,6 +296,59 @@ export class EzCollapsibleBox {
         "resolved": "boolean",
         "references": {}
       }
+    }, {
+      "method": "ezRemove",
+      "name": "ezRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao remover o componente (onEzRemove)."
+      },
+      "complexType": {
+        "original": "EzCollapsibleBox",
+        "resolved": "EzCollapsibleBox",
+        "references": {
+          "EzCollapsibleBox": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "ezSaveEditLabel",
+      "name": "ezSaveEditLabel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao concluir edi\u00E7\u00E3o da label (onEzSaveEditLabel)."
+      },
+      "complexType": {
+        "original": "CustomEvent",
+        "resolved": "CustomEvent<any>",
+        "references": {
+          "CustomEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "ezEditLabelMode",
+      "name": "ezEditLabelMode",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando o modo de edi\u00E7\u00E3o da label for aberto e fechado (onEzEditLabelMode)."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "showHide": {
@@ -180,8 +366,41 @@ export class EzCollapsibleBox {
         "text": "Esconde ou revela o conte\u00FAdo do componente.",
         "tags": []
       }
+    },
+    "applyFocusTextEdit": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Aplica focus no campo de edi\u00E7\u00E3o de t\u00EDtulo.",
+        "tags": []
+      }
+    },
+    "cancelEdition": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Fecha a edi\u00E7\u00E3o de t\u00EDtulo.",
+        "tags": []
+      }
     }
   }; }
+  static get elementRef() { return "_hostElement"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "observeCollapsedValue"

package/dist/collection/components/ez-combo-box/ez-combo-box.css

@@ -161,28 +161,6 @@ ez-icon {
   min-width: var(--ez-combo-box__list-scrollbar--width);
 }
 
-.list-options::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
-
-  /*public*/
-  border-radius: var(--ez-combo-box__list-scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--ez-combo-box__list-scrollbar--background-color);
-  border-radius: var(--ez-combo-box__list-scrollbar--border-radius);
-}
-
-.list-options::-webkit-scrollbar {
-  background-color: #f0f2f5;
-
-  /*public*/
-  width: var(--ez-combo-box__list-scrollbar--width);
-  max-width: var(--ez-combo-box__list-scrollbar--width);
-  min-width: var(--ez-combo-box__list-scrollbar--width);
-}
-
 .item {
   display: flex;
   align-items: center;
@@ -222,6 +200,7 @@ ez-icon {
 .item__value--hidden {
   visibility: hidden;
   position: absolute;
+  white-space: nowrap;
   z-index: -1;
   top: 0;
   left: 0;