@sankhyalabs/ezui 5.21.2 → 5.22.0-dev.2

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
-import { NumberUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { NumberUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-71ce76be.js';
 
 const ezNumberInputCss = ":host{display:block;width:100%}.number__input{height:100%}";
@@ -13,6 +13,7 @@ const EzNumberInput = class {
     this._focused = false;
     this._changePending = false;
     this._valuePromiseCallbacks = [];
+    this._value = undefined;
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -68,35 +69,42 @@ const EzNumberInput = class {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
-      if (newValueValidated === null) {
-        this._textInput.value = '';
-      }
-      if (newValueValidated != oldValueValidated) {
-        const textValue = this.getTextValue(newValueValidated) || '';
-        if ((this._textInput.value || '') !== textValue) {
-          const parsedNumber = this.getParsedNumber(textValue);
-          if (parsedNumber !== undefined || !this._focused) {
-            this._textInput.value = textValue;
-            this._focused = false;
-            this.errorMessage = "";
-          }
-        }
-        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
-        this.ezChange.emit(valueEmitted);
-      }
+      this.handleNewValue(newValue, oldValue);
     }
     this._changePending = false;
   }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
+  handleNewValue(newValue, oldValue) {
+    const newValueValidated = this.validateValue(newValue);
+    const oldValueValidated = this.validateValue(oldValue);
+    if (newValueValidated === null) {
+      this._value = '';
+    }
+    if (newValueValidated === oldValueValidated) {
+      return;
+    }
+    const textValue = this.getTextValue(newValueValidated) || '';
+    const parsedNumber = this.getParsedNumber(textValue);
+    if ((this._value || '') !== textValue && (parsedNumber !== undefined || !this._focused)) {
+      this._value = textValue;
+      this._focused = false;
+      this.errorMessage = "";
+    }
+    const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+    this.ezChange.emit(valueEmitted);
+  }
   validateValue(value) {
     return isNaN(value) || value === undefined ? null : value;
   }
   getTextValue(value) {
-    if (value != undefined) {
-      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
-    }
-    return undefined;
+    if (value == undefined)
+      return undefined;
+    let textValue = this.precision >= 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+    return (this.precision === 0) ? StringUtils.replaceAll(textValue, ".", "") : textValue;
   }
   changeValue(newValue) {
     this.errorMessage = "";
@@ -147,17 +155,13 @@ const EzNumberInput = class {
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
   }
-  getParsedNumber(value) {
-    var _a;
-    if (value === void 0) {
-      value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value;
-    }
+  getParsedNumber(value = this._textInput.value) {
     return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
   }
   setInputValue() {
     const textValue = this.getTextValue(this.value) || '';
-    if ((this._textInput.value || '') !== textValue) {
-      this._textInput.value = textValue;
+    if ((this._value || '') !== textValue) {
+      this._value = textValue;
     }
   }
   componentDidLoad() {
@@ -166,13 +170,15 @@ const EzNumberInput = class {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }));
+    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {
     "label": ["observeLabel"],
     "errorMessage": ["observeErrorMessage"],
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "precision": ["observePrecision"],
+    "prettyPrecision": ["observePrecision"]
   }; }
 };
 EzNumberInput.style = ezNumberInputCss;

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

@@ -0,0 +1,217 @@
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-baa5e267.js';
+import { JSUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.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;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) {
+    registerInstance(this, hostRef);
+    this._shadowStart = "ez-scroller__wrapper--shadow-start";
+    this._shadowEnd = "ez-scroller__wrapper--shadow-end";
+    this.isActive = false;
+    this.direction = undefined;
+    this.locked = false;
+    this.activeShadow = false;
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  getContainerClass() {
+    return `ez-scroller__container ez-scroller__container--${this.direction}
+      ${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
+    `;
+  }
+  getWrapperClass() {
+    return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
+  }
+  finishDrag() {
+    if (this._controller) {
+      this._container.classList.remove("dragging");
+    }
+  }
+  updateScroller() {
+    const container = this._container;
+    if (container == undefined) {
+      return;
+    }
+    let remainingScroll;
+    if (this.direction === EzScrollDirection.HORIZONTAL) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+    }
+    else if (this.direction === EzScrollDirection.VERTICAL) {
+      const { scrollHeight, clientHeight, scrollTop } = container;
+      remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+      this._startHidden = container.scrollTop > 0;
+    }
+    this._endHidden = remainingScroll > 0;
+    this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
+    this.updateShadow();
+  }
+  updateShadow() {
+    const wrapper = this._wrapper;
+    if (!this.activeShadow || wrapper == undefined) {
+      return;
+    }
+    const shadowPositions = ["", "start", "end", "middle"];
+    const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
+    if (currentPosition === "start") {
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
+    }
+    else if (currentPosition === "end") {
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
+    }
+    else if (currentPosition === "middle") {
+      wrapper.classList.add(this._shadowStart);
+      wrapper.classList.add(this._shadowEnd);
+    }
+    else {
+      wrapper.classList.remove(this._shadowStart);
+      wrapper.classList.remove(this._shadowEnd);
+    }
+  }
+  configResize() {
+    const container = this._container;
+    if (container == undefined) {
+      return;
+    }
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(container);
+    }
+    this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateScroller.bind(this), 200));
+    this._resizeObserver.observe(container);
+  }
+  getContainerElement() {
+    return h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, h("slot", null));
+  }
+  isActiveScroller() {
+    if (this._container == undefined) {
+      return false;
+    }
+    return this._container.scrollWidth > this._container.clientWidth
+      || this._container.scrollHeight > this._container.clientHeight;
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  clickListener(evt) {
+    if (this._controller && this._controller.didScroll()) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+    }
+  }
+  mouseDownHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
+    if (!this._controller) {
+      this._controller = new ScrollCtrl(this._container);
+    }
+    this._controller.startDragg(evt);
+    this._container.classList.add("dragging");
+  }
+  mouseUpHandler() {
+    this.finishDrag();
+  }
+  mouseMoveHandler(evt) {
+    if (this.locked) {
+      this.finishDrag();
+      return;
+    }
+    if (this._controller) {
+      if (evt.buttons === 0) {
+        this.finishDrag();
+      }
+      else {
+        this._controller.doScroll(evt);
+      }
+    }
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this._container == undefined) {
+      return;
+    }
+    if (this.direction === EzScrollDirection.BOTH) {
+      (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
+      (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
+      this.isActive = this.isActiveScroller();
+      return;
+    }
+    this._container.onscroll = this.updateScroller.bind(this);
+    this.configResize();
+    this.updateScroller();
+  }
+  render() {
+    return (h(Host, null, this.activeShadow
+      ? h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
+      : this.getContainerElement()));
+  }
+};
+class ScrollCtrl {
+  constructor(scrollablePanel) {
+    this.scrollablePanel = scrollablePanel;
+  }
+  startDragg(evt) {
+    this.startX = this.measureX(evt);
+    this.startY = this.measureY(evt);
+    this.scrollWidth = 0;
+    this.scrollHeight = 0;
+  }
+  measureX(e) {
+    return e.pageX - this.scrollablePanel.offsetLeft;
+  }
+  measureY(e) {
+    return e.pageY - this.scrollablePanel.offsetTop;
+  }
+  doScroll(e) {
+    const x = this.measureX(e);
+    const y = this.measureY(e);
+    if (x != this.startX || y != this.startY) {
+      const scrollX = x - this.startX;
+      const scrollY = y - this.startY;
+      this.startX += scrollX;
+      this.startY += scrollY;
+      this.scrollWidth += Math.abs(scrollX);
+      this.scrollHeight += Math.abs(scrollY);
+      this.scrollablePanel.scrollLeft = Math.max(0, this.scrollablePanel.scrollLeft - scrollX);
+      this.scrollablePanel.scrollTop = Math.max(0, this.scrollablePanel.scrollTop - scrollY);
+    }
+  }
+  didScroll() {
+    const tollerance = 5;
+    return this.scrollHeight > tollerance || this.scrollWidth > tollerance;
+  }
+}
+EzScroller.style = ezScrollerCss;
+
+const ezSidebarButtonCss = ":host{position:relative;--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{position:absolute;display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer;align-items:center}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}ez-icon{--ez-icon--color:var(--ez-sidebar-button--background-color--primary)}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0}";
+
+const EzSidebarButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezClick = createEvent(this, "ezClick", 7);
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
+    }
+  }
+  render() {
+    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null), h("ez-icon", { iconName: "chevron-right" })));
+  }
+  get _element() { return getElement(this); }
+};
+EzSidebarButton.style = ezSidebarButtonCss;
+
+export { EzScroller as ez_scroller, EzSidebarButton as ez_sidebar_button };

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

@@ -4,6 +4,7 @@ import { ObjectUtils, StringUtils, FloatingManager, ElementIDUtils } from '@sank
 import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import './ICustomRender-875b5a40.js';
 import { R as REQUIRED_INFO } from './constants-4e0d35b7.js';
 
 const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--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-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--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--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--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--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-search--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-search__scrollbar--color-background);width:var(--ez-search__scrollbar--width);max-width:var(--ez-search__scrollbar--width);min-width:var(--ez-search__scrollbar--width)}.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)}.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);padding:var(--ez-search--space--small);gap:var(--space--small, 6px)}.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}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;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__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
@@ -19,7 +20,6 @@ const EzSearch = class {
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
     this._textEmptySearch = "Nenhum resultado de {0} encontrado";
-    this._lookupMode = false;
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
     this._preSelection = undefined;
@@ -48,36 +48,30 @@ const EzSearch = class {
     var _a;
     if (this._textInput) {
       this._textInput.errorMessage = this.errorMessage;
-      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim()) && this.errorMessage) {
         this.setInputValue();
       }
     }
   }
-  observeValue(newValue, oldValue) {
-    if (this._textInput && newValue != oldValue) {
-      try {
-        if (newValue === "string") {
-          this.setInputValue();
-          return;
-        }
-        const newValueSelected = this.getSelectedOption(newValue);
-        const oldValueSelected = this.getSelectedOption(oldValue);
-        const currentValue = this.getSelectedOption(this.value);
-        if (this.isDifferentValues(currentValue, newValueSelected)) {
-          this.value = newValueSelected;
-        }
-        if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
-          this.setInputValue();
-          const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
-          if (!this._lookupMode) {
-            this.ezChange.emit(valueEmitted);
-          }
-        }
-        this.resetOptions();
+  validateNewValue(newValue, oldValue) {
+    const getValue = (val) => typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
+    return (getValue(newValue) !== getValue(oldValue));
+  }
+  async observeValue(newValue, oldValue) {
+    if (this._textInput && newValue !== oldValue && this.validateNewValue(newValue, oldValue)) {
+      if (typeof newValue === "string") {
+        await this.handleValueAsString(newValue);
+        return;
       }
-      finally {
-        this._lookupMode = false;
+      const newValueSelected = this.getSelectedOption(newValue);
+      const currentValue = this.getSelectedOption(this._currentValue);
+      if (this.isDifferentValues(currentValue, newValueSelected)) {
+        this._currentValue = newValueSelected;
+        this.setInputValue();
+        const valueEmitted = newValueSelected !== null && newValueSelected !== void 0 ? newValueSelected : undefined;
+        this.ezChange.emit(valueEmitted);
       }
+      this.resetOptions();
     }
   }
   observeOptions(newOptions, oldOptions) {
@@ -144,6 +138,16 @@ const EzSearch = class {
       });
     }
   }
+  async handleValueAsString(value) {
+    if (this.getSelectedOption(value)) {
+      this.setInputValue();
+      return;
+    }
+    await this.loadDescriptionValue(value);
+    this.setInputValue();
+    this.ezChange.emit(this.value);
+    this._currentValue = this.value;
+  }
   updateListPosition() {
     let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
     const elementRect = this._listWrapper.getBoundingClientRect();
@@ -199,7 +203,7 @@ const EzSearch = class {
     return text;
   }
   getText() {
-    const currentValue = this.getSelectedOption(this.value);
+    const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
     if (text == undefined) {
       return;
@@ -374,6 +378,7 @@ const EzSearch = class {
       || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
       const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
       this.value = adjustedOpt;
+      this._currentValue = adjustedOpt;
     }
     else {
       this.setInputValue();
@@ -394,7 +399,7 @@ const EzSearch = class {
     }
   }
   cancelPreselection() {
-    if (!this._textInput.value && this.value) {
+    if (!this._textInput.value && this._currentValue) {
       this.selectOption(undefined);
     }
     else {
@@ -415,6 +420,7 @@ const EzSearch = class {
   }
   clearSearch() {
     this.value = null;
+    this._currentValue = null;
   }
   controlListWithOnlyOne() {
     var _a, _b;
@@ -444,11 +450,11 @@ const EzSearch = class {
     if (StringUtils.isEmpty(this.value)) {
       return;
     }
-    let value = this.value;
-    if (typeof value === "object") {
+    if (!this.validateNewValue(this.value, this._currentValue)) {
       return;
     }
-    if (StringUtils.isEmpty(value)) {
+    let value = this.value;
+    if (typeof value === "object") {
       return;
     }
     this.loadDescriptionValue(value);
@@ -485,8 +491,8 @@ const EzSearch = class {
       this.showNoResultMessage();
       return;
     }
-    this._lookupMode = true;
-    this.value = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this.value = this._currentValue;
   }
   loadOptionValue(argument) {
     var _a;
@@ -545,6 +551,7 @@ const EzSearch = class {
     this.validateDescriptionValue();
   }
   componentDidLoad() {
+    this._currentValue = this.value;
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
     this._resizeObserver = new ResizeObserver((entries) => {

package/dist/esm/ez-sidebar-navigator.entry.js

@@ -0,0 +1,88 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
+
+var ModeMenuEnum;
+(function (ModeMenuEnum) {
+  ModeMenuEnum["FLOAT"] = "float";
+  ModeMenuEnum["FIXED"] = "fixed";
+})(ModeMenuEnum || (ModeMenuEnum = {}));
+
+var SizeMenuEnum;
+(function (SizeMenuEnum) {
+  SizeMenuEnum["SMALL"] = "sm";
+  SizeMenuEnum["MEDIUM"] = "md";
+  SizeMenuEnum["LARGE"] = "lg";
+})(SizeMenuEnum || (SizeMenuEnum = {}));
+
+var TypeMenuEnum;
+(function (TypeMenuEnum) {
+  TypeMenuEnum["FLOAT"] = "float";
+  TypeMenuEnum["FIXED"] = "fixed";
+  TypeMenuEnum["DYNAMIC"] = "dynamic";
+})(TypeMenuEnum || (TypeMenuEnum = {}));
+
+const MESSAGES = {
+  HIDE_MENU: 'Ocultar menu',
+  UN_PIN_MENU: 'Desafixar menu',
+  PUSH_PIN_MENU: 'Fixar menu',
+};
+
+const ezSidebarNavigatorCss = ":host{--ez-sidebar-navigator--padding-left:var(--space--xs, 12px);--ez-sidebar-navigator--padding-right:var(--space--xs, 12px);--ez-sidebar-navigator--gap:var(--space--xs, 12px);--ez-sidebar-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-sidebar-navigator--background-color:var(--color--inverted);--ez-sidebar-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-sidebar-navigator--height:calc(100vh - var(--space--lg, 24px));--ez-sidebar-navigator--header-gap:var(--space--xs, 12px);--ez-sidebar-navigator--footer-gap:var(--space--xs, 12px);--ez-ez-sidebar-navigator__title--font-family:var(--font-pattern, \"Roboto\");--ez-ez-sidebar-navigator__title--font-size:var(--title--medium, 16px);--ez-ez-sidebar-navigator__title--color:var(--title--primary, #2b3a54);--ez-ez-sidebar-navigator__title--font-weight:var(--text-weight--extra-large, 700)}.inverted{transform:rotate(180deg)}.ez-sidebar-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:var(--ez-sidebar-navigator--height);padding-top:var(--space--xs, 12px);padding-bottom:var(--space--xs, 12px);gap:var(--ez-sidebar-navigator--gap);padding-left:var(--ez-sidebar-navigator--padding-left);padding-right:var(--ez-sidebar-navigator--padding-right);background-color:var(--ez-sidebar-navigator--background-color);-webkit-box-shadow:var(--ez-sidebar-navigator--box-shadow);box-shadow:var(--ez-sidebar-navigator--box-shadow);border-radius:var(--ez-sidebar-navigator--border-radius)}.ez-sidebar-navigator__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;gap:var(--ez-sidebar-navigator--header-gap)}.ez-sidebar-navigator__content{height:100%}.ez-sidebar-navigator__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-sidebar-navigator--footer-gap)}.ez-sidebar-navigator__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ez-ez-sidebar-navigator__title--font-family);font-size:var(--ez-ez-sidebar-navigator__title--font-size);font-weight:var(--ez-ez-sidebar-navigator__title--font-weight);color:var(--ez-ez-sidebar-navigator__title--color)}.ez-sidebar-navigator__end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;gap:var(--ez-sidebar-navigator--gap)}.dynamic{position:absolute;z-index:var(--most-visible\t, 4)}.fixed{position:relative}.hidden{display:none}.show{animation:fadeIn .1s ease-in-out 1}@keyframes fadeIn{from{transform:translate(-100%)}}.sm{width:240px}.md{width:280px}.lg{width:320px}@media screen and (max-width: 991px){.responsive{width:240px}}@media screen and (min-width: 992px){.responsive{width:280px}}@media screen and (min-width: 1200px){.responsive{width:320px}}";
+
+const EzSidebarNavigator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChangeMode = createEvent(this, "ezChangeMode", 7);
+    this.handleToggleSidebar = () => {
+      this.open = !this.open;
+    };
+    this.handleToggleMode = () => {
+      this.mode = this.mode === ModeMenuEnum.FIXED ? ModeMenuEnum.FLOAT : ModeMenuEnum.FIXED;
+      this.ezChangeMode.emit(this.mode);
+    };
+    this.type = TypeMenuEnum.DYNAMIC;
+    this.mode = ModeMenuEnum.FLOAT;
+    this.size = SizeMenuEnum.SMALL;
+    this.isResponsive = false;
+    this.titleMenu = "";
+    this.showCollapseMenu = true;
+    this.showFixedButton = true;
+    this.open = false;
+  }
+  /**
+  * Método para fixar/desafixar o menu, emitindo o evento ezChangeMode.
+  */
+  async changeModeMenu() {
+    if (this.type === TypeMenuEnum.DYNAMIC) {
+      this.handleToggleMode();
+    }
+  }
+  /**
+  * Método para fechar o menu automaticamente após uma ação, fluxo, etc.
+  */
+  async closeSidebar() {
+    this.open = false;
+  }
+  /**
+  * Método para abrir o menu automaticamente após uma ação, fluxo, etc.
+  */
+  async openSidebar() {
+    this.open = true;
+  }
+  componentDidLoad() {
+    if (this.type === TypeMenuEnum.FIXED) {
+      this.mode = ModeMenuEnum.FIXED;
+      this.open = true;
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element);
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-label": this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: MESSAGES.HIDE_MENU, "aria-label": MESSAGES.HIDE_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
+      : undefined));
+  }
+  get _element() { return getElement(this); }
+};
+EzSidebarNavigator.style = ezSidebarNavigatorCss;
+
+export { EzSidebarNavigator as ez_sidebar_navigator };

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

@@ -4,6 +4,7 @@ import { C as CSSVarsUtils } from './CSSVarsUtils-71ce76be.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
 import '@sankhyalabs/core';
+import './ICustomRender-875b5a40.js';
 
 const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow);flex-direction:column;overflow:hidden;display:flex;padding:var(--space--nano)}.box_split-item>.ez-split-item--content{overflow:auto}.expanded__item{position:absolute;z-index:var(--more-visible);top:0;left:0;width:100%;height:100%}.ez-split-item--header{display:flex;align-items:center;justify-content:space-between}.ez-split-item--header-title{flex:1;white-space:nowrap;overflow:hidden}.ez-split-item--header-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ez-split-item--header-buttons{display:flex;align-items:center}.ez-split-item--content{display:block;height:100%}h3.ez-margin--small{margin-left:var(--space--small)}";