@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);--ez-modal-content-padding:24px;display:block}.modal{position:fixed;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh}.modal__screen-light{background:rgba(0, 4, 12, 0.1)}.modal__screen-medium{backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.modal__vertical-padding{padding:var(--ez-modal-vertical-padding) 0}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:var(--ez-modal-content-padding);box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+
+const EzModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezCloseModal = index.createEvent(this, "ezCloseModal", 7);
+    this.ezOpenModal = index.createEvent(this, "ezOpenModal", 7);
+    this.handleKeyboardEvent = (ev) => {
+      if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
+        this.closeModal();
+      }
+    };
+    this.modalSize = undefined;
+    this.align = undefined;
+    this.heightMode = "regular";
+    this.opened = true;
+    this.closeEsc = false;
+    this.closeOutsideClick = false;
+    this.scrim = "medium";
+  }
+  observeOpened() {
+    if (this.opened) {
+      this._overlayId = core.FloatingManager.subscribeOverlayControl(this._modalRef);
+      document.addEventListener("keydown", this.handleKeyboardEvent);
+    }
+    else {
+      core.FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
+      document.removeEventListener("keydown", this.handleKeyboardEvent);
+    }
+  }
+  closeModal() {
+    this.opened = false;
+    this.ezCloseModal.emit(this.opened);
+  }
+  componentDidLoad() {
+    this.observeOpened();
+  }
+  componentDidRender() {
+    if (this.opened) {
+      this.ezOpenModal.emit();
+    }
+  }
+  onMouseDownHandler(event) {
+    if (this.closeOutsideClick && event.target === this._overlay) {
+      this.closeModal();
+    }
+  }
+  render() {
+    const positionSufix = this.align === "left" ? "left" : "right";
+    const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
+    const modalContentHeightMode = this.heightMode === "regular" ? `modal__content--${positionSufix}` : '';
+    const scrimType = `modal__screen-${this.scrim}`;
+    return (index.h(index.Host, null, this.opened
+      ?
+        index.h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt) }, index.h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, index.h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, index.h("slot", null))))
+      :
+        undefined));
+  }
+  static get watchers() { return {
+    "opened": ["observeOpened"]
+  }; }
+};
+EzModal.style = ezModalCss;
+
+exports.ez_modal = EzModal;

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

@@ -0,0 +1,183 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;display:block;width:304px;height:322px;max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;top:-12px;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{height:235px;max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
+
+var ViewScenarios;
+(function (ViewScenarios) {
+  ViewScenarios["DATASOURCE_RESULTS"] = "DATASOURCE_RESULTS";
+  ViewScenarios["DATASOURCE_RESULTS_EMPTY"] = "DATASOURCE_RESULTS_EMPTY";
+  ViewScenarios["DATASOURCE_INIT"] = "DATASOURCE_INIT";
+  ViewScenarios["OPTIONS_EMPTY"] = "OPTIONS_EMPTY";
+  ViewScenarios["OPTIONS"] = "OPTIONS";
+})(ViewScenarios || (ViewScenarios = {}));
+const EzMuiltiSelectionList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.changeFilteredOptions = index.createEvent(this, "changeFilteredOptions", 7);
+    this.columnName = undefined;
+    this.dataSource = undefined;
+    this.useOptions = false;
+    this.options = undefined;
+    this.isTextSearch = false;
+    this.filteredOptions = undefined;
+    this.displayOptions = undefined;
+    this.viewScenario = undefined;
+    this.displayOptionToCheckAllItems = true;
+  }
+  async clearFilteredOptions() {
+    this.setInitialScenario();
+    this.filteredOptions = [];
+    if (this.searchInput) {
+      this.searchInput.value = '';
+    }
+    if (this.filterInput) {
+      this.filterInput.value = '';
+    }
+  }
+  onChangeUseOptions() {
+    this.setInitialScenario();
+  }
+  onChangeOptions() {
+    if (this.options) {
+      this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.options);
+    }
+    this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
+    this.setInitialScenario();
+  }
+  onChangeFilteredOptions(optionsListUpdated) {
+    this.displayOptions = this.filteredOptions;
+    this.displayOptionToCheckAllItems = this.filteredOptions.length > 1;
+    this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
+    this.changeFilteredOptions.emit(optionsListUpdated);
+  }
+  componentDidRender() {
+    this.changeCheckAllValeuFromFilteredOptions();
+  }
+  ordenationByCheckStateAndAlphabetically(filteredOptions) {
+    const listWithSelectChecked = [];
+    const listWithNotSelectChecked = [];
+    filteredOptions.forEach(item => (item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item)));
+    return [...core.ArrayUtils.sortAlphabetically(listWithSelectChecked), ...core.ArrayUtils.sortAlphabetically(listWithNotSelectChecked)];
+  }
+  changeCheckAllValeuFromFilteredOptions() {
+    var _a, _b, _c, _d;
+    const selectAll = (_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.every(item => item.check === true);
+    const notSelectAll = (_b = this.filteredOptions) === null || _b === void 0 ? void 0 : _b.every(item => item.check === false);
+    const selectIndeterminated = ((_c = this.filteredOptions) === null || _c === void 0 ? void 0 : _c.some(item => item.check === false)) && ((_d = this.filteredOptions) === null || _d === void 0 ? void 0 : _d.some(item => item.check === true)) && (!selectAll || !notSelectAll);
+    if (this.checkInput && selectAll) {
+      this.checkInput.indeterminate = false;
+      this.checkInput.value = true;
+      return;
+    }
+    if (this.checkInput && selectIndeterminated) {
+      this.checkInput.indeterminate = true;
+      this.checkInput.value = false;
+      return;
+    }
+    if (this.checkInput && notSelectAll) {
+      this.checkInput.indeterminate = false;
+      this.checkInput.value = false;
+      return;
+    }
+  }
+  setInitialScenario() {
+    if (this.useOptions) {
+      this.viewScenario = ViewScenarios.OPTIONS;
+      this.changeCheckAllValeuFromFilteredOptions();
+      return;
+    }
+    this.viewScenario = this.options && this.options.length > 0 ? ViewScenarios.DATASOURCE_RESULTS : ViewScenarios.DATASOURCE_INIT;
+  }
+  async searchWithDataSource(searchArgument, fieldName) {
+    const { argument, mode } = searchArgument;
+    if (mode !== 'PRELOAD') {
+      return this.dataSource.fetchData(argument, fieldName);
+    }
+  }
+  handleSearchOnDataSource(event) {
+    var _a;
+    const optionsToSort = (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : [];
+    if (event.detail && !optionsToSort.some(item => item.value == event.detail.value)) {
+      this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
+    }
+    this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
+    this.searchInput.value = "";
+  }
+  handleRemoveItemFromOptions(item) {
+    this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
+    if (this.filteredOptions.length === 0) {
+      this.viewScenario = ViewScenarios.DATASOURCE_INIT;
+    }
+    if (this.searchInput) {
+      this.searchInput.value = '';
+    }
+  }
+  handleSearchOnOption(event) {
+    if (event.detail) {
+      this.displayOptions = core.ArrayUtils.applyStringFilter(event.detail, this.filteredOptions, true);
+      this.viewScenario = this.displayOptions.length === 0 ? ViewScenarios.OPTIONS_EMPTY : ViewScenarios.OPTIONS;
+      return;
+    }
+    this.displayOptions = this.filteredOptions;
+    this.viewScenario = ViewScenarios.OPTIONS;
+  }
+  handleChangeSelectAllItems(event) {
+    this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([
+      ...this.filteredOptions.map(item => {
+        item.check = !!event.detail;
+        return item;
+      }),
+    ]);
+  }
+  handleChangeSelectedItem(event) {
+    const { detail: itemCheckSelected } = event;
+    this.filteredOptions = this.filteredOptions.map(item => {
+      if (item.label === itemCheckSelected.label) {
+        return Object.assign(Object.assign({}, item), { check: itemCheckSelected.check });
+      }
+      return item;
+    });
+    this.clearInputs();
+  }
+  clearInputs() {
+    this.filterInput ? (this.filterInput.value = '') : (this.searchInput.value = '');
+  }
+  buildViewList(hasDelete) {
+    return (index.h(index.Fragment, null, this.displayOptionToCheckAllItems && (index.h("ez-check", { ref: (element) => (this.checkInput = element), label: "Selecionar todos", 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 })));
+  }
+  buildDeleteIconSlot(item) {
+    return index.h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });
+  }
+  buildInitViewWithDataSource() {
+    return index.h("multi-selection-box-message", { message: "Selecione os valores a serem filtrados atrav\u00E9s do campo de busca." });
+  }
+  buildViewEmptyResults() {
+    return index.h("multi-selection-box-message", { message: "Nenhum resultado encontrado." });
+  }
+  scenarioToDisplay(view) {
+    const scenarios = {
+      [ViewScenarios.DATASOURCE_INIT]: this.buildInitViewWithDataSource(),
+      [ViewScenarios.DATASOURCE_RESULTS]: this.buildViewList(true),
+      [ViewScenarios.DATASOURCE_RESULTS_EMPTY]: this.buildViewEmptyResults(),
+      [ViewScenarios.OPTIONS_EMPTY]: this.buildViewEmptyResults(),
+      [ViewScenarios.OPTIONS]: this.buildViewList(false),
+    };
+    return scenarios[view];
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "multi-selection" }, this.useOptions ? (index.h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (index.h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), index.h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
+  }
+  static get watchers() { return {
+    "useOptions": ["onChangeUseOptions"],
+    "options": ["onChangeOptions"],
+    "filteredOptions": ["onChangeFilteredOptions"]
+  }; }
+};
+EzMuiltiSelectionList.style = ezMultiSelectionListCss;
+
+exports.ez_multi_selection_list = EzMuiltiSelectionList;

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

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+
+const ezNumberInputCss = ":host{display:block;width:100%}.number__input{height:100%}";
+
+const EzNumberInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezStartChange = index.createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = index.createEvent(this, "ezCancelWaitingChange", 7);
+    this._focused = false;
+    this._changePending = false;
+    this._valuePromiseCallbacks = [];
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.canShowError = true;
+    this.errorMessage = undefined;
+    this.precision = undefined;
+    this.prettyPrecision = undefined;
+    this.mode = "regular";
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    this._textInput.setFocus(options);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /*
+    * Retorna uma promise com o valor da opção selecionada,
+    * que será resolvida quando o backend devolver este dado.
+    */
+  async getValueAsync() {
+    if (this._changePending) {
+      return new Promise(accept => {
+        this._valuePromiseCallbacks.push(accept);
+      });
+    }
+    return Promise.resolve(this.value);
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      const newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated === null) {
+        this._textInput.value = '';
+      }
+      if (newValueValidated != oldValueValidated) {
+        const textValue = this.getTextValue(newValueValidated) || '';
+        if ((this._textInput.value || '') !== textValue) {
+          const parsedNumber = this.getParsedNumber(textValue);
+          if (parsedNumber !== undefined || !this._focused) {
+            this._textInput.value = textValue;
+            this._focused = false;
+            this.errorMessage = "";
+          }
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
+    }
+    this._changePending = false;
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  getTextValue(value) {
+    if (value != undefined) {
+      return this.precision > 0 ? core.NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+    }
+    return undefined;
+  }
+  changeValue(newValue) {
+    this.errorMessage = "";
+    if (this.value != newValue) {
+      this.value = newValue === undefined ? null : newValue;
+    }
+    else {
+      this.setInputValue();
+      this.ezCancelWaitingChange.emit();
+    }
+  }
+  setError(msg) {
+    this.value = null;
+    this.errorMessage = msg;
+    this.ezCancelWaitingChange.emit();
+  }
+  handleBlur() {
+    try {
+      const parsedNumber = this.getParsedNumber();
+      if (parsedNumber !== undefined && isNaN(parsedNumber)) {
+        this.setError("O valor digitado não é um número válido");
+      }
+      else {
+        try {
+          this.changeValue(parsedNumber);
+        }
+        catch (e) {
+          this.setError(e.message);
+          return;
+        }
+      }
+    }
+    finally {
+      for (const callback of this._valuePromiseCallbacks) {
+        callback(this.value);
+      }
+      this._valuePromiseCallbacks = [];
+    }
+  }
+  handleInput() {
+    const parsedNumber = this.getParsedNumber();
+    if (parsedNumber !== this.value) {
+      this._focused = true;
+      this._changePending = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  getParsedNumber(value) {
+    var _a;
+    if (value === void 0) {
+      value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    return (value === null || value === void 0 ? void 0 : value.trim()) ? core.NumberUtils.stringToNumber(value) : undefined;
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
+  }
+  render() {
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-text-input", { class: "number__input", "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }));
+  }
+  get _elem() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzNumberInput.style = ezNumberInputCss;
+
+exports.ez_number_input = EzNumberInput;

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

@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const ezPopoverCss = ":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(--most-visible, 3);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;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:100%}";
+
+const EzPopover = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezVisibilityChange = index.createEvent(this, "ezVisibilityChange", 7);
+    this._firstRender = true;
+    this.innerClickTest = (_popOvercontainer, node, eventOrigin) => {
+      const innerContainers = [_popOvercontainer];
+      if (this.innerElement) {
+        if (typeof (this.innerElement) == "string") {
+          innerContainers.push(document.querySelector(`#${this.innerElement}`));
+        }
+        else {
+          this.innerElement.forEach(comp => {
+            innerContainers.push(document.querySelector(`#${comp}`));
+          });
+        }
+      }
+      const eventPath = (eventOrigin === null || eventOrigin === void 0 ? void 0 : eventOrigin.composedPath()) || [];
+      for (var i = 0; i < innerContainers.length; i++) {
+        let _container = innerContainers[i];
+        if (_container != undefined) {
+          if (eventPath.includes(_container)) {
+            return true;
+          }
+          if (_container.contains(node)) {
+            return true;
+          }
+          if (eventOrigin && "nodeType" in (eventOrigin === null || eventOrigin === void 0 ? void 0 : eventOrigin.target) && _container.contains(eventOrigin.target)) {
+            return true;
+          }
+          if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
+            return true;
+          }
+          _container = this._host;
+          if (!_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    this.backClickListener = () => {
+      this.ezVisibilityChange.emit(false);
+    };
+    this.autoClose = true;
+    this.boxWidth = "fit-content";
+    this.opened = undefined;
+    this.innerElement = undefined;
+    this.overlayType = "light";
+  }
+  observeOpened(newValue, oldValue) {
+    if (newValue != oldValue) {
+      if (oldValue) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+      this.ezVisibilityChange.emit(newValue);
+    }
+  }
+  /**
+   * Atualiza a posição do popover.
+   */
+  async updatePosition(top, left) {
+    const floatingOptions = {
+      autoClose: this.autoClose,
+      top,
+      left,
+      innerClickTest: this.innerClickTest,
+      backClickListener: this.backClickListener
+    };
+    core.FloatingManager.updateFloatPosition(this._box, this._container, floatingOptions);
+  }
+  /**
+   * Exibe o ez-popover.
+   */
+  async show(top, left) {
+    this.float({ top, left });
+  }
+  /**
+   * Ancora a exibição do popOver a um elemento HTML.
+   */
+  async showUnder(element, options) {
+    if (element && this._host) {
+      this.float(this.calculatePosition(element, Object.assign({ verticalGap: 0, horizontalGap: 0, fromRight: false }, options)));
+    }
+    else {
+      const top = (options === null || options === void 0 ? void 0 : options.verticalGap) ? `${options.verticalGap}px` : undefined;
+      const left = (options === null || options === void 0 ? void 0 : options.horizontalGap) ? `${options.horizontalGap}px` : undefined;
+      this.show(top, left);
+    }
+  }
+  calculatePosition(element, options) {
+    const boxRect = this._host.getBoundingClientRect();
+    const anchorRect = element.getBoundingClientRect();
+    const yOffset = anchorRect.bottom - boxRect.y;
+    const xOffset = options.fromRight ? boxRect.right - anchorRect.right : anchorRect.x - boxRect.x;
+    const yProperty = `${yOffset + options.verticalGap}px`;
+    const xProperty = `${xOffset + options.horizontalGap}px`;
+    return {
+      top: yProperty,
+      left: options.fromRight ? "" : xProperty,
+      right: options.fromRight ? xProperty : ""
+    };
+  }
+  float(position) {
+    this._box.style.top = "";
+    this._box.style.left = "";
+    this._box.style.right = "";
+    const useOverlay = this.overlayType !== "none";
+    const overlayClassName = `ez-scrim ez-scrim--${this.overlayType}`;
+    let floatingOptions = Object.assign(Object.assign({}, position), { autoClose: this.autoClose, innerClickTest: this.innerClickTest, backClickListener: this.backClickListener });
+    if (useOverlay) {
+      floatingOptions = Object.assign(Object.assign({}, floatingOptions), { autoClose: true, useOverlay,
+        overlayClassName });
+    }
+    this._floatingID = core.FloatingManager.float(this._box, this._container, floatingOptions);
+    this.opened = true;
+  }
+  /**
+   * Oculta o ez-popover.
+   */
+  async hide() {
+    if (this._floatingID !== undefined) {
+      core.FloatingManager.close(this._floatingID);
+      this._floatingID = undefined;
+      this.opened = false;
+    }
+  }
+  componentDidRender() {
+    if (this._firstRender) {
+      this._box.remove();
+      this._firstRender = false;
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("section", { ref: el => this._container = el }, index.h("div", { class: `popover__box ${this.boxWidth === "fit-content" ? "popover__box--fit-content" : "popover__box--full-width"}`, ref: el => this._box = el }, index.h("slot", null)))));
+  }
+  get _host() { return index.getElement(this); }
+  static get watchers() { return {
+    "opened": ["observeOpened"]
+  }; }
+};
+EzPopover.style = ezPopoverCss;
+
+exports.ez_popover = EzPopover;

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

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--most-visible, 3);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--large, 24px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--extra-large, 24px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:grid;grid-template-rows:auto 1fr}.popup__expandable-content{box-sizing:border-box;width:100%;min-height:100%;height:100%}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+
+const EzPopup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezClosePopup = index.createEvent(this, "ezClosePopup", 7);
+    this._sizeClasses = {
+      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
+      "small": "col--sd-5",
+      "medium": "col--sd-6",
+      "large": "col--sd-9",
+      "x-large": "col--sd-11",
+      "default": "ez-popup__size-limit--x-small",
+    };
+    this.size = "medium";
+    this.opened = false;
+    this.useHeader = true;
+    this.heightMode = "full";
+    this.ezTitle = undefined;
+  }
+  observeConfig() {
+    this.manageOverflow();
+  }
+  manageOverflow() {
+    if (this.opened) {
+      window.document.body.style.overflow = "hidden";
+    }
+    else {
+      window.document.body.style.overflow = "";
+    }
+  }
+  manageOverlay() {
+    if (this.opened) {
+      this._overlayId = core.FloatingManager.subscribeOverlayControl(this._modalRef);
+    }
+    else {
+      core.FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
+    }
+  }
+  getGridSize() {
+    return this._sizeClasses[this.size] || this._sizeClasses["medium"];
+  }
+  componentDidRender() {
+    if (this._container) {
+      this._container.focus();
+    }
+    this.manageOverlay();
+  }
+  render() {
+    return (index.h(index.Host, null, this.opened ? (index.h("div", { class: "overlay", ref: ref => this._modalRef = ref }, index.h("div", { class: "popup col " + this.getGridSize() }, index.h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : ""), ref: elem => this._container = elem, tabIndex: -1 }, index.h("div", { class: "popup__content" }, index.h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
+      index.h(index.Fragment, null, !!this.ezTitle && index.h("div", { class: "popup__title" }, this.ezTitle), index.h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), index.h("div", { class: "popup__expandable-content" }, index.h("slot", null))))))) : undefined));
+  }
+  static get watchers() { return {
+    "opened": ["observeConfig"]
+  }; }
+};
+EzPopup.style = ezPopupCss;
+
+exports.ez_popup = EzPopup;