@sankhyalabs/ezui 6.0.2 → 6.1.0-dev.10

package/dist/esm/ez-date-time-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { DateUtils, TimeFormatter, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 
@@ -21,6 +21,7 @@ const EzDateTimeInput = class {
     this.mode = "regular";
     this.canShowError = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeLabel() {
     if (this._textInput) {
@@ -221,7 +222,7 @@ const EzDateTimeInput = class {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, time: true, showSeconds: this.showSeconds }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, slot: "leftIcon" })), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, time: true, showSeconds: this.showSeconds }))));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-baa5e267.js';
 import { D as DialogType } from './DialogType-54a62731.js';
 import { FloatingManager, ElementIDUtils, KeyboardManager } from '@sankhyalabs/core';
 import { F as FocusResolver } from './FocusResolver-1ccbf850.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{background:var(--dialog__warning--background-color);--ez-icon--color:var(--dialog__icon--color);display:grid;place-items:center;width:26px;height:26px;border-radius:50%}.changeable__icon.critical{background:var(--dialog__critical--background-color)}.title{display:flex;font-family:var(--dialog__title--font-pattern);margin:0;font-weight:var(--dialog__title--weight--large);line-height:0;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}.title-icon--critical{background-color:var(--dialog__critical--background-color)}.title-icon--success{background-color:var(--dialog__success--background-color)}.title-icon--warn{background-color:var(--dialog__warning--background-color)}.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%}}";
+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%}}";
 
 class Message {
   constructor(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack, beforeClose) {
@@ -89,7 +89,8 @@ const EzDialog = class {
     if (message.dialogType === DialogType.DEFAULT) {
       return;
     }
-    return h("ez-icon", { class: "changeable__icon " + this.getIconClass(message.dialogType), size: "small", iconName: this.getIconName(message) });
+    const iconClass = this.getIconClass(message.dialogType);
+    return (h("div", { class: `changeable__icon__container ${iconClass}` }, h("ez-icon", { class: "changeable__icon", size: "small", iconName: this.getIconName(message) })));
   }
   getIconClass(dialogType) {
     if (this.isCritical(dialogType)) {
@@ -156,7 +157,7 @@ const EzDialog = class {
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
-    new KeyboardManager({ propagate: false, element: 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 });
@@ -188,8 +189,10 @@ const EzDialog = class {
     });
   }
   disconnectedCallback() {
+    var _a;
     FocusResolver.resolveFocus(this._lastActiveElement);
     this._lastActiveElement = undefined;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
   render() {
     if (this.opened && this._currentMessage) {

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

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a720e56.js';
-import { ObjectUtils, ArrayUtils } from '@sankhyalabs/core';
+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 { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
 
 function moveItems(selectedItemsList, itemsList, foward) {
   if (!selectedItemsList.length)
@@ -60,21 +59,20 @@ function transferAll({ from, to, selectedFrom, selectedTo }) {
   from = [];
   return { from, to, selectedFrom, selectedTo };
 }
-function transferItems({ from, to, selectedFrom, selectedTo }) {
+function transferItems({ from, to, selectedFrom, selectedTo, insertIndex = to.length, }) {
   if (!from.length)
     return { from, to, selectedFrom, selectedTo };
   const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
   if (!itemsToTransfer.length)
     return { from, to, selectedFrom, selectedTo };
-  to = [
-    ...to.map(i => setItemSelection(i, false)),
-    ...itemsToTransfer.map(i => setItemSelection(i, true))
-  ];
-  const selectedFromIds = selectedFrom.map(id => id);
-  from = [...from.filter(item => !selectedFromIds.includes(item.id))];
-  selectedTo = [...selectedFrom];
-  selectedFrom = [];
-  return { from, to, selectedFrom, selectedTo };
+  let updatedTo = to.map(i => setItemSelection(i, false));
+  updatedTo.splice(insertIndex, 0, ...itemsToTransfer.map(i => setItemSelection(i, true)));
+  return {
+    from: from.filter(item => !selectedFrom.includes(item.id)),
+    to: updatedTo,
+    selectedFrom: [],
+    selectedTo: [...selectedFrom],
+  };
 }
 function getItemsToTransfer(to, selectedFrom, from) {
   const toListIds = to.map(item => item.id);
@@ -86,7 +84,7 @@ function setItemSelection(item, select) {
   return Object.assign(Object.assign({}, item), { selected: select });
 }
 
-const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\")}.group.sc-ez-double-list{display:flex;justify-content:space-between;gap:10px;flex-direction:column;border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-medium);width:350px;height:400px}.group__header.sc-ez-double-list{background:var(--background--body);padding:10px;border-radius:var(--border--radius-medium) var(--border--radius-medium) 0 0}.group__label.sc-ez-double-list{font-weight:var(--text-weight--large);font-size:var(--text--medium);color:var(--title--primary);margin-bottom:10px;display:block}.group__totalizer.sc-ez-double-list{padding:5px 10px;background:var(--background--body);font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}.empty-message.sc-ez-double-list{font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);text-align:center;margin:auto}.list__container.sc-ez-double-list{height:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
+const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\");width:100%}@media screen and (max-width: 1366px){.group.sc-ez-double-list{height:350px}}.list__container.sc-ez-double-list{height:100%;width:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
 
 const EzDoubleList = class {
   constructor(hostRef) {
@@ -95,8 +93,6 @@ const EzDoubleList = class {
     this.ezRightListChanged = createEvent(this, "ezRightListChanged", 7);
     this.LEFT_LIST_ID = 'LEFT-LIST-ID';
     this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
-    this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
-    this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
     this.leftList = [];
     this.leftTitle = undefined;
     this.rightList = [];
@@ -104,7 +100,10 @@ const EzDoubleList = class {
     this.entityLabelPlural = 'itens';
     this.leftListLabel = 'disponíveis';
     this.rightListLabel = 'selecionados';
+    this.useOnlyRightList = false;
     this.rightTitle = undefined;
+    this.emptyMessage = undefined;
+    this.slotsListBuilder = undefined;
     this.leftFilteredList = [];
     this.rightFilteredList = [];
     this.selectedLeftList = [];
@@ -126,23 +125,31 @@ const EzDoubleList = class {
       return;
     this.ezRightListChanged.emit(newValue);
   }
-  handleFilterChangeLeft(value) {
-    this.leftFilteredList = ArrayUtils.applyStringFilter(value, this.leftList, true, 'label');
-    this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
-  }
-  handleFilterChangeRight(value) {
-    this.rightFilteredList = ArrayUtils.applyStringFilter(value, this.rightList, true, 'label');
-    this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
-  }
   async handleChangeLeft({ detail }) {
-    this.leftList = [...detail];
-    this.selectedLeftList = [...detail.filter(item => item.selected)];
-    await this.leftEzListInstance.clearHistory();
+    if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
+      this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
+      return;
+    }
+    detail.selectItens = detail.selectItens.filter(id => this.rightList.every(item => item.id !== id));
+    this.leftList = [...detail.dataSource];
+    this.selectedLeftList = [...detail.selectItens];
+    this.transferToRight(detail === null || detail === void 0 ? void 0 : detail.newIndex);
   }
   async handleChangeRight({ detail }) {
-    this.rightList = [...detail];
-    this.selectedRightList = [...detail.filter(item => item.selected)];
-    await this.rightEzListInstance.clearHistory();
+    if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.LEFT_LIST_ID) {
+      this.rightList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
+      return;
+    }
+    detail.selectItens = detail.selectItens.filter(id => this.leftList.every(item => item.id !== id));
+    this.rightList = [...detail.dataSource];
+    this.selectedRightList = [...detail.selectItens];
+    this.transferToLeft(detail === null || detail === void 0 ? void 0 : detail.newIndex);
+  }
+  reorderArray(allItems, itemIdsToMove, insertIndex) {
+    const filteredItems = allItems.filter(i => !itemIdsToMove.includes(i.id));
+    const itemsToMove = allItems.filter(i => itemIdsToMove.includes(i.id));
+    filteredItems.splice(insertIndex, 0, ...itemsToMove);
+    return filteredItems;
   }
   enableTransferAllToRight() {
     return this.leftList.length > 0;
@@ -176,33 +183,43 @@ const EzDoubleList = class {
   getRightSelectedItemsIndex() {
     return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
   }
-  transferToRight() {
-    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
-    this.leftList = [...from];
+  transferToRight(insertIndex) {
+    const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToRightConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
+    //Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
+    this.leftList = [];
+    requestAnimationFrame(() => this.leftList = [...from]);
     this.rightList = [...to];
     this.selectedLeftList = [...selectedFrom];
     this.selectedRightList = [...selectedTo];
   }
-  transferToLeft() {
-    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
-    this.rightList = [...from];
+  transferToLeft(insertIndex) {
+    const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToLeftConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
+    //Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
+    this.rightList = [];
+    requestAnimationFrame(() => this.rightList = [...from]);
     this.leftList = [...to];
     this.selectedRightList = [...selectedFrom];
     this.selectedLeftList = [...selectedTo];
   }
-  handleTransferAllToRight() {
+  async handleTransferAllToRight() {
     const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
     this.leftList = [...from];
     this.rightList = [...to];
     this.selectedLeftList = [...selectedFrom];
     this.selectedRightList = [...selectedTo];
+    requestAnimationFrame(async () => {
+      await this.clearSelectionAll();
+    });
   }
-  handleTransferAllToLeft() {
+  async handleTransferAllToLeft() {
     const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
     this.rightList = [...from];
     this.leftList = [...to];
     this.selectedRightList = [...selectedFrom];
     this.selectedLeftList = [...selectedTo];
+    requestAnimationFrame(async () => {
+      await this.clearSelectionAll();
+    });
   }
   buildTransferToRightConfig() {
     return {
@@ -245,33 +262,77 @@ const EzDoubleList = class {
     const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
     return { itemsToKeep, itemsToMove };
   }
-  handleTransferToRight() {
+  async handleTransferToRight() {
     this.transferToRight();
     this.leftFilteredList = [];
-    this.leftEzFilterInput.value = '';
+    await this.leftEzListInstance.clearSelection();
   }
-  handleTransferToLeft() {
+  async handleTransferToLeft() {
     this.transferToLeft();
     this.rightFilteredList = [];
-    this.rightEzFilterInput.value = '';
+    await this.rightEzListInstance.clearSelection();
   }
-  buildTotalizer(list) {
-    return `Total de ${list.length} ${list.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+  async clearSelectionAll() {
+    await this.rightEzListInstance.clearSelection();
+    await this.leftEzListInstance.clearSelection();
   }
-  renderLeftList() {
-    if (!this.leftList.length) {
-      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " dispon\u00EDvel");
-    }
-    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
+  handleChooseLeft() {
+    requestAnimationFrame(async () => {
+      await this.rightEzListInstance.clearSelection();
+    });
   }
-  renderRightList() {
-    if (!this.rightList.length) {
-      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " selecionado");
-    }
-    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.rightEzListInstance = ref, id: this.RIGHT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringRight ? this.rightFilteredList : this.rightList, ezDraggable: !this.isFilteringRight, enableMultipleSelection: true, onEzChange: this.handleChangeRight.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectRightItem.bind(this), onEzDoubleClick: this.handleTransferToLeft.bind(this) })));
+  handleChooseRight() {
+    if (this.useOnlyRightList)
+      return;
+    requestAnimationFrame(async () => {
+      await this.leftEzListInstance.clearSelection();
+    });
+  }
+  renderList(props) {
+    const { idSortableList, list, isFiltering, filteredList, emptyMessage, slotConfig, callbacks, title } = props;
+    return (h("ez-sortable-list", { ref: callbacks === null || callbacks === void 0 ? void 0 : callbacks.setRef, title: title, idSortableList: idSortableList, emptyMessage: emptyMessage, class: "ez-size-height--full", dataSource: isFiltering ? filteredList : list, hoverFeedback: true, enableMultipleSelection: true, removeItensMoved: true, entityLabel: this.entityLabel, entityLabelPlural: this.entityLabelPlural, itemRightSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemRightSlotBuilder, itemLeftSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemLeftSlotBuilder, onItemsReordered: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChange.bind(this), onEzSelectItens: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSelect.bind(this), onEzDoubleClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDoubleClick.bind(this), onEzChoose: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChoose.bind(this) }));
   }
   render() {
-    return (h(Host, null, h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.leftTitle), h("ez-filter-input", { ref: (ref) => this.leftEzFilterInput = ref, id: this.LEFT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeLeft(evt.detail) })), h("div", { class: 'list__container' }, this.renderLeftList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.leftList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-right', enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-right', enabled: this.enableTransferToRight(), title: `Mover para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-left', enabled: this.enableTransferToLeft(), title: `Mover para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-left', enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.rightTitle), h("ez-filter-input", { ref: (ref) => this.rightEzFilterInput = ref, id: this.RIGHT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeRight(evt.detail) })), h("div", { class: 'list__container' }, this.renderRightList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.rightList))), 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) }))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return (h(Host, null, !this.useOnlyRightList &&
+      h("div", { class: "list__container" }, this.leftList && this.renderList({
+        idSortableList: this.LEFT_LIST_ID,
+        list: this.leftList,
+        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`,
+        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,
+        },
+        callbacks: {
+          setRef: (ref) => this.leftEzListInstance = ref,
+          onChange: (evt) => this.handleChangeLeft(evt),
+          onSelect: this.handleSelectLeftItem.bind(this),
+          onDoubleClick: this.handleTransferToRight.bind(this),
+          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({
+      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`,
+      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,
+      },
+      callbacks: {
+        setRef: (ref) => this.rightEzListInstance = ref,
+        onChange: (evt) => this.handleChangeRight(evt),
+        onSelect: this.handleSelectRightItem.bind(this),
+        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) }))));
   }
   static get watchers() { return {
     "leftList": ["observeLeftList"],

package/dist/esm/{ez-dropdown_2.entry.js → ez-dropdown.entry.js}

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5a720e56.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
 
 const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {
@@ -409,7 +409,7 @@ const EzDropdown = class {
           return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
         case "divider":
           return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
-        case "item":
+        default:
           return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
             ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
             : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
@@ -520,64 +520,4 @@ const EzDropdown = class {
 };
 EzDropdown.style = ezDropdownCss;
 
-const ALLOWED_ANIMATIONS = ['progress', 'progress-dark', 'pulse', 'false'];
-
-const ezSkeletonCss = ".skeleton {\n\tbackground: var(--skeleton-background, #eff1f6) no-repeat;\n\n\tborder-radius: var(--skeleton-border-radius, 4px);\n\twidth: var(--skeleton-width, 100%);\n\theight: var(--skeleton-height, 20px);\n\tdisplay: inline-block;\n\tmargin-bottom: var(--skeleton-margin-bottom, 0px);\t\n\tbox-sizing: border-box;\n\toutline: none;\n\toverflow: hidden;\n\tposition: relative;\n\t-webkit-will-change: transform;\n  -moz-will-change: transform;\n\twill-change: transform;\n\n\t&:after,\n\t&:before {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&.circle {\n\t\twidth: var(--skeleton-width, 40px);\n\t\theight: var(--skeleton-height, 40px);\n\t\tmargin-bottom: var(--skeleton-margin-bottom, 5px);\n\t\tborder-radius: var(--skeleton-border-radius, 50%);\n\t}\n\n\t&.rect {\n\t\tborder-radius: var(--skeleton-border-radius, 0px);\n\t}\n\n\t&.progress,\n\t&.progress-dark {\n\t\t-webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tbackground-size: 200px 100%;\n\t}\n\n\t&.progress {\n\t\tbackground-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n\t}\n\n\t&.progress-dark {\n\t\tbackground-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);    \n\t\tbackground-image: linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.2),transparent);\n\t}\n\n\t&.pulse {\n\t\t-webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation-delay: 0.5s;\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t&.pulse,\n\t\t&.progress-dark,\n\t\t&.progress {\n\t\t\tanimation: none;\n\t\t}\n\n\t\t&.progress,\n\t\t&.progress-dark {\n\t\t\tbackground-image: none;\n\t\t}\n\t}\n}\n\n@-webkit-keyframes progress {\n  0% { background-position: -200px 0; }\n  100% { background-position: calc(200px + 100%) 0; }\n}\n@-moz-keyframes progress {\n  0% { background-position: -200px 0; }\n  100% { background-position: calc(200px + 100%) 0; }\n}\n@-ms-keyframes progress {\n  0% { background-position: -200px 0; }\n  100% { background-position: calc(200px + 100%) 0; }\n}\n@keyframes progress {\n\t0% { background-position: -200px 0; }\n\t100% { background-position: calc(200px + 100%) 0; }\n}\n\n@-webkit-keyframes pulse {\n  0% { opacity: 1; }\n  50% { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@-moz-keyframes pulse {\n  0% { opacity: 1; }\n  50% { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@-ms-keyframes pulse {\n  0% { opacity: 1; }\n  50% { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@keyframes pulse {\n\t0% { opacity: 1; }\n\t50% { opacity: 0.4; }\n\t100% { opacity: 1; }\n}";
-
-const EzSkeleton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.items = [];
-    this.count = 1;
-    this.variant = 'text';
-    this.width = null;
-    this.height = null;
-    this.marginBottom = null;
-    this.animation = 'progress';
-  }
-  componentWillLoad() {
-    this.init();
-  }
-  componentWillUpdate() {
-    this.init();
-  }
-  init() {
-    this.items.length = this.count;
-    this.items.fill(1);
-    if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
-      this.animation = 'progress';
-    }
-  }
-  get style() {
-    let dimenssionsStyles = {
-      width: null,
-      height: null,
-      marginBottom: null
-    };
-    if (this.width) {
-      dimenssionsStyles.width = this.width;
-    }
-    if (this.height) {
-      dimenssionsStyles.height = this.height;
-    }
-    if (this.marginBottom) {
-      dimenssionsStyles.marginBottom = this.marginBottom;
-    }
-    return dimenssionsStyles;
-  }
-  render() {
-    return this.items.map((_, index) => {
-      return (h("span", { key: index, class: {
-          circle: this.variant === 'circle',
-          rect: this.variant === 'rect',
-          progress: this.animation === 'progress',
-          'progress-dark': this.animation === 'progress-dark',
-          pulse: this.animation === 'pulse',
-          skeleton: true
-        }, "data-busy": "true", "data-valuemin": "0", "data-valuemax": "100", "data-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
-    });
-  }
-};
-EzSkeleton.style = ezSkeletonCss;
-
-export { EzDropdown as ez_dropdown, EzSkeleton as ez_skeleton };
+export { EzDropdown as ez_dropdown };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 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)}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5a720e56.js';
+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';
 

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

@@ -1,6 +1,6 @@
-import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-5a720e56.js';
-import { ObjectUtils, UserInterface, ElementIDUtils } from '@sankhyalabs/core';
-import { R as REQUIRED_INFO } from './constants-4e0d35b7.js';
+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';
 
 const buildSwitch = (field) => {
@@ -73,12 +73,6 @@ function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecisio
     h("ez-number-input", { class: "ez-input__no-margin", enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
-const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
-  var _a;
-  return (h("div", { class: "ez-col ez-col--sd-12" },
-    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 buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
   return (h("div", { class: "ez-col ez-col--sd-12", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
@@ -89,6 +83,23 @@ const buildTextInput = ({ name, label, readOnly, contextName, canShowError, prop
     h("ez-text-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };
 
+const buildSearchPlus = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
+  const hasDescriptionField = !StringUtils.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-search-plus", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, hideDescriptionInput: !hasDescriptionField })));
+};
+
+const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    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);
@@ -101,7 +112,9 @@ uiBuilders.set(UserInterface.FILE, buildFile);
 uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
 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 builder = uiBuilders.get(field.userInterface) || buildTextInput;
   const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
@@ -209,7 +222,8 @@ const EzFormView = class {
   isItemFullWidth(userInterface) {
     return [
       UserInterface.FILE,
-      UserInterface.LONGTEXT
+      UserInterface.LONGTEXT,
+      UserInterface.HTML,
     ].includes(userInterface);
   }
   buildFormItemElement(item, classItem = "") {