@sankhyalabs/ezui 1.1.75 → 1.1.78

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

@@ -1,4 +1,5 @@
-import { Component, Event, h, Prop, Watch } from "@stencil/core";
+import { Component, Event, h, Prop, Watch, Element } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzSearch {
   constructor() {
     /**
@@ -24,6 +25,9 @@ export class EzSearch {
     this.value = evt.detail;
     this.ezChange.emit(evt.detail);
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+  }
   render() {
     return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
   }
@@ -203,6 +207,7 @@ export class EzSearch {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "_elem"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "updateValue"

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

@@ -13,7 +13,6 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  margin-bottom: var(--space--large, 24px);
   /* @doc Define a sombra do box da aba. */
   /* --tabselector__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); */
   /*@doc Contém o ícone de voltar para a aba anterior.*/

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

@@ -45,7 +45,7 @@ export class EzTabselector {
         }
         this.setFocusedBtn(true, this.focusedIndex);
         this.setFocusedTab(this.focusedIndex);
-        this.ezChange.emit();
+        this.ezChange.emit(this.selectedTab);
       }
       else if (ev.key === "Tab" || ev.key === "Escape") {
         this.focusedIndex = undefined;
@@ -61,7 +61,7 @@ export class EzTabselector {
     this.selectedIndex = index.toString();
     this.focusedIndex = undefined;
     this.selectedTab = tab;
-    this.ezChange.emit();
+    this.ezChange.emit(this.selectedTab);
     this.setFocusedBtn(false, this.selectedIndex);
   }
   componentWillRender() {
@@ -261,7 +261,7 @@ export class EzTabselector {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Evento emitido ao clicar para abrir o popup (onChange)."
+        "text": "Evento emitido ao clicar para abrir o popup (ezChange)."
       },
       "complexType": {
         "original": "string",

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

@@ -71,6 +71,7 @@ export class EzTextArea {
     }
   }
   handleChange() {
+    this.errorMessage = "";
     this.value = this._inputElem.value;
   }
   handleFocus() {

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

@@ -1,58 +1,58 @@
 :host {
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --text-input--height: 42px;
+  --ez-text-input--height: 42px;
   /*@doc Define a largura do componente.*/
-  --text-input--width: 100%;
+  --ez-text-input--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --text-input__icon--width: 48px;
+  --ez-text-input__icon--width: 48px;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
-  --text-input--border-radius: var(--border--radius-medium, 12px);
+  --ez-text-input--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --text-input--font-size: var(--text--medium, 14px);
+  --ez-text-input--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --text-input--font-family: var(--font-pattern, Arial);
+  --ez-text-input--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label do componente.*/
-  --text-input--font-weight: var(--text-weight--large, 500);
+  --ez-text-input--font-weight: var(--text-weight--large, 500);
   /*@doc Define a cor da fonte do input e label do componente.*/
-  --text-input--color: var(--title--primary, #000);
+  --ez-text-input--color: var(--title--primary, #000);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --text-input__input--background-color: var(--background--medium, #e0e0e0);
+  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
-  --text-input__input--border: var(--border--medium, 2px solid);
+  --ez-text-input__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --text-input__input--border-color: var(--text-input__input--background-color);
+  --ez-text-input__input--border-color: var(--ez-text-input__input--background-color);
   /*no modo normal usamos a borda com a mesma cor do bg*/
   /*@doc Define a cor da borda do input quando focado.*/
-  --text-input__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
+  --ez-text-input__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto do input.*/
-  --text-input__input--disabled--color: var(--text--disable, #AFB6C0);
+  --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --text-input__input--error--border-color: #CC2936;
+  --ez-text-input__input--error--border-color: #CC2936;
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --text-input__message_box--font-size: var(--text--small, 12px);
+  --ez-text-input__message_box--font-size: var(--text--small, 12px);
   /*@doc Define a cor da fonte da mensagem quando info.*/
-  --text-input__message_box--info--color: var(--color--success, #22085d);
+  --ez-text-input__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --text-input__message_box--error--color: var(--color--error, #FF0000);
+  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
-  --text-input__label--floating--top: 6px;
+  --ez-text-input__label--floating--top: 6px;
   /*@doc Define o posicionamento do label.*/
-  --text-input__label--padding-top: 12px;
+  --ez-text-input__label--padding-top: 12px;
   /*@doc Define o espaçamento esquerdo do label.*/
-  --text-input__label--padding-left: 14px;
+  --ez-text-input__label--padding-left: 14px;
   /*@doc Define o espaçamento direito do label.*/
-  --text-input__label--padding-right: 12px;
+  --ez-text-input__label--padding-right: 12px;
 
 
   /***************
@@ -63,7 +63,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--text-input--width);
+  width: var(--ez-text-input--width);
 }
 
 input {
@@ -74,40 +74,40 @@ input {
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  height: var(--text-input--height);
-  border-radius: var(--text-input--border-radius);
-  font-family: var(--text-input--font-family);
-  font-size: var(--text-input--font-size);
-  border: var(--text-input__input--border);
-  border-color: var(--text-input__input--border-color);
-  background-color: var(--text-input__input--background-color);
-  color: var(--text-input--color);
+  height: var(--ez-text-input--height);
+  border-radius: var(--ez-text-input--border-radius);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  border: var(--ez-text-input__input--border);
+  border-color: var(--ez-text-input__input--border-color);
+  background-color: var(--ez-text-input__input--background-color);
+  color: var(--ez-text-input--color);
 }
 
 input:disabled {
   /*public*/
-  background-color: var(--text-input__input--disabled--background-color);
-  color: var(--text-input__input--disabled--color);
+  background-color: var(--ez-text-input__input--disabled--background-color);
+  color: var(--ez-text-input__input--disabled--color);
 }
 
 input:focus {
   /*private*/
   outline: none;
   /*public*/
-  border-color: var(--text-input__input--focus--border-color);
+  border-color: var(--ez-text-input__input--focus--border-color);
 }
 
 input.icon--left {
-  padding-left: var(--text-input__icon--width);
+  padding-left: var(--ez-text-input__icon--width);
 }
 
 input.icon--right {
-  padding-right: var(--text-input__icon--width);
+  padding-right: var(--ez-text-input__icon--width);
 }
 
 input.hasError {
-  color: var(--text-input--color);
-  border-color: var(--text-input__input--error--border-color);
+  color: var(--ez-text-input--color);
+  border-color: var(--ez-text-input__input--error--border-color);
 }
 
 input.text--right {
@@ -126,14 +126,14 @@ input.text--right {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--text-input--font-family);
-  font-size: var(--text-input__message_box--font-size);
-  color: var(--text-input__message_box--info--color);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input__message_box--font-size);
+  color: var(--ez-text-input__message_box--info--color);
 }
 
 .hasError {
   /*public*/
-  color: var(--text-input__message_box--error--color);
+  color: var(--ez-text-input__message_box--error--color);
 }
 
 .input__label {
@@ -146,49 +146,49 @@ input.text--right {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--text-input__label--padding-right));
-  left: var(--text-input--space--medium);
+  width: calc(100% - var(--ez-text-input__label--padding-right));
+  left: var(--ez-text-input--space--medium);
 
   /*public*/
-  font-family: var(--text-input--font-family);
-  font-size: var(--text-input--font-size);
-  font-weight: var(--text-input--font-weight);
-  color: var(--text-input--color);
-  top: var(--text-input__label--padding-top);
-  left: var(--text-input__label--padding-left);
-  padding-right: var(--text-input__label--padding-right);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+  top: var(--ez-text-input__label--padding-top);
+  left: var(--ez-text-input__label--padding-left);
+  padding-right: var(--ez-text-input__label--padding-right);
 }
 
 .input__label--floated {
-  font-family: var(--text-input--font-family);
+  font-family: var(--ez-text-input--font-family);
   font-size: var(--text--extra-small);
   color: var(--text--primary);
-  top: var(--text-input__label--floating--top);
+  top: var(--ez-text-input__label--floating--top);
 }
 
 .input__label--disabled {
-  color: var(--text-input__input--disabled--color);
+  color: var(--ez-text-input__input--disabled--color);
 }
 
 .input__label--left {
   /*public*/
   text-align: left;
-  left: calc(var(--text-input__icon--width) + 2px);
+  left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--text-input__icon--width));
+  width: calc(100% - var(--ez-text-input__icon--width));
 }
 
 .input__label--right {
   /*public*/
-  right: var(--text-input__icon--width);
-  width: calc(100% - var(--text-input__icon--width));
+  right: var(--ez-text-input__icon--width);
+  width: calc(100% - var(--ez-text-input__icon--width));
 }
 
 /* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
 .input__label--left.input__label--right {
-  left: calc(var(--text-input__icon--width) + 2px);
+  left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--text-input__icon--width) * 2);
+  width: calc(100% - var(--ez-text-input__icon--width) * 2);
 }
 
 .input--with--label {

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

@@ -1,5 +1,5 @@
-import { Component, Prop, h, Watch, Host, Method, Event, Element } from '@stencil/core';
-import { MaskFormatter } from '@sankhyalabs/core';
+import { Component, Prop, h, Watch, Host, Method, Event, Element } from "@stencil/core";
+import { MaskFormatter } from "@sankhyalabs/core";
 export class EzTextInput {
   constructor() {
     /**
@@ -8,14 +8,14 @@ export class EzTextInput {
     this.enabled = true;
   }
   showError() {
-    const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
+    const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
     if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
+      this._inputElem.classList.add("hasError");
+      this._messageBoxElem.classList.add("hasError");
     }
     else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
+      this._inputElem.classList.remove("hasError");
+      this._messageBoxElem.classList.remove("hasError");
     }
   }
   prepareMask() {
@@ -33,7 +33,8 @@ export class EzTextInput {
       this._inputElem.value = this.value;
     }
     this.handleChange();
-    this.ezChange.emit();
+    this.errorMessage = "";
+    this.ezChange.emit(this.value);
     this.adjustFloatingLabel();
   }
   adjustFloatingLabel() {
@@ -118,22 +119,22 @@ export class EzTextInput {
       content.style.justifyContent = "center";
       content.style.overflow = "hidden";
       content.style.top = "0px";
-      content.style.width = "var(--text-input__icon--width)";
-      content.style.height = "var(--text-input--height)";
+      content.style.width = "var(--ez-text-input__icon--width)";
+      content.style.height = "var(--ez-text-input--height)";
       if (slot.name == "leftIcon") {
         content.style.left = "0px";
-        content.style.borderRadius = "var(--text-input--border-radius) 0 0 var(--text-input--border-radius)";
-        this._inputElem.classList.add('icon--left');
+        content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
+        this._inputElem.classList.add("icon--left");
         if (this._labelElem) {
-          this._labelElem.classList.add('input__label--left');
+          this._labelElem.classList.add("input__label--left");
         }
       }
       else if (slot.name == "rightIcon") {
         content.style.right = "0px";
-        content.style.borderRadius = "0 var(--text-input--border-radius) var(--text-input--border-radius) 0";
-        this._inputElem.classList.add('icon--right');
+        content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
+        this._inputElem.classList.add("icon--right");
         if (this._labelElem) {
-          this._labelElem.classList.add('input__label--right');
+          this._labelElem.classList.add("input__label--right");
         }
       }
     }

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

@@ -1,6 +1,7 @@
-import { Element, Component, Prop, h, Watch, Host, Method, getAssetPath } from "@stencil/core";
+import { Element, Component, Prop, h, Watch, Host, Method } from "@stencil/core";
 import { TimeFormatter, MaskFormatter, NumberUtils } from "@sankhyalabs/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import { getSpritePath } from "../../utils/AssetsUtils";
 export class EzTimeInput {
   constructor() {
     /**
@@ -97,7 +98,7 @@ export class EzTimeInput {
   render() {
     return (h(Host, null,
       h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage },
-        h("ez-icon", { slot: "leftIcon", href: getAssetPath("../assets/actions-sprite.svg") + "#timer-outline" }))));
+        h("ez-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { Component, h, Prop, Element, Event, Method, Watch, forceUpdate } from "@stencil/core";
-import Application from "../../utils/Application";
+import ApplicationUtils from "../../utils/ApplicationUtils";
 import RemoteFile from "./RemoteFile";
 export class EzUpload {
   constructor() {
@@ -61,7 +61,7 @@ export class EzUpload {
   async addFile(file) {
     const oldFile = this._filePointers.get(file.name);
     if (oldFile) {
-      Application.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
+      ApplicationUtils.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
         .then(ok => {
         if (ok) {
           if (this.isRemoteFile(oldFile)) {
@@ -133,7 +133,7 @@ export class EzUpload {
     return true;
   }
   showError(message) {
-    Application.alert("Enviando arquivo", message);
+    ApplicationUtils.alert("Enviando arquivo", message);
   }
   formatBytes(bytes, decimals = 1) {
     if (bytes === 0)

package/dist/collection/components/test-du/test-du.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/test-du/test-du.js

@@ -0,0 +1,45 @@
+import { Component, h } from '@stencil/core';
+import { DataUnit, DataType } from '@sankhyalabs/core';
+export class TestDu {
+  constructor() {
+    this._dataUnit = new DataUnit("duteste");
+  }
+  componentDidLoad() {
+    this._dataUnit.dataLoader = (_dataUnit, _sort, _filters) => {
+      return Promise.resolve([
+        { __record__id__: "registro1", CODPARC: 10, NOMEPARC: "Parceiro 10" },
+        { __record__id__: "registro2", CODPARC: 20, NOMEPARC: "Parceiro 20" }
+      ]);
+    };
+    this._dataUnit.metadata = {
+      name: "Parceiro",
+      label: "Parceiro",
+      fields: [
+        {
+          name: "CODPARC",
+          label: "Cód. Parceiro",
+          dataType: DataType.NUMBER
+        },
+        {
+          name: "NOMEPARC",
+          label: "Nome Parceiro",
+          dataType: DataType.TEXT
+        }
+      ]
+    };
+  }
+  render() {
+    return (h("section", { class: "padding--large" },
+      h("div", { class: "row margin-bottom--large" },
+        h("h1", { class: "title title--primary" }, "Formul\u00E1rios")),
+      h("div", { class: "col col--sd-12", style: { height: "600px" } },
+        h("ez-grid", { dataUnit: this._dataUnit, "server-url": "https://www.ag-grid.com/example-assets/row-data.json", "multiple-selection": true, "page-size": "100" }))));
+  }
+  static get is() { return "test-du"; }
+  static get originalStyleUrls() { return {
+    "$": ["test-du.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["test-du.css"]
+  }; }
+}