@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-simple-crud/snk-simple-crud.js

@@ -0,0 +1,575 @@
+import { ApplicationContext, DataType, ObjectUtils, UserInterface, } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+import { SIMPLE_CRUD_MODE, VIEW_MODE } from '../../lib/utils/constants';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+import { PresentationMode } from '../../lib';
+import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
+import InMemoryLoader from '../../lib/dataUnit/InMemoryLoader';
+import SnkMultiSelectionListDataSource from '../snk-grid/filtercolumn/SnkMultiSelectionListDataSource';
+export class SnkSimpleCrud {
+  constructor() {
+    this.REGULAR_DEFAULT_BTNS = ["INSERT", "REFRESH", "PREVIOUS", "NEXT", "DIVIDER"];
+    this.REGULAR_SELECTED_BTNS = ["INSERT", "REFRESH", "PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "DIVIDER"];
+    this._multiSelectionListDataSource = new SnkMultiSelectionListDataSource();
+    this._taskbarProcessor = new TaskbarProcessor({
+      "snkSimpleCrudTaskbar.form_regular": this.resolveInMemoryBtns(this.REGULAR_DEFAULT_BTNS).concat(TaskbarElement.GRID_MODE),
+      "snkSimpleCrudTaskbar.grid_regular": this.resolveInMemoryBtns(this.REGULAR_DEFAULT_BTNS).concat(TaskbarElement.FORM_MODE),
+      "snkSimpleCrudTaskbar.form_selected": this.resolveInMemoryBtns(this.REGULAR_SELECTED_BTNS).concat(TaskbarElement.GRID_MODE),
+      "snkSimpleCrudTaskbar.grid_selected": this.resolveInMemoryBtns(this.REGULAR_SELECTED_BTNS).concat(TaskbarElement.FORM_MODE),
+      "snkSimpleCrudTaskbar.finish_edition": ["CANCEL", "SAVE"]
+    });
+    this._currentViewMode = VIEW_MODE.GRID;
+    this._config = undefined;
+    this.dataState = undefined;
+    this.dataUnit = undefined;
+    this.mode = SIMPLE_CRUD_MODE.SERVER;
+    this.gridConfig = undefined;
+    this.formConfig = undefined;
+    this.multipleSelection = undefined;
+    this.useCancelConfirm = true;
+    this.taskbarManager = undefined;
+    this.messagesBuilder = undefined;
+    this.useEnterLikeTab = false;
+  }
+  resolveInMemoryBtns(taskbarButtons) {
+    const newTaskBarConfig = [...taskbarButtons];
+    if (this.mode === SIMPLE_CRUD_MODE.IN_MEMORY) {
+      newTaskBarConfig.splice(1, 1);
+    }
+    return newTaskBarConfig;
+  }
+  /**
+   * Usado para alternar a visão entre GRID e FORM externamente.
+   */
+  async goToView(view) {
+    this._currentViewMode = view;
+    if (this._viewStack) {
+      this._viewStack.show(view);
+    }
+  }
+  actionClickListener(evt) {
+    const act = evt.detail;
+    if (act === TaskbarElement.GRID_MODE) {
+      this.goToView(VIEW_MODE.GRID);
+    }
+    else if (act === TaskbarElement.FORM_MODE) {
+      this.goToView(VIEW_MODE.FORM);
+    }
+    evt.stopPropagation();
+  }
+  onModeChange() {
+    if (this.mode == SIMPLE_CRUD_MODE.IN_MEMORY) {
+      this.initInMemoryDataUnit();
+    }
+  }
+  observeDataState(newValue, oldValue) {
+    if (ObjectUtils.objectToString(oldValue) != ObjectUtils.objectToString(newValue)) {
+      this.dataStateChange.emit(newValue);
+    }
+  }
+  componentWillRender() {
+    this._taskbarProcessor.process(this.getTaskBarId(), this.taskbarManager, this.dataState, this.getTaskBarDisabledButtons());
+  }
+  componentWillLoad() {
+    this.processMetadata();
+    this.onModeChange();
+    this.configDatasource();
+  }
+  configDatasource() {
+    const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._multiSelectionListDataSource.setApplication(application);
+    this._multiSelectionListDataSource.setDataUnit(this.dataUnit);
+  }
+  getTaskBarId() {
+    var _a, _b, _c;
+    if ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) {
+      return "snkSimpleCrudTaskbar.finish_edition";
+    }
+    if (((_b = this.dataState) === null || _b === void 0 ? void 0 : _b.selectionInfo) &&
+      !this.dataState.selectionInfo.isAllRecords() &&
+      ((_c = this.dataState.selectionInfo.records) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+      return this._currentViewMode === VIEW_MODE.GRID ? "snkSimpleCrudTaskbar.grid_selected" : "snkSimpleCrudTaskbar.form_selected";
+    }
+    return this._currentViewMode === VIEW_MODE.GRID ? "snkSimpleCrudTaskbar.grid_regular" : "snkSimpleCrudTaskbar.form_regular";
+  }
+  initInMemoryDataUnit() {
+    this._inMemoryLoader = new InMemoryLoader(this._metadata);
+    this.dataUnit = this._inMemoryLoader.dataUnit;
+    this.dataUnitReady.emit(this.dataUnit);
+  }
+  setMetadata(metadata) {
+    if (this._inMemoryLoader) {
+      this._inMemoryLoader.metadata = metadata;
+    }
+    else if (this.dataUnit) {
+      this.dataUnit.metadata = metadata;
+    }
+    return Promise.resolve();
+  }
+  setRecords(records) {
+    if (this._inMemoryLoader) {
+      this._inMemoryLoader.records = records;
+    }
+    else if (this.dataUnit) {
+      this.dataUnit.records = records;
+    }
+    return Promise.resolve();
+  }
+  getRecords() {
+    return Promise.resolve(this.dataUnit.records);
+  }
+  processMetadata() {
+    const fieldsMetadataElem = this._element.querySelectorAll("snk-field-metadata");
+    const fieldMetadata = [];
+    const formConfig = { fields: [], emptyConfig: false };
+    fieldsMetadataElem.forEach(fieldElem => {
+      const field = {
+        name: fieldElem.getAttribute("name") || fieldElem.getAttribute("label"),
+        label: fieldElem.getAttribute("label"),
+        dataType: DataType[fieldElem.getAttribute("dataType")] || DataType.TEXT,
+        userInterface: UserInterface[fieldElem.getAttribute("userInterface")] || UserInterface.SHORTTEXT,
+        readOnly: fieldElem.getAttribute("readOnly") == "true",
+        required: fieldElem.getAttribute("required") == "true",
+        tab: fieldElem.getAttribute("tab") || undefined,
+        visible: fieldElem.getAttribute("visible") != "false"
+      };
+      const fieldConfig = { name: field.name, tab: field.tab, visible: field.visible };
+      formConfig.fields.push(fieldConfig);
+      fieldMetadata.push(field);
+    });
+    if (fieldMetadata.length > 0) {
+      if (!this.formConfig) {
+        this.formConfig = formConfig;
+      }
+      this._metadata = {
+        name: "SimpleCrud",
+        label: "SimpleCrud",
+        fields: fieldMetadata
+      };
+    }
+  }
+  onDataStateChange(evt) {
+    this.dataState = Object.assign({}, evt.detail);
+  }
+  getTaskBarDisabledButtons() {
+    var _a, _b, _c, _d;
+    const disabledButtons = [];
+    if (!((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.hasNext)) {
+      disabledButtons.push(TaskbarElement.NEXT);
+    }
+    if (!((_b = this.dataState) === null || _b === void 0 ? void 0 : _b.hasPrevious)) {
+      disabledButtons.push(TaskbarElement.PREVIOUS);
+    }
+    if ((_d = (_c = this.dataState) === null || _c === void 0 ? void 0 : _c.selectionInfo) === null || _d === void 0 ? void 0 : _d.isEmpty()) {
+      disabledButtons.push(TaskbarElement.FORM_MODE);
+    }
+    return disabledButtons;
+  }
+  handleCancelEdit() {
+    var _a;
+    if ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.recordsIsEmpty) {
+      this.goToView(VIEW_MODE.GRID);
+      this.dataUnit.clearSelection();
+    }
+  }
+  render() {
+    var _a;
+    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-flex ez-box ez-box--shadow" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }), h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
+        ? undefined
+        : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab }, h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig }))))));
+  }
+  static get is() { return "snk-simple-crud"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-simple-crud.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-simple-crud.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataState": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataState",
+          "resolved": "DataState",
+          "references": {
+            "DataState": {
+              "location": "import",
+              "path": "../snk-data-unit/snk-data-unit"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "mode": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SIMPLE_CRUD_MODE",
+          "resolved": "SIMPLE_CRUD_MODE.IN_MEMORY | SIMPLE_CRUD_MODE.SERVER",
+          "references": {
+            "SIMPLE_CRUD_MODE": {
+              "location": "import",
+              "path": "../../lib/utils/constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "SIMPLE_CRUD_MODE.SERVER"
+      },
+      "gridConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IGridConfig",
+          "resolved": "IGridConfig",
+          "references": {
+            "IGridConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "formConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormConfig",
+          "resolved": "IFormConfig",
+          "references": {
+            "IFormConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "multipleSelection": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se pode haver mais de uma linha selecionada na grade."
+        },
+        "attribute": "multiple-selection",
+        "reflect": false
+      },
+      "useCancelConfirm": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-cancel-confirm",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "taskbarManager": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "TaskbarManager",
+          "resolved": "TaskbarManager",
+          "references": {
+            "TaskbarManager": {
+              "location": "import",
+              "path": "../snk-taskbar/snk-taskbar"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Gerenciador das barras de tarefas. \u00C9 poss\u00EDvel determinar bot\u00F5es espec\u00EDficos\nou mesmo gerenciar o estado dos bot\u00F5es."
+        }
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
+        }
+      },
+      "useEnterLikeTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o ENTER far\u00E1 a navega\u00E7\u00E3o como se fosse a tecla TAB na grade."
+        },
+        "attribute": "use-enter-like-tab",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_currentViewMode": {},
+      "_config": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dataStateChange",
+        "name": "dataStateChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando h\u00E1 qualquer mudan\u00E7a de estado no DataUnit."
+        },
+        "complexType": {
+          "original": "DataState",
+          "resolved": "DataState",
+          "references": {
+            "DataState": {
+              "location": "import",
+              "path": "../snk-data-unit/snk-data-unit"
+            }
+          }
+        }
+      }, {
+        "method": "dataUnitReady",
+        "name": "dataUnitReady",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o DataUnit est\u00E1 pronto."
+        },
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        }
+      }, {
+        "method": "actionClick",
+        "name": "actionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido sempre que houver click de bot\u00E3o ou a\u00E7\u00E3o."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "goToView": {
+        "complexType": {
+          "signature": "(view: VIEW_MODE) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "VIEW_MODE": {
+              "location": "import",
+              "path": "../../lib/utils/constants"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Usado para alternar a vis\u00E3o entre GRID e FORM externamente.",
+          "tags": []
+        }
+      },
+      "setMetadata": {
+        "complexType": {
+          "signature": "(metadata: UnitMetadata) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "UnitMetadata": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setRecords": {
+        "complexType": {
+          "signature": "(records: Array<Record>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "getRecords": {
+        "complexType": {
+          "signature": "() => Promise<Array<Record>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<Record[]>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "mode",
+        "methodName": "onModeChange"
+      }, {
+        "propName": "dataState",
+        "methodName": "observeDataState"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "actionClick",
+        "method": "actionClickListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { PresentationMode } from "../../../lib/@types";
+import store from "../../../lib/store";
+export var TaskbarElement;
+(function (TaskbarElement) {
+  TaskbarElement["PREVIOUS"] = "PREVIOUS";
+  TaskbarElement["NEXT"] = "NEXT";
+  TaskbarElement["REFRESH"] = "REFRESH";
+  TaskbarElement["UPDATE"] = "UPDATE";
+  TaskbarElement["CLONE"] = "CLONE";
+  TaskbarElement["REMOVE"] = "REMOVE";
+  TaskbarElement["INSERT"] = "INSERT";
+  TaskbarElement["CANCEL"] = "CANCEL";
+  TaskbarElement["SAVE"] = "SAVE";
+  TaskbarElement["GRID_MODE"] = "GRID_MODE";
+  TaskbarElement["FORM_MODE"] = "FORM_MODE";
+  TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
+  TaskbarElement["DIVIDER"] = "DIVIDER";
+  TaskbarElement["CONFIGURATOR"] = "CONFIGURATOR";
+  TaskbarElement["DATA_EXPORTER"] = "DATA_EXPORTER";
+  TaskbarElement["ATTACH"] = "ATTACH";
+  TaskbarElement["ACTIONS_BUTTON"] = "ACTIONS_BUTTON";
+})(TaskbarElement || (TaskbarElement = {}));
+export var AuthorizationElements;
+(function (AuthorizationElements) {
+  AuthorizationElements["UPDATE"] = "UPDATE";
+  AuthorizationElements["CLONE"] = "CLONE";
+  AuthorizationElements["REMOVE"] = "REMOVE";
+  AuthorizationElements["INSERT"] = "INSERT";
+  AuthorizationElements["CONFIGURATOR"] = "CONFIGURATOR";
+})(AuthorizationElements || (AuthorizationElements = {}));
+export var VisibleWhenForbidden;
+(function (VisibleWhenForbidden) {
+  VisibleWhenForbidden["CONFIGURATOR"] = "CONFIGURATOR";
+})(VisibleWhenForbidden || (VisibleWhenForbidden = {}));
+export const buildCustomButton = (def, className, dataElementId, action, isEnabled) => {
+  const { hint, text, iconName } = def;
+  if (iconName) {
+    if (text) {
+      return iconTextButton(iconName, def.name, className, dataElementId, hint, text, action, isEnabled);
+    }
+    else {
+      return iconButton(iconName, def.name, className, dataElementId, hint, action, isEnabled);
+    }
+  }
+  else {
+    return textButton(def.name, className, dataElementId, text, hint, action, isEnabled);
+  }
+};
+export const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName, presentationMode) => {
+  var _a;
+  const title = getTitle(element);
+  switch (element) {
+    case TaskbarElement.PREVIOUS:
+      return iconButton("chevron-left", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.NEXT:
+      return iconButton("chevron-right", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.REFRESH:
+      return iconButton("sync", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.UPDATE:
+      return iconButton("edit", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.CLONE:
+      return iconButton("copy", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.REMOVE:
+      return iconButton("delete", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.INSERT:
+      if (presentationMode === PresentationMode.PRIMARY) {
+        return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("plus", element, className, dataElementId, title, action, isEnabled);
+      }
+    case TaskbarElement.CANCEL:
+      return textButton(element, className, dataElementId, title, title, action, isEnabled);
+    case TaskbarElement.SAVE:
+      if (presentationMode === PresentationMode.PRIMARY) {
+        return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("save", element, className, dataElementId, title, action, isEnabled);
+      }
+    case TaskbarElement.GRID_MODE:
+      return iconButton("table", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.FORM_MODE:
+      return iconButton("list", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.CONFIGURATOR:
+      return iconButton("settings-inverted", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.MORE_OPTIONS:
+      return actionButton(element, className, dataElementId, title, action, isEnabled, actions);
+    case TaskbarElement.DIVIDER:
+      return h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium", "data-taskbar-divider": true });
+    case TaskbarElement.DATA_EXPORTER:
+      const provider = (_a = store.get("exporterProviders")) === null || _a === void 0 ? void 0 : _a[configName];
+      return h("snk-data-exporter", { class: className, provider: provider, "data-element-id": dataElementId });
+    case TaskbarElement.ATTACH:
+      return iconButton("anexo", element, className, dataElementId, title, action, isEnabled);
+    case TaskbarElement.ACTIONS_BUTTON:
+      return h("snk-actions-button", { "data-element-id": dataElementId });
+  }
+};
+function textButton(name, className, dataElementId, text, title, action, isEnabled) {
+  return h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
+}
+function iconButton(iconName, name, className, dataElementId, title, action, isEnabled) {
+  return h("ez-button", { title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
+}
+function iconTextButton(iconName, name, className, dataElementId, text, title, action, isEnabled) {
+  return h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+}
+function actionButton(element, className, dataElementId, title, action, isEnabled, actions) {
+  return actions && actions.length > 0
+    ? h("ez-actions-button", { title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    : undefined;
+}