@sankhyalabs/ezui 1.1.127 → 1.1.128

package/dist/cjs/ez-collapsible-box.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e284e03.js');
 
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;margin-bottom:var(--space--medium, 12px)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition);--ez-icon--color:var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__content{display:flex;flex-wrap:wrap;overflow:hidden;width:100%;height:0px;max-height:0px;opacity:0;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;margin-bottom:var(--space--medium, 12px)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition);--ez-icon--color:var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
 
 let EzCollapsibleBox = class {
   constructor(hostRef) {
@@ -16,7 +16,6 @@ let EzCollapsibleBox = class {
     this.value = false;
     /**
     * Define o tamanho do texto e do ícone do componente.
-    * Tamanhos suportados: "x-small", "small", "medium", "large" e "x-large".
     */
     this.headerSize = "small";
     /**
@@ -43,8 +42,9 @@ let EzCollapsibleBox = class {
   getHeaderSize() {
     const sizeAlias = ["xsmall", "xlarge"];
     const sizeList = ["x-small", "small", "medium", "large", "x-large"];
-    const headerSize = sizeAlias.includes(this.headerSize) ? this.headerSize.replace('x', 'x-') : this.headerSize;
-    return sizeList.includes(headerSize) ? headerSize : "small";
+    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
+    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
+    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
   }
   render() {
     return (index.h("div", { class: "collapsible-box" }, index.h("div", { class: "collapsible-box__header" }, index.h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +

package/dist/cjs/ez-form.cjs.entry.js

@@ -7,12 +7,12 @@ const core = require('@sankhyalabs/core');
 const ApplicationUtils = require('./ApplicationUtils-4a223c7a.js');
 
 const buildTextArea = ({ name, label, readOnly }) => {
-  return (index.h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
     index.h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
 };
 
 const buildTextInput = ({ name, label }) => {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-text-input", { label: label, "data-field-name": name, key: name })));
 };
 
@@ -23,7 +23,7 @@ const buildCheckBox = (fieldConfig) => {
   return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
 };
 function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 align--middle padding-horizontal--small padding-bottom--large" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
     index.h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
 }
 
@@ -37,30 +37,30 @@ const buildComboBox = ({ name, label, readOnly, required }, properties) => {
   else {
     options = prop;
   }
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
 };
 
 const buildSearch = ({ name, label, readOnly, required }) => {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
 };
 
 const buildFile = ({ name, label, readOnly }) => {
-  return (index.h("div", { class: "col col--sd-12 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
 
 const buildDate = ({ name, label, readOnly }) => {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
 const buildTime = ({ name, label }) => {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-time-input", { label: label, "data-field-name": name, key: name })));
 };
 const buildTimeDate = ({ name, label }) => {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
 };
 
@@ -73,7 +73,7 @@ const buildInteger = ({ name, label, readOnly }) => {
   return buildNumeric(name, label, readOnly, 0, 0);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (index.h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
 }
 
@@ -130,8 +130,8 @@ const FormItem = ({ source }) => {
 };
 
 const FormSheet = ({ store, source }) => {
-  return (index.h("div", { class: "dynamic-content box__container" },
-    index.h("div", { class: "row padding-vertical--small" }, source.items.map(item => index.h(FormItem, { store: store, source: item })))));
+  return (index.h("div", { class: "dynamic-content ez-box__container" },
+    index.h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => index.h(FormItem, { store: store, source: item })))));
 };
 
 class FormMetadata {

package/dist/cjs/ez-grid.cjs.entry.js

@@ -110663,9 +110663,9 @@ let EzGrid = class {
       return null;
     }
     return [
-      index.h("div", { class: "text text--primary text--medium margin-right--medium" }, index.h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
-      index.h("ez-button", { size: "small", iconName: "chevron-left", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      index.h("ez-button", { size: "small", iconName: "chevron-right", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
+      index.h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      index.h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(config) {
@@ -110681,7 +110681,7 @@ let EzGrid = class {
     this._popUpVisible = true;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "box box--shadow padding--medium grid-header" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container" }, this.getPaginationControl(), index.h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))), index.h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" }), index.h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, index.h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));
+    return (index.h(index.Host, null, index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container" }, this.getPaginationControl(), index.h("ez-button", { size: "small", iconName: "settings", class: "ez-button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))), index.h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" }), index.h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, index.h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   static get watchers() { return {

package/dist/cjs/ez-tabselector.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e284e03.js');
 
-const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
+const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
 
 let EzTabselector = class {
   constructor(hostRef) {
@@ -138,7 +138,7 @@ let EzTabselector = class {
       else {
         this._forwardButton.classList.add("hidden");
       }
-      const classNames = ["", "startHidden", "endHidden", "midle"];
+      const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
       classNames.forEach((name) => {
         if (name !== currentClass && container.classList.contains(name)) {

package/dist/cjs/grid-config.cjs.entry.js

@@ -384,7 +384,7 @@ let GridConfig = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "grid-config__header" }, index.h("div", { class: "title-container" }, index.h("div", { class: "" }, index.h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), index.h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), index.h("div", { class: "button-close" }, index.h("ez-button", { mode: 'icon', image: AssetsUtils.getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "tabselector-container" }, index.h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })), index.h("div", null, index.h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, index.h("ez-icon", { slot: "leftIcon", size: "medium", href: AssetsUtils.getSpritePath("search") })))), index.h("div", { class: "grid-config__main" }, index.h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), index.h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"), index.h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), index.h("div", { class: "grid-config__footer" }, index.h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), index.h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
+    return (index.h(index.Host, null, index.h("div", { class: "grid-config__header" }, index.h("div", { class: "title-container" }, index.h("div", { class: "" }, index.h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), index.h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), index.h("div", { class: "button-close" }, index.h("ez-button", { mode: 'icon', image: AssetsUtils.getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "tabselector-container" }, index.h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })), index.h("div", null, index.h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, index.h("ez-icon", { slot: "leftIcon", size: "medium", href: AssetsUtils.getSpritePath("search") })))), index.h("div", { class: "grid-config__main" }, index.h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), index.h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"), index.h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), index.h("div", { class: "grid-config__footer" }, index.h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), index.h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
 };

package/dist/cjs/select-box.cjs.entry.js

@@ -13,7 +13,7 @@ let SelectBox = class {
     this.selectedOption = { value: "na", label: "N/A" };
   }
   render() {
-    return (index.h("ez-combo-box", { class: "grid-config-combo inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, index.h("option", { value: "na" }, "N/A"), index.h("option", { value: "asc" }, "A-Z"), index.h("option", { value: "desc" }, "Z-A")));
+    return (index.h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, index.h("option", { value: "na" }, "N/A"), index.h("option", { value: "asc" }, "A-Z"), index.h("option", { value: "desc" }, "Z-A")));
   }
   static get assetsDirs() { return ["../assets"]; }
 };

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

@@ -124,11 +124,11 @@
   /*private*/
   display: flex;
   flex-wrap: wrap;
-  overflow: hidden;
   width: 100%;
   height: 0px;
   max-height: 0px;
   opacity: 0;
+  overflow: hidden;
 
   /*public*/
   transition: all var(--transition, 0.5s);
@@ -139,6 +139,7 @@
   height: 100%;
   max-height: none;
   opacity: 1;
+  overflow: visible;
 
   /*public*/
   transition: all var(--transition, 0.5s);

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

@@ -7,7 +7,6 @@ export class EzCollapsibleBox {
     this.value = false;
     /**
     * Define o tamanho do texto e do ícone do componente.
-    * Tamanhos suportados: "x-small", "small", "medium", "large" e "x-large".
     */
     this.headerSize = "small";
     /**
@@ -34,8 +33,9 @@ export class EzCollapsibleBox {
   getHeaderSize() {
     const sizeAlias = ["xsmall", "xlarge"];
     const sizeList = ["x-small", "small", "medium", "large", "x-large"];
-    const headerSize = sizeAlias.includes(this.headerSize) ? this.headerSize.replace('x', 'x-') : this.headerSize;
-    return sizeList.includes(headerSize) ? headerSize : "small";
+    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
+    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
+    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
   }
   render() {
     return (h("div", { class: "collapsible-box" },
@@ -96,15 +96,15 @@ export class EzCollapsibleBox {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | undefined",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o tamanho do texto e do \u00EDcone do componente.\nTamanhos suportados: \"x-small\", \"small\", \"medium\", \"large\" e \"x-large\"."
+        "text": "Define o tamanho do texto e do \u00EDcone do componente."
       },
       "attribute": "header-size",
       "reflect": true,
@@ -114,8 +114,8 @@ export class EzCollapsibleBox {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "\"left\" | \"right\"",
+        "resolved": "\"left\" | \"right\"",
         "references": {}
       },
       "required": false,

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

@@ -6,6 +6,6 @@ export const buildCheckBox = (fieldConfig) => {
   return buildField(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (h("div", { class: "col col--sd-12 col--tb-3 align--middle padding-horizontal--small padding-bottom--large" },
+  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 })));
 }

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

@@ -9,6 +9,6 @@ export const buildComboBox = ({ name, label, readOnly, required }, properties) =
   else {
     options = prop;
   }
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
 };

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

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 export const buildDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
 export const buildTime = ({ name, label }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-time-input", { label: label, "data-field-name": name, key: name })));
 };
 export const buildTimeDate = ({ name, label }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
 };

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const buildFile = ({ name, label, readOnly }) => {
-  return (h("div", { class: "col col--sd-12 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };

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

@@ -8,6 +8,6 @@ export const buildInteger = ({ name, label, readOnly }) => {
   return buildNumeric(name, label, readOnly, 0, 0);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const buildSearch = ({ name, label, readOnly, required }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
 };

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const buildTextArea = ({ name, label, readOnly }) => {
-  return (h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
 };

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const buildTextInput = ({ name, label }) => {
-  return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-text-input", { label: label, "data-field-name": name, key: name })));
 };

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { FormItem } from "./FormItem";
 export const FormSheet = ({ store, source }) => {
-  return (h("div", { class: "dynamic-content box__container" },
-    h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
+  return (h("div", { class: "dynamic-content ez-box__container" },
+    h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
 };

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

@@ -171,11 +171,11 @@ export class EzGrid {
       return null;
     }
     return [
-      h("div", { class: "text text--primary text--medium margin-right--medium" },
-        h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
+      h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" },
+        h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
         ` de ${this._navigationTotalRows}`),
-      h("ez-button", { size: "small", iconName: "chevron-left", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      h("ez-button", { size: "small", iconName: "chevron-right", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(config) {
@@ -192,13 +192,13 @@ export class EzGrid {
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "box box--shadow padding--medium grid-header" },
+      h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
         h("div", { class: "grid-header__container" },
           h("slot", { name: "leftButtons" })),
         h("div", { class: "grid-header__container" },
           this.getPaginationControl(),
-          h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))),
-      h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }),
+          h("ez-button", { size: "small", iconName: "settings", class: "ez-button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))),
+      h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }),
       h("div", { class: "grid__footer" }),
       h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false },
         h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js

@@ -395,7 +395,7 @@ export class GridConfig {
         h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
       h("div", { class: "grid-config__footer" },
         h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
-        h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
+        h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get is() { return "grid-config"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.js

@@ -4,7 +4,7 @@ export class SelectBox {
     this.selectedOption = { value: "na", label: "N/A" };
   }
   render() {
-    return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
+    return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
       h("option", { value: "na" }, "N/A"),
       h("option", { value: "asc" }, "A-Z"),
       h("option", { value: "desc" }, "Z-A")));

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

@@ -33,7 +33,7 @@
   -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
 }
 
-.scroll.midle {
+.scroll.middle {
   -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
 }
 

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

@@ -129,7 +129,7 @@ export class EzTabselector {
       else {
         this._forwardButton.classList.add("hidden");
       }
-      const classNames = ["", "startHidden", "endHidden", "midle"];
+      const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
       classNames.forEach((name) => {
         if (name !== currentClass && container.classList.contains(name)) {