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

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { h, HTMLElement as HTMLElement$1, createEvent, Host, forceUpdate, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { LangUtils, ApplicationContext, UserInterface, DateUtils as DateUtils$1, Action, StringUtils as StringUtils$1, ObjectUtils as ObjectUtils$1, WaitingChangeException, DataUnitAction, FloatingManager, ElementIDUtils, JSUtils, HTMLBuilder, TimeFormatter, KeyboardManager, DataUnit, LockManager, LockManagerOperation, DataType, NumberUtils as NumberUtils$1, MaskFormatter as MaskFormatter$1, SortMode, ColumnFilterManager as ColumnFilterManager$1, ArrayUtils as ArrayUtils$1, FieldComparator, OverflowWatcher, OVERFLOWED_CLASS_NAME } from '@sankhyalabs/core';
+import { LangUtils, ApplicationContext, UserInterface, DateUtils as DateUtils$1, Action, StringUtils as StringUtils$1, ObjectUtils as ObjectUtils$1, WaitingChangeException, DataUnitAction, FloatingManager, ElementIDUtils, JSUtils, KeyboardManager, HTMLBuilder, TimeFormatter, DataUnit, LockManager, LockManagerOperation, DataType, NumberUtils as NumberUtils$1, MaskFormatter as MaskFormatter$1, SortMode, ColumnFilterManager as ColumnFilterManager$1, ArrayUtils as ArrayUtils$1, FieldComparator, OverflowWatcher, OVERFLOWED_CLASS_NAME } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 
 const isString = obj => typeof obj === 'string';
@@ -2852,6 +2852,10 @@ const ptBrTranslations = {
       placeholder: "Selecione um item",
       noResults: "Nenhum resultado encontrado",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Selecione um item",
+      noResults: "Nenhum resultado encontrado",
+    },
     "ez-date-time-input": {
       invalidDate: "O valor digitado não é uma data e hora válida"
     },
@@ -3133,6 +3137,10 @@ const enUsTranslations = {
       placeholder: "Select an item",
       noResults: "No results found",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Select an item",
+      noResults: "No results found",
+    },
     "ez-date-time-input": {
       invalidDate: "The entered value is not a valid date and time"
     },
@@ -3414,6 +3422,10 @@ const esEsTranslations = {
       placeholder: "Seleccione un elemento",
       noResults: "No se encontraron resultados",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Seleccione un elemento",
+      noResults: "No se encontraron resultados",
+    },
     "ez-date-time-input": {
       invalidDate: "El valor ingresado no es una fecha y hora válida"
     },
@@ -6688,6 +6700,323 @@ const EzChip$1 = class extends HTMLElement$1 {
   static get style() { return ezChipCss; }
 };
 
+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$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezBlur = createEvent(this, "ezBlur", 7);
+    this.iconClick = createEvent(this, "iconClick", 7);
+    this.ezVisibilityChange = createEvent(this, "ezVisibilityChange", 7);
+    this.ezType = 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) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElem) {
+      ElementIDUtils.addIDInfo(this._inputElem, 'classic-combo-box-input', dataInfo);
+    }
+    if (this._popoverElem) {
+      ElementIDUtils.addIDInfo(this._popoverElem, 'classic-combo-box-popover', dataInfo);
+    }
+  }
+  async initKeyboardManager() {
+    this._keyboardManager = new 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 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 (h(Host, null, 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) }), 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 }, h("slot", { onSlotchange: this.checkSlotContent.bind(this) }), !this.hasSlotContent && (((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("ul", { ref: ref => this._listElem = ref, tabIndex: -1 }, this.filteredOptions.map((option, index) => {
+      var _a, _b;
+      return (h("li", { key: (_a = option.value) !== null && _a !== void 0 ? _a : '__empty__', value: option.value, class: {
+          'highlighted': this.highlightedIndex === index,
+          'selected': ((_b = this.value) === null || _b === void 0 ? void 0 : _b.value) === option.value
+        }, onMouseDown: () => this.selectOption(option) }, option.label));
+    }))) : (h("span", { class: "no-results" }, this.i18n('ez-classic-combo-box.noResults')))))));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "options": ["optionsChanged"],
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return ezClassicComboBoxCss; }
+};
+
 class MaskFormatter {
   constructor(mask) {
     this.mask = mask;
@@ -6883,7 +7212,7 @@ 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$1 = class extends HTMLElement$1 {
   constructor() {
@@ -6892,7 +7221,9 @@ const EzClassicInput$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezBlur = createEvent(this, "ezBlur", 7);
+    this.ezFocus = createEvent(this, "ezFocus", 7);
     this.iconClick = createEvent(this, "iconClick", 7);
+    this._internalValueChange = false;
     this.type = 'text';
     this.value = undefined;
     this.label = undefined;
@@ -6931,6 +7262,19 @@ const EzClassicInput$1 = class extends HTMLElement$1 {
   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;
@@ -6939,11 +7283,13 @@ const EzClassicInput$1 = class extends HTMLElement$1 {
         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);
       }
@@ -6955,6 +7301,9 @@ const EzClassicInput$1 = class extends HTMLElement$1 {
   onBlur() {
     this.ezBlur.emit(this.value);
   }
+  onFocus() {
+    this.ezFocus.emit(this.value);
+  }
   handleIconClick(event, icon) {
     if (!this.enabled) {
       return;
@@ -6984,19 +7333,16 @@ const EzClassicInput$1 = class extends HTMLElement$1 {
     }
   }
   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 (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), 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 && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
+    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), 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 && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
   }
   get _element() { return this; }
+  static get watchers() { return {
+    "value": ["syncValue"]
+  }; }
   static get style() { return ezClassicInputCss; }
 };
 
@@ -80191,7 +80537,7 @@ const EzMuiltiSelectionList = class extends HTMLElement$1 {
     itemSelected.check = itemCheckSelected.check;
   }
   buildViewList(hasDelete) {
-    return (h(Fragment, null, this.displayOptionToCheckAllItems && (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) })), 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 (h(Fragment, null, this.displayOptionToCheckAllItems && (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) })), 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 h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });
@@ -92124,6 +92470,7 @@ const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-ite
 const EzChart = /*@__PURE__*/proxyCustomElement(EzChart$1, [1,"ez-chart",{"type":[1],"xAxis":[16],"yAxis":[16],"chartTitle":[1,"chart-title"],"chartSubTitle":[1,"chart-sub-title"],"legendEnabled":[4,"legend-enabled"],"series":[16],"width":[2],"height":[2]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"alternativePlaceholder":[513,"alternative-placeholder"],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"compact":[4]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"showNativeTooltip":[4,"show-native-tooltip"],"disableAutoUpdateValue":[4,"disable-auto-update-value"],"maxWidth":[1,"max-width"],"size":[1],"iconNameLeft":[1,"icon-name-left"],"iconNameRight":[1,"icon-name-right"],"type":[1],"_isOverflowing":[32]}]);
+const EzClassicComboBox = /*@__PURE__*/proxyCustomElement(EzClassicComboBox$1, [1,"ez-classic-combo-box",{"value":[1040],"label":[1],"placeholder":[1025],"enabled":[4],"readonly":[4],"name":[1],"state":[1],"helpText":[1,"help-text"],"iconName":[1,"icon-name"],"titleIcon":[1,"title-icon"],"iconClickable":[4,"icon-clickable"],"suppressSearch":[4,"suppress-search"],"options":[16],"textEmptyOption":[1,"text-empty-option"],"suppressEmptyOption":[4,"suppress-empty-option"],"popoverVisible":[32],"hasSlotContent":[32],"highlightedIndex":[32],"filteredOptions":[32],"inputValue":[32]}]);
 const EzClassicInput = /*@__PURE__*/proxyCustomElement(EzClassicInput$1, [1,"ez-classic-input",{"type":[1],"value":[1025],"label":[1],"helpText":[1,"help-text"],"placeholder":[1025],"enabled":[4],"readonly":[4],"name":[1],"minlength":[2],"maxlength":[2],"leftIconName":[1,"left-icon-name"],"rightIconName":[1,"right-icon-name"],"rightIconTooltip":[1,"right-icon-tooltip"],"leftIconTooltip":[1,"left-icon-tooltip"],"state":[1],"leftIconClickable":[4,"left-icon-clickable"],"rightIconClickable":[4,"right-icon-clickable"],"mask":[1],"emitMaskedValue":[4,"emit-masked-value"]}]);
 const EzClassicTextArea = /*@__PURE__*/proxyCustomElement(EzClassicTextArea$1, [1,"ez-classic-text-area",{"name":[1],"label":[1],"placeholder":[1],"value":[1],"helpText":[1,"help-text"],"state":[1],"enabled":[4],"readonly":[4],"maxlength":[2],"resize":[1],"leftIconName":[1,"left-icon-name"],"rightIconName":[1,"right-icon-name"],"rightIconTooltip":[1,"right-icon-tooltip"],"leftIconTooltip":[1,"left-icon-tooltip"],"leftIconClickable":[4,"left-icon-clickable"],"rightIconClickable":[4,"right-icon-clickable"],"rows":[2]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"boxBordered":[4,"box-bordered"],"label":[513],"subtitle":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32]}]);
@@ -92207,6 +92554,7 @@ const defineCustomElements = (opts) => {
   EzChart,
   EzCheck,
   EzChip,
+  EzClassicComboBox,
   EzClassicInput,
   EzClassicTextArea,
   EzCollapsibleBox,
@@ -92282,4 +92630,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzAvatar, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzClassicInput, EzClassicTextArea, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzEmptyCard, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzLinkBuilder, EzList, EzListItem, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzRichText, EzRichToolbar, EzRichToolbarArrows, EzRichToolbarConfigs, EzRichToolbarItem, EzRichToolbarLetters, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSimpleImageUploader, EzSkeleton, EzSortableList, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTag, EzTextArea, EzTextEdit, EzTextInput, EzTile, EzTileMedium, EzTimeInput, EzToast, EzTooltip, EzTree, EzUnderface, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzAvatar, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzClassicComboBox, EzClassicInput, EzClassicTextArea, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzEmptyCard, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzLinkBuilder, EzList, EzListItem, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzRichText, EzRichToolbar, EzRichToolbarArrows, EzRichToolbarConfigs, EzRichToolbarItem, EzRichToolbarLetters, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSimpleImageUploader, EzSkeleton, EzSortableList, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTag, EzTextArea, EzTextEdit, EzTextInput, EzTile, EzTileMedium, EzTimeInput, EzToast, EzTooltip, EzTree, EzUnderface, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };

package/dist/esm/{ApplicationUtils-1fd662ab.js → ApplicationUtils-70608555.js}

@@ -1,5 +1,5 @@
 import { D as DialogType } from './DialogType-54a62731.js';
-import { i as initI18n } from './index-498e0126.js';
+import { i as initI18n } from './index-5004bd27.js';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number

package/dist/esm/{app-globals-8a94d86c.js → app-globals-ba0c56ec.js}

@@ -1,4 +1,4 @@
-import { i as initI18n } from './index-498e0126.js';
+import { i as initI18n } from './index-5004bd27.js';
 
 async function initializeApp() {
   await initI18n();

package/dist/esm/ez-actions-button.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
-import './ApplicationUtils-1fd662ab.js';
+import './ApplicationUtils-70608555.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import './index-498e0126.js';
+import './index-5004bd27.js';
 import './FormLayout-071d324c.js';
 
 const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__actions-list--z-index:var(--ez-elevation--8, 8);--ez-actions-button__actions-max-height:415px;--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;overflow-y:auto;scrollbar-width:thin;z-index:var(--ez-actions-button__actions-list--z-index);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--max-height{max-height:var(--ez-actions-button__actions-max-height)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px);--ez-button--border:none}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--ez-actions-button__actions-list--z-index) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none;--ez-button--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}.ez-actions-button--bottom-padding{padding-bottom:var(--space--small, 6px)}";

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
-import { i as initI18n } from './index-498e0126.js';
+import { i as initI18n } from './index-5004bd27.js';
 
 const ezAlertListCss = ":host {\n  display: flex;\n\n  /* Alert List */\n  \n  /*@doc Define a largura da lista minimizado */\n  --ez-alert-list__container--width: 680px;\n  /*@doc Define a altura da lista minimizado */\n  --ez-alert-list__container--height: 220px;\n  \n  /*@doc Define a largura da lista maximizada */\n  --ez-alert-list__container--width--expanded: 920px;\n  /*@doc Define a altura da lista maximizada */\n  --ez-alert-list__container--height--expanded: 540px;\n\n  /* Title */\n  /*@doc Define a fonte do título do componente */\n  --ez-alert-list__title--font-family: var(--font-pattern, \"Roboto\");\n  /*@doc Define o tamanho da fonte do título do popup.*/\n  --ez-alert-list__title--font-size: var(--title--large, 20px);\n  /*@doc Define a cor da fonte do título do popup.*/\n  --ez-alert-list__title--color: var(--title--primary, #2b3a54);\n  /*@doc Define o peso da fonte do título do popup.*/\n  --ez-alert-list__title--font-weight: var(--text-weight--extra-large, 700);\n\n  /* @doc Define a borda inferior do item da lista. */\n  --ez-list__item--border-bottom: var(--border--small, 1px solid);\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color: var(--color--strokes, #DCE0E8);\n\n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: break-space;\n}\n\n.alert-list__content {\n  display: flex;\n  flex-direction: column;\n  \n  gap: var(--space--xs);\n  margin: var(--space--large, 24px);\n  width: 100%;\n}\n\n.alert-list__container {\n  z-index: var(--ez-elevation--8, 8);\n  display: flex;\n  height: var(--ez-alert-list__container--height);\n  width: var(--ez-alert-list__container--width);\n  border-radius: var(--border--radius-medium);\n  background-color: var(--background--xlight);\n  box-shadow: var(--shadow--medium);\n\n  &.expanded {\n    height: var(--ez-alert-list__container--height--expanded);\n    width: var(--ez-alert-list__container--width--expanded);\n  }\n\n  @media (max-height: 640px) {\n    max-height: calc(100vh - var(--space--3xl));\n  }  \n}\n\n.alert-list__header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.alert-list__title {\n  font-family: var(--ez-alert-list__title--font-family);\n  font-size: var(--ez-alert-list__title--font-size);\n  font-weight: var(--ez-alert-list__title--font-weight);\n  color: var(--ez-alert-list__title--color);\n}\n\n.alert-list__header__buttons {\n  display: flex;\n  gap: var(--space--xs);\n}\n\n.alert-list__expandable-content {\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-baa5e267.js';
-import { i as initI18n } from './index-498e0126.js';
+import { i as initI18n } from './index-5004bd27.js';
 import '@sankhyalabs/core';
 
 const ezAvatarCss = ":host{--ez-avatar--background-color:var(--color--ocean-green-600, #008561);--ez-avatar--color:var(--color--gray-70, #fff);--ez-avatar--border-radius-circle:50%;--ez-avatar--border-radius-square:25%;--ez-avatar--background-color-hover:var(--color--ocean-green-700, #00684C)}button,figure{display:flex;align-items:center;justify-content:center;border:var(--ez-avatar--border);background-color:var(--ez-avatar--background-color);color:var(--ez-avatar--color);font-weight:var(--font-weight--medium, 500);font-family:var(--font-pattern, 'Roboto');transition:background-color 0.2s linear, color 0.2s linear;margin:0;padding:0}button:hover{cursor:pointer;background-color:var(--ez-avatar--background-color-hover)}.avatar--320{--avatar-size:320px;width:20rem;height:20rem}.avatar--300{--avatar-size:300px;width:18.75rem;height:18.75rem}.avatar--280{--avatar-size:280px;width:17.5rem;height:17.5rem}.avatar--260{--avatar-size:260px;width:16.25rem;height:16.25rem}.avatar--240{--avatar-size:240px;width:15rem;height:15rem}.avatar--220{--avatar-size:220px;width:13.75rem;height:13.75rem}.avatar--200{--avatar-size:200px;width:12.5rem;height:12.5rem}.avatar--180{--avatar-size:180px;width:11.25rem;height:11.25rem}.avatar--160{--avatar-size:160px;width:10rem;height:10rem}.avatar--140{--avatar-size:140px;width:8.75rem;height:8.75rem}.avatar--120{--avatar-size:120px;width:7.5rem;height:7.5rem}.avatar--100{--avatar-size:100px;width:6.25rem;height:6.25rem}.avatar--80{--avatar-size:80px;width:5rem;height:5rem}.avatar--60{--avatar-size:60px;width:3.75rem;height:3.75rem}.avatar-initial{font-size:calc(0.375 * var(--avatar-size));}.avatar--circle{border-radius:var(--ez-avatar--border-radius-circle)}.avatar--square{border-radius:var(--ez-avatar--border-radius-square)}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar--has-image{background-color:transparent}ez-icon{--ez-icon--color:var(--color--gray-70, #fff);font-weight:var(--font-weight--medium, 500)}";

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-baa5e267.js';
 import { FloatingManager } from '@sankhyalabs/core';
-import { i as initI18n } from './index-498e0126.js';
+import { i as initI18n } from './index-5004bd27.js';
 
 const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{display:flex;flex-direction:column;z-index:var(--more-visible, 2);background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset;color:var(--ez-calendar--color)}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;padding:0px;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto;scrollbar-width:none}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{display:flex;justify-content:space-between;padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";