@sankhyalabs/ezui 6.4.0-ms.2 → 6.4.0-ms.3

package/dist/cjs/{ez-card-item_2.cjs.entry.js → ez-card-item.cjs.entry.js}

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-017acce4.js');
 
 const ezCardItemCss = ":host {  \n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define o tamanho da fonte do componente no modo compacto.*/\n  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--font-weight--semi-bold, 600);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--font-weight--semi-bold, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define a cor da fonte do valor do detalhe do componente.*/\n  --ez-card-item__detail-value--color: var(--color--petroleum-500, #404E65);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n   /*@doc Define o peso da fonte do componente.*/\n   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item__detail{\n  display: inline-block;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  opacity: 0.95;\n}\n\n\n\n.card-item__expanded {\n  padding: var(--space--medium);\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.card-item__details-container__left {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-container__right {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail{\n  cursor: pointer;\n}\n\n.card-item__detail-default:not(:last-child) {\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--detail-label--font-weight);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item__detail-value--color);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n.card-item__content{\n  display: flex;\n  align-items: center;\n}\n\n.card-item__details-container_default{\n  display: flex;\n}\n\n.card-item__details-slot{\n  margin-left: auto;\n}\n\n/* Modo compacto */\n.card-item__compacted {\n  padding: var(--space--2xs) var(--space--small);\n}\n\n.card-item__detail-label-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__detail-value-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__title-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__details-container__left-compacted{\n  width: 100%;\n}\n\n.card-item__details-container__right-compacted {\n  width: 100%;\n}\n\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-container__left {\n    width: 100%;\n  }\n  \n  .card-item__details-container__right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
 
@@ -60,208 +59,4 @@ const EzCardItem = class {
 };
 EzCardItem.style = ezCardItemCss;
 
-const ezPopoverCoreCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--elevation--100, 100);--ez-popover__box--overlay-z-index:var(--elevation--24, 24);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--ez-popover__box--overlay-z-index)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:calc(100% - 10px)}";
-
-const EzPopoverCore = 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;
-  }
-  observeOpened(newValue, oldValue) {
-    if (newValue === oldValue) {
-      return;
-    }
-    if (newValue) {
-      this.openPopover();
-    }
-    else {
-      this.hidePopover();
-    }
-  }
-  /**
-   * Atualiza a posição do popover.
-   */
-  async updatePosition(top, left) {
-    this.updateOptionPosition(top, left);
-    await this.updatePositionPopover();
-  }
-  /**
-   * Exibe o ez-popover.
-   */
-  async show(top, left) {
-    this.updateOptionPosition(top, left);
-    this.opened = true;
-  }
-  /**
-   * Ancora a exibição do popOver a um elemento HTML.
-   */
-  async showUnder(element, options) {
-    if (options) {
-      this.options = options;
-    }
-    this.anchorElement = element;
-    this.opened = true;
-  }
-  /**
-   * Oculta o ez-popover.
-   */
-  async hide() {
-    this.opened = false;
-  }
-  /**
-   * Altera as opções.
-  */
-  async setOptions(options) {
-    Object.assign(this.options, options);
-  }
-  /**
-   * Altera o elemento de ancoragem.
-  */
-  async setAnchorElement(anchor) {
-    this.anchorElement = anchor;
-  }
-  parseSizePixel(sizePixel, defaultValue) {
-    if (!sizePixel) {
-      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0;
-    }
-    if (typeof sizePixel === "string") {
-      return Number(sizePixel.replace("px", ""));
-    }
-    return sizePixel !== null && sizePixel !== void 0 ? sizePixel : 0;
-  }
-  updateOptionPosition(top, left) {
-    Object.assign(this.options, {
-      horizontalGap: this.parseSizePixel(left, this.options.horizontalGap),
-      verticalGap: this.parseSizePixel(top, this.options.verticalGap),
-    });
-  }
-  getElement(element) {
-    if (typeof element === 'string') {
-      return document.getElementById(element);
-    }
-    return element;
-  }
-  getAnchorElement() {
-    if (!this.anchorElement) {
-      return this._host;
-    }
-    if (Array.isArray(this.anchorElement)) {
-      for (const element of this.anchorElement) {
-        const htmlElement = this.getElement(element);
-        if (htmlElement) {
-          return htmlElement;
-        }
-      }
-      return this._host;
-    }
-    return this.getElement(this.anchorElement);
-  }
-  async updatePositionPopover() {
-    if (!this._box || !this.opened) {
-      return;
-    }
-    const currentAnchorElement = this.getAnchorElement();
-    await floatingUi_dom_esm.computePosition(currentAnchorElement, this._box, {
-      placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
-      middleware: [floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift({ padding: 5 })],
-      strategy: 'fixed',
-    }).then(({ x, y, placement }) => {
-      const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
-      const newLeft = placement.includes("start") ? x + this.options.horizontalGap : x - this.options.horizontalGap;
-      Object.assign(this._box.style, {
-        top: `${newTop}px`,
-        left: `${newLeft}px`,
-      });
-    });
-  }
-  hidePopover() {
-    if (!this._box) {
-      return;
-    }
-    this._box.style.display = '';
-    this.hideOverlay();
-    this.ezVisibilityChange.emit(false);
-  }
-  async openPopover() {
-    if (!this._box || !this.opened) {
-      return;
-    }
-    this._box.style.display = 'flex';
-    this._box.style.visibility = 'hidden';
-    if (this.useAnchorSize) {
-      const currentAnchorElement = this.getAnchorElement();
-      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
-      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
-      this._box.style.width = `${width}px`;
-    }
-    await this.updatePositionPopover();
-    this.openOverlay();
-    this.ezVisibilityChange.emit(true);
-    this._box.style.visibility = 'visible';
-  }
-  openOverlay() {
-    if (!this._overlay || !this._overlayIsActive) {
-      return;
-    }
-    this._overlay.style.display = 'block';
-  }
-  hideOverlay() {
-    if (!this._overlay) {
-      return;
-    }
-    this._overlay.style.display = 'none';
-  }
-  checkStatusOverlay() {
-    if (this.overlayType !== "none") {
-      return true;
-    }
-    if (this.overlayType === "none" && this.autoClose) {
-      return true;
-    }
-    return false;
-  }
-  handlePositionUpdate() {
-    if (!this.opened) {
-      return;
-    }
-    this.updatePositionPopover();
-  }
-  componentWillLoad() {
-    window.addEventListener('scroll', this.handlePositionUpdate.bind(this), true);
-    window.addEventListener('resize', this.handlePositionUpdate.bind(this), true);
-  }
-  componentDidLoad() {
-    this._overlayIsActive = this.checkStatusOverlay();
-    this._resizeObserver = new ResizeObserver(this.updatePositionPopover.bind(this));
-    this._resizeObserver.observe(this._box);
-    this.openPopover();
-  }
-  disconnectedCallback() {
-    window.removeEventListener('scroll', this.handlePositionUpdate.bind(this), true);
-    window.removeEventListener('resize', this.handlePositionUpdate.bind(this), true);
-    this._resizeObserver.disconnect();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { ref: el => this._overlay = el, onClick: () => this.hide(), class: `popover__overlay popover__overlay--${this.overlayType}` }), index.h("section", { ref: el => this._box = el, class: {
-        "popover__box": true,
-        "popover__box--fit-content": this.boxWidth === "fit-content",
-        "popover__box--full-width": this.boxWidth !== "fit-content",
-      } }, index.h("slot", null))));
-  }
-  get _host() { return index.getElement(this); }
-  static get watchers() { return {
-    "opened": ["observeOpened"]
-  }; }
-};
-EzPopoverCore.style = ezPopoverCoreCss;
-
 exports.ez_card_item = EzCardItem;
-exports.ez_popover_core = EzPopoverCore;

package/dist/cjs/ez-classic-combo-box.cjs.entry.js

@@ -0,0 +1,324 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const index$1 = require('./index-425b1f67.js');
+
+const ezClassicComboBoxCss = ":host{display:block;box-sizing:border-box;font-family:var(--font--pattern, 'Roboto', Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--gray-500, #494A4E);--ez-classic-combo-box-highlighted-bg-color:var(--color--gray-90, #EAEAEA);--ez-classic-combo-box-max-height:180px;--ez-classic-combo-box-list-bg-color:var(--color--gray-70, #FFFFFF);--ez-classic-combo-box-item-hover-bg-color:var(--color--gray-100, #DEDEDE);--ez-classic-combo-box-selected-bg-color:var(--color--ocean-green-90, #E6F3EF);--ez-classic-combo-box-selected-text-color:var(--color--ocean-green-600, #008561);--ez-classic-combo-box-selected-font-weight:var(--font-weight--medium, 500);--ez-classic-combo-box-item-padding:var(--space--8, 8px) var(--space--4, 4px);--ez-classic-combo-box-item-border-radius:var(--border--radius-8, 8px);--ez-classic-combo-box-list-margin:var(--space--6, 6px);--ez-classic-combo-box-transition-duration:150ms;--ez-classic-combo-box-scrollbar-color:var(--color--gray-300, #C4C4C4);--ez-classic-combo-box-no-results-margin:var(--space--52, 52px) 0;--ez-classic-combo-box-item-text-color:inherit;--ez-classic-combo-box-item-min-height:auto}ul{list-style:none;padding:0;margin:var(--ez-classic-combo-box-list-margin);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ez-classic-combo-box-scrollbar-color) transparent;max-height:var(--ez-classic-combo-box-max-height);scroll-behavior:smooth;background-color:var(--ez-classic-combo-box-list-bg-color)}li{cursor:pointer;border-radius:var(--ez-classic-combo-box-item-border-radius);padding:var(--ez-classic-combo-box-item-padding);transition:var(--ez-classic-combo-box-transition-duration) background-color linear;color:var(--ez-classic-combo-box-item-text-color);min-height:var(--ez-classic-combo-box-item-min-height)}li:hover{background-color:var(--ez-classic-combo-box-item-hover-bg-color)}li.highlighted{background-color:var(--ez-classic-combo-box-highlighted-bg-color)}li.selected{background-color:var(--ez-classic-combo-box-selected-bg-color);color:var(--ez-classic-combo-box-selected-text-color);font-weight:var(--ez-classic-combo-box-selected-font-weight)}span.no-results{margin:var(--ez-classic-combo-box-no-results-margin);cursor:default;text-align:center;display:flex;align-items:center;justify-content:center}";
+
+const EzClassicComboBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezBlur = index.createEvent(this, "ezBlur", 7);
+    this.iconClick = index.createEvent(this, "iconClick", 7);
+    this.ezVisibilityChange = index.createEvent(this, "ezVisibilityChange", 7);
+    this.ezType = index.createEvent(this, "ezType", 7);
+    this._keyboardManager = undefined;
+    this._boundHandleDocumentClick = this.handleDocumentClick.bind(this);
+    this.popoverVisible = false;
+    this.hasSlotContent = false;
+    this.highlightedIndex = 0;
+    this.filteredOptions = [];
+    this.inputValue = '';
+    this.value = null;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.enabled = true;
+    this.readonly = false;
+    this.name = undefined;
+    this.state = "default";
+    this.helpText = undefined;
+    this.iconName = undefined;
+    this.titleIcon = undefined;
+    this.iconClickable = false;
+    this.suppressSearch = false;
+    this.options = undefined;
+    this.textEmptyOption = undefined;
+    this.suppressEmptyOption = false;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(option) {
+    var _a;
+    await ((_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.setFocus(option));
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    var _a;
+    await ((_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.setBlur());
+    await this.hidePopover();
+  }
+  /**
+   * Exibe o popover abaixo do input.
+   */
+  async showPopover() {
+    var _a, _b, _c;
+    if (!this._popoverElem || !this._inputElem || this.popoverVisible) {
+      return;
+    }
+    this.popoverVisible = true;
+    const inputContainer = (_b = (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-container');
+    await ((_c = this._popoverElem) === null || _c === void 0 ? void 0 : _c.showUnder(inputContainer !== null && inputContainer !== void 0 ? inputContainer : this._inputElem));
+  }
+  /**
+   * Oculta o popover.
+   */
+  async hidePopover() {
+    var _a;
+    this.popoverVisible = false;
+    await ((_a = this._popoverElem) === null || _a === void 0 ? void 0 : _a.hide());
+  }
+  compareOptionValues(option1, option2) {
+    var _a, _b;
+    return JSON.stringify((_a = option1 === null || option1 === void 0 ? void 0 : option1.value) !== null && _a !== void 0 ? _a : null) === JSON.stringify((_b = option2 === null || option2 === void 0 ? void 0 : option2.value) !== null && _b !== void 0 ? _b : null);
+  }
+  setEmptyValue() {
+    this.value = null;
+    this.inputValue = '';
+  }
+  async setValue(option) {
+    if (!option || !this.options) {
+      this.setEmptyValue();
+      await this.hidePopover();
+      return;
+    }
+    if (this.compareOptionValues(this.value, option)) {
+      await this.hidePopover();
+      return;
+    }
+    if (!option.value) {
+      this.setEmptyValue();
+    }
+    else {
+      this.value = option;
+      this.inputValue = option.label;
+    }
+    this.ezChange.emit(this.value);
+    await this.hidePopover();
+  }
+  async optionsChanged() {
+    this.filterOptions('');
+  }
+  async valueChanged(newValue) {
+    if (newValue) {
+      this.inputValue = newValue.label;
+      this.setHighlightedIndexToValue();
+    }
+    else {
+      this.inputValue = '';
+      this.highlightedIndex = 0;
+    }
+  }
+  async handleIconClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.detail.icon === 'right') {
+      if (!this.popoverVisible) {
+        await this.showPopover();
+      }
+      else {
+        await this.hidePopover();
+      }
+    }
+    else {
+      this.iconClick.emit();
+    }
+  }
+  async handleEzChange(event) {
+    event.stopPropagation();
+    this.inputValue = event.detail;
+    if (!this.popoverVisible && this.inputValue.length > 0) {
+      await this.showPopover();
+    }
+    this.ezType.emit(this.inputValue);
+    this.highlightedIndex = 0;
+    this.filterOptions(this.inputValue);
+  }
+  async handleEzBlur(event) {
+    var _a, _b;
+    event.stopPropagation();
+    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.label) !== this.inputValue) {
+      this.inputValue = ((_b = this.value) === null || _b === void 0 ? void 0 : _b.label) || '';
+    }
+    this.ezBlur.emit(this.value);
+  }
+  filterOptions(searchTerm) {
+    if (!this.options) {
+      this.filteredOptions = [];
+      return;
+    }
+    let currentOptions = [];
+    if (!searchTerm || searchTerm.trim() === '') {
+      currentOptions = currentOptions.concat([...this.options]);
+    }
+    else {
+      const term = searchTerm.toLowerCase().trim();
+      currentOptions = currentOptions.concat(this.options.filter(option => option.label.toLowerCase().includes(term) ||
+        option.value.toLowerCase().includes(term)));
+    }
+    if (!this.suppressEmptyOption && currentOptions.length > 0) {
+      currentOptions = [
+        {
+          value: null,
+          label: this.textEmptyOption || this.i18n('ez-classic-combo-box.emptyOption')
+        },
+        ...currentOptions
+      ];
+    }
+    this.filteredOptions = currentOptions;
+    this.setHighlightedIndexToValue();
+    this.scrollToHighlightedOption();
+  }
+  scrollToHighlightedOption() {
+    if (this.highlightedIndex < 0 || !this._listElem) {
+      return;
+    }
+    const highlightedOption = this._listElem.children[this.highlightedIndex];
+    if (highlightedOption) {
+      highlightedOption.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }
+  async selectOption(option) {
+    if (!option || this.readonly || !this.enabled) {
+      return;
+    }
+    await this.setValue(option);
+  }
+  async handleArrowUp() {
+    var _a;
+    if (!this.popoverVisible) {
+      await this.showPopover();
+      return;
+    }
+    const optionsLength = ((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    if (optionsLength <= 0 || this.highlightedIndex <= 0) {
+      return;
+    }
+    this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+    this.scrollToHighlightedOption();
+  }
+  handleArrowDown() {
+    var _a;
+    if (!this.popoverVisible) {
+      this.showPopover();
+      return;
+    }
+    const optionsLength = ((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    if (optionsLength <= 0) {
+      return;
+    }
+    this.highlightedIndex = Math.min(optionsLength - 1, this.highlightedIndex + 1);
+    this.scrollToHighlightedOption();
+  }
+  async selectCurrentItem() {
+    if (!this.popoverVisible || this.highlightedIndex < 0) {
+      return;
+    }
+    if (this.hasSlotContent || this.filteredOptions.length === 0 || this.readonly || !this.enabled) {
+      await this.hidePopover();
+      return;
+    }
+    if (this.filteredOptions && this.filteredOptions[this.highlightedIndex]) {
+      this.selectOption(this.filteredOptions[this.highlightedIndex]);
+    }
+  }
+  handleVisibilityChange(event) {
+    this.popoverVisible = event.detail;
+    this.ezVisibilityChange.emit(this.popoverVisible);
+  }
+  checkSlotContent() {
+    const slot = this._element.querySelector('slot') || this._element;
+    if (slot instanceof HTMLSlotElement) {
+      this.hasSlotContent = slot.assignedNodes().length > 0;
+    }
+    else {
+      this.hasSlotContent = slot.children.length > 0;
+    }
+  }
+  setHighlightedIndexToValue() {
+    if (this.value && this.filteredOptions) {
+      const index = this.filteredOptions.findIndex(opt => opt.value === this.value.value);
+      if (index >= 0) {
+        this.highlightedIndex = index;
+        return;
+      }
+      this.highlightedIndex = 0;
+    }
+  }
+  async handleDocumentClick(event) {
+    const target = event.target;
+    if (!this._element.contains(target) && !this._popoverElem.contains(target)) {
+      await this.hidePopover();
+    }
+  }
+  addInfoId() {
+    const dataInfo = { id: 'embedded' };
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElem) {
+      core.ElementIDUtils.addIDInfo(this._inputElem, 'classic-combo-box-input', dataInfo);
+    }
+    if (this._popoverElem) {
+      core.ElementIDUtils.addIDInfo(this._popoverElem, 'classic-combo-box-popover', dataInfo);
+    }
+  }
+  async initKeyboardManager() {
+    this._keyboardManager = new core.KeyboardManager({ element: this._element, propagate: true });
+    this._keyboardManager
+      .bind("ArrowUp", () => this.handleArrowUp(), { propagate: false })
+      .bind("ArrowDown", () => this.handleArrowDown(), { propagate: false })
+      .bind("Enter", () => this.selectCurrentItem(), { propagate: false })
+      .bind("Tab", () => this.selectCurrentItem())
+      .bind("shift+Tab", () => this.selectCurrentItem())
+      .bind("Escape", () => this.hidePopover());
+  }
+  async connectedCallback() {
+    this.i18n = await index$1.initI18n();
+    await this.initKeyboardManager();
+    document.addEventListener('mouseup', this._boundHandleDocumentClick);
+  }
+  disconnectedCallback() {
+    this._keyboardManager.unbindAllShortcutKeys();
+    document.removeEventListener('mouseup', this._boundHandleDocumentClick);
+  }
+  componentWillLoad() {
+    this.filterOptions('');
+  }
+  componentDidLoad() {
+    this.addInfoId();
+    this.checkSlotContent();
+    if (this.value) {
+      this.inputValue = this.value.label;
+      this.setHighlightedIndexToValue();
+    }
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("ez-classic-input", { ref: ref => this._inputElem = ref, name: this.name, label: this.label, placeholder: this.placeholder, value: this.inputValue, state: this.state, enabled: this.enabled, readonly: this.readonly || this.suppressSearch, leftIconName: this.iconName, leftIconTooltip: this.titleIcon, leftIconClickable: this.iconClickable, rightIconClickable: true, helpText: this.helpText, rightIconName: this.popoverVisible ? 'angle-up' : 'angle-down', onIconClick: this.handleIconClick.bind(this), onEzChange: this.handleEzChange.bind(this), onEzFocus: this.showPopover.bind(this), onEzBlur: this.handleEzBlur.bind(this) }), index.h("ez-popover-core", { ref: ref => this._popoverElem = ref, useAnchorSize: true, onEzVisibilityChange: this.handleVisibilityChange.bind(this), overlayType: "none", options: { verticalGap: 2, horizontalGap: 0 }, autoClose: false }, index.h("slot", { onSlotchange: this.checkSlotContent.bind(this) }), !this.hasSlotContent && (((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", { ref: ref => this._listElem = ref, tabIndex: -1 }, this.filteredOptions.map((option, index$1) => {
+      var _a, _b;
+      return (index.h("li", { key: (_a = option.value) !== null && _a !== void 0 ? _a : '__empty__', value: option.value, class: {
+          'highlighted': this.highlightedIndex === index$1,
+          'selected': ((_b = this.value) === null || _b === void 0 ? void 0 : _b.value) === option.value
+        }, onMouseDown: () => this.selectOption(option) }, option.label));
+    }))) : (index.h("span", { class: "no-results" }, this.i18n('ez-classic-combo-box.noResults')))))));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "options": ["optionsChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+EzClassicComboBox.style = ezClassicComboBoxCss;
+
+exports.ez_classic_combo_box = EzClassicComboBox;

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

@@ -200,14 +200,16 @@ class MaskFormatter {
   }
 }
 
-const ezClassicInputCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;--ez-classic-input--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-input--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-input--border-color-success:var(--color--green-600, #157A00);--ez-classic-input--border-color-error:var(--color--red-600, #BD0025);--ez-classic-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-input--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-input--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--placeholder-color:#bdbdbd;--ez-classic-input--icon-color:var(--color--gray-400, #77777A);--ez-classic-input--helptext-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--height:56px}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin:var(--space--4, 4px) var(--space--2, 2px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);height:var(--ez-classic-input--height);background-color:var(--ez-classic-input--background-color)}.input-container,.input-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-input--border-color-default)}.input-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-success)}.input-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-error)}.input-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-warning)}.input-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-input--icon-color)}input{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;color:var(--ez-classic-input--text-color)}input::placeholder{color:var(--ez-classic-input--placeholder-color)}.input-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-input--background-color-disabled);border-color:var(--ez-classic-input--border-color-default)}.input-container[data-disabled=\"true\"]>*{cursor:not-allowed}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-input--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}";
+const ezClassicInputCss = ":host{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);border:none;padding:0;--ez-classic-input--label-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-classic-input--border-color-focus:var(--color--gray-300, #A4A5A7);--ez-classic-input--border-color-success:var(--color--green-600, #157A00);--ez-classic-input--border-color-error:var(--color--red-600, #BD0025);--ez-classic-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-classic-input--background-color:var(--color--gray-70, #FFFFFF);--ez-classic-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-classic-input--text-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--placeholder-color:#bdbdbd;--ez-classic-input--icon-color:var(--color--gray-400, #77777A);--ez-classic-input--helptext-color:var(--color--ocean-green-1000, #00281D);--ez-classic-input--height:56px}.input-container{display:flex;flex-direction:row;align-items:center;width:100%;border:none;border-radius:var(--border--radius-8, 8px);padding:var(--space--16, 16px);box-sizing:border-box;gap:var(--space--10, 10px);margin:var(--space--4, 4px) var(--space--2, 2px);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);height:var(--ez-classic-input--height);background-color:var(--ez-classic-input--background-color)}.input-container,.input-container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-classic-input--border-color-default)}.input-container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-success)}.input-container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-error)}.input-container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-warning)}.input-container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-classic-input--border-color-focus)}ez-icon{min-width:var(--space--24, 24px);color:var(--ez-classic-input--icon-color)}input{flex:1;border:none;outline:none;background:transparent;height:100%;width:100%;padding:0;font-family:var(--font--pattern, Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);text-overflow:ellipsis;color:var(--ez-classic-input--text-color)}input::placeholder{color:var(--ez-classic-input--placeholder-color)}.input-container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-classic-input--background-color-disabled);border-color:var(--ez-classic-input--border-color-default)}.input-container[data-disabled=\"true\"]>*{cursor:not-allowed}.input-container input:read-only{cursor:default}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-classic-input--helptext-color)}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-classic-input--label-color)}.icon-clickable{cursor:pointer}";
 
 const EzClassicInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ezChange = index.createEvent(this, "ezChange", 7);
     this.ezBlur = index.createEvent(this, "ezBlur", 7);
+    this.ezFocus = index.createEvent(this, "ezFocus", 7);
     this.iconClick = index.createEvent(this, "iconClick", 7);
+    this._internalValueChange = false;
     this.type = 'text';
     this.value = undefined;
     this.label = undefined;
@@ -246,6 +248,19 @@ const EzClassicInput = class {
   async setBlur() {
     this._inputElem.blur();
   }
+  async syncValue() {
+    if (this._internalValueChange) {
+      this._internalValueChange = false;
+      return;
+    }
+    if (this.value && this._maskFormatter && this._inputElem) {
+      const formattedValue = this._maskFormatter.format(this.value);
+      this._inputElem.value = formattedValue;
+    }
+    else if (this._inputElem) {
+      this._inputElem.value = this.value || '';
+    }
+  }
   onInput(event) {
     try {
       const inputElement = event.target;
@@ -254,11 +269,13 @@ const EzClassicInput = class {
         const formattedValue = this._maskFormatter.format(inputValue);
         const cleanValue = this._maskFormatter.removeMask(formattedValue);
         inputElement.value = formattedValue;
+        this._internalValueChange = true;
         this.value = cleanValue;
         const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
         this.ezChange.emit(emitValue);
       }
       else {
+        this._internalValueChange = true;
         this.value = inputValue;
         this.ezChange.emit(inputValue);
       }
@@ -270,6 +287,9 @@ const EzClassicInput = class {
   onBlur() {
     this.ezBlur.emit(this.value);
   }
+  onFocus() {
+    this.ezFocus.emit(this.value);
+  }
   handleIconClick(event, icon) {
     if (!this.enabled) {
       return;
@@ -299,19 +319,16 @@ const EzClassicInput = class {
     }
   }
   componentDidLoad() {
-    if (this.value && this._maskFormatter && this._inputElem) {
-      const formattedValue = this._maskFormatter.format(this.value);
-      this._inputElem.value = formattedValue;
-    }
-    else {
-      this._inputElem.value = this.value || '';
-    }
+    this.syncValue();
     this.addInfoId();
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { title: this.label, htmlFor: this.name }, this.label), index.h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (index.h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), index.h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (index.h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (index.h("span", { title: this.helpText }, this.helpText))));
+    return (index.h(index.Host, null, index.h("label", { title: this.label, htmlFor: this.name }, this.label), index.h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (index.h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), index.h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (index.h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (index.h("span", { title: this.helpText }, this.helpText))));
   }
   get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["syncValue"]
+  }; }
 };
 EzClassicInput.style = ezClassicInputCss;
 

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

@@ -154,7 +154,7 @@ const EzMuiltiSelectionList = class {
     itemSelected.check = itemCheckSelected.check;
   }
   buildViewList(hasDelete) {
-    return (index.h(index.Fragment, null, this.displayOptionToCheckAllItems && (index.h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), index.h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions, listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
+    return (index.h(index.Fragment, null, this.displayOptionToCheckAllItems && (index.h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), index.h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions.map(opt => (Object.assign(Object.assign({}, opt), { id: opt.value }))), listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
   }
   buildDeleteIconSlot(item) {
     return index.h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });