@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-9e5554cb.js');
 const core = require('@sankhyalabs/core');
 const ezListHelper = require('./ezListHelper-0d3970b4.js');
-const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
 
 function moveItems(selectedItemsList, itemsList, foward) {
   if (!selectedItemsList.length)
@@ -64,21 +63,20 @@ function transferAll({ from, to, selectedFrom, selectedTo }) {
   from = [];
   return { from, to, selectedFrom, selectedTo };
 }
-function transferItems({ from, to, selectedFrom, selectedTo }) {
+function transferItems({ from, to, selectedFrom, selectedTo, insertIndex = to.length, }) {
   if (!from.length)
     return { from, to, selectedFrom, selectedTo };
   const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
   if (!itemsToTransfer.length)
     return { from, to, selectedFrom, selectedTo };
-  to = [
-    ...to.map(i => setItemSelection(i, false)),
-    ...itemsToTransfer.map(i => setItemSelection(i, true))
-  ];
-  const selectedFromIds = selectedFrom.map(id => id);
-  from = [...from.filter(item => !selectedFromIds.includes(item.id))];
-  selectedTo = [...selectedFrom];
-  selectedFrom = [];
-  return { from, to, selectedFrom, selectedTo };
+  let updatedTo = to.map(i => setItemSelection(i, false));
+  updatedTo.splice(insertIndex, 0, ...itemsToTransfer.map(i => setItemSelection(i, true)));
+  return {
+    from: from.filter(item => !selectedFrom.includes(item.id)),
+    to: updatedTo,
+    selectedFrom: [],
+    selectedTo: [...selectedFrom],
+  };
 }
 function getItemsToTransfer(to, selectedFrom, from) {
   const toListIds = to.map(item => item.id);
@@ -90,7 +88,7 @@ function setItemSelection(item, select) {
   return Object.assign(Object.assign({}, item), { selected: select });
 }
 
-const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\")}.group.sc-ez-double-list{display:flex;justify-content:space-between;gap:10px;flex-direction:column;border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-medium);width:350px;height:400px}.group__header.sc-ez-double-list{background:var(--background--body);padding:10px;border-radius:var(--border--radius-medium) var(--border--radius-medium) 0 0}.group__label.sc-ez-double-list{font-weight:var(--text-weight--large);font-size:var(--text--medium);color:var(--title--primary);margin-bottom:10px;display:block}.group__totalizer.sc-ez-double-list{padding:5px 10px;background:var(--background--body);font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}.empty-message.sc-ez-double-list{font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);text-align:center;margin:auto}.list__container.sc-ez-double-list{height:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
+const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\");width:100%}@media screen and (max-width: 1366px){.group.sc-ez-double-list{height:350px}}.list__container.sc-ez-double-list{height:100%;width:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
 
 const EzDoubleList = class {
   constructor(hostRef) {
@@ -99,8 +97,6 @@ const EzDoubleList = class {
     this.ezRightListChanged = index.createEvent(this, "ezRightListChanged", 7);
     this.LEFT_LIST_ID = 'LEFT-LIST-ID';
     this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
-    this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
-    this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
     this.leftList = [];
     this.leftTitle = undefined;
     this.rightList = [];
@@ -108,7 +104,10 @@ const EzDoubleList = class {
     this.entityLabelPlural = 'itens';
     this.leftListLabel = 'disponíveis';
     this.rightListLabel = 'selecionados';
+    this.useOnlyRightList = false;
     this.rightTitle = undefined;
+    this.emptyMessage = undefined;
+    this.slotsListBuilder = undefined;
     this.leftFilteredList = [];
     this.rightFilteredList = [];
     this.selectedLeftList = [];
@@ -130,23 +129,31 @@ const EzDoubleList = class {
       return;
     this.ezRightListChanged.emit(newValue);
   }
-  handleFilterChangeLeft(value) {
-    this.leftFilteredList = core.ArrayUtils.applyStringFilter(value, this.leftList, true, 'label');
-    this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
-  }
-  handleFilterChangeRight(value) {
-    this.rightFilteredList = core.ArrayUtils.applyStringFilter(value, this.rightList, true, 'label');
-    this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
-  }
   async handleChangeLeft({ detail }) {
-    this.leftList = [...detail];
-    this.selectedLeftList = [...detail.filter(item => item.selected)];
-    await this.leftEzListInstance.clearHistory();
+    if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
+      this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
+      return;
+    }
+    detail.selectItens = detail.selectItens.filter(id => this.rightList.every(item => item.id !== id));
+    this.leftList = [...detail.dataSource];
+    this.selectedLeftList = [...detail.selectItens];
+    this.transferToRight(detail === null || detail === void 0 ? void 0 : detail.newIndex);
   }
   async handleChangeRight({ detail }) {
-    this.rightList = [...detail];
-    this.selectedRightList = [...detail.filter(item => item.selected)];
-    await this.rightEzListInstance.clearHistory();
+    if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.LEFT_LIST_ID) {
+      this.rightList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
+      return;
+    }
+    detail.selectItens = detail.selectItens.filter(id => this.leftList.every(item => item.id !== id));
+    this.rightList = [...detail.dataSource];
+    this.selectedRightList = [...detail.selectItens];
+    this.transferToLeft(detail === null || detail === void 0 ? void 0 : detail.newIndex);
+  }
+  reorderArray(allItems, itemIdsToMove, insertIndex) {
+    const filteredItems = allItems.filter(i => !itemIdsToMove.includes(i.id));
+    const itemsToMove = allItems.filter(i => itemIdsToMove.includes(i.id));
+    filteredItems.splice(insertIndex, 0, ...itemsToMove);
+    return filteredItems;
   }
   enableTransferAllToRight() {
     return this.leftList.length > 0;
@@ -180,33 +187,43 @@ const EzDoubleList = class {
   getRightSelectedItemsIndex() {
     return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
   }
-  transferToRight() {
-    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
-    this.leftList = [...from];
+  transferToRight(insertIndex) {
+    const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToRightConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
+    //Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
+    this.leftList = [];
+    requestAnimationFrame(() => this.leftList = [...from]);
     this.rightList = [...to];
     this.selectedLeftList = [...selectedFrom];
     this.selectedRightList = [...selectedTo];
   }
-  transferToLeft() {
-    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
-    this.rightList = [...from];
+  transferToLeft(insertIndex) {
+    const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToLeftConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
+    //Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
+    this.rightList = [];
+    requestAnimationFrame(() => this.rightList = [...from]);
     this.leftList = [...to];
     this.selectedRightList = [...selectedFrom];
     this.selectedLeftList = [...selectedTo];
   }
-  handleTransferAllToRight() {
+  async handleTransferAllToRight() {
     const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
     this.leftList = [...from];
     this.rightList = [...to];
     this.selectedLeftList = [...selectedFrom];
     this.selectedRightList = [...selectedTo];
+    requestAnimationFrame(async () => {
+      await this.clearSelectionAll();
+    });
   }
-  handleTransferAllToLeft() {
+  async handleTransferAllToLeft() {
     const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
     this.rightList = [...from];
     this.leftList = [...to];
     this.selectedRightList = [...selectedFrom];
     this.selectedLeftList = [...selectedTo];
+    requestAnimationFrame(async () => {
+      await this.clearSelectionAll();
+    });
   }
   buildTransferToRightConfig() {
     return {
@@ -249,33 +266,77 @@ const EzDoubleList = class {
     const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
     return { itemsToKeep, itemsToMove };
   }
-  handleTransferToRight() {
+  async handleTransferToRight() {
     this.transferToRight();
     this.leftFilteredList = [];
-    this.leftEzFilterInput.value = '';
+    await this.leftEzListInstance.clearSelection();
   }
-  handleTransferToLeft() {
+  async handleTransferToLeft() {
     this.transferToLeft();
     this.rightFilteredList = [];
-    this.rightEzFilterInput.value = '';
+    await this.rightEzListInstance.clearSelection();
   }
-  buildTotalizer(list) {
-    return `Total de ${list.length} ${list.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+  async clearSelectionAll() {
+    await this.rightEzListInstance.clearSelection();
+    await this.leftEzListInstance.clearSelection();
   }
-  renderLeftList() {
-    if (!this.leftList.length) {
-      return index.h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " dispon\u00EDvel");
-    }
-    return (index.h("ez-scroller", { direction: EzScrollDirection.EzScrollDirection.VERTICAL, activeShadow: true }, index.h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
+  handleChooseLeft() {
+    requestAnimationFrame(async () => {
+      await this.rightEzListInstance.clearSelection();
+    });
   }
-  renderRightList() {
-    if (!this.rightList.length) {
-      return index.h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " selecionado");
-    }
-    return (index.h("ez-scroller", { direction: EzScrollDirection.EzScrollDirection.VERTICAL, activeShadow: true }, index.h("ez-list", { ref: (ref) => this.rightEzListInstance = ref, id: this.RIGHT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringRight ? this.rightFilteredList : this.rightList, ezDraggable: !this.isFilteringRight, enableMultipleSelection: true, onEzChange: this.handleChangeRight.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectRightItem.bind(this), onEzDoubleClick: this.handleTransferToLeft.bind(this) })));
+  handleChooseRight() {
+    if (this.useOnlyRightList)
+      return;
+    requestAnimationFrame(async () => {
+      await this.leftEzListInstance.clearSelection();
+    });
+  }
+  renderList(props) {
+    const { idSortableList, list, isFiltering, filteredList, emptyMessage, slotConfig, callbacks, title } = props;
+    return (index.h("ez-sortable-list", { ref: callbacks === null || callbacks === void 0 ? void 0 : callbacks.setRef, title: title, idSortableList: idSortableList, emptyMessage: emptyMessage, class: "ez-size-height--full", dataSource: isFiltering ? filteredList : list, hoverFeedback: true, enableMultipleSelection: true, removeItensMoved: true, entityLabel: this.entityLabel, entityLabelPlural: this.entityLabelPlural, itemRightSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemRightSlotBuilder, itemLeftSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemLeftSlotBuilder, onItemsReordered: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChange.bind(this), onEzSelectItens: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSelect.bind(this), onEzDoubleClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDoubleClick.bind(this), onEzChoose: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChoose.bind(this) }));
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'group' }, index.h("div", { class: 'group__header' }, index.h("span", { class: 'group__label' }, this.leftTitle), index.h("ez-filter-input", { ref: (ref) => this.leftEzFilterInput = ref, id: this.LEFT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeLeft(evt.detail) })), index.h("div", { class: 'list__container' }, this.renderLeftList()), index.h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.leftList))), index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: 'icon', iconName: 'dual-chevron-right', enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferAllToRight.bind(this) }), index.h("ez-button", { mode: 'icon', iconName: 'chevron-right', enabled: this.enableTransferToRight(), title: `Mover para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferToRight.bind(this) }), index.h("ez-button", { mode: 'icon', iconName: 'chevron-left', enabled: this.enableTransferToLeft(), title: `Mover para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferToLeft.bind(this) }), index.h("ez-button", { mode: 'icon', iconName: 'dual-chevron-left', enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferAllToLeft.bind(this) })), index.h("div", { class: 'group' }, index.h("div", { class: 'group__header' }, index.h("span", { class: 'group__label' }, this.rightTitle), index.h("ez-filter-input", { ref: (ref) => this.rightEzFilterInput = ref, id: this.RIGHT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeRight(evt.detail) })), index.h("div", { class: 'list__container' }, this.renderRightList()), index.h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.rightList))), index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: 'icon', iconName: 'dual-chevron-up', enabled: this.enableMoveUp(true), title: 'Mover para primeira posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToTop.bind(this) }), index.h("ez-button", { mode: 'icon', iconName: 'chevron-up', enabled: this.enableMoveUp(), title: 'Mover para cima', size: 'small', onClick: this.handleMoveUp.bind(this) }), index.h("ez-button", { mode: 'icon', iconName: 'chevron-down', enabled: this.enableMoveDown(), title: 'Mover para baixo', size: 'small', onClick: this.handleMoveDown.bind(this) }), index.h("ez-button", { mode: 'icon', iconName: 'dual-chevron-down', enabled: this.enableMoveDown(true), title: 'Mover para \u00FAltima posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToBottom.bind(this) }))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return (index.h(index.Host, null, !this.useOnlyRightList &&
+      index.h("div", { class: "list__container" }, this.leftList && this.renderList({
+        idSortableList: this.LEFT_LIST_ID,
+        list: this.leftList,
+        title: this.leftTitle,
+        isFiltering: this.isFilteringLeft,
+        filteredList: this.leftFilteredList,
+        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST) ? this.emptyMessage.LEFT_LIST : `Nenhum ${this.entityLabel} disponível`,
+        slotConfig: {
+          itemRightSlotBuilder: (_c = (_b = this.slotsListBuilder) === null || _b === void 0 ? void 0 : _b.LEFT_LIST) === null || _c === void 0 ? void 0 : _c.itemRightSlotBuilder,
+          itemLeftSlotBuilder: (_e = (_d = this.slotsListBuilder) === null || _d === void 0 ? void 0 : _d.LEFT_LIST) === null || _e === void 0 ? void 0 : _e.itemLeftSlotBuilder,
+        },
+        callbacks: {
+          setRef: (ref) => this.leftEzListInstance = ref,
+          onChange: (evt) => this.handleChangeLeft(evt),
+          onSelect: this.handleSelectLeftItem.bind(this),
+          onDoubleClick: this.handleTransferToRight.bind(this),
+          onChoose: this.handleChooseLeft.bind(this),
+        },
+      })), !this.useOnlyRightList &&
+      index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferAllToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), index.h("div", { class: "list__container" }, this.rightList && this.renderList({
+      idSortableList: this.RIGHT_LIST_ID,
+      list: this.rightList,
+      title: this.rightTitle,
+      isFiltering: this.isFilteringRight,
+      filteredList: this.rightFilteredList,
+      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST) ? this.emptyMessage.RIGHT_LIST : `Nenhum ${this.entityLabel} selecionado`,
+      slotConfig: {
+        itemRightSlotBuilder: (_h = (_g = this.slotsListBuilder) === null || _g === void 0 ? void 0 : _g.RIGHT_LIST) === null || _h === void 0 ? void 0 : _h.itemRightSlotBuilder,
+        itemLeftSlotBuilder: (_k = (_j = this.slotsListBuilder) === null || _j === void 0 ? void 0 : _j.RIGHT_LIST) === null || _k === void 0 ? void 0 : _k.itemLeftSlotBuilder,
+      },
+      callbacks: {
+        setRef: (ref) => this.rightEzListInstance = ref,
+        onChange: (evt) => this.handleChangeRight(evt),
+        onSelect: this.handleSelectRightItem.bind(this),
+        onDoubleClick: this.handleTransferToLeft.bind(this),
+        onChoose: this.handleChooseRight.bind(this),
+      },
+    })), index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: "Mover para primeira posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToTop.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: "Mover para \u00FAltima posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
   }
   static get watchers() { return {
     "leftList": ["observeLeftList"],

package/dist/cjs/{ez-dropdown_2.cjs.entry.js → ez-dropdown.cjs.entry.js}

@@ -413,7 +413,7 @@ const EzDropdown = class {
           return (index.h("div", { class: "ez-dropdown__item" }, index.h("ez-skeleton", { width: '200px' })));
         case "divider":
           return (index.h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
-        case "item":
+        default:
           return (index.h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), index.h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
             ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
             : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
@@ -524,65 +524,4 @@ const EzDropdown = class {
 };
 EzDropdown.style = ezDropdownCss;
 
-const ALLOWED_ANIMATIONS = ['progress', 'progress-dark', 'pulse', 'false'];
-
-const ezSkeletonCss = ".skeleton {\n\tbackground: var(--skeleton-background, #eff1f6) no-repeat;\n\n\tborder-radius: var(--skeleton-border-radius, 4px);\n\twidth: var(--skeleton-width, 100%);\n\theight: var(--skeleton-height, 20px);\n\tdisplay: inline-block;\n\tmargin-bottom: var(--skeleton-margin-bottom, 0px);\t\n\tbox-sizing: border-box;\n\toutline: none;\n\toverflow: hidden;\n\tposition: relative;\n\t-webkit-will-change: transform;\n  -moz-will-change: transform;\n\twill-change: transform;\n\n\t&:after,\n\t&:before {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&.circle {\n\t\twidth: var(--skeleton-width, 40px);\n\t\theight: var(--skeleton-height, 40px);\n\t\tmargin-bottom: var(--skeleton-margin-bottom, 5px);\n\t\tborder-radius: var(--skeleton-border-radius, 50%);\n\t}\n\n\t&.rect {\n\t\tborder-radius: var(--skeleton-border-radius, 0px);\n\t}\n\n\t&.progress,\n\t&.progress-dark {\n\t\t-webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tbackground-size: 200px 100%;\n\t}\n\n\t&.progress {\n\t\tbackground-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n\t}\n\n\t&.progress-dark {\n\t\tbackground-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);    \n\t\tbackground-image: linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.2),transparent);\n\t}\n\n\t&.pulse {\n\t\t-webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation-delay: 0.5s;\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t&.pulse,\n\t\t&.progress-dark,\n\t\t&.progress {\n\t\t\tanimation: none;\n\t\t}\n\n\t\t&.progress,\n\t\t&.progress-dark {\n\t\t\tbackground-image: none;\n\t\t}\n\t}\n}\n\n@-webkit-keyframes progress {\n  0% { background-position: -200px 0; }\n  100% { background-position: calc(200px + 100%) 0; }\n}\n@-moz-keyframes progress {\n  0% { background-position: -200px 0; }\n  100% { background-position: calc(200px + 100%) 0; }\n}\n@-ms-keyframes progress {\n  0% { background-position: -200px 0; }\n  100% { background-position: calc(200px + 100%) 0; }\n}\n@keyframes progress {\n\t0% { background-position: -200px 0; }\n\t100% { background-position: calc(200px + 100%) 0; }\n}\n\n@-webkit-keyframes pulse {\n  0% { opacity: 1; }\n  50% { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@-moz-keyframes pulse {\n  0% { opacity: 1; }\n  50% { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@-ms-keyframes pulse {\n  0% { opacity: 1; }\n  50% { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@keyframes pulse {\n\t0% { opacity: 1; }\n\t50% { opacity: 0.4; }\n\t100% { opacity: 1; }\n}";
-
-const EzSkeleton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.items = [];
-    this.count = 1;
-    this.variant = 'text';
-    this.width = null;
-    this.height = null;
-    this.marginBottom = null;
-    this.animation = 'progress';
-  }
-  componentWillLoad() {
-    this.init();
-  }
-  componentWillUpdate() {
-    this.init();
-  }
-  init() {
-    this.items.length = this.count;
-    this.items.fill(1);
-    if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
-      this.animation = 'progress';
-    }
-  }
-  get style() {
-    let dimenssionsStyles = {
-      width: null,
-      height: null,
-      marginBottom: null
-    };
-    if (this.width) {
-      dimenssionsStyles.width = this.width;
-    }
-    if (this.height) {
-      dimenssionsStyles.height = this.height;
-    }
-    if (this.marginBottom) {
-      dimenssionsStyles.marginBottom = this.marginBottom;
-    }
-    return dimenssionsStyles;
-  }
-  render() {
-    return this.items.map((_, index$1) => {
-      return (index.h("span", { key: index$1, class: {
-          circle: this.variant === 'circle',
-          rect: this.variant === 'rect',
-          progress: this.animation === 'progress',
-          'progress-dark': this.animation === 'progress-dark',
-          pulse: this.animation === 'pulse',
-          skeleton: true
-        }, "data-busy": "true", "data-valuemin": "0", "data-valuemax": "100", "data-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
-    });
-  }
-};
-EzSkeleton.style = ezSkeletonCss;
-
 exports.ez_dropdown = EzDropdown;
-exports.ez_skeleton = EzSkeleton;

package/dist/cjs/ez-filter-input_2.cjs.entry.js

@@ -0,0 +1,257 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9e5554cb.js');
+const core = require('@sankhyalabs/core');
+const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-017acce4.js');
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+const EzFilterInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezSearching = index.createEvent(this, "ezSearching", 7);
+    this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+    this.autoFocus = false;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * 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() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  render() {
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+const ezTooltipCss = ":host{--triangle-size:8px;width:100%}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;width:max-content;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
+
+const EzTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._opened = false;
+    this.message = undefined;
+    this.anchoringElement = undefined;
+    this.placement = 'bottom';
+    this.gapOptions = { horizontalGap: 0, verticalGap: 0 };
+    this.type = 'default';
+    this.debouncingTime = 500;
+    this.active = true;
+    this.maxWidth = 200;
+    this.useAnchorSize = false;
+  }
+  watchAnchoringElement(newValue, oldValue) {
+    if (newValue) {
+      this.setEvents(newValue);
+      this.removeEvents(oldValue);
+    }
+  }
+  watchMessage(newValue) {
+    if (!newValue) {
+      this.closeTooltip();
+      return;
+    }
+    this.updatePosition();
+  }
+  openTooltip() {
+    if (this.message && this.active) {
+      if (this._debouncingTimeout) {
+        clearTimeout(this._debouncingTimeout);
+      }
+      this._debouncingTimeout = setTimeout(() => {
+        this._opened = true;
+        this._tooltipElement.style.display = 'block';
+        this.updatePosition();
+      }, this.debouncingTime);
+    }
+  }
+  closeTooltip() {
+    clearTimeout(this._debouncingTimeout);
+    this._tooltipElement.style.display = 'none';
+    this._opened = false;
+  }
+  async updatePosition(element = this.anchoringElement) {
+    if (!element || !this._opened) {
+      return;
+    }
+    if (this.useAnchorSize) {
+      const anchorSize = element.getBoundingClientRect().width;
+      this._tooltipElement.style.width = `${anchorSize}px`;
+    }
+    await floatingUi_dom_esm.computePosition(element, this._tooltipElement, {
+      placement: this.placement,
+      middleware: [
+        floatingUi_dom_esm.offset(5),
+        floatingUi_dom_esm.flip(),
+        floatingUi_dom_esm.shift(),
+        floatingUi_dom_esm.arrow({ element: this._arrowElement })
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
+      Object.assign(this._tooltipElement.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+      if (middlewareData.arrow) {
+        const { x } = middlewareData.arrow;
+        const onBottom = placement.includes("bottom");
+        Object.assign(this._arrowElement.style, {
+          left: `${x}px`,
+          top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+          bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+        });
+      }
+    });
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    this.anchoringElement = content;
+  }
+  setEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.addEventListener('mouseleave', () => {
+      this.closeTooltip();
+    });
+  }
+  removeEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.removeEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.removeEventListener('mouseleave', () => {
+      this.closeTooltip();
+    });
+  }
+  componentDidLoad() {
+    this.setEvents();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
+        "tooltip": true,
+        [`${this.type}-tooltip`]: true,
+      }, style: {
+        maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
+      }, role: "tooltip", "data-element-id": core.ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, index.h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), index.h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "anchoringElement": ["watchAnchoringElement"],
+    "message": ["watchMessage"]
+  }; }
+};
+EzTooltip.style = ezTooltipCss;
+
+exports.ez_filter_input = EzFilterInput;
+exports.ez_tooltip = EzTooltip;