@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-83282.1 → 0.0.0-bugfix-dev-KB-75940.1

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;white-space:nowrap;align-items:center;cursor:pointer;user-select:none;color:var(--ez-label-chip__label--title--primary);height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size);font-weight:var(--ez-label-chip__label--font-weight)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);outline-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container:focus{outline:var(--border--medium) var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";
+const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary);--ez-label-chip__label__container--default--margin-top:var(--space-extra-small, 3px)}.lbl{display:flex;white-space:nowrap;align-items:center;cursor:pointer;user-select:none;color:var(--ez-label-chip__label--title--primary);height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size);font-weight:var(--ez-label-chip__label--font-weight)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);outline-color:var(--ez-label-chip__label__container--default--border-color--active);margin-top:var(--ez-label-chip__label__container--default--margin-top)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container:focus{outline:none;box-shadow:0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";
 
 const EzChip = class {
   constructor(hostRef) {

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -97,22 +97,9 @@ const EzDateInput = class {
       this._changePending = false;
     }
   }
-  showCalendar() {
-    this.handleBlur();
-    this._calendar.value = this.value;
-    let top;
-    if (this.isFixed()) {
-      top = 29;
-      this._calendar.fitHorizontal(0);
-    }
-    else {
-      top = this.errorMessage || this.mode === "slim" ? 6 : -13;
-    }
-    this._calendar.fitVertical(top, this._elem.clientHeight);
-  }
   hideCalendar() {
     this.changeValue(this._calendar.value);
-    this._calendar.hide();
+    this._popover.hide();
   }
   handleBlur() {
     if (!this._changePending) {
@@ -173,8 +160,8 @@ const EzDateInput = class {
       this._textInput.value = textValue;
     }
   }
-  isFixed() {
-    return this._elem.dataset.isFixed === "true";
+  disconnectedCallback() {
+    this.hideCalendar();
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
@@ -187,7 +174,7 @@ const EzDateInput = class {
   }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": core.ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, "data-is-fixed": this._elem.dataset.isFixed })));
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, index.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" })), index.h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, index.h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": core.ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); } }))));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -131,21 +131,9 @@ const EzDateTimeInput = class {
       this.value = newValueValidated;
     }
   }
-  showCalendar() {
-    let top;
-    if (this.isFixed()) {
-      top = 29;
-      this._calendar.fitHorizontal(0);
-    }
-    else {
-      top = this.errorMessage || this.mode === "slim" ? 6 : -13;
-    }
-    this._calendar.fitVertical(top, this._elem.clientHeight);
-    this._calendar.style.visibility = 'inherit';
-  }
   hideCalendar() {
     this.changeValue(this._calendar.value);
-    this._calendar.hide();
+    this._popover.hide();
   }
   getParsedDateTime(strValue) {
     var _a, _b;
@@ -223,8 +211,8 @@ const EzDateTimeInput = class {
       this._textInput.value = textValue;
     }
   }
-  isFixed() {
-    return this._elem.dataset.isFixed === "true";
+  disconnectedCallback() {
+    this.hideCalendar();
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
@@ -237,7 +225,7 @@ const EzDateTimeInput = class {
   }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": core.ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, time: true, showSeconds: this.showSeconds, "data-is-fixed": this._elem.dataset.isFixed })));
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.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" })), index.h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none' }, index.h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": core.ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, time: true, showSeconds: this.showSeconds }))));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -80,7 +80,7 @@ function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecisio
 const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
   var _a;
   return (index.h("div", { class: "ez-col ez-col--sd-12" },
-    index.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.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
+    index.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 }) => {

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

@@ -64768,6 +64768,7 @@ class AgGridController {
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 100;
     this.DEFAULT_FONT_SIZE = 14;
+    this.DEFAULT_FONT_SIZE_HTML5 = 32;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
     this.DOC_WIDTH = 800;
@@ -65833,8 +65834,9 @@ class AgGridController {
     if (cfgColumn.customWidth != undefined) {
       return cfgColumn.customWidth;
     }
-    if (cfgColumn.width != undefined) {
-      return cfgColumn.width;
+    if (cfgColumn.width != undefined && !isNaN(cfgColumn.width)) {
+      // TODO: Valor somado devido a divergência do tamanho das fontes entre HTML5 e Design System.
+      return parseInt(cfgColumn.width) + this.DEFAULT_FONT_SIZE_HTML5;
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === core.UserInterface.SEARCH) {

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

@@ -589,7 +589,7 @@ const EzList = class {
     return { id: item.id, label: item.label, check: evt.detail };
   }
   renderListWithGroups() {
-    return index.h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
+    return index.h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
       return (index.h("div", { id: this.getDivGroupId(group.group), class: 'group', key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, index.h("label", { draggable: false, class: 'group-name', title: group.group }, group.group), index.h("section", { class: 'section-container', onDragOver: ev => ev.preventDefault() }, index.h("div", { class: 'group-items-container' }, index.h("div", { class: 'draggable-list' }, group.items.map((item, index$1) => (index.h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
@@ -599,7 +599,7 @@ const EzList = class {
     }));
   }
   renderList() {
-    return index.h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+    return index.h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, index.h("div", { class: 'draggable-list' }, this._listItems.map((item, index$1) => (index.h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,

package/dist/cjs/ez-modal-container.cjs.entry.js

@@ -72,7 +72,7 @@ const EzModalContainer = class {
     this._closeButton.focus();
   }
   render() {
-    return (index.h(index.Host, null, index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), index.h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (index.h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, index.h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, index.h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && index.h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, index.h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), index.h("div", { class: "ez-modal-container__content" }, index.h("slot", null)), index.h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (index.h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (index.h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (index.h(index.Host, null, index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), index.h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (index.h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, index.h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, index.h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && index.h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, index.h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), index.h("div", { tabIndex: -1, class: "ez-modal-container__content" }, index.h("slot", null)), index.h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (index.h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (index.h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -36,7 +36,7 @@ const EzModal = class {
   }
   componentDidLoad() {
     this.observeOpened();
-    new core.KeyboardManager({ propagate: false, element: this._element })
+    new core.KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezModalAction.emit.bind("OK"))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());

package/dist/cjs/ez-popover-plus_3.cjs.entry.js

@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const searchFormatters = require('./searchFormatters-b7e1ed1e.js');
+
+const ezPopoverPlusCss = ":host{display:none}";
+
+const EzPopoverPlus = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezVisibilityChange = index.createEvent(this, "ezVisibilityChange", 7);
+    this.autoClose = true;
+    this.boxWidth = "fit-content";
+    this.opened = false;
+    this.overlayType = "light";
+    this.anchorElement = undefined;
+    this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
+    this.useAnchorSize = false;
+    this.minWidth = 150;
+  }
+  async observeOpened(newValue) {
+    if (newValue && !this._popOverCore) {
+      this.renderPopoverCore();
+    }
+    this._popOverCore.opened = newValue;
+  }
+  /**
+   * Atualiza a posição do popover.
+   */
+  async updatePosition(top, left) {
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.updatePosition(top, left));
+  }
+  /**
+   * Exibe o ez-popover.
+   */
+  async show(top, left) {
+    if (!this._popOverCore) {
+      this.renderPopoverCore();
+    }
+    await this._popOverCore.show(top, left);
+  }
+  /**
+   * Ancora a exibição do popOver a um elemento HTML.
+   */
+  async showUnder(element, options) {
+    if (!this._popOverCore) {
+      this.renderPopoverCore();
+    }
+    await this._popOverCore.showUnder(element, options);
+  }
+  /**
+   * Oculta o ez-popover.
+   */
+  async hide() {
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.hide());
+  }
+  /**
+   * Altera as opções.
+  */
+  async setOptions(options) {
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setOptions(options));
+  }
+  /**
+   * Altera o elemento de ancoragem.
+  */
+  async setAnchorElement(anchor) {
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setAnchorElement(anchor));
+  }
+  renderPopoverCore() {
+    this._popOverCore = document.createElement('ez-popover-core');
+    this._popOverCore.opened = this.opened;
+    this._popOverCore.anchorElement = this.anchorElement;
+    this._popOverCore.autoClose = this.autoClose;
+    this._popOverCore.boxWidth = this.boxWidth;
+    this._popOverCore.overlayType = this.overlayType;
+    this._popOverCore.options = this.options;
+    this._popOverCore.useAnchorSize = this.useAnchorSize;
+    this._popOverCore.minWidth = this.minWidth;
+    this._popOverCore.addEventListener('ezVisibilityChange', ({ detail }) => {
+      this.ezVisibilityChange.emit(detail);
+      this.opened = detail;
+    });
+    const firstChild = this._host.children.item(0);
+    if (firstChild) {
+      this._popOverCore.appendChild(firstChild);
+    }
+    else {
+      console.warn('O slot do popover está vazio. Adicione conteúdo ao slot para exibição correta.');
+    }
+    document.body.appendChild(this._popOverCore);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  get _host() { return index.getElement(this); }
+  static get watchers() { return {
+    "opened": ["observeOpened"]
+  }; }
+};
+EzPopoverPlus.style = ezPopoverPlusCss;
+
+const multiSelectionBoxMessageCss = ".multi-selection__message{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;min-height:320px;text-align:center}.multi-selection__text-message{margin-top:-30px;font-family:var(--font-pattern);font-size:var(--text--meduim);padding:var(--space-xs);color:var(--text--primary)}";
+
+const MultiSelectionBoxMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.message = undefined;
+  }
+  render() {
+    return (index.h("div", { class: "multi-selection__message" }, index.h("span", { class: "multi-selection__text-message" }, this.message)));
+  }
+};
+MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
+
+const searchListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
+
+const SearchList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.changeValue = index.createEvent(this, "changeValue", 7);
+    this.changePreSelection = index.createEvent(this, "changePreSelection", 7);
+    this._startHighlightTag = "<span class='card-item__highlight'>";
+    this._endHighlightTag = "</span>";
+    this.showLoading = undefined;
+    this.visibleOptions = [];
+    this.textEmptyList = undefined;
+    this.canShowListOptions = undefined;
+    this.value = undefined;
+    this.showOptionValue = true;
+    this.preSelection = undefined;
+  }
+  async nextOption() {
+    const newPreSelection = this.preSelection === undefined ? 0 : Math.min(this.preSelection + 1, this.visibleOptions.length - 1);
+    this.changePreSelection.emit(newPreSelection);
+    this.scrollToOption(this.visibleOptions[newPreSelection]);
+  }
+  async previousOption() {
+    const newPreSelection = this.preSelection === undefined ? 0 : Math.max(this.preSelection - 1, 0);
+    this.changePreSelection.emit(newPreSelection);
+    this.scrollToOption(this.visibleOptions[newPreSelection]);
+  }
+  selectOption(newOption) {
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: searchFormatters.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: searchFormatters.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: searchFormatters.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: searchFormatters.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
+    this.changeValue.emit(newOptionsFormatted);
+  }
+  createOption(detail) {
+    let { key, title } = detail;
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    title = core.StringUtils.decodeHtmlEntities(title);
+    const option = {
+      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
+      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+    };
+    this.selectOption(option);
+  }
+  scrollToOption(opt) {
+    window.requestAnimationFrame(() => {
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
+        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
+  }
+  buildItem(opt, index$1) {
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: opt.value,
+      title: opt.label,
+      details: opt.details
+    };
+    return index.h("div", { style: { "height": "100%" }, class: index$1 === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this.changePreSelection.emit(index$1) }, index.h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
+      && this.visibleOptions.length === 0
+      && index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this.textEmptyList)), this.showLoading
+      && index.h("div", { class: "message" }, index.h("div", { class: "message__loading" })), this.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
+  }
+};
+SearchList.style = searchListCss;
+
+exports.ez_popover_plus = EzPopoverPlus;
+exports.multi_selection_box_message = MultiSelectionBoxMessage;
+exports.search_list = SearchList;

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

@@ -35,7 +35,7 @@ const EzPopup = class {
     if (this.opened && this._popupRef) {
       this._popupRef.focus();
     }
-    new core.KeyboardManager({ propagate: false, element: this._element })
+    new core.KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
       .bind("Esc", () => this.closePopup());

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

@@ -6,7 +6,7 @@ const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
 
-const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);--ez-scroller__max-height:unset;display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column;width:100%;max-height:var(--ez-scroller__max-height)}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
+const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);--ez-scroller__max-height:unset;--ez-scroller__scrollbar--padding-right:var(--space-extra-small, 3px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row;padding-right:var(--ez-scroller__scrollbar--padding-right)}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column;width:100%;max-height:var(--ez-scroller__max-height)}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
 
 const EzScroller = class {
   constructor(hostRef) {