@sankhyalabs/sankhyablocks 5.4.2 → 5.5.0

package/dist/cjs/snk-grid-config.cjs.entry.js

@@ -7,7 +7,7 @@ const core = require('@sankhyalabs/core');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
 const CheckMode = require('@sankhyalabs/ezui/dist/collection/components/ez-check/CheckMode');
 const ConfigStorage = require('./ConfigStorage-91adf3fe.js');
-const constants = require('./constants-ae0ed870.js');
+const constants = require('./constants-3787fa32.js');
 require('./form-config-fetcher-fa19680a.js');
 require('./DataFetcher-a9d0228f.js');
 require('./_commonjsHelpers-537d719a.js');

package/dist/cjs/snk-grid.cjs.entry.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
 const UnitMetadata = require('@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata');
+const taskbarElements = require('./taskbar-elements-80285601.js');
 const ConfigStorage = require('./ConfigStorage-91adf3fe.js');
 const index$1 = require('./index-f400b1d6.js');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
-const index$2 = require('./index-fc7ca86c.js');
 require('./form-config-fetcher-fa19680a.js');
 require('./DataFetcher-a9d0228f.js');
 require('./_commonjsHelpers-537d719a.js');
@@ -28,7 +28,7 @@ const SnkGrid = class {
     });
     this._headerTaskbarProcessor = new taskbarProcessor.TaskbarProcessor({
       "snkGridHeaderTaskbar.unselected": ["REFRESH", "DATA_EXPORTER"],
-      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH", "DATA_EXPORTER"],
+      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", this.getAttachAvailable(), "REFRESH", "DATA_EXPORTER"],
       "snkGridHeaderTaskbar.detail.unselected": ["REFRESH"],
       "snkGridHeaderTaskbar.detail.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
     });
@@ -69,6 +69,13 @@ const SnkGrid = class {
   async setConfig(config) {
     this.setGridConfig(config);
   }
+  getAttachAvailable() {
+    var _a;
+    const isValidVersion = core.VersionUtils.isRequiredVersion((_a = window.envContext) === null || _a === void 0 ? void 0 : _a.sysVersion, '4.22');
+    if (isValidVersion)
+      return taskbarElements.TaskbarElement.ATTACH;
+    return "";
+  }
   openGridConfig() {
     this._grid.getColumnsState()
       .then((gridColumns) => {
@@ -202,7 +209,7 @@ const SnkGrid = class {
         return (_c = (_b = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.records) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.__record__id__;
       }
     };
-    index$2.store.set("exporterProviders", Object.assign(Object.assign({}, index$2.store.get("exporterProviders")), { [this.configName]: dataExporterProvider }));
+    taskbarElements.store.set("exporterProviders", Object.assign(Object.assign({}, taskbarElements.store.get("exporterProviders")), { [this.configName]: dataExporterProvider }));
   }
   addElementID() {
     const dataInfo = { dataUnit: this._dataUnit };
@@ -238,7 +245,7 @@ const SnkGrid = class {
     const disabledButtons = [];
     if ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.selectionInfo) {
       if (this._dataState.selectionInfo.length > 1) {
-        disabledButtons.push("CLONE");
+        disabledButtons.push(taskbarElements.TaskbarElement.CLONE, "ATTACH");
       }
       if (this._dataState.selectionInfo.isAllRecords()) {
         disabledButtons.push("REMOVE");

package/dist/cjs/{snk-guides-viewer-7db960c2.js → snk-guides-viewer-e6a65393.js}

@@ -5,8 +5,8 @@ const core = require('@sankhyalabs/core');
 const SnkFormConfigManager = require('./SnkFormConfigManager-e1a10283.js');
 const form = require('@sankhyalabs/ezui/dist/collection/utils/form');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
-const taskbarElements = require('./taskbar-elements-5e87cf44.js');
-const constants = require('./constants-ae0ed870.js');
+const taskbarElements = require('./taskbar-elements-80285601.js');
+const constants = require('./constants-3787fa32.js');
 require('./DataFetcher-a9d0228f.js');
 require('./pesquisa-fetcher-954b74c3.js');
 const index$1 = require('./index-f400b1d6.js');

package/dist/cjs/snk-guides-viewer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const snkGuidesViewer = require('./snk-guides-viewer-7db960c2.js');
+const snkGuidesViewer = require('./snk-guides-viewer-e6a65393.js');
 require('./index-21bd01e1.js');
 require('@sankhyalabs/core');
 require('./SnkFormConfigManager-e1a10283.js');
@@ -12,10 +12,9 @@ require('./DataFetcher-a9d0228f.js');
 require('./_commonjsHelpers-537d719a.js');
 require('@sankhyalabs/ezui/dist/collection/utils/form');
 require('./taskbar-processor-bce3f499.js');
-require('./taskbar-elements-5e87cf44.js');
+require('./taskbar-elements-80285601.js');
 require('./index-f400b1d6.js');
-require('./index-fc7ca86c.js');
-require('./constants-ae0ed870.js');
+require('./constants-3787fa32.js');
 require('./pesquisa-fetcher-954b74c3.js');
 
 

package/dist/cjs/snk-select-box.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
-const constants = require('./constants-ae0ed870.js');
+const constants = require('./constants-3787fa32.js');
 
 const snkSelectBoxCss = "ez-combo-box{width:100px}.grid-config-combo{--ez-text-input--height:28px;--ez-text-input__input--background-color:#fff;--ez-text-input__input--border-color:#dce0e8}";
 

package/dist/cjs/{snk-simple-crud.cjs.entry.js → snk-simple-bar_2.cjs.entry.js}

@@ -4,15 +4,51 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-ae0ed870.js');
-const taskbarElements = require('./taskbar-elements-5e87cf44.js');
+const constants = require('./constants-3787fa32.js');
+const taskbarElements = require('./taskbar-elements-80285601.js');
 require('./DataFetcher-a9d0228f.js');
 require('./pesquisa-fetcher-954b74c3.js');
 const index$1 = require('./index-f400b1d6.js');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
-require('./index-fc7ca86c.js');
 require('./_commonjsHelpers-537d719a.js');
 
+const snkSimpleBarCss = ".sc-snk-simple-bar-h{display:flex;height:100%;width:100%}.simple-bar__container.sc-snk-simple-bar{flex:1;display:flex;align-items:stretch;gap:var(--space--small)}.simple-bar__left-slot.sc-snk-simple-bar{min-width:280px;flex:1;display:flex;align-items:center}.simple-bar__right-slot.sc-snk-simple-bar{flex:1;display:flex;align-items:center;justify-content:flex-end}.simple-bar__column.sc-snk-simple-bar{flex:1;display:flex;flex-direction:column}";
+
+const SnkSimpleBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickBreadcrumbItem = index.createEvent(this, "clickBreadcrumbItem", 3);
+    this.exit = index.createEvent(this, "exit", 3);
+    this.label = undefined;
+    this.breadcrumbItens = undefined;
+    this.messagesBuilder = undefined;
+  }
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-simple-bar.msg.ts"
+  */
+  getMessage(key, params) {
+    var _a;
+    if (this.messagesBuilder)
+      return this.messagesBuilder.getMessage(key, params);
+    if ((_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder)
+      return this._application.messagesBuilder.getMessage(key, params);
+  }
+  componentDidLoad() {
+    if (!this._element)
+      return;
+    core.ElementIDUtils.addIDInfo(this._element);
+    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    return (index.h("div", { class: "simple-bar__container ez-margin-vertical--medium ez-padding--extra-small" }, index.h("div", { class: "simple-bar__left-slot" }, index.h("ez-button", { class: "ez-padding-right--medium", title: this.getMessage('snkSimpleBar.backTitle'), mode: 'icon', iconName: "arrow_back", size: 'medium', onClick: () => this.exit.emit() }), index.h("div", { class: "simple-bar__column" }, index.h("h1", { class: "ez-title ez-title--primary ez-title--extra-large" }, this.label), index.h("ez-breadcrumb", { items: this.breadcrumbItens, onSelectedItem: ({ detail }) => this.clickBreadcrumbItem.emit(detail) }))), index.h("div", { class: "simple-bar__right-slot" }, index.h("slot", { name: "rightSlot" }))));
+  }
+  get _element() { return index.getElement(this); }
+};
+SnkSimpleBar.style = snkSimpleBarCss;
+
 class InMemoryLoader {
   constructor(metadata, records) {
     this.records = records || [];
@@ -146,6 +182,9 @@ const SnkSimpleCrud = class {
     this.dataState = undefined;
     this.dataUnit = undefined;
     this.mode = constants.SIMPLE_CRUD_MODE.SERVER;
+    this.gridConfig = undefined;
+    this.formConfig = undefined;
+    this.useCancelConfirm = true;
     this.taskbarManager = undefined;
     this.messagesBuilder = undefined;
   }
@@ -250,7 +289,9 @@ const SnkSimpleCrud = class {
       fieldMetadata.push(field);
     });
     if (fieldMetadata.length > 0) {
-      this._config = formConfig;
+      if (!this.formConfig) {
+        this.formConfig = formConfig;
+      }
       this._metadata = {
         name: "SimpleCrud",
         label: "SimpleCrud",
@@ -274,7 +315,7 @@ const SnkSimpleCrud = class {
   }
   render() {
     var _a;
-    return (index.h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, onDataStateChange: evt => this.onDataStateChange(evt), onInsertionMode: () => this.goToView(constants.VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, index.h("header", null, index.h("slot", { name: "snkSimpleCrudHeader" })), index.h("section", { class: "ez-flex ez-box ez-box--shadow" }, index.h("snk-taskbar", { class: "simple-crud__taskbar ez-box ez-box--shadow ez-padding--medium", 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: index$1.PresentationMode.SECONDARY }), index.h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, index.h("stack-item", null, index.h("ez-grid", { dataUnit: this.dataUnit, onEzDoubleClick: () => this.goToView(constants.VIEW_MODE.FORM), "no-header": true }, index.h("div", { slot: "footer" }, index.h("slot", { name: "snkSimpleCrudFooter" })))), index.h("stack-item", null, index.h("ez-form", { dataUnit: this.dataUnit, config: this._config }))))));
+    return (index.h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onInsertionMode: () => this.goToView(constants.VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, index.h("header", null, index.h("slot", { name: "snkSimpleCrudHeader" })), index.h("section", { class: "ez-flex ez-box ez-box--shadow" }, index.h("snk-taskbar", { class: "simple-crud__taskbar ez-box ez-box--shadow ez-padding--medium", 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: index$1.PresentationMode.SECONDARY }), index.h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, index.h("stack-item", null, index.h("ez-grid", { dataUnit: this.dataUnit, onEzDoubleClick: () => this.goToView(constants.VIEW_MODE.FORM), config: this.gridConfig, "no-header": true }, index.h("div", { slot: "footer" }, index.h("slot", { name: "snkSimpleCrudFooter" })))), index.h("stack-item", null, index.h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig }))))));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {
@@ -284,4 +325,5 @@ const SnkSimpleCrud = class {
 };
 SnkSimpleCrud.style = snkSimpleCrudCss;
 
+exports.snk_simple_bar = SnkSimpleBar;
 exports.snk_simple_crud = SnkSimpleCrud;

package/dist/cjs/snk-tab-config.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-21bd01e1.js');
 const draggable_bundle = require('./draggable.bundle-82a25c06.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-ae0ed870.js');
+const constants = require('./constants-3787fa32.js');
 require('./_commonjsHelpers-537d719a.js');
 
 const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--snk-tab-config__lower-bar--background-color:var(--color--disable-primary, #e5eaf0);--snk-tab-config__lower-bar--border:2px solid var(--color--disable-primary, #e5eaf0);--snk-tab-config__tab--color:var(--text--primary, #626e82);--snk-tab-config__tab--font-family:var(--font-pattern, \"Roboto\");--snk-tab-config__tab--font-size:var(--title--small, 14px);--snk-tab-config__tab--padding:var(--space--small, 6px) var(--space--medium, 12px);--snk-tab-config__tab-is-active--color:var(--color--primary, #008561);--snk-tab-config__tab-hover--color:var(--color--secondary, #383c45);--snk-tab-config__tab-is-focused--border:1px dashed var(--color--primary, #008561);--snk-tab-config__tab-label--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--snk-tab-config__tab-label--margin-bottom:var(--space--extra-small, 3px);--snk-tab-config__new-button-icon--color:var(--color--secondary-700, #1C1D22);--snk-tab-config__forward-button--background-color:var(--text--primary, #626e82);--snk-tab-config__forward-button-hover--background-color:var(--color--primary, #008561);--snk-tab-config__left-icon--padding-right:var(--space--small, 6px);--snk-tab-config__left-icon--color:var(--text--disable, #AFB6C0);--snk-tab-config__tab-label-disabled--color:var(--text--disable, #AFB6C0);--snk-tab-config__slot--margin-left:var(--space--small, 6px);display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background-color:var(--snk-tab-config__lower-bar--background-color);border:var(--snk-tab-config__lower-bar--border)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--snk-tab-config__tab--color);font-family:var(--snk-tab-config__tab--font-family);font-size:var(--snk-tab-config__tab--font-size);padding:var(--snk-tab-config__tab--padding)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out;background-color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-focused.sc-snk-tab-config{border:var(--snk-tab-config__tab-is-focused--border)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--snk-tab-config__tab-label--text-shadow);margin-bottom:var(--snk-tab-config__tab-label--margin-bottom)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__new-button-icon--color)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;width:10px;height:16px;background-color:var(--snk-tab-config__forward-button--background-color)}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--snk-tab-config__left-icon--padding-right);--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--snk-tab-config__left-icon--padding-right)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear, opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--snk-tab-config__tab-label-disabled--color)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--snk-tab-config__slot--margin-left)}";

package/dist/cjs/snk-taskbar.cjs.entry.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
 const AuthorizationConfig = require('./AuthorizationConfig-79ffae4b.js');
-const taskbarElements = require('./taskbar-elements-5e87cf44.js');
+const taskbarElements = require('./taskbar-elements-80285601.js');
 const index$1 = require('./index-f400b1d6.js');
-require('./index-fc7ca86c.js');
 
 const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}";
 
@@ -28,7 +27,8 @@ const SnkTaskbar = class {
       [taskbarElements.TaskbarElement.SAVE]: "snkTaskbar.titleSave",
       [taskbarElements.TaskbarElement.GRID_MODE]: "snkTaskbar.titleGridMode",
       [taskbarElements.TaskbarElement.FORM_MODE]: "snkTaskbar.titleFormMode",
-      [taskbarElements.TaskbarElement.CONFIGURATOR]: "snkTaskbar.titleConfigurator"
+      [taskbarElements.TaskbarElement.CONFIGURATOR]: "snkTaskbar.titleConfigurator",
+      [taskbarElements.TaskbarElement.ATTACH]: "snkTaskbar.titleAttach",
     };
     this._permissions = undefined;
     this.configName = undefined;
@@ -135,7 +135,8 @@ const SnkTaskbar = class {
     if (index > 1) {
       className += "ez-padding-left--medium";
     }
-    if (taskbarElements.TaskbarElement[def.toString()]) {
+    const taskbarElement = taskbarElements.TaskbarElement[def.toString()];
+    if (taskbarElement) {
       return taskbarElements.buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName, this.presentationMode);
     }
     else {

package/dist/cjs/taskbar-elements-80285601.js

@@ -0,0 +1,313 @@
+'use strict';
+
+const index = require('./index-21bd01e1.js');
+const index$1 = require('./index-f400b1d6.js');
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof index.getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = index.getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const store = createStore({
+  exporterProviders: {}
+});
+
+exports.TaskbarElement = void 0;
+(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";
+})(exports.TaskbarElement || (exports.TaskbarElement = {}));
+exports.AuthorizationElements = void 0;
+(function (AuthorizationElements) {
+  AuthorizationElements["UPDATE"] = "UPDATE";
+  AuthorizationElements["CLONE"] = "CLONE";
+  AuthorizationElements["REMOVE"] = "REMOVE";
+  AuthorizationElements["INSERT"] = "INSERT";
+  AuthorizationElements["CONFIGURATOR"] = "CONFIGURATOR";
+})(exports.AuthorizationElements || (exports.AuthorizationElements = {}));
+exports.VisibleWhenForbidden = void 0;
+(function (VisibleWhenForbidden) {
+  VisibleWhenForbidden["CONFIGURATOR"] = "CONFIGURATOR";
+})(exports.VisibleWhenForbidden || (exports.VisibleWhenForbidden = {}));
+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);
+  }
+};
+const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName, presentationMode) => {
+  var _a;
+  const title = getTitle(element);
+  switch (element) {
+    case exports.TaskbarElement.PREVIOUS:
+      return iconButton("chevron-left", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.NEXT:
+      return iconButton("chevron-right", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.REFRESH:
+      return iconButton("sync", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.UPDATE:
+      return iconButton("edit", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.CLONE:
+      return iconButton("copy", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.REMOVE:
+      return iconButton("delete", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.INSERT:
+      if (presentationMode === index$1.PresentationMode.PRIMARY) {
+        return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("plus", element, className, dataElementId, title, action, isEnabled);
+      }
+    case exports.TaskbarElement.CANCEL:
+      return textButton(element, className, dataElementId, title, title, action, isEnabled);
+    case exports.TaskbarElement.SAVE:
+      if (presentationMode === index$1.PresentationMode.PRIMARY) {
+        return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("save", element, className, dataElementId, title, action, isEnabled);
+      }
+    case exports.TaskbarElement.GRID_MODE:
+      return iconButton("table", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.FORM_MODE:
+      return iconButton("list", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.CONFIGURATOR:
+      return iconButton("settings-inverted", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.MORE_OPTIONS:
+      return actionButton(element, className, dataElementId, title, action, isEnabled, actions);
+    case exports.TaskbarElement.DIVIDER:
+      return index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium", "data-taskbar-divider": true });
+    case exports.TaskbarElement.DATA_EXPORTER:
+      const provider = (_a = store.get("exporterProviders")) === null || _a === void 0 ? void 0 : _a[configName];
+      return index.h("snk-data-exporter", { class: className, provider: provider, "data-element-id": dataElementId });
+    case exports.TaskbarElement.ATTACH:
+      return iconButton("anexo", element, className, dataElementId, title, action, isEnabled);
+  }
+};
+function textButton(name, className, dataElementId, text, title, action, isEnabled) {
+  return index.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 index.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 index.h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) },
+    index.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
+    ? index.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;
+}
+
+exports.buildCustomButton = buildCustomButton;
+exports.buildElem = buildElem;
+exports.store = store;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,8 @@
     "./components/snk-filter-bar/filter-list/snk-filter-list.js",
     "./components/snk-filter-bar/filter-modal/snk-filter-modal.js",
     "./components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js",
+    "./components/snk-simple-crud/snk-simple-crud.js",
+    "./components/snk-attach/snk-attach.js",
     "./components/snk-configurator/snk-configurator.js",
     "./components/snk-crud/snk-crud.js",
     "./components/snk-crud/subcomponents/snk-guides-viewer.js",
@@ -35,7 +37,6 @@
     "./components/snk-personalized-filter/subcomponents/snk-filter-param-config/snk-filter-param-config.js",
     "./components/snk-pesquisa/snk-pesquisa.js",
     "./components/snk-simple-bar/snk-simple-bar.js",
-    "./components/snk-simple-crud/snk-simple-crud.js",
     "./components/teste-pesquisa/teste-pesquisa.js"
   ],
   "compiler": {

package/dist/collection/components/snk-attach/interfaces/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-attach/snk-attach.css

@@ -0,0 +1,8 @@
+.snk-attach__header, .snk-attach__crud-section {
+  padding: 0 var(--space--lg);
+}
+
+.snk-attach__file-info {
+  padding: var(--space--small);
+    max-width: 50%;
+}