@sankhyalabs/ezui 1.2.0-beta.8 → 2.0.0

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -0,0 +1,190 @@
+import { Component, h, Host, Prop, Event } from '@stencil/core';
+import ModalAction from './modal-action';
+import ModalButtonStatus from './modal-button-status';
+export class EzModalContainer {
+  constructor() {
+    /**
+     * Determina se o cabeçalho com o título deverá ser mostrado
+     */
+    this.showTitleBar = true;
+  }
+  cancelIsVisible() {
+    return (this.cancelButtonStatus !== ModalButtonStatus.HIDDEN && this.cancelButtonLabel != undefined);
+  }
+  okIsVisible() {
+    return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
+  }
+  componentDidLoad() {
+    window.requestAnimationFrame(() => {
+      this.ezModalAction.emit(ModalAction.LOAD);
+    });
+  }
+  focusLast(_evt) {
+    this._okButton.setFocus();
+  }
+  focusFirst(_evt) {
+    this._closeButton.focus();
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }),
+      this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" },
+        h("div", { class: "ez-col ez-align--middle ez-modal-container__title" },
+          h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle),
+          this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined),
+        h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) },
+          h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))),
+      h("div", { class: "ez-modal-container__content" },
+        h("slot", null)),
+      h("div", { class: 'ez-col ez-margin-left--auto' },
+        this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) }) : undefined,
+        this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction.OK) }) : undefined),
+      h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
+  }
+  static get is() { return "ez-modal-container"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["./ez-modal-container.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-modal-container.css"]
+  }; }
+  static get properties() { return {
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "T\u00EDtulo do modal"
+      },
+      "attribute": "modal-title",
+      "reflect": false
+    },
+    "modalSubTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Subt\u00EDtulo (opcional), geralmente usado para orienta\u00E7\u00E3o do usu\u00E1rio"
+      },
+      "attribute": "modal-sub-title",
+      "reflect": false
+    },
+    "showTitleBar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina se o cabe\u00E7alho com o t\u00EDtulo dever\u00E1 ser mostrado"
+      },
+      "attribute": "show-title-bar",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "cancelButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina o texto do bot\u00E3o de cancelar"
+      },
+      "attribute": "cancel-button-label",
+      "reflect": false
+    },
+    "okButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina o texto do bot\u00E3o de Ok"
+      },
+      "attribute": "ok-button-label",
+      "reflect": false
+    },
+    "cancelButtonStatus": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Varia\u00E7\u00E3o de estado do bot\u00E3o de cancelar: [HIDDEN|ENABLED|DISABLED]"
+      },
+      "attribute": "cancel-button-status",
+      "reflect": false
+    },
+    "okButtonStatus": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Varia\u00E7\u00E3o de estado do bot\u00E3o de ok: [HIDDEN|ENABLED|DISABLED]"
+      },
+      "attribute": "ok-button-status",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezModalAction",
+      "name": "ezModalAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Representa a intera\u00E7\u00E3o com o usu\u00E1rio.\nOK - Quando o bot\u00E3o \u00E9 acionado\nCANCEL - Quando o bot\u00E3o de cancelar \u00E9 acionado\nCLOSE - Quando o bot\u00E3o de fechar \u00E9 acionado.\nLOAD - Quando o modal \u00E9 carregado (eventualmente pode ser usado para dar foco a um elemento espec\u00EDfico)"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/ez-modal-container/index.js

@@ -0,0 +1,2 @@
+export { default as ModalAction } from './modal-action';
+export { default as ModalButtonStatus } from './modal-button-status';

package/dist/collection/components/ez-modal-container/modal-action.js

@@ -0,0 +1,8 @@
+var ModalAction;
+(function (ModalAction) {
+  ModalAction["CLOSE"] = "CLOSE";
+  ModalAction["OK"] = "OK";
+  ModalAction["CANCEL"] = "CANCEL";
+  ModalAction["LOAD"] = "LOAD";
+})(ModalAction || (ModalAction = {}));
+export default ModalAction;

package/dist/collection/components/ez-modal-container/modal-button-status.js

@@ -0,0 +1,7 @@
+var ModalButtonStatus;
+(function (ModalButtonStatus) {
+  ModalButtonStatus["ENABLED"] = "ENABLED";
+  ModalButtonStatus["DISABLED"] = "DISABLED";
+  ModalButtonStatus["HIDDEN"] = "HIDDEN";
+})(ModalButtonStatus || (ModalButtonStatus = {}));
+export default ModalButtonStatus;

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

@@ -8,7 +8,7 @@
   /*@doc Define a cor de fundo do popover.*/
   --ez-popover__box--background-color: var(--background--xlight, #fff);
   /*@doc Define a camada de visibilidade do popover.*/
-  --ez-popover__box--z-index: var(--more-visible, 1);
+  --ez-popover__box--z-index: var(--more-visible, 2);
 
   /***************
      host style  

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

@@ -16,7 +16,7 @@
 
   /* Title */
   /*@doc Define a família da fonte do título do popup.*/
-  --ez-popup__title--font-family: var(--font-pattern, "'Sora', 'Algerian'");
+  --ez-popup__title--font-family: var(--font-pattern, "Roboto");
   /*@doc Define o tamanho da fonte do título do popup.*/
   --ez-popup__title--font-size: var(--title--extra-large, 24px);
   /*@doc Define a cor da fonte do título do popup.*/
@@ -62,6 +62,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
+  outline: none;
   background: #FFFF;
   color: var(--ez-popup__container--color);
   border-radius: 12px;
@@ -70,6 +71,10 @@
   padding: var(--ez-popup__container--padding)
 }
 
+.popup__container--auto {
+  height: auto;
+}
+
 .popup__content {
   box-sizing: border-box;
   max-height: 100%;

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

@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  scrollbar-width: thin;
 }
 
 .ez-scroller__container--horizontal{
@@ -36,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);
@@ -46,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); */
@@ -51,7 +52,7 @@
   align-items: center;
   justify-content: center;
   color: var(--text--primary, #626e82);
-  font-family: var(--font-pattern, "Sora, Algerian");
+  font-family: var(--font-pattern, "Roboto");
   font-size: var(--title--small, 14px);
 }
 
@@ -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;
+}