@sankhyalabs/sankhyablocks 1.3.31-beta.2 → 1.3.31-beta.20

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

@@ -0,0 +1,258 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
+export class SnkForm {
+  constructor() {
+    this._taskbarProcessor = new TaskbarProcessor({
+      "snkForm.regular": ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "INSERT"],
+      "snkForm.finish_edition": ["CANCEL", "SAVE"]
+    });
+  }
+  getFormConfig() {
+    return (this._dataState && this._dataState.insertionMode ? this._insertionFormConfig : this._editionFormConfig);
+  }
+  getInsertionHiddenFields(formConfig) {
+    const hiddenFields = [];
+    formConfig === null || formConfig === void 0 ? void 0 : formConfig.forEach(cfg => {
+      const def = this._dataUnit.getField(cfg.name);
+      if (def === null || def === void 0 ? void 0 : def.readOnly) {
+        hiddenFields.push(cfg.name);
+      }
+    });
+    return hiddenFields;
+  }
+  exitForm() {
+    if (this._dataUnit.isDirty()) {
+      this._dataUnit.cancelEdition({ after: () => this.exit.emit() });
+    }
+    else {
+      this.exit.emit();
+    }
+  }
+  getDisabledButtons() {
+    const disabled = [];
+    if (!this._dataState.hasPrevious) {
+      disabled.push("PREVIOUS");
+    }
+    if (!this._dataState.hasNext) {
+      disabled.push("NEXT");
+    }
+    return disabled;
+  }
+  loadInsertionConfig() {
+    if (this._dataUnit && this._configLoaded) {
+      this._insertionFormConfig = this._editionFormConfig.filter(fieldCfg => {
+        const def = this._dataUnit.getField(fieldCfg.name);
+        if (def === null || def === void 0 ? void 0 : def.readOnly) {
+          return false;
+        }
+        return true;
+      });
+    }
+  }
+  /**
+   * 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, this.getMessageParams());
+  }
+  getMessageParams() {
+    var _a;
+    return ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.selectedRecords) ? this._dataState.selectedRecords[0] : undefined;
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application) {
+      this._application.loadFormConfig(this.configName).then(cfg => {
+        this._configLoaded = true;
+        this._editionFormConfig = cfg;
+        this.loadInsertionConfig();
+      });
+      //Forçamos a carga dos acessos pra aproveitar a request inicial.
+      this._application.getAllAccess();
+    }
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        this._dataState = this._snkDataUnit.dataState;
+        if (this._dataUnit) {
+          this.loadInsertionConfig();
+        }
+        else {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+            this.loadInsertionConfig();
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  componentWillRender() {
+    var _a;
+    const taskbarId = ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "snkForm.finish_edition" : "snkForm.regular";
+    const disabledButtons = [];
+    if (!this._dataState || !this._dataState.hasPrevious) {
+      disabledButtons.push("PREVIOUS");
+    }
+    if (!this._dataState || !this._dataState.hasNext) {
+      disabledButtons.push("NEXT");
+    }
+    this._taskbarProcessor.process(taskbarId, this.taskbarManager, this._dataState, disabledButtons);
+  }
+  render() {
+    var _a;
+    if (!this._configLoaded || !this._dataUnit || !this._dataState) {
+      return undefined;
+    }
+    return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator }))))));
+  }
+  static get is() { return "snk-form"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome usado para guardar/recuperar as configura\u00E7\u00F5es do formul\u00E1rio"
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "recordsValidator": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "RecordValidator",
+          "resolved": "RecordValidator",
+          "references": {
+            "RecordValidator": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Validador respons\u00E1vel por checar a integridade das informa\u00E7\u00F5es do registro"
+        }
+      },
+      "actionsList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<Action>",
+          "resolved": "Action[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Action": {
+              "location": "import",
+              "path": "../snk-taskbar/snk-taskbar"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de a\u00E7\u00F5es que devem ser usadas no bot\u00E3o \"Mais op\u00E7\u00F5es\""
+        }
+      },
+      "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."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_dataUnit": {},
+      "_configLoaded": {},
+      "_dataState": {},
+      "_editionFormConfig": {},
+      "_insertionFormConfig": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "exit",
+        "name": "exit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o bot\u00E3o de voltar \u00E9 acionado"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "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 elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,18 @@
+.snk-grid__container{
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.snk-grid__header{
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.snk-grid__filter-bar{
+  width: 100%;
+}
+.snk-grid__header-divider{
+  margin-bottom: var(--space--small);
+}

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

@@ -0,0 +1,183 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
+export class SnkGrid {
+  constructor() {
+    this._topTaskbarProcessor = new TaskbarProcessor({
+      "snkGridTopTaskbar": ["FORM_MODE", "CONFIG_GRID", "INSERT"]
+    });
+    this._headerTaskbarProcessor = new TaskbarProcessor({
+      "snkGridHeaderTaskbar.unselected": ["REFRESH"],
+      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
+    });
+  }
+  actionClickHandler(evt) {
+    if (evt.detail === TaskbarElement.CONFIG_GRID && this._grid) {
+      this._grid.openGridConfig();
+    }
+  }
+  saveConfig(config) {
+    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (snkApplication) {
+      snkApplication.saveGridConfig(config);
+    }
+  }
+  componentWillLoad() {
+    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (snkApplication) {
+      snkApplication.loadGridConfig(this.configName).then(cfg => {
+        this._gridConfig = cfg;
+        this._configLoaded = true;
+      });
+      //Forçamos a carga dos acessos pra aproveitar a request inicial.
+      snkApplication.getAllAccess();
+    }
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        if (!this._dataUnit) {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  componentWillRender() {
+    const headerTaskbarId = this._dataState && this._dataState.selectedRecords.length > 0 ? "snkGridHeaderTaskbar.selected" : "snkGridHeaderTaskbar.unselected";
+    this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
+    this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit) {
+      return undefined;
+    }
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { class: "snk-grid__filter-bar ez-align--top" }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", onActionClick: evt => this.actionClickHandler(evt), key: "topTaskbar", dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: evt => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit() }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" }))));
+  }
+  static get is() { return "snk-grid"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-grid.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome usado para salvar/recuperar a configura\u00E7\u00E3o"
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "actionsList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<Action>",
+          "resolved": "Action[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Action": {
+              "location": "import",
+              "path": "../snk-taskbar/snk-taskbar"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de a\u00E7\u00F5es que devem ser usadas no bot\u00E3o \"Mais op\u00E7\u00F5es\""
+        }
+      },
+      "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."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_dataUnit": {},
+      "_configLoaded": {},
+      "_dataState": {},
+      "_gridConfig": {}
+    };
+  }
+  static get events() {
+    return [{
+        "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": {}
+        }
+      }, {
+        "method": "gridDoubleClick",
+        "name": "gridDoubleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido sempre que houver duplo click na grade"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -1,30 +1,39 @@
 :host {
+  /* general */
   /*@doc Define o tamanho da fonte do componente.*/
   --snk-pesquisa--font-size: var(--text--medium, 14px);
-  
   /*@doc Define a família da fonte do componente.*/
   --snk-pesquisa--font-family: var(--font-pattern, Arial);
-  
   /*@doc Define o peso da fonte do componente.*/
   --snk-pesquisa--font-weight: var(--text-weight--medium, 400);
   
+  /* records */
   /*@doc Define a cor da fonte do indicador de registros do componente.*/
   --snk-pesquisa__records--color: var(--text--primary, #626e82);
-  
   /*@doc Define o espaçamento vertical do indicador de registros do componente.*/
   --snk-pesquisa__records--padding-vertical: var(--space--medium, 12px);
 
+  /* content */
   /*@doc Define o espaçamento da direita no conteúdo do componente.*/
   --snk-pesquisa__content--padding-right: var(--space--small, 6px);
 
+  /* scrollbar */
   /*@doc Define a cor da barra de rolagem do componente.*/
-  --snk-pesquisa__content-scrollbar--background-color: var(--text--primary, #626e82);
-
+  --snk-pesquisa__content-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --snk-pesquisa__content-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
   /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --snk-pesquisa__content-scrollbar--border-radius: var(--border--radius-medium, 12px);
-
+  --snk-pesquisa__content-scrollbar--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a largura da barra de rolagem do componente.*/
-  --snk-pesquisa__content-scrollbar--width: var(--space--medium, 12px) display: block;
+  --snk-pesquisa__content-scrollbar--width: var(--space--medium, 12px);
+
+  /* buttons */
+  /*@doc Define a cor do botão de pesquisa do componente.*/
+  --snk-pesquisa__btn--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
+  --snk-pesquisa__btn-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
+  --snk-pesquisa__btn-hover--color: var(--color--primary, #4e4e4e);
 
   max-height: 100%;
   height: 100%;
@@ -47,8 +56,11 @@
   padding-right: 4px;
 }
 
-.snk-pesquisa__input-close {
-  cursor: pointer;
+.snk-pesquisa__input ez-icon {
+  --ez-icon--color: inherit;
+
+  /*public*/
+  font-weight: var(--text-weight--large, 600);
 }
 
 .snk-pesquisa__content {
@@ -56,13 +68,15 @@
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
+  scrollbar-width: thin;
 
   /*public*/
+  scrollbar-color: var(--snk-pesquisa__content-scrollbar--background-color-primary) var(--snk-pesquisa__content-scrollbar--background-color-secondary);
   padding-right: var(--snk-pesquisa__content--padding-right);
 }
 
 .snk-pesquisa__content::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--snk-pesquisa__content-scrollbar--background-color-secondary);
 
   /*public*/
   border-radius: var(--snk-pesquisa__content-scrollbar--border-radius);
@@ -70,12 +84,12 @@
 
 .snk-pesquisa__content::-webkit-scrollbar-thumb {
   /*public*/
-  background-color: var(--snk-pesquisa__content-scrollbar--background-color);
+  background-color: var(--snk-pesquisa__content-scrollbar--background-color-primary);
   border-radius: var(--snk-pesquisa__content-scrollbar--border-radius);
 }
 
 .snk-pesquisa__content::-webkit-scrollbar {
-  background-color: #f0f2f5;
+  background-color: var(--snk-pesquisa__content-scrollbar--background-color-secondary);
 
   /*public*/
   width: var(--snk-pesquisa__content-scrollbar--width);
@@ -91,4 +105,33 @@
   color: var(--snk-pesquisa__records--color);
   padding-bottom: var(--snk-pesquisa__records--padding-vertical);
   padding-top: var(--snk-pesquisa__records--padding-vertical);
+}
+
+.snk-pesquisa__btn {
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn--color);
+}
+
+.snk-pesquisa__btn:disabled {
+  cursor: unset;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn-disabled--color);
+}
+
+.snk-pesquisa__btn:disabled:hover {
+  cursor: unset;
+
+  /*public*/
+  color: var(--snk-pesquisa__btn-disabled--color);
+}
+
+.snk-pesquisa__btn:hover {
+  /*public*/
+  color: var(--snk-pesquisa__btn-hover--color);
 }