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

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.js

@@ -53,6 +53,12 @@ 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._containerElem.classList.add("label__container--active") : this._containerElem.classList.remove("label__container--active");
   }
@@ -81,7 +87,7 @@ export class EzChip {
     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-combo-box/ez-combo-box.js

@@ -93,7 +93,14 @@ export class EzComboBox {
     if (currentValue) {
       text = this.showSelectedValue ? `${currentValue.value} - ${currentValue.label}` : currentValue.label;
     }
-    return text;
+    if (text == undefined) {
+      return;
+    }
+    return String(text)
+      .replace(/&/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"');
   }
   getSelectedOption(value) {
     if (typeof value === "string" || value instanceof String) {
@@ -186,7 +193,7 @@ export class EzComboBox {
   }
   scrollToOption(opt, down) {
     window.requestAnimationFrame(() => {
-      const liElem = this._optionsList.querySelector(`li#item_${opt.value}`);
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value}`) : undefined;
       if (liElem) {
         const parent = liElem.parentElement;
         const parentRect = parent.getBoundingClientRect();

package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { CheckMode } from "../../../ez-check/CheckMode";
 export const buildSwitch = (fieldConfig) => {
   return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
 };
@@ -7,5 +8,5 @@ export const buildCheckBox = (fieldConfig) => {
 };
 function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
-    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
+    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
 }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -237,8 +237,7 @@ export default class AgGridController {
     let columns = this.getColumnsDef();
     let visibleColumns = [];
     let sort = [];
-    state.forEach((cfgColumn, index) => {
-      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 1);
+    state.forEach((cfgColumn) => {
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, cfgColumn.width);
       visibleColumns.push(cfgColumn.name);
       if (cfgColumn.ascending !== undefined) {
@@ -272,7 +271,7 @@ export default class AgGridController {
       props.set('sortable', def.sortable);
       this.conditionalSet(colState, "props", props);
       return colState;
-    }).filter(c => c.name !== "__SELECTION__");
+    }).filter(c => c.name !== "__SELECTION__" && c.name !== this.STATUS_COL_ID);
   }
   getSelection() {
     return this._gridOptions.api.getSelectedRows();

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

@@ -2,6 +2,12 @@ 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);
   }
@@ -22,13 +28,13 @@ export class EzModalContainer {
   render() {
     return (h(Host, null,
       h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }),
-      h("div", { class: "ez-modal-container__header ez-align--middle" },
+      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 ez-margin-top--large" },
+      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,
@@ -78,6 +84,24 @@ export class EzModalContainer {
       "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,

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

@@ -62,6 +62,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
+  outline: none;
   background: #FFFF;
   color: var(--ez-popup__container--color);
   border-radius: 12px;

package/dist/collection/utils/index.js

@@ -1,4 +1,4 @@
 export { default as ApplicationUtils } from './ApplicationUtils';
 export { default as CSSVarsUtils } from './CSSVarsUtils';
 export { DialogType } from '../components/ez-dialog/DialogType';
-export { buildField as formFieldBuilder } from '../components/ez-form/fieldbuilder/FieldBuilder';
+export { CheckMode } from '../components/ez-check/CheckMode';