@sankhyalabs/ezui 1.1.55 → 1.1.59

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

@@ -0,0 +1,157 @@
+import { Component, h, Host, Prop, Event, Watch, Method } from '@stencil/core';
+export class EzCollapsibleBox {
+  constructor() {
+    /**
+     * Valor externalizado que garante a exibição ou não do componente
+     */
+    this.value = false;
+    /**
+    * Define o tamanho do texto e do ícone do componente.
+    */
+    this.headersize = "small";
+    /**
+    * Define o local onde o ícone será renderizado.
+    */
+    this.iconplacement = "left";
+  }
+  observeValue() {
+    this.ezChange.emit();
+  }
+  /**
+   * Esconde ou revela o conteúdo do componente
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  render() {
+    return (h(Host, null,
+      this.iconplacement == 'right' ?
+        h("div", { class: "collapsible-box__title" },
+          h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label),
+          h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }))
+        :
+          h("div", { class: "collapsible-box__title" },
+            h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }),
+            h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label)),
+      !this.value ? h("slot", null) : null));
+  }
+  static get is() { return "ez-collapsible-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-collapsible-box.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-collapsible-box.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente"
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o t\u00EDtulo do campo"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "headersize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o tamanho do texto e do \u00EDcone do componente."
+      },
+      "attribute": "headersize",
+      "reflect": true,
+      "defaultValue": "\"small\""
+    },
+    "iconplacement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o local onde o \u00EDcone ser\u00E1 renderizado."
+      },
+      "attribute": "iconplacement",
+      "reflect": true,
+      "defaultValue": "\"left\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "showHide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Esconde ou revela o conte\u00FAdo do componente",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "observeValue"
+    }]; }
+}

package/dist/collection/components/ez-form/subcomponents/structure/FieldSet.js

@@ -21,7 +21,7 @@ export const FieldSet = ({ store, formName, source, dataUnit, enabled }) => {
   return h("div", { class: "col col--sd-12 padding--small" },
     h("div", { class: "row margin-top--large" },
       h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
-        h("ez-collapsable-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(collapseExpandGroup(fieldSetName, !isCollapsed)) }),
+        h("ez-collapsible-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(collapseExpandGroup(fieldSetName, !isCollapsed)) }),
         isCollapsed ? null :
           h("div", { class: "col col--sd-12" }, fields.map(field => h(Field, { enabled: enabled, field: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
 };

package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js

@@ -7,6 +7,13 @@ function removeHandler(dataUnit) {
     }
   });
 }
+function saveHandler(dataUnit) {
+  setTimeout(() => {
+    //Esse debouncing é necessário quando o usuário clica no botão de salvar 
+    //sem ter tirado o foco o último campo alterado.
+    dataUnit.save();
+  }, 50);
+}
 export const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
   if (buttonProps.previousVisible
     || buttonProps.nextVisible
@@ -22,7 +29,7 @@ export const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
       buttonProps.addVisible ? h("ez-button", { key: du.name + '_add', label: "Adicionar", enabled: enabled, onClick: () => du.insert(), class: "button--secondary margin-right--medium" }) : null,
       buttonProps.reloadVisible ? h("ez-button", { key: du.name + '_reload', title: "Recarregar", enabled: enabled, mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }) : null,
       buttonProps.cancelVisible ? h("ez-button", { key: du.name + '_cancel', label: "Cancelar", enabled: enabled && du.hasChanges(), onClick: () => du.cancel(), class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.saveVisible ? h("ez-button", { key: du.name + '_save', label: "Salvar", enabled: enabled && du.hasChanges(), onClick: () => du.save(), class: "button--primary margin-right--medium" }) : null);
+      buttonProps.saveVisible ? h("ez-button", { key: du.name + '_save', label: "Salvar", enabled: enabled && du.hasChanges(), onClick: () => saveHandler(du), class: "button--primary margin-right--medium" }) : null);
   }
   else {
     return null;

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

@@ -24,6 +24,7 @@
   --lc__message_box--font-size: var(--text--small, 12px);
   --lc__message_box--info--color: var(--color--success, #22085d);
   --lc__message_box--error--color: var(--color--error, #FF0000);
+  --lc--close__image: url('data:image/svg+xml;utf8,<svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><path d="M 4.7098145,3.9968334 7.8535703,0.85318776 C 7.9473034,0.75946455 8,0.63233985 8,0.49978585 8,0.36723841 7.947304,0.24011361 7.8535703,0.14638378 7.7598354,0.05266059 7.6327257,6.48e-8 7.500152,6.48e-8 7.3676457,6.48e-8 7.2404691,0.0526608 7.1467354,0.14638378 L 4.00298,3.2900293 0.8591984,0.14638378 C 0.76546463,0.05266059 0.63834103,6.48e-8 0.50578123,6.48e-8 0.3732281,6.48e-8 0.24609783,0.05266059 0.15236397,0.14638378 0.05863012,0.24011361 0.00597395,0.36723841 0.00597395,0.49978585 c 0,0.132554 0.05265617,0.2596787 0.14639002,0.35340191 L 3.2961455,3.9968334 0.15236397,7.1411589 C 0.10466427,7.1872561 0.06663114,7.2424161 0.04046961,7.303371 0.01431473,7.3643212 5.6180845e-4,7.429943 1.6859246e-5,7.4962264 -5.2808998e-4,7.5625744 0.01214297,7.6283944 0.03729854,7.6897476 c 0.02514888,0.061416 0.06227604,0.1171794 0.1092096,0.1640783 0.0469402,0.046903 0.10274083,0.083936 0.16415749,0.1090508 0.0614166,0.025114 0.12721688,0.037703 0.19355667,0.037103 0.06634,-5.714e-4 0.13190027,-0.014457 0.19284393,-0.04064 0.0609507,-0.026246 0.11606474,-0.064351 0.16213217,-0.1120492 L 4.00298,4.7036374 7.1467354,7.8472967 c 0.093734,0.09373 0.2209103,0.1463572 0.3534166,0.1463572 0.1325737,0 0.2596834,-0.052623 0.3534183,-0.1463572 C 7.9473034,7.753567 8,7.6264624 8,7.493895 8,7.3613281 7.9473086,7.2342224 7.8535703,7.1404927 Z"/></svg>');
 }
 
 .padding-right--small {
@@ -34,6 +35,26 @@
   padding-left: var(--lc--space--medium);
 }
 
+.btn-close {
+  align-items: flex-start;
+  display: flex;
+  outline: none;
+  border: none;
+  padding: 0px 0px 0px 6px;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-close::after {
+  content: '';
+  display: flex;
+  background-color: var(--lc__label--color-primary);
+  width: 8px;
+  height: 8px;
+  -webkit-mask-image: var(--lc--close__image);
+  mask-image: var(--lc--close__image);
+}
+
 .label__container {
   /*private*/
   width: fit-content;
@@ -41,14 +62,15 @@
   flex-wrap: wrap;
   position: relative;
   align-items: center;
+  background-color: #FFFFFF;
   align-self: center;
   color: var(--lc__label--title--primary);
   fill: var(--lc__label--title--primary);
   border: var(--lc__border);
   border-radius: var(--lc--border-radius);
   border-color: var( --lc__border-color-strokes);
-  padding-right: var(--space--large, 12px);
-  padding-left: var(--space--large, 12px);
+  padding-right: var(--space--medium, 12px);
+  padding-left: var(--space--medium, 12px);
 }
 
 .label__container:hover {
@@ -66,8 +88,8 @@
   align-self: center;
   border: var(--lc__border);
   border-radius: var(--lc--border-radius);
-  padding-right: var(--space--large, 12px);
-  padding-left: var(--space--large, 12px);
+  padding-right: var(--space--medium, 12px);
+  padding-left: var(--space--medium, 12px);
   fill: var(--lc__label--color-primary);
   color: var(--lc__label--color-primary);
   border-color: var(--lc__label--background-color);
@@ -85,8 +107,8 @@
   border: var(--lc__border);
   border-color: var(--lc__label-color--disable-secondary);
   border-radius: var(--lc--border-radius);
-  padding-right: var(--space--large, 12px);
-  padding-left: var(--space--large, 12px);
+  padding-right: var(--space--medium, 12px);
+  padding-left: var(--space--medium, 12px);
   fill: var(--lc__label--text--disabled);
   color: var(--lc__label--text--disabled);
   background-color: var(--lc__label-color--disable-secondary);
@@ -96,8 +118,6 @@ label {
   /*private*/
   display: flex;
   align-items: center;
-  width: calc(100% - var(--lc__icon--width));
-  width: fit-content;
   font-weight: var(--text-weight--large, 600);
   cursor: pointer;
   /*public*/

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

@@ -56,33 +56,6 @@ export class EzLabelChip {
       }
     }
   }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (content) {
-      content.style.position = "absolute";
-      content.style.display = "flex";
-      content.style.alignItems = "center";
-      content.style.justifyContent = "center";
-      content.style.overflow = "hidden";
-      content.style.top = "0px";
-      content.style.width = "var(--lc__icon--width)";
-      content.style.height = "var(--lc--height)";
-      if (slot.name == "leftIcon") {
-        content.style.left = "0px";
-        this._labelElem.classList.add('padding-left--small');
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.right = "0px";
-        if (this.removable) {
-          this._iconElement.classList.add('padding-right--small');
-        }
-        else {
-          this._labelElem.classList.add('padding-right--small');
-        }
-      }
-    }
-  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -108,12 +81,12 @@ export class EzLabelChip {
   }
   render() {
     return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el },
-      h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      h("label", { class: this.removable ? "padding-right--small" : " ", ref: (el) => this._labelElem = el }, this.label),
+      h("slot", { name: "leftIcon" }),
+      h("label", { ref: (el) => this._labelElem = el }, this.label),
       this.removable ?
-        h("ez-icon", { class: "label__icon align--middle padding-horizontal--medium", onClick: () => { this.removeChip.emit(); }, ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#close", size: "x-small" })
+        h("button", { class: "btn-close", onClick: () => { this.removeChip.emit(); } })
         : null,
-      h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      h("slot", { name: "rightIcon" })));
   }
   static get is() { return "ez-label-chip"; }
   static get encapsulation() { return "shadow"; }

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

@@ -20,6 +20,7 @@
   width: 100%;
   scroll-behavior: smooth;
   overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .scroll.startHidden{

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

@@ -16,7 +16,7 @@
   --it__input--border: var(--border--medium, 2px solid);
   --it__input--border-color: var(--it__input--background-color);
   /*no modo normal usamos a borda com a mesma cor do bg*/
-  --it__input--focus--border-color: var(--color--primary, #008561);
+  --it__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
   --it__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   --it__input--disabled--color: var(--text--disable, #AFB6C0);
   --it__input--error--border-color: #CC2936;

package/dist/custom-elements/index.d.ts

@@ -26,10 +26,10 @@ export const EzCheck: {
   new (): EzCheck;
 };
 
-interface EzCollapsableBox extends Components.EzCollapsableBox, HTMLElement {}
-export const EzCollapsableBox: {
-  prototype: EzCollapsableBox;
-  new (): EzCollapsableBox;
+interface EzCollapsibleBox extends Components.EzCollapsibleBox, HTMLElement {}
+export const EzCollapsibleBox: {
+  prototype: EzCollapsibleBox;
+  new (): EzCollapsibleBox;
 };
 
 interface EzComboBox extends Components.EzComboBox, HTMLElement {}