@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-131882.2 → 0.0.0-bugfix-dev-KB-174860.0

package/dist/collection/components/snk-grid-config/snk-grid-config.js

@@ -1,8 +1,9 @@
-import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, StringUtils, UserInterface } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { h, Host } from '@stencil/core';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { ORDER_VALUES } from '../../lib/utils/constants';
+import { GRID_COLUMN_DEFAULT_WIDTHS } from '@sankhyalabs/ezui/dist/collection/components/ez-grid/utils';
 export class SnkGridConfig {
   constructor() {
     this._orderListItems = [];
@@ -18,6 +19,7 @@ export class SnkGridConfig {
     this.config = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
+    this.metadata = undefined;
     this._collapsibleBoxListOrder = true;
     this._collapsibleBoxListSelect = false;
   }
@@ -49,31 +51,49 @@ export class SnkGridConfig {
     return newList;
   }
   createOrderList() {
+    var _a;
     let newSortableList = this.getSortableColumns();
-    newSortableList.sort((a, b) => {
-      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
-      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
-        if (a.ascending != undefined)
-          return -1;
-        if (b.ascending != undefined)
-          return 1;
-        return 0;
-        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
-      }
-      else if (a.ascending != undefined && b.ascending != undefined) {
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      const orderedList = [];
+      this._orderPriorityList.forEach((priorityItem) => {
+        const item = newSortableList.find(col => col.id === priorityItem.id);
+        if (item) {
+          orderedList.push(item);
+        }
+      });
+      newSortableList.forEach(item => {
+        if (!orderedList.find(o => o.id === item.id)) {
+          orderedList.push(item);
+        }
+      });
+      this._orderListItems = orderedList;
+    }
+    else {
+      newSortableList.sort((a, b) => {
+        //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+        if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+          if (a.ascending != undefined)
+            return -1;
+          if (b.ascending != undefined)
+            return 1;
+          return 0;
+          //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+        }
+        else if (a.ascending != undefined && b.ascending != undefined) {
+          return (a.orderIndex - b.orderIndex);
+          //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+        }
+        else if (a.ascending != undefined || b.ascending != undefined) {
+          if (a.ascending != undefined)
+            return -1;
+          if (b.ascending != undefined)
+            return 1;
+          return 0;
+        }
         return (a.orderIndex - b.orderIndex);
-        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
-      }
-      else if (a.ascending != undefined || b.ascending != undefined) {
-        if (a.ascending != undefined)
-          return -1;
-        if (b.ascending != undefined)
-          return 1;
-        return 0;
-      }
-      return (a.orderIndex - b.orderIndex);
-    });
-    this._orderListItems = newSortableList;
+      });
+      this._orderListItems = newSortableList;
+    }
   }
   createColumnList() {
     const visibleGroup = this.buildVisibleGroup();
@@ -106,7 +126,8 @@ export class SnkGridConfig {
     };
   }
   createOrderListSlotDataElementId(item) {
-    return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
+    var _a;
+    return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase((_a = item.id) !== null && _a !== void 0 ? _a : item.label)}`;
   }
   buildOrderListSlot(item) {
     const dataElementId = this.createOrderListSlotDataElementId(item);
@@ -116,22 +137,25 @@ export class SnkGridConfig {
     }
     return (h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => {
         evt.stopPropagation();
-        this.updateOrder(evt.detail, item.label);
+        this.updateOrder(evt.detail, item.id);
       }, preventAutoFocus: true }));
   }
-  updateOrder(sortOrder, updatedItemLabel) {
+  updateOrder(sortOrder, updatedItemId) {
     var _a;
     this._dataChanged = true;
     let newList = [...this.columns];
-    let newItem = newList.find((item) => item.label === updatedItemLabel);
+    let newItem = newList.find((item) => item.name === updatedItemId);
     if (newItem) {
       newItem.sort = sortOrder.value === ORDER_VALUES.none.value ? undefined : sortOrder.value;
     }
     let orderArray;
     if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this._orderPriorityList.find((item) => item.label === newItem.label).sort = sortOrder;
-      this._orderPriorityList.filter((item) => item.sort).forEach((item, index) => {
-        if (item.label === newItem.label) {
+      const priorityItem = this._orderPriorityList.find((item) => item.id === newItem.name);
+      if (priorityItem) {
+        priorityItem.sort = sortOrder.value === ORDER_VALUES.none.value ? undefined : sortOrder.value;
+      }
+      this._orderPriorityList.filter((item) => item.sort != undefined).forEach((item, index) => {
+        if (item.id === newItem.name) {
           newItem.sortIndex = index;
         }
       });
@@ -139,10 +163,10 @@ export class SnkGridConfig {
     else {
       orderArray = newList.filter((item) => item.sort && item.hidden !== true)
         .map((item, index) => {
-        return { label: item.label, orderIndex: index };
+        return { name: item.name, orderIndex: index };
       });
       orderArray.forEach((element) => {
-        newList.find((item) => item.label === element.label).sortIndex = element.orderIndex;
+        newList.find((item) => item.name === element.name).sortIndex = element.orderIndex;
       });
     }
     this.columns = newList;
@@ -156,14 +180,15 @@ export class SnkGridConfig {
     this._dataChanged = false;
     this.closeConfig();
     this.save();
+    this._orderPriorityList = [];
   }
   updateColumns() {
     this.columns = this._columListItems.flatMap((group) => group.items.map((item) => this.buildColumnFromListItem(item, group)));
   }
   buildColumnFromListItem(item, group) {
-    const baseColumn = this.columns.find((column) => column.label === item.label);
+    const baseColumn = this.columns.find((column) => column.name === item.id);
     if (!baseColumn) {
-      throw new Error(`Column with label "${item.label}" not found.`);
+      throw new Error(`Column with name "${item.id}" not found.`);
     }
     return Object.assign(Object.assign({}, baseColumn), { hidden: group.group === this.getMessage('snkGridConfig.group.hidden') });
   }
@@ -178,12 +203,12 @@ export class SnkGridConfig {
     let orderArray = [];
     orderArray = columns.filter((item) => item.sort && item.hidden !== true)
       .map((item) => {
-      return { label: item.label, orderIndex: 0 };
+      return { name: item.name, orderIndex: 0 };
     });
     let indexCount = 0;
     let newOrderArray = [];
     orderPriorityList.forEach((orderPriorityItem) => {
-      let item = orderArray.find((column) => column.label === orderPriorityItem.label);
+      let item = orderArray.find((column) => column.name === orderPriorityItem.id);
       if (item) {
         item.orderIndex = indexCount;
         newOrderArray.push(item);
@@ -213,11 +238,8 @@ export class SnkGridConfig {
       let _newColumnConfig = _newConfig.columns.find((_newColumnConfig) => column.name === _newColumnConfig.name);
       if (column.hidden === true && _newColumnConfig)
         return;
-      if (_newColumnConfig) {
-        _newColumnConfig.width = column.width;
-      }
-      else if (column.hidden === false) {
-        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      if (!_newColumnConfig && column.hidden === false) {
+        _newColumnConfig = { name: column.name, orderIndex: 0 };
       }
       if (_newColumnConfig) {
         if (column.sort) {
@@ -241,7 +263,7 @@ export class SnkGridConfig {
     this.saveGridConfigOnStorage(_newConfig);
     function adjustPriorityOrder(column, _newColumnConfig) {
       if (orderArray) {
-        let orderItem = orderArray.find((item) => item.label === column.label);
+        let orderItem = orderArray.find((item) => item.name === column.name);
         if (orderItem) {
           _newColumnConfig.orderIndex = orderItem.orderIndex;
         }
@@ -282,6 +304,7 @@ export class SnkGridConfig {
         .then((response) => {
         if (!response) {
           this._dataChanged = false;
+          this._orderPriorityList = [];
           this.configCancel.emit();
           this._componenteInternalKey = Date.now();
         }
@@ -346,6 +369,7 @@ export class SnkGridConfig {
     if (!this.resourceID)
       return;
     this._dataChanged = true;
+    this._orderPriorityList = [];
     const config = await ConfigStorage.getDefaultGridConfig(this.resourceID);
     const defaultVisibleCols = (_a = config === null || config === void 0 ? void 0 : config.columns.map(col => col.name)) !== null && _a !== void 0 ? _a : [];
     const isEmptyConfig = defaultVisibleCols.length === 0;
@@ -356,6 +380,7 @@ export class SnkGridConfig {
     columnsToIterate.forEach(column => {
       const item = this.buildListItemFromColumn(column);
       if (isEmptyConfig || defaultVisibleCols.includes(column.name)) {
+        item['width'] = this.getDefaultWidthBasedOnMetadata(column.name);
         visibleItemsMap.set(column.name, item);
       }
       else {
@@ -375,9 +400,30 @@ export class SnkGridConfig {
     this._columListItems = [visibleGroup, hiddenGroup];
     this._visibleList = visibleGroup.items;
     this._hiddenList = hiddenGroup.items;
+    if (this.config) {
+      this.config['columns'] = this.transformListToConfig(visibleGroup.items);
+    }
     this.updateColumns();
     this.createOrderList();
   }
+  transformListToConfig(list) {
+    return list.map((item, index) => {
+      return {
+        name: item.id,
+        hidden: false,
+        orderIndex: Number(item.sort) || index,
+        width: item.width,
+      };
+    });
+  }
+  getDefaultWidthBasedOnMetadata(columnName) {
+    var _a, _b;
+    if (!this.metadata) {
+      return undefined;
+    }
+    const columnMetadata = (_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.find(col => col.name === columnName);
+    return GRID_COLUMN_DEFAULT_WIDTHS[columnMetadata === null || columnMetadata === void 0 ? void 0 : columnMetadata.userInterface] || GRID_COLUMN_DEFAULT_WIDTHS[UserInterface.SHORTTEXT];
+  }
   buildListItemFromColumn(column) {
     var _a;
     return {
@@ -385,13 +431,14 @@ export class SnkGridConfig {
       selected: false,
       sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
       id: column.name,
+      width: column.width,
     };
   }
   render() {
     return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, h("label", { class: "title" }, this.getMessage('snkGridConfig.gridConfiguration')), h("label", { class: "subtitle" }, this.getMessage('snkGridConfig.columnVisibilityOrder'))), h("div", { class: "button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: 'grid-config__body' }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
         LEFT_LIST: this.getMessage('snkGridConfig.emptyMensage.left'),
         RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
-      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), emptyMessage: {
+      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), onEzRightListChanged: (evt) => this.handleOrderListChange(evt), emptyMessage: {
         RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
       }, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, this.renderResetConfigBtn(), h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.cancel'), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage('snkGridConfig.complete'), class: "ez-button--primary", onClick: () => this.finish() }))));
   }
@@ -529,6 +576,26 @@ export class SnkGridConfig {
         },
         "attribute": "resource-i-d",
         "reflect": false
+      },
+      "metadata": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "UnitMetadata",
+          "resolved": "UnitMetadata",
+          "references": {
+            "UnitMetadata": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a propriedade metadata da inst\u00E2ncia"
+        }
       }
     };
   }

package/dist/collection/components/snk-image-input/snk-image-input.js

@@ -21,6 +21,10 @@ export class SnkImageInput {
         await this.clearImage();
         return;
       }
+      if (action.type === Action.EDITION_CANCELED) {
+        await this.loadImage();
+        return;
+      }
     };
     this.dataUnit = undefined;
     this.fieldName = undefined;
@@ -45,6 +49,8 @@ export class SnkImageInput {
     return this.messagesBuilder.getMessage(key, params);
   }
   async clearImage() {
+    var _a;
+    (_a = this._loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
     this.imageValue = undefined;
   }
   async handleImageChange(event) {
@@ -106,11 +112,17 @@ export class SnkImageInput {
     }
   }
   async loadImage(pks) {
-    var _a;
+    var _a, _b;
+    (_a = this._loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+    const controller = new AbortController();
+    this._loadAbortController = controller;
     this.loading = true;
     if (this.dataUnit && this.entityName) {
-      pks = (_a = pks !== null && pks !== void 0 ? pks : this.getPksFromDataUnit()) !== null && _a !== void 0 ? _a : getPKs(this.dataUnit);
-      this.imageValue = await downloadImage(pks, this.fieldName, this.entityName);
+      pks = (_b = pks !== null && pks !== void 0 ? pks : this.getPksFromDataUnit()) !== null && _b !== void 0 ? _b : getPKs(this.dataUnit);
+      const image = await downloadImage(pks, this.fieldName, this.entityName, controller.signal);
+      if (controller.signal.aborted)
+        return;
+      this.imageValue = image;
     }
     this.loading = false;
   }

package/dist/collection/components/snk-image-input/utils/ImageUtils.js

@@ -99,7 +99,7 @@ export function getPKs(dataUnit) {
   const fields = dataUnit.metadata.fields;
   const selectedRecord = dataUnit.getSelectedRecord();
   fields.forEach((field) => {
-    if (field.properties['isPrimaryKey']) {
+    if (field.properties['isPrimaryKey'] && selectedRecord) {
       pk[field.name] = selectedRecord[field.name];
     }
   });
@@ -115,19 +115,21 @@ export async function imageBlobToBase64(blob) {
     reader.readAsDataURL(blob);
   });
 }
-export async function downloadImage(pks, fieldName, entityName) {
+export async function downloadImage(pks, fieldName, entityName, signal) {
   const uploadUrl = getBaseUrl(pks, entityName, fieldName);
   if (!uploadUrl) {
     return;
   }
   try {
-    const response = await fetch(uploadUrl);
+    const response = await fetch(uploadUrl, { signal });
     if (response.ok) {
       const blob = await response.blob();
       return await imageBlobToBase64(blob);
     }
   }
   catch (error) {
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+      return;
     console.error('Error downloading image:', error);
   }
 }

package/dist/collection/components/snk-personalized-filter/snk-personalized-filter.js

@@ -351,7 +351,7 @@ export class SnkPersonalizedFilter {
     if (!((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.assistent) && this._filterAssistentMode) {
       return;
     }
-    return (h(Host, null, h("div", { class: "snk-personalized-filter" }, h("div", null, h("snk-simple-bar", { label: this.buildTitle(), onExit: () => this.handleCancel() }, h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, h("ez-button", { size: "small", label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), h("ez-button", { size: "small", ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, h("div", { class: "ez-box__container" }, h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("div", { class: "ez-flex" }, h("ez-tooltip", { message: this.getMessage("snkPersonalizedFilter.info.textInputDisabled"), active: this.isDefaultFilter }, h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail), enabled: !this.isDefaultFilter })), this.renderButtonAddField(), h("ez-button", { ref: (el) => this._elButtonMode = el, class: "snk-personalized-filter__button-mode", label: this._filterAssistentMode ? this.getMessage("snkPersonalizedFilter.info.activeModeAdvanced") : this.getMessage("snkPersonalizedFilter.info.activeModeAssistent"), onClick: () => this.handleModeChange(), "data-tooltip": !(this._filterAssistentMode || ((_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent)) ? this.getMessage("snkPersonalizedFilter.info.tooltipDisabledAssistentMode") : undefined, "data-flow": "bottom", enabled: (!this._filterAssistent.name || Boolean(this._filterAssistentMode || ((_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.assistent))) })), this.buildContainerPersonalizedFilter()))))));
+    return (h(Host, null, h("div", { class: "snk-personalized-filter" }, h("div", null, h("snk-simple-bar", { label: this.buildTitle(), onExit: () => this.handleCancel() }, h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, h("ez-button", { label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), h("ez-button", { ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, h("div", { class: "ez-box__container" }, h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("div", { class: "ez-flex" }, h("ez-tooltip", { message: this.getMessage("snkPersonalizedFilter.info.textInputDisabled"), active: this.isDefaultFilter }, h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail), enabled: !this.isDefaultFilter })), this.renderButtonAddField(), h("ez-button", { ref: (el) => this._elButtonMode = el, class: "snk-personalized-filter__button-mode", label: this._filterAssistentMode ? this.getMessage("snkPersonalizedFilter.info.activeModeAdvanced") : this.getMessage("snkPersonalizedFilter.info.activeModeAssistent"), onClick: () => this.handleModeChange(), "data-tooltip": !(this._filterAssistentMode || ((_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent)) ? this.getMessage("snkPersonalizedFilter.info.tooltipDisabledAssistentMode") : undefined, "data-flow": "bottom", enabled: (!this._filterAssistent.name || Boolean(this._filterAssistentMode || ((_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.assistent))) })), this.buildContainerPersonalizedFilter()))))));
   }
   static get is() { return "snk-personalized-filter"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-taskbar/elements/taskbar-actions-button/taskbar-actions-button.css

@@ -16,4 +16,12 @@
   position: absolute;
   display: block;
   min-width: var(--ez-dropdown--min-width);
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+}
+
+.ez-dropdown--open-left {
+  left: auto;
+  right: 0;
 }

package/dist/collection/components/snk-taskbar/elements/taskbar-actions-button/taskbar-actions-button.js

@@ -2,9 +2,11 @@ import { h, Host } from '@stencil/core';
 export class TaskbarActionsButton {
   constructor() {
     this._showDropdown = false;
+    this._openToLeft = false;
     this.title = undefined;
     this.enabled = undefined;
     this.actions = undefined;
+    this.size = 'medium';
   }
   async handleKeyDown(event) {
     if (event.key === 'Escape' || event.key === 'Esc') {
@@ -18,6 +20,7 @@ export class TaskbarActionsButton {
    * Exibe a lista de ações.
    */
   async showActions() {
+    this.checkDropdownPosition();
     this._showDropdown = true;
     requestAnimationFrame(() => {
       this._element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
@@ -36,8 +39,19 @@ export class TaskbarActionsButton {
     return this._showDropdown;
   }
   controlDropdown() {
+    if (!this._showDropdown) {
+      this.checkDropdownPosition();
+    }
     this._showDropdown = !this._showDropdown;
   }
+  checkDropdownPosition() {
+    const rect = this._element.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const dropdownMinWidth = 150; // Largura mínima do dropdown
+    const spaceOnRight = viewportWidth - rect.right;
+    // Se não houver espaço suficiente à direita, abre para a esquerda
+    this._openToLeft = spaceOnRight < dropdownMinWidth;
+  }
   loadItems() {
     return this.actions.filter(action => action !== undefined).map(action => {
       var _a;
@@ -118,7 +132,10 @@ export class TaskbarActionsButton {
     this.taskbarActionsButtonDisconnected.emit();
   }
   render() {
-    return (h(Host, null, h("div", { class: `${this.canShowDropdown() ? ' ez-elevation--16' : ''} ez-dropdown-container` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { class: `ez-dropdown--sticky`, items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) }))));
+    return (h(Host, null, h("div", { class: `${this.canShowDropdown() ? ' ez-elevation--16' : ''} ez-dropdown-container` }, h("ez-tooltip", { message: this.title }, h("ez-button", { mode: 'icon', iconName: 'dots-vertical', isDisabled: !this.enabled, onClick: () => this.controlDropdown(), size: this.size })), this.canShowDropdown() && (h("ez-dropdown", { class: {
+        'ez-dropdown--sticky': true,
+        'ez-dropdown--open-left': this._openToLeft
+      }, items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) })))));
   }
   static get is() { return "taskbar-actions-button"; }
   static get encapsulation() { return "scoped"; }
@@ -190,12 +207,31 @@ export class TaskbarActionsButton {
           "tags": [],
           "text": "Define a lista de a\u00E7\u00F5es."
         }
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do bot\u00E3o, podendo ser 'small', 'medium' ou 'large'."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
       }
     };
   }
   static get states() {
     return {
-      "_showDropdown": {}
+      "_showDropdown": {},
+      "_openToLeft": {}
     };
   }
   static get events() {