@sankhyalabs/sankhyablocks 8.14.1 → 8.15.0-dev.2

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

@@ -0,0 +1,301 @@
+import { h, Host } from '@stencil/core';
+export class TaskbarActionsButton {
+  constructor() {
+    this._showDropdown = false;
+    this.title = undefined;
+    this.enabled = undefined;
+    this.actions = undefined;
+  }
+  async handleKeyDown(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      await this.hideActions();
+    }
+  }
+  /**
+   * Exibe a lista de ações.
+   */
+  async showActions() {
+    this._showDropdown = true;
+    requestAnimationFrame(() => {
+      this._element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+    });
+  }
+  /**
+   * Esaconde a lista de ações.
+   */
+  async hideActions() {
+    this._showDropdown = false;
+  }
+  /**
+   * Informa se a lista de ações está aberta.
+   */
+  async isOpened() {
+    return this._showDropdown;
+  }
+  controlDropdown() {
+    this._showDropdown = !this._showDropdown;
+  }
+  loadItems() {
+    return this.actions.filter(action => action !== undefined).map(action => {
+      var _a;
+      return {
+        id: action.value,
+        label: action.label,
+        value: action.value,
+        type: (_a = action.type) !== null && _a !== void 0 ? _a : 'item',
+        children: action.children,
+        iconName: action.iconName,
+        subAction: action.subAction,
+        group: action.group,
+        disableCloseOnSelect: action.disableCloseOnSelect,
+      };
+    });
+  }
+  canShowDropdown() {
+    var _a;
+    return this._showDropdown && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  onSelectAction(iAction) {
+    const selectedAction = this.actions.find(action => action.value === iAction.id);
+    this.taskbarActionSelected.emit(selectedAction);
+    if (!selectedAction.disableCloseOnSelect) {
+      this._showDropdown = false;
+    }
+  }
+  dropdownItemBuilder(item, _level) {
+    const itemAction = this.actions.find(action => action.value === item.id);
+    if (!itemAction || !itemAction.itemBuilder) {
+      return undefined;
+    }
+    const customContent = itemAction.itemBuilder(this._element, itemAction);
+    if (typeof customContent === 'string') {
+      return h("div", { innerHTML: customContent });
+    }
+    return customContent;
+  }
+  /**
+   * Existem algumas actions que precisam ser inicializadas assim que o componente é carregado,
+   * pois necessitam de algumas informações, como por exemplo a referência do elemento taskbar-actions-button na tela.
+   * É o caso do searchColumn/searhField
+   */
+  initializeEagerItems() {
+    var _a;
+    (_a = this.actions) === null || _a === void 0 ? void 0 : _a.forEach(action => {
+      var _a;
+      if (action && action.eagerInitialize && action.itemBuilder) {
+        (_a = action.itemBuilder) === null || _a === void 0 ? void 0 : _a.call(action, this._element, action);
+      }
+    });
+  }
+  componentDidLoad() {
+    this.initializeEagerItems();
+  }
+  componentDidRender() {
+    if (this._showDropdown) {
+      this.taskbarActionsOpened.emit(this._element);
+    }
+  }
+  disconnectedCallback() {
+    this.taskbarActionsButtonDisconnected.emit();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `ez-padding-left--medium ${this.canShowDropdown() ? ' ez-elevation--16' : ''}` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { 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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["taskbar-actions-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["taskbar-actions-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "title": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto que ser\u00E1 exibido no bot\u00E3o"
+        },
+        "attribute": "title",
+        "reflect": false
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o componente."
+        },
+        "attribute": "enabled",
+        "reflect": false
+      },
+      "actions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<Action>",
+          "resolved": "Action[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Action": {
+              "location": "import",
+              "path": "../../snk-taskbar"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a lista de a\u00E7\u00F5es."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_showDropdown": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "taskbarActionSelected",
+        "name": "taskbarActionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao selecionar uma a\u00E7\u00E3o"
+        },
+        "complexType": {
+          "original": "Action",
+          "resolved": "Action",
+          "references": {
+            "Action": {
+              "location": "import",
+              "path": "../../snk-taskbar"
+            }
+          }
+        }
+      }, {
+        "method": "taskbarActionsOpened",
+        "name": "taskbarActionsOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao mostrar a lista de a\u00E7\u00F5es"
+        },
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "taskbarActionsButtonDisconnected",
+        "name": "taskbarActionsButtonDisconnected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando componente \u00E9 desconectado da DOM"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showActions": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Exibe a lista de a\u00E7\u00F5es.",
+          "tags": []
+        }
+      },
+      "hideActions": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Esaconde a lista de a\u00E7\u00F5es.",
+          "tags": []
+        }
+      },
+      "isOpened": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Informa se a lista de a\u00E7\u00F5es est\u00E1 aberta.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -86,7 +86,7 @@ export const buildElem = (element, className, dataElementId, getTitle, action, i
     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);
+      return actionButton(element, dataElementId, title, isEnabled, actions, action);
     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:
@@ -107,8 +107,8 @@ function iconButton(iconName, name, className, dataElementId, title, action, isE
 function iconTextButton(iconName, name, className, dataElementId, text, title, action, isEnabled) {
   return h("ez-button", { key: dataElementId, 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) {
+function actionButton(element, dataElementId, title, isEnabled, actions, action) {
   return actions && actions.length > 0
-    ? h("ez-actions-button", { key: dataElementId, title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    ? h("taskbar-actions-button", { key: dataElementId, title: title, "data-element-id": dataElementId, enabled: isEnabled(element), actions: actions, onTaskbarActionSelected: (evt) => action(evt.detail.value) })
     : undefined;
 }

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

@@ -546,4 +546,3 @@ export class SnkTaskbar {
       }];
   }
 }
-;

package/dist/collection/components/snk-taskbar/subcomponents/field-search.js

@@ -1,4 +1,31 @@
 import { h } from '@stencil/core';
+const EVENT_NAME = 'taskbarActionsOpened';
 export const buildFieldSearch = (action, optionLoader, onSelectField) => {
-  return h("ez-search", { class: "ez-actions-button--bottom-padding", canShowError: "false", showSelectedValue: "false", showOptionValue: "false", suppressEmptyOption: "true", label: action.label, value: action.value, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+  return h("ez-search", { class: 'ez-actions-button--bottom-padding', canShowError: 'false', showSelectedValue: 'false', showOptionValue: 'false', suppressEmptyOption: 'true', label: action.label, value: '', optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+};
+async function focusOnFieldSerch(field) {
+  requestAnimationFrame(async () => {
+    if (field) {
+      const realElement = field['$elm$'];
+      if (!realElement)
+        return;
+      realElement.value = null;
+      await realElement.setFocus();
+    }
+  });
+}
+export const openFieldSearch = async (moreOptions, field) => {
+  if (!moreOptions) {
+    return;
+  }
+  if ((await moreOptions.isOpened())) {
+    await focusOnFieldSerch(field);
+    return;
+  }
+  const eventHandler = () => {
+    focusOnFieldSerch(field);
+    moreOptions.removeEventListener(EVENT_NAME, eventHandler);
+  };
+  moreOptions.addEventListener(EVENT_NAME, eventHandler);
+  await moreOptions.showActions();
 };

package/dist/components/field-search.js

@@ -87,8 +87,35 @@ class SnkMultiSelectionListDataSource {
   }
 }
 
+const EVENT_NAME = 'taskbarActionsOpened';
 const buildFieldSearch = (action, optionLoader, onSelectField) => {
-  return h("ez-search", { class: "ez-actions-button--bottom-padding", canShowError: "false", showSelectedValue: "false", showOptionValue: "false", suppressEmptyOption: "true", label: action.label, value: action.value, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+  return h("ez-search", { class: 'ez-actions-button--bottom-padding', canShowError: 'false', showSelectedValue: 'false', showOptionValue: 'false', suppressEmptyOption: 'true', label: action.label, value: '', optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
+};
+async function focusOnFieldSerch(field) {
+  requestAnimationFrame(async () => {
+    if (field) {
+      const realElement = field['$elm$'];
+      if (!realElement)
+        return;
+      realElement.value = null;
+      await realElement.setFocus();
+    }
+  });
+}
+const openFieldSearch = async (moreOptions, field) => {
+  if (!moreOptions) {
+    return;
+  }
+  if ((await moreOptions.isOpened())) {
+    await focusOnFieldSerch(field);
+    return;
+  }
+  const eventHandler = () => {
+    focusOnFieldSerch(field);
+    moreOptions.removeEventListener(EVENT_NAME, eventHandler);
+  };
+  moreOptions.addEventListener(EVENT_NAME, eventHandler);
+  await moreOptions.showActions();
 };
 
-export { SnkMultiSelectionListDataSource as S, TaskbarProcessor as T, buildFieldSearch as b };
+export { SnkMultiSelectionListDataSource as S, TaskbarProcessor as T, buildFieldSearch as b, openFieldSearch as o };

package/dist/components/index.d.ts

@@ -49,6 +49,7 @@ export { SnkSimpleBar as SnkSimpleBar } from '../types/components/snk-simple-bar
 export { SnkSimpleCrud as SnkSimpleCrud } from '../types/components/snk-simple-crud/snk-simple-crud';
 export { SnkTabConfig as SnkTabConfig } from '../types/components/snk-form/subcomponents/snk-tab-config/snk-tab-config';
 export { SnkTaskbar as SnkTaskbar } from '../types/components/snk-taskbar/snk-taskbar';
+export { TaskbarActionsButton as TaskbarActionsButton } from '../types/components/snk-taskbar/elements/taskbar-actions-button/taskbar-actions-button';
 export { TestePesquisa as TestePesquisa } from '../types/components/teste-pesquisa/teste-pesquisa';
 
 /**

package/dist/components/index.js

@@ -49,4 +49,5 @@ export { SnkSimpleBar, defineCustomElement as defineCustomElementSnkSimpleBar }
 export { SnkSimpleCrud, defineCustomElement as defineCustomElementSnkSimpleCrud } from './snk-simple-crud.js';
 export { SnkTabConfig, defineCustomElement as defineCustomElementSnkTabConfig } from './snk-tab-config.js';
 export { SnkTaskbar, defineCustomElement as defineCustomElementSnkTaskbar } from './snk-taskbar.js';
+export { TaskbarActionsButton, defineCustomElement as defineCustomElementTaskbarActionsButton } from './taskbar-actions-button.js';
 export { TestePesquisa, defineCustomElement as defineCustomElementTestePesquisa } from './teste-pesquisa.js';

package/dist/components/snk-attach2.js

@@ -1,15 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { ApplicationContext, DataType, Action } from '@sankhyalabs/core';
 import { D as DataFetcher } from './DataFetcher.js';
-import { a as SaveErrorsEnum, d as defineCustomElement$7 } from './snk-actions-button2.js';
+import { a as SaveErrorsEnum, d as defineCustomElement$8 } from './snk-actions-button2.js';
 import { V as VIEW_MODE } from './constants.js';
 import { a as PreloadManager, D as DataUnitFetcher } from './dataunit-fetcher.js';
-import { T as TaskbarElement, d as defineCustomElement$1 } from './snk-taskbar2.js';
-import { d as defineCustomElement$6 } from './snk-data-exporter2.js';
-import { d as defineCustomElement$5 } from './snk-data-unit2.js';
-import { d as defineCustomElement$4 } from './snk-exporter-email-sender2.js';
-import { d as defineCustomElement$3 } from './snk-simple-bar2.js';
-import { d as defineCustomElement$2 } from './snk-simple-crud2.js';
+import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
+import { d as defineCustomElement$7 } from './snk-data-exporter2.js';
+import { d as defineCustomElement$6 } from './snk-data-unit2.js';
+import { d as defineCustomElement$5 } from './snk-exporter-email-sender2.js';
+import { d as defineCustomElement$4 } from './snk-simple-bar2.js';
+import { d as defineCustomElement$3 } from './snk-simple-crud2.js';
+import { d as defineCustomElement$1 } from './taskbar-actions-button2.js';
 
 class AttachFetcher {
   constructor(entityName, registerKey, dataUnitName) {
@@ -463,7 +464,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-attach", "snk-actions-button", "snk-data-exporter", "snk-data-unit", "snk-exporter-email-sender", "snk-simple-bar", "snk-simple-crud", "snk-taskbar"];
+  const components = ["snk-attach", "snk-actions-button", "snk-data-exporter", "snk-data-unit", "snk-exporter-email-sender", "snk-simple-bar", "snk-simple-crud", "snk-taskbar", "taskbar-actions-button"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-attach":
       if (!customElements.get(tagName)) {
@@ -472,35 +473,40 @@ function defineCustomElement() {
       break;
     case "snk-actions-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "snk-data-exporter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "snk-data-unit":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "snk-exporter-email-sender":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "snk-simple-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "snk-simple-crud":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "snk-taskbar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "taskbar-actions-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }