@sankhyalabs/ezui 6.1.0-dev.3 → 6.1.0-dev.30

package/dist/esm/ez-dialog.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getE
 import { D as DialogType } from './DialogType-54a62731.js';
 import { FloatingManager, ElementIDUtils, KeyboardManager } from '@sankhyalabs/core';
 import { F as FocusResolver } from './FocusResolver-1ccbf850.js';
+import { i as initI18n } from './index-76eedf30.js';
 
 const ezDialogCss = ":host{--dialog__container-padding:var(--space--md, 20px);--dialog__btn__close--background-color:var(--title--primary, #2b3a54);--dialog__btn__no--padding-right:var(--space--large, 24px);--dialog__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--dialog__title--font-pattern:var(--font-pattern, \"Roboto\");--dialog__title--padding-left:var(--space--small, 6px);--dialog__title__container--padding-bottom:var(--space--medium, 12px);--dialog__title--weight--large:var(--text-weight--large, 600);--dialog__body--font-pattern:var(--font-pattern, \"Roboto\");--dialog__body--text-shadow:var(--text-shadow, \"0 0 0 #353535, 0 0 1px transparent\");--dialog__body--text-weight--medium:var(--text-weight--medium, 400);--dialog__body--padding-bottom:var(--space--medium, 12px);--dialog__body--font-size:var(--text--medium, 14px);--dialog__body--color:var(--text--primary, #626e82);--dialog__icon--color:var(--text--inverted, #fff);--dialog__critical--background-color:var(--color--alert-error-800, #BD0025);--dialog__warning--background-color:var(--color--alert-warning-500, #EFB103);--dialog__success--background-color:var(--color--alert-success-500, #00523c);--dialog-z-index:var(--elevation--100, 100);--dialog--warning__image:url('data: image/svg+xml;utf8,<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 7.5,0 0,13 h 15 z m 0,2.73684 5.1341,8.89476 H 2.36591 Z M 6.81818,5.47368 V 8.21053 H 8.18182 V 5.47368 Z m 0,4.10527 V 10.9474 H 8.18182 V 9.57895\"/></svg>');--dialog--critical__image:url('data: image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 7.6534493,6.4948538 12.762051,1.3864299 C 12.914368,1.2341297 13,1.027552 13,0.81215179 13,0.59676225 12.914369,0.39018443 12.762051,0.23787352 12.609733,0.08557341 12.40318,0 12.187747,0 11.972425,0 11.765762,0.08557341 11.613445,0.23787352 L 6.5048431,5.3462975 1.3961977,0.23787352 C 1.2438802,0.08557341 1.0373043,0 0.82189458,0 0.60649572,0 0.39990901,0.08557341 0.24759147,0.23787352 0.09527396,0.39018443 0.00970766,0.59676225 0.00970766,0.81215179 c 0,0.21540021 0.0855663,0.42197791 0.23788381,0.57427811 L 5.3562369,6.4948538 0.24759147,11.604381 c -0.0775121,0.07492 -0.13931586,0.164543 -0.18182835,0.263595 -0.04250169,0.09905 -0.064850182,0.205678 -0.0657357237,0.313391 -8.8554258e-4,0.107813 0.0197049337,0.214771 0.0605827337,0.314472 0.04086693,0.0998 0.10119858,0.190415 0.17746563,0.266625 0.0762779,0.07622 0.16695386,0.136398 0.26675594,0.177208 0.099802,0.04082 0.20672745,0.06127 0.31452961,0.06029 0.1078025,-9.53e-4 0.21433799,-0.0235 0.31337139,-0.06604 0.099045,-0.04265 0.1886052,-0.104571 0.263465,-0.182081 L 6.5048431,7.6434102 11.613445,12.751855 c 0.152317,0.152312 0.35898,0.237831 0.574302,0.237831 0.215433,0 0.421986,-0.08552 0.574304,-0.237831 C 12.914368,12.599545 13,12.393 13,12.177578 13,11.962157 12.91437,11.75561 12.762051,11.603299 Z\"/></svg>')}h2{margin-block-start:0;margin-block-end:0;margin-inline-start:0px;margin-inline-end:0px}.overlay{position:fixed;display:flex;top:0px;z-index:var(--dialog-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.dialog{display:flex;width:80%;position:absolute;top:50%;left:50%;margin-right:-50%;box-sizing:border-box;transform:translate(-50%, -50%);box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122)}@media screen and (min-width: 768px){.dialog{width:50%}}@media screen and (min-width: 992px){.dialog{width:33.33333%}}.dialog__container{width:100%;background:#FFFF;border-radius:0px 6px 6px 0px;box-sizing:border-box;padding:var(--dialog__container-padding)}.dialog__container--default{border-radius:6px 6px 6px 6px}.dialog__critical--indicator{box-sizing:border-box;width:12px;border-radius:6px 0px 0px 6px;background-color:var(--dialog__critical--background-color)}.dialog__warning--indicator{width:12px;border-radius:6px 0px 0px 6px;box-sizing:border-box;background-color:var(--dialog__warning--background-color)}.dialog__success--indicator{width:12px;border-radius:6px 0px 0px 6px;box-sizing:border-box;background-color:var(--dialog__success--background-color)}.message{font-size:var(--dialog__body--font-size);font-weight:var(--dialog__body--text-weight--medium);font-family:var(--dialog__body--font-pattern);text-shadow:var(--dialog__body--text-shadow);padding-bottom:var(--dialog__body--padding-bottom);color:var(--dialog__body--color);max-height:30vh;content-visibility:auto;margin-bottom:var(--space--medium);overflow-y:auto}.changeable__icon__container{background:var(--dialog__warning--background-color);display:flex;justify-content:center;align-items:center;min-width:26px;min-height:26px;border-radius:50%}.changeable__icon{--ez-icon--color:var(--dialog__icon--color)}.changeable__icon__container.title-icon--critical{background-color:var(--dialog__critical--background-color)}.changeable__icon__container.title-icon--success{background-color:var(--dialog__success--background-color)}.changeable__icon__container.title-icon--warn{background-color:var(--dialog__warning--background-color)}.changeable__icon__container.title-icon--warn ez-icon{transform:translateY(-1px)}.title{display:flex;font-family:var(--dialog__title--font-pattern);margin:0;font-weight:var(--dialog__title--weight--large);color:var(--title--primary)}.title__container{display:flex;padding-bottom:var(--dialog__title__container--padding-bottom)}.title__box{display:flex;width:100%;align-items:center;align-self:center}.title__label{padding-left:var(--dialog__title--padding-left)}.title__label--no-icon{padding-left:0}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--dialog__btn__close--background-color);width:12px;height:12px;-webkit-mask-image:var(--dialog__btn__close__image);mask-image:var(--dialog__btn__close__image)}.title-icon::after{content:'';display:flex;background-color:#FFFF;width:15px;height:15px;-webkit-mask-image:var(--dialog--warning__image);mask-image:var(--dialog--warning__image)}.button-yes-no__container{display:flex;box-sizing:border-box;align-self:center;align-items:center;justify-content:flex-end}.button__cancel{padding-right:var(--dialog__btn__no--padding-right)}.button__confirm{--ez-button--background-color:var(--color--primary);--ez-button--color:var(--color--inverted);--ez-button--hover--background-color:var(--color--primary-600);--ez-button--hover-color:var(--color--inverted)}.button__confirm--danger{--ez-button--background-color:var(--color--alert-error-800, #BD0025);--ez-button--color:var(--color--inverted);--ez-button--hover--background-color:var(--color-alert--error-900, #a10020);--ez-button--hover-color:var(--color--inverted)}.button__confirm--container{display:flex;justify-content:flex-end}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
@@ -25,8 +26,6 @@ const EzDialog = class {
     this.ezCancel = createEvent(this, "ezCancel", 7);
     this.ezAccept = createEvent(this, "ezAccept", 7);
     this.PRIMARY_BUTTON_ID = "EZ_DIALOG_PRIMARY_BUTTON";
-    this.labelConfirm = 'Sim';
-    this.labelCancel = 'Não';
     this.btnConfirmDanger = false;
     this._messageQueue = [];
     this._canFocusOnPrimaryBtn = false;
@@ -143,6 +142,9 @@ const EzDialog = class {
   getClassTitleLabel(message) {
     return this.getIconElement(message) == undefined ? "title title__label title__label--no-icon" : "title title__label";
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentWillRender() {
     if (!this._currentMessage) {
       if (this._messageQueue.length > 0) {
@@ -150,7 +152,7 @@ const EzDialog = class {
       }
       else {
         if (this.opened) {
-          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.labelCancel, this.labelConfirm, this.btnConfirmDanger, null, this.beforeClose);
+          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.i18n("app.no"), this.i18n("app.yes"), this.btnConfirmDanger, null, this.beforeClose);
         }
       }
     }
@@ -158,9 +160,9 @@ const EzDialog = class {
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
-      .bind("Enter", () => this.handleButtonClick(true), { description: "Botão de confirmação ou OK", element: this._element })
-      .bind("Escape", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element })
-      .bind("Esc", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element });
+      .bind("Enter", () => this.handleButtonClick(true), { description: this.i18n("ez-dialog.confirmButton"), element: this._element })
+      .bind("Escape", () => this.handleButtonClick(false), { description: this.i18n("ez-dialog.closeButton"), element: this._element })
+      .bind("Esc", () => this.handleButtonClick(false), { description: this.i18n("ez-dialog.closeButton"), element: this._element });
   }
   componentDidRender() {
     this.manageOverlay();

package/dist/esm/ez-double-list.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-baa5e267.js';
 import { ObjectUtils } from '@sankhyalabs/core';
 import { i as isContinuousSequence } from './ezListHelper-00fb9b8d.js';
+import { i as initI18n } from './index-76eedf30.js';
 
 function moveItems(selectedItemsList, itemsList, foward) {
   if (!selectedItemsList.length)
@@ -125,6 +126,9 @@ const EzDoubleList = class {
       return;
     this.ezRightListChanged.emit(newValue);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async handleChangeLeft({ detail }) {
     if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
       this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
@@ -301,7 +305,9 @@ const EzDoubleList = class {
         title: this.leftTitle,
         isFiltering: this.isFilteringLeft,
         filteredList: this.leftFilteredList,
-        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST) ? this.emptyMessage.LEFT_LIST : `Nenhum ${this.entityLabel} disponível`,
+        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST)
+          ? this.emptyMessage.LEFT_LIST
+          : this.i18n("ez-double-list.noItemsAvailable", { entity: this.entityLabel }),
         slotConfig: {
           itemRightSlotBuilder: (_c = (_b = this.slotsListBuilder) === null || _b === void 0 ? void 0 : _b.LEFT_LIST) === null || _c === void 0 ? void 0 : _c.itemRightSlotBuilder,
           itemLeftSlotBuilder: (_e = (_d = this.slotsListBuilder) === null || _d === void 0 ? void 0 : _d.LEFT_LIST) === null || _e === void 0 ? void 0 : _e.itemLeftSlotBuilder,
@@ -314,13 +320,15 @@ const EzDoubleList = class {
           onChoose: this.handleChooseLeft.bind(this),
         },
       })), !this.useOnlyRightList &&
-      h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: "list__container" }, this.rightList && this.renderList({
+      h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: this.i18n("ez-double-list.moveAllTo", { list: this.rightListLabel }), size: "small", onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: this.i18n("ez-double-list.moveTo", { list: this.rightListLabel }), size: "small", onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: this.i18n("ez-double-list.moveTo", { list: this.leftListLabel }), size: "small", onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: this.i18n("ez-double-list.moveAllTo", { list: this.leftListLabel }), size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: "list__container" }, this.rightList && this.renderList({
       idSortableList: this.RIGHT_LIST_ID,
       list: this.rightList,
       title: this.rightTitle,
       isFiltering: this.isFilteringRight,
       filteredList: this.rightFilteredList,
-      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST) ? this.emptyMessage.RIGHT_LIST : `Nenhum ${this.entityLabel} selecionado`,
+      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST)
+        ? this.emptyMessage.RIGHT_LIST
+        : this.i18n("ez-double-list.noItemsSelected", { entity: this.entityLabel }),
       slotConfig: {
         itemRightSlotBuilder: (_h = (_g = this.slotsListBuilder) === null || _g === void 0 ? void 0 : _g.RIGHT_LIST) === null || _h === void 0 ? void 0 : _h.itemRightSlotBuilder,
         itemLeftSlotBuilder: (_k = (_j = this.slotsListBuilder) === null || _j === void 0 ? void 0 : _j.RIGHT_LIST) === null || _k === void 0 ? void 0 : _k.itemLeftSlotBuilder,
@@ -332,7 +340,7 @@ const EzDoubleList = class {
         onDoubleClick: this.handleTransferToLeft.bind(this),
         onChoose: this.handleChooseRight.bind(this),
       },
-    })), h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: "Mover para primeira posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: "Mover para \u00FAltima posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
+    })), h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: this.i18n("ez-double-list.moveToFirstPosition"), size: "small", onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: this.i18n("ez-double-list.moveUp"), size: "small", onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: this.i18n("ez-double-list.moveDown"), size: "small", onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: this.i18n("ez-double-list.moveToLastPosition"), size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
   }
   static get watchers() { return {
     "leftList": ["observeLeftList"],

package/dist/esm/ez-empty-card.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezEmptyCardCss = ":host{--ez-empty-card--width:335px;--ez-empty-card--height:155px;--ez-empty-card--padding:var(--space--24, 24px);--ez-empty-card--border-radius:var(--border--radius-24, 24px);--ez-empty-card--background-color:var(--color--gray-70, #ffffff)}div{width:var(--ez-empty-card--custom-width, var(--ez-empty-card--width));height:var(--ez-empty-card--custom-height, var(--ez-empty-card--height));border-radius:var(--ez-empty-card--border-radius);background-color:var(--ez-empty-card--background-color);padding:var(--ez-empty-card--padding);display:block;overflow:hidden;outline:none;box-shadow:none;border:none;box-sizing:border-box}.gray{--ez-empty-card--background-color:var(--color--gray-80)}.green{--ez-empty-card--background-color:var(--color--ocean-green-90)}.yellow{--ez-empty-card--background-color:var(--color--yellow-100)}.red{--ez-empty-card--background-color:var(--color--red-100)}.petroleum{--ez-empty-card--background-color:var(--color--petroleum-90)}";
+
+const EzEmptyCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.color = "default";
+    this.height = undefined;
+    this.width = undefined;
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'container' };
+      ElementIDUtils.addIDInfo(this._container, 'empty-card', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
+    return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
+  }
+  get _element() { return getElement(this); }
+};
+EzEmptyCard.style = ezEmptyCardCss;
+
+export { EzEmptyCard as ez_empty_card };

package/dist/esm/ez-file-item.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-76eedf30.js';
 
 const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";
 
@@ -16,7 +17,7 @@ const EzFileItem = class {
   }
   observeProgress(newProgress) {
     if (newProgress < 0 || newProgress > 100) {
-      throw new Error("O progresso de upload deve ser um número entre 0 e 100.");
+      throw new Error(this.i18n("ez-file-item.invalidProgress"));
     }
     this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
   }
@@ -37,14 +38,16 @@ const EzFileItem = class {
     }
     return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
     this._element.title = `${this.fileName} ${this.getFileSize()}`;
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
-    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ?
-      h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", onClick: evt => {
-          this.ezRemove.emit(this.fileName);
-          evt.stopPropagation();
-        } }) : undefined));
+    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ? (h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", title: this.i18n("app.remove"), onClick: evt => {
+        this.ezRemove.emit(this.fileName);
+        evt.stopPropagation();
+      } })) : undefined));
   }
   get _element() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-filter-input.entry.js

@@ -0,0 +1,125 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+const EzFilterInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezSearching = createEvent(this, "ezSearching", 7);
+    this.ezFocusIn = createEvent(this, "ezFocusIn", 7);
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+    this.autoFocus = false;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    this._textInput.setFocus(options);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+export { EzFilterInput as ez_filter_input };

package/dist/esm/ez-form-view.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-baa5e267.js';
 import { ObjectUtils, StringUtils, UserInterface, ElementIDUtils } from '@sankhyalabs/core';
-import { R as REQUIRED_INFO } from './constants-b036528f.js';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
+import { g as getI18n } from './index-76eedf30.js';
 
 const buildSwitch = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, true);
@@ -95,6 +95,11 @@ const buildSearch = ({ name, label, readOnly, required, contextName, canShowErro
     h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };
 
+const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-rich-text", { key: name, enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
+};
+
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -109,9 +114,11 @@ uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
 uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
+uiBuilders.set(UserInterface.HTML, buildRichText);
 const fieldBuilder = (field) => {
+  const i18n = getI18n();
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
-  const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
+  const label = field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
   const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
   //@ts-ignore
   builtElement.$attrs$['data-form-item'] = field.name;
@@ -163,7 +170,7 @@ const EzFormView = class {
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
-    this.singleColumn = true;
+    this.singleColumn = false;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -216,7 +223,8 @@ const EzFormView = class {
   isItemFullWidth(userInterface) {
     return [
       UserInterface.FILE,
-      UserInterface.LONGTEXT
+      UserInterface.LONGTEXT,
+      UserInterface.HTML,
     ].includes(userInterface);
   }
   buildFormItemElement(item, classItem = "") {

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-baa5e267.js';
 import { DateUtils, ApplicationContext, Action, StringUtils, KeyboardManager, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { b as buildFieldMetadata, a as buildFieldSearch, L as LABEL_SEARCH_FIELD, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, D as DataBinder } from './search-column-e609d513.js';
+import { b as buildFieldMetadata, a as buildFieldSearch, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, D as DataBinder } from './search-column-661e2324.js';
 import { F as FormLayout } from './FormLayout-071d324c.js';
-import './ApplicationUtils-eaf91331.js';
+import './ApplicationUtils-391ebb4f.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import { i as initI18n } from './index-76eedf30.js';
 
 const DETAIL_PATTERN = /child\[([^\]]+)\]/;
 const REGEX_DEFAULT_VAR_KEY = /\$\{.+\}/;
@@ -565,7 +566,7 @@ const EzForm = class {
       }
     };
     this._fieldsProps = new Map();
-    this._singleColumn = true;
+    this._singleColumn = false;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -638,7 +639,7 @@ const EzForm = class {
     }
     this._fieldSearch = buildFieldSearch({
       value: StringUtils.generateUUID(),
-      label: LABEL_SEARCH_FIELD,
+      label: this._i18n("ez-form.labelSearchField"),
     }, ({ argument }) => this.fieldsOptionLoader(argument), (option) => this.onSelectField(option));
     return this._fieldSearch;
   }
@@ -675,7 +676,7 @@ const EzForm = class {
         const container = this._container.getBoundingClientRect();
         await focusOnFieldSerch(this._fieldSearch);
         this._ezPopoverSearchField.showUnder(this._container, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
-      }, { description: LABEL_SEARCH_FIELD, element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
+      }, { description: this._i18n("ez-form.labelSearchField"), element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
     }
   }
   componentDidLoad() {
@@ -711,6 +712,7 @@ const EzForm = class {
     const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
     this.setSingleColumn(layoutFormConfig);
     this.registerNotifyListeners(layoutFormConfig);
+    this._i18n = await initI18n();
   }
   async setSingleColumn(layoutFormConfig) {
     if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {