@sankhyalabs/sankhyablocks 1.4.0-beta.1 → 1.4.0-beta.11

package/dist/components/snk-crud.js

@@ -1,33 +1,47 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { A as ApplicationContext } from './index2.js';
-import { d as defineCustomElement$8 } from './snk-filter-bar2.js';
-import { d as defineCustomElement$7 } from './snk-filter-detail2.js';
-import { d as defineCustomElement$6 } from './snk-filter-item2.js';
-import { d as defineCustomElement$5 } from './snk-filter-list2.js';
-import { d as defineCustomElement$4 } from './snk-form2.js';
-import { d as defineCustomElement$3 } from './snk-grid2.js';
-import { d as defineCustomElement$2 } from './snk-taskbar2.js';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { V as VIEW_MODE } from './constants.js';
+import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
+import { d as defineCustomElement$f } from './snk-config-modal2.js';
+import { d as defineCustomElement$e } from './snk-config-options2.js';
+import { d as defineCustomElement$d } from './snk-configurator2.js';
+import { d as defineCustomElement$c } from './snk-field-config2.js';
+import { d as defineCustomElement$b } from './snk-filter-bar2.js';
+import { d as defineCustomElement$a } from './snk-filter-detail2.js';
+import { d as defineCustomElement$9 } from './snk-filter-item2.js';
+import { d as defineCustomElement$8 } from './snk-filter-list2.js';
+import { d as defineCustomElement$7 } from './snk-filter-modal2.js';
+import { d as defineCustomElement$6 } from './snk-form2.js';
+import { d as defineCustomElement$5 } from './snk-form-config2.js';
+import { d as defineCustomElement$4 } from './snk-grid2.js';
+import { d as defineCustomElement$3 } from './snk-tab-config2.js';
 
 const snkCrudCss = ".sc-snk-crud-h{display:flex;flex-direction:column;height:100%;width:100%}";
 
-const GRID_MODE = 0;
-const FORM_MODE = 1;
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
 const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
   }
+  /**
+   * Usado para alternar a visão entre GRID e FORM externamente.
+   */
+  async goToView(mode) {
+    this.executeAction(mode);
+  }
   async gridToForm(keepFormMode = false) {
-    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE;
-    this._viewStack.show(FORM_MODE);
+    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE.index;
+    this._viewStack.show(FORM_MODE.index);
   }
   async executeAction(act) {
-    if (act === "GRID_MODE") {
-      this._viewStack.show(GRID_MODE);
+    if (act === TaskbarElement.GRID_MODE) {
+      this._viewStack.show(GRID_MODE.index);
     }
-    else if (act === "FORM_MODE" || act === "UPDATE") {
-      this.gridToForm(act !== "UPDATE");
+    else if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE) {
+      this.gridToForm(act !== TaskbarElement.UPDATE);
     }
   }
   insertionModeHandler() {
@@ -35,7 +49,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   cancelHandler() {
     if (this._backToGrid) {
-      this._viewStack.show(GRID_MODE);
+      this._viewStack.show(GRID_MODE.index);
     }
   }
   componentWillLoad() {
@@ -65,7 +79,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref }, h("stack-item", null, h("snk-grid", { configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { configName: this.configName, actionsList: this.actionsList, onExit: () => this._viewStack.show(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" })))));
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-configurator-parent": "snkConfigurator" }, h("stack-item", null, h("snk-grid", { configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { configName: this.configName, actionsList: this.actionsList, onExit: () => this._viewStack.show(GRID_MODE.index), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" })))));
   }
   get _element() { return this; }
   static get style() { return snkCrudCss; }
@@ -74,47 +88,83 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "actionsList": [16],
     "taskbarManager": [16],
     "recordsValidator": [16],
-    "statusResolver": [8, "status-resolver"],
+    "statusResolver": [16],
     "_dataUnit": [32],
-    "_dataState": [32]
+    "_dataState": [32],
+    "goToView": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-crud", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-form", "snk-grid", "snk-taskbar"];
+  const components = ["snk-crud", "snk-config-modal", "snk-config-options", "snk-configurator", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal", "snk-form", "snk-form-config", "snk-grid", "snk-tab-config", "snk-taskbar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-crud":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SnkCrud$1);
       }
       break;
+    case "snk-config-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "snk-config-options":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "snk-configurator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "snk-field-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
     case "snk-filter-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$b();
       }
       break;
     case "snk-filter-detail":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$a();
       }
       break;
     case "snk-filter-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$9();
       }
       break;
     case "snk-filter-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$8();
+      }
+      break;
+    case "snk-filter-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
       }
       break;
     case "snk-form":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
+      }
+      break;
+    case "snk-form-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
       }
       break;
     case "snk-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "snk-tab-config":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/snk-data-unit.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as Action, A as ApplicationContext } from './index2.js';
-import { A as ApplicationUtils, D as DialogType, O as OperationMap } from './SnkMessageBuilder.js';
+import { Action, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
+import { O as OperationMap } from './SnkMessageBuilder.js';
 
 const snkDataUnitCss = ".sc-snk-data-unit-h{display:flex;flex-direction:column;height:100%}";
 
@@ -17,10 +18,6 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Determina quantas linhas são retornadas por página
      */
     this.pageSize = 150;
-    /**
-     * Quando ativada essa propriedade faz com que haja uma carga imediata no DataUnit
-     */
-    this.autoLoad = true;
     this._dataUnitObserver = (action) => {
       const duState = {
         insertionMode: false,
@@ -180,7 +177,7 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
             }
             else {
               const removeConfirmationTitle = this.getMessage("snkDataUnit.removeConfirmationTitle");
-              ApplicationUtils.confirm(removeConfirmationTitle, removeConfirmation, "delete", DialogType.CRITICAL, { btnConfirmDanger: true })
+              ApplicationUtils.confirm(removeConfirmationTitle, removeConfirmation, "delete", DialogType.WARN)
                 .then((result) => resolve(result ? action : undefined));
             }
           }
@@ -242,11 +239,6 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         while (resolver = this._onDataUnitResolve.pop()) {
           resolver(this.dataUnit);
         }
-        if (this.autoLoad) {
-          setTimeout(() => {
-            this.dataUnit.loadData();
-          }, 500); //TODO: Ajustar para aguardar filterProvider do dataunit estar pronto.
-        }
       }
     }
   }
@@ -280,7 +272,6 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "dataUnit": [1040],
     "beforeSave": [16],
     "afterSave": [16],
-    "autoLoad": [4, "auto-load"],
     "getDataUnit": [64]
   }]);
 function defineCustomElement$1() {

package/dist/components/snk-field-config.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkFieldConfig extends Components.SnkFieldConfig, HTMLElement {}
+export const SnkFieldConfig: {
+  prototype: SnkFieldConfig;
+  new (): SnkFieldConfig;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-field-config.js

@@ -0,0 +1,6 @@
+import { S as SnkFieldConfig$1, d as defineCustomElement$1 } from './snk-field-config2.js';
+
+const SnkFieldConfig = SnkFieldConfig$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkFieldConfig, defineCustomElement };

package/dist/components/snk-field-config2.js

@@ -0,0 +1,70 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { A as ACTION_CONFIG } from './constants.js';
+
+const snkFieldConfigCss = ".sc-snk-field-config-h{--snk-field-config--height:42px;--snk-field-config--width:100%;--snk-field-config__icon--width:48px;--snk-field-config--height--slim:32px;--snk-field-config--border-radius:var(--border--radius-medium, 12px);--snk-field-config--font-size:var(--text--medium, 14px);--snk-field-config--font-family:var(--font-pattern, Arial);--snk-field-config--font-weight:var(--text-weight--medium, 400);--snk-field-config--color:var(--title--primary, #000);--snk-field-config__input--background-color:var(--background--medium, #e0e0e0);--snk-field-config__input--border:var(--border--medium, 2px solid);--snk-field-config__input--border-color:var(--background--xlight, #fff);--snk-field-config__required--color:var(--color--error, #FF0000);--snk-field-config__transition--visibility:var(--transition, 0.2s linear);--snk-field-config__transition--opacity:var(--transition, 0.15s linear);display:flex;flex-wrap:wrap;position:relative;width:var(--snk-field-config--width)}.field-config.sc-snk-field-config{width:100%;box-sizing:border-box;display:flex;align-items:center;padding-left:var(--space--medium, 6px);font-weight:var(--snk-field-config--font-weight);height:var(--snk-field-config--height);border-radius:var(--snk-field-config--border-radius);font-family:var(--snk-field-config--font-family);font-size:var(--snk-field-config--font-size);border:var(--snk-field-config__input--border);border-color:var(--snk-field-config__input--border-color);background-color:var(--snk-field-config__input--background-color);color:var(--snk-field-config--color)}.field-config__config-popover.sc-snk-field-config{width:40px;margin-left:auto;z-index:var(--more-visible, 2)}.field-config__required-label.sc-snk-field-config{padding-left:var(--space--extra-small, 3px);color:var(--snk-field-config__required--color)}.field-config__add.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options--is-active.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config__remove-icon.sc-snk-field-config{margin-right:-15px}.field-config.sc-snk-field-config:hover .field-config__options.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config.sc-snk-field-config:hover .field-config__add.sc-snk-field-config{visibility:visible;opacity:1}.field-config__draggable.sc-snk-field-config{padding-right:var(--space--small, 6px)}.field-config__config-outer-arrow.sc-snk-field-config{background-color:var(--color--secondary-200);clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px;padding-top:3px;border-bottom:1px solid #FFFFFF}.field-config__config-inner-arrow.sc-snk-field-config{background-color:#FFFFFF;clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px}.ez-box__container.sc-snk-field-config ez-collapsible-box.sc-snk-field-config{--snk-collapsible-box__header--padding-left:6px}ez-icon.sc-snk-field-config{--snk-icon--color:var(--snk-field-config--color)}ez-popover.sc-snk-field-config{--snk-popover__box--background-color:transparent;--snk-popover__box--box-shadow:none}.field-config__options.sc-snk-field-config ez-button.sc-snk-field-config{--snk-button--background-color:transparent;--snk-button--focus--border:none;--snk-button--focus--box-shadow:none}";
+
+const SnkFieldConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.ezClickIcon = createEvent(this, "ezClickIcon", 7);
+    /**
+     * Define se o popover de configuração está ativo.
+     */
+    this.isConfigActive = false;
+    /**
+     * Define se o componente está em modo de inserção
+     */
+    this.modeInsertion = true;
+  }
+  handleAction(evt, type) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const field = this.fieldConfig;
+    if (type !== ACTION_CONFIG.configuration) {
+      field.group = undefined;
+    }
+    this.ezClickIcon.emit({ field, type });
+  }
+  /**
+   * 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-form.msg.ts"
+   */
+  getMessage(key) {
+    return this._application.messagesBuilder.getMessage(key, {});
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    if (this.fieldConfig == undefined) {
+      return;
+    }
+    return (h(Host, null, h("div", { class: "field-config" }, h("div", { class: "field-config__draggable" }, h("ez-icon", { iconName: "drag-indicator", size: "small" })), h("div", null, this.fieldConfig.label, this.fieldConfig.required && h("span", { class: "field-config__required-label" }, "*")), this.modeInsertion ?
+      h("div", { class: "field-config__add" }, h("ez-button", { onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.add), mode: "icon", class: "ez-button--tertiary", iconName: "plus", size: "large", title: this.getMessage("snkFieldConfig.titleAdd") })) :
+      h("div", { class: "field-config__options" + (this.isConfigActive ? " field-config__options--is-active" : " ") }, h("ez-button", { mode: "icon", class: "ez-button--tertiary field-config__remove-icon", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.remove), iconName: "minus", size: "large", title: this.getMessage("snkFieldConfig.titleRemove") }), h("ez-button", { id: "buttonConfig_" + this.fieldConfig.name, mode: "icon", class: "ez-button--tertiary", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.configuration), iconName: this.isConfigActive ? "chevron-up" : "settings-inverted", size: "large", title: this.getMessage("snkFieldConfig.titleConfigurations") }))), this.isConfigActive && h("div", { class: "field-config__config-popover" }, h("div", { class: "field-config__config-outer-arrow" }, h("div", { class: "field-config__config-inner-arrow" })))));
+  }
+  static get style() { return snkFieldConfigCss; }
+}, [2, "snk-field-config", {
+    "isConfigActive": [16],
+    "fieldConfig": [16],
+    "modeInsertion": [516, "mode-insertion"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-field-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-field-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFieldConfig);
+      }
+      break;
+  } });
+}
+
+export { SnkFieldConfig as S, defineCustomElement as d };