@sankhyalabs/ezui 1.2.0-beta.2 → 1.2.0-beta.21

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

@@ -20,7 +20,11 @@ export class EzPopup {
     /**
      * Define se o componente utilizará um cabeçalho com botão de fechamento.
      */
-    this.useHeader = false;
+    this.useHeader = true;
+    /**
+     * Define se o componente utilizará um cabeçalho com botão de fechamento.
+     */
+    this.heightMode = "full";
   }
   getGridSize() {
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
@@ -35,9 +39,9 @@ export class EzPopup {
       return (h(Host, null,
         h("div", { class: "overlay" },
           h("div", { class: "popup col " + this.getGridSize() },
-            h("div", { class: "popup__container", ref: elem => this._container = elem, tabIndex: -1 },
+            h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : ""), ref: elem => this._container = elem, tabIndex: -1 },
               h("div", { class: "popup__content" },
-                h("div", { class: "popup__header" },
+                this.useHeader && h("div", { class: "popup__header" },
                   this.ezTitle ?
                     h("div", { class: "popup__title" }, this.ezTitle)
                     : undefined,
@@ -108,7 +112,25 @@ export class EzPopup {
       },
       "attribute": "use-header",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "true"
+    },
+    "heightMode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o componente utilizar\u00E1 um cabe\u00E7alho com bot\u00E3o de fechamento."
+      },
+      "attribute": "height-mode",
+      "reflect": true,
+      "defaultValue": "\"full\""
     },
     "ezTitle": {
       "type": "string",

package/dist/collection/components/ez-radio-button/ez-radio-button.css

@@ -4,11 +4,15 @@
   /*@doc Define a família da fonte do label.*/
   --ez-radio-button--font-family: var(--font-pattern, Arial);
   /*@doc Define o tamanho do label.*/
-  --ez-radio-button--font-size:  var(--text--large, 16px);
+  --ez-radio-button--font-size:  var(--text--medium, 14px);
   /*@doc Define o peso da fonte do label.*/
   --ez-radio-button--font-weight: var(--text-weight--large);
   /*@doc Define a cor do texto.*/
   --ez-radio-button--font-color: var(--title--primary, #2B3A54);
+  /*@doc Define o espaço superior e inferior da lista de opções.*/
+  --ez-radio-button--padding-vertical: var(--space--medium, 12px);
+  /*@doc Define o espaço lateral da lista de opções.*/
+  --ez-radio-button--padding-horizontal: var(--space--small, 6px);
   
   /* Label itens do radio */
   /*@doc Define a família da fonte do label. */
@@ -19,6 +23,8 @@
   --ez-radio-button__form-label--title-primary: var(--title--primary, #2B3A54);
   /*@doc Define o tamanho do label. */
   --ez-radio-button__form-label--font-size: var(--text--medium, 14px);
+  /*@doc Define o espaço lateral da lista de opções.*/
+  --ez-radio-button__form-label--padding-horizontal: var(--space--medium, 12px);
 
   /* Colors */
   /*@doc cor da borda do radio sem seleção (sem seleção / sem foco / sem hover / enabled) */
@@ -53,9 +59,15 @@
   /*private*/
   display: flex;
   width: 100%;
-  margin: 10px;  
   flex-direction: column;
   align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.form {
+  /*public*/
+  padding: var(--ez-radio-button--padding-vertical) var(--ez-radio-button--padding-horizontal);
+  gap: var(--ez-radio-button__form-label--padding-horizontal);
 }
 
 .form--vertical {
@@ -74,7 +86,6 @@
   /*private*/
   display: flex;
   align-items: center;
-  margin-top: 15px;  
 }
 
 .label{
@@ -88,13 +99,13 @@
 .form__label{
   /*private*/
   cursor: pointer;
-  padding-left: 12px;
-  padding-right: 25px;
   /*public*/
   font-weight: var(--ez-radio-button__form-label--font-weight);  
   color: var(--ez-radio-button__form-label--title-primary);
   font-family: var(--ez-radio-button__form-label--font-family);
   font-size: var(--ez-radio-button__form-label--font-size);
+  padding-left: var(--ez-radio-button__form-label--padding-horizontal);
+  padding-right: var(--ez-radio-button__form-label--padding-horizontal);
 }
 
 .form__radio {

package/dist/collection/components/ez-radio-button/ez-radio-button.js

@@ -33,7 +33,7 @@ export class EzRadioButton {
   render() {
     return (h(Host, null,
       this.label && h("label", { class: "label" }, this.label),
-      h("div", { class: "form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
+      h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
         h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }),
         h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }

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

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   cursor: grab;
+  width: 100%;
 }
 
 .dragging{
@@ -11,6 +12,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  scrollbar-width: thin;
 }
 
 .ez-scroller__container--horizontal{
@@ -35,7 +37,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #00000000;
+  background-color: transparent;
   border-radius: var(--border--radius-small);
   /*provisório*/
   background-color: var(--scrollbar--primary);
@@ -45,7 +47,7 @@
 }
 
 ::-webkit-scrollbar {
-  background-color: #00000000;
+  background-color: transparent;
   width: var(--space--small);
   height: var(--space--small);
   max-width: var(--space--small);

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

@@ -79,10 +79,10 @@ export class EzSearch {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "import",
             "path": "../ez-combo-box/ez-combo-box"
           }
@@ -252,10 +252,10 @@ export class EzSearch {
         "text": "Um evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
       },
       "complexType": {
-        "original": "Option",
-        "resolved": "Option",
+        "original": "IOption",
+        "resolved": "IOption",
         "references": {
-          "Option": {
+          "IOption": {
             "location": "import",
             "path": "../ez-combo-box/ez-combo-box"
           }

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

@@ -12,6 +12,7 @@
   display: flex;
   position: relative;
   width: 100%;
+  /* border-bottom: 2px solid #dce0e8; */
   overflow: hidden;
   /* @doc Define a sombra do box da aba. */
   /* --tabselector__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); */
@@ -135,4 +136,12 @@
 
 .scroll::-webkit-scrollbar {
   display: none;
+}
+
+.left-icon {
+  padding-right: var(--space--small);
+}
+
+.right-icon {
+  padding-left: var(--space--small);
 }

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

@@ -72,13 +72,15 @@ export class EzTabselector {
       this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
         const tabKey = elem.getAttribute("tabKey");
         const label = elem.getAttribute("label");
-        const t = { label, tabKey, index: this._processedTabs.length };
+        const leftIcon = elem.getAttribute("leftIcon");
+        const rightIcon = elem.getAttribute("rightIcon");
+        const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
         const content = elem.firstChild;
         if (content) {
-          content.setAttribute("slot", "tab" + t.index);
+          content.setAttribute("slot", "tab" + tab.index);
           this._hostElem.appendChild(content);
         }
-        this._processedTabs.push(t);
+        this._processedTabs.push(tab);
       });
     }
   }
@@ -183,7 +185,9 @@ export class EzTabselector {
           this.selectedIndex = index;
         }
         return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle },
+          tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }),
           h("span", { class: "tab-label", title: tab.label }, tab.label),
+          tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }),
           h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
       })),
       h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -57,6 +57,7 @@
   display: flex;
   flex-wrap: wrap;
   position: relative;
+
   /*public*/
   width: var(--text-area--width);
 }
@@ -65,14 +66,16 @@ textarea {
   box-sizing: border-box;
   border: none;
   resize: none;
-  margin-top: calc(var(--space--medium, 12px) + 4px);
   width: 100%;
+  padding: 0;
+  background: none;
+
+  /*public*/
   font-weight: var(--text-area--font-weight);
   font-family: var(--text-area--font-family);
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);
-  padding: 0;
-  background: none;
+  margin-top: calc(var(--space--medium, 12px) + 4px);
 }
 
 textarea:focus {

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -19,15 +19,15 @@ export class EzTextArea {
     this.mode = "regular";
   }
   observeErrorMessage() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
     if (hasError) {
-      this._container.classList.add('hasError');
-      (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add('hasError');
+      (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add('hasError');
+      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.add('hasError');
     }
     else {
-      this._container.classList.remove('hasError');
-      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove('hasError');
+      (_c = this._container) === null || _c === void 0 ? void 0 : _c.classList.remove('hasError');
+      (_d = this._messageBoxElem) === null || _d === void 0 ? void 0 : _d.classList.remove('hasError');
     }
   }
   observeValue(newValue, oldValue) {

package/dist/collection/components/ez-text-edit/ez-text-edit.css

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.text-edit__form-input {
+  width: auto;
+  --ez-text-input__input--padding: 0px;
+}
+
+.text-edit__hidden-value {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}

package/dist/collection/components/ez-text-edit/ez-text-edit.js

@@ -0,0 +1,188 @@
+import { Component, Host, h, Prop, Event, State, Method } from '@stencil/core';
+import { StringUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from "../../utils";
+export class EzTextEdit {
+  /**
+   * Aplica focus no campo.
+   */
+  async applyFocusSelect() {
+    this.calcSizeInput(this.value, true);
+  }
+  calcSizeInput(value, setSelect = false) {
+    var _a, _b;
+    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    if (textInput != undefined) {
+      const sizeText = this.getWidthValue(value);
+      textInput.style.width = sizeText + 'px';
+      if (setSelect) {
+        setTimeout(() => textInput.select(), 100);
+      }
+    }
+  }
+  getWidthValue(value) {
+    if (this._valueBasis != undefined) {
+      const span = this._valueBasis;
+      if (value != undefined) {
+        const cursorSpace = 2;
+        span.innerHTML = value;
+        return span.clientWidth > 0 ? (span.clientWidth + cursorSpace) : cursorSpace;
+      }
+      else {
+        span.innerHTML = "";
+      }
+    }
+    return 0;
+  }
+  setStyledInput() {
+    var _a, _b;
+    let fontSize = "";
+    let fontWeight = "";
+    let fontFamily = "";
+    if (this.styled != undefined) {
+      fontSize = this.styled.fontSize;
+      fontWeight = this.styled.fontWeight;
+      fontFamily = this.styled.fontFamily;
+    }
+    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    if (textInput != undefined) {
+      textInput.style.fontSize = fontSize;
+      textInput.style.fontWeight = fontWeight;
+      textInput.style.fontFamily = fontFamily;
+    }
+    const span = this._valueBasis;
+    if (span != undefined) {
+      span.style.fontSize = fontSize;
+      span.style.fontWeight = fontWeight;
+      span.style.fontFamily = fontFamily;
+    }
+  }
+  handleSaveEdition() {
+    if (this._newValue !== this.value && !StringUtils.isEmpty(this._newValue)) {
+      this.saveEdition.emit({ value: this.value, newValue: this._newValue });
+    }
+    else if (!this._newValue) {
+      ApplicationUtils.alert("Aviso", "Não é possível salvar um campo em branco.").then(() => {
+        this.setNewValue(this.value, true);
+      });
+    }
+    else {
+      this.cancelEdition.emit();
+    }
+  }
+  setNewValue(value, setSelect = false) {
+    this._newValue = value;
+    this.calcSizeInput(this._newValue, setSelect);
+  }
+  componentDidLoad() {
+    this.applyFocusSelect();
+    this.setNewValue(this.value);
+  }
+  componentDidRender() {
+    this.setStyledInput();
+  }
+  render() {
+    return (h(Host, null,
+      h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }),
+      h("ez-text-input", { onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }),
+      h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }),
+      h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
+  }
+  static get is() { return "ez-text-edit"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-text-edit.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-text-edit.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Valor manipulado pelo componente atrav\u00E9s do input"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "styled": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IStyled",
+        "resolved": "IStyled",
+        "references": {
+          "IStyled": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define atributos do estilo"
+      }
+    }
+  }; }
+  static get states() { return {
+    "_newValue": {}
+  }; }
+  static get events() { return [{
+      "method": "saveEdition",
+      "name": "saveEdition",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento emitido ao salvar uma edi\u00E7\u00E3o"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "cancelEdition",
+      "name": "cancelEdition",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Disparado ao cancelar uma edi\u00E7\u00E3o"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "applyFocusSelect": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Aplica focus no campo.",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -37,6 +37,10 @@
   --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
   --ez-text-input__input--error--border-color: #CC2936;
+  /*@doc Define a cor do input quando não possuir borda*/
+  --ez-text-input__input--noborder-color: white;
+  /*@doc Define o padding do input*/
+  --ez-text-input__input--padding: var(--space--medium, 6px);
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
@@ -72,7 +76,6 @@ input {
   /*private*/
   width: 100%;
   box-sizing: border-box;
-  padding: var(--space--medium, 6px);
 
   /*public*/
   height: var(--ez-text-input--height);
@@ -84,6 +87,7 @@ input {
   background-color: var(--ez-text-input__input--background-color);
   color: var(--ez-text-input--color);
   font-weight: var(--ez-text-input--font-weight);
+  padding: var(--ez-text-input__input--padding);
 }
 
 input:disabled {
@@ -103,7 +107,7 @@ input.icon--left {
   padding-left: var(--ez-text-input__icon--width);
 }
 
-input.icon--right {
+input.icon--right { 
   padding-right: var(--ez-text-input__icon--width);
 }
 
@@ -212,6 +216,11 @@ input:read-only {
   height: var(--ez-text-input--height--slim);
 }
 
+.input__slim--title{
+  font-size: 16px;
+  font-weight: bold;
+}
+
 .input--slim::-webkit-input-placeholder { /* Edge */
   /*public*/
   font-family: var(--ez-text-input--font-family);
@@ -275,4 +284,11 @@ input:read-only {
 .input--slim:disabled::placeholder {
   /*public*/
   color: var(--ez-text-input__input--disabled--color);
+}
+
+input.input__slim--noborder {
+  box-shadow: 0 0 0 0;
+  border: 0 none;
+  outline: 0;
+  background: var(--ez-text-input__input--noborder-color);
 }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -14,6 +14,10 @@ export class EzTextInput {
      * Define o modo do tamanho do campo; opções: slim e regular.
      */
     this.mode = "regular";
+    /**
+     * Define se o campo contará com bordas ou não
+     */
+    this.noBorder = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
@@ -87,6 +91,11 @@ export class EzTextInput {
       this._contentLeftSlot.style.color = color;
     }
   }
+  adjustBorderInput() {
+    if (this.noBorder) {
+      this._inputElem.classList.add("input__slim--noborder");
+    }
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -194,6 +203,7 @@ export class EzTextInput {
     this.observeErrorMessage();
     this.observeMask();
     this.adjustFloatingLabel();
+    this.adjustBorderInput();
   }
   componentWillLoad() {
     this.observeMask();
@@ -387,6 +397,24 @@ export class EzTextInput {
       "attribute": "mode",
       "reflect": true,
       "defaultValue": "\"regular\""
+    },
+    "noBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o campo contar\u00E1 com bordas ou n\u00E3o"
+      },
+      "attribute": "no-border",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/ez-view-stack/ez-view-stack.js

@@ -1,5 +1,11 @@
 import { Component, h, Host, Element, Method } from '@stencil/core';
 export class EzViewStack {
+  constructor() {
+    /**
+     * Indetificador único do componente
+     */
+    this._dataKey = 'id_'.concat(Date.now().toString());
+  }
   /**
   * Exibe a aba desejada de acordo com o index passado na tela fazendo com a ativa atual seja removida ou oculta dependendo da hidePolicy.
   */
@@ -11,17 +17,17 @@ export class EzViewStack {
     }
   }
   /**
-  * Retorna o index que est� atualmente ativo e sendo exibido.
+  * Retorna o index que está atualmente ativo e sendo exibido.
   */
   async getSelectedIndex() {
     return this._focusedIndex;
   }
   policyHideRemove() {
-    let element = this._hostElem.querySelector(`#el_${this._focusedIndex}`);
+    let element = this._hostElem.querySelector(`#${this._dataKey}_el_${this._focusedIndex}`);
     this.checkElementVisibility(element);
   }
   policyShowAppend(index) {
-    let selectedElement = this._hostElem.querySelector(`#el_${index}`);
+    let selectedElement = this._hostElem.querySelector(`#${this._dataKey}_el_${index}`);
     if (selectedElement) {
       selectedElement.removeAttribute("style");
     }
@@ -44,8 +50,8 @@ export class EzViewStack {
       this._focusedIndex = 0;
       this._totalStackItems = 0;
       this._hostElem.classList.add("ez-view-stack__container");
-      this._hostElem.querySelectorAll("stack-item").forEach((element, index) => {
-        element.setAttribute("id", `el_${index}`);
+      this._hostElem.querySelectorAll(":scope > stack-item").forEach((element, index) => {
+        element.setAttribute("id", `${this._dataKey}_el_${index}`);
         if (index !== 0) {
           this.checkElementVisibility(element);
         }
@@ -100,7 +106,7 @@ export class EzViewStack {
         "return": "Promise<number>"
       },
       "docs": {
-        "text": "Retorna o index que est\uFFFD atualmente ativo e sendo exibido.",
+        "text": "Retorna o index que est\u00E1 atualmente ativo e sendo exibido.",
         "tags": []
       }
     }