@sankhyalabs/sankhyablocks 8.16.0-dev.11 → 8.16.0-dev.110

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

@@ -0,0 +1,73 @@
+import { h } from '@stencil/core';
+import { FormConfigFetcher } from '../../lib';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+const FORM_COL_CONFIG_PREFIX = 'formColCfg.';
+export class SnkLayoutFormConfig {
+  constructor() {
+    this._formConfigFetcher = new FormConfigFetcher();
+    this.layoutType = FormLayout.CASCADE;
+  }
+  /**
+   * Salva o tipo de layout escolhido. Sem retorno.
+   */
+  async save() {
+    this._LayoutFormConfigSingleton.setConfig(this.layoutType);
+    this._formConfigFetcher.saveLayoutFormConfig(FORM_COL_CONFIG_PREFIX + this._resourceID, { config: this.layoutType, newConfig: true });
+  }
+  async componentWillLoad() {
+    const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._LayoutFormConfigSingleton = await (_application === null || _application === void 0 ? void 0 : _application.getLayoutFormConfig());
+    this._resourceID = await (_application === null || _application === void 0 ? void 0 : _application.getResourceID());
+    this.setLayoutInit();
+  }
+  setLayoutInit() {
+    if (!this._LayoutFormConfigSingleton)
+      return;
+    const { config } = this._LayoutFormConfigSingleton;
+    this.layoutType = Number(config) in FormLayout ? Number(config) : FormLayout.CASCADE;
+  }
+  toggleLayout(key) {
+    this.layoutType = key;
+  }
+  render() {
+    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: "Layout em cascata", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o organizados em uma coluna \u00FAnica.")), h("div", null, h("ez-check", { label: "Layout lado a lado", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o dispostos lado a lado, ajustando-se automaticamente \u00E0 largura da tela."))));
+  }
+  static get is() { return "snk-layout-form-config"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-layout-form-config.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-layout-form-config.css"]
+    };
+  }
+  static get states() {
+    return {
+      "layoutType": {}
+    };
+  }
+  static get methods() {
+    return {
+      "save": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Salva o tipo de layout escolhido. Sem retorno.",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/snk-layout-form-config/snk-view-representation/snk-view-representation.css

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+}
+
+.svg-container {
+    display: flex;
+    width: 185px;
+    height: 125px;
+    border-radius: 8px;
+    background-color: #f7f7f7;
+    padding: 10px 12px;
+    box-sizing: border-box;
+    position: relative;
+  }
+  
+  .svg-container__background{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .svg-container__header {
+    display: flex;
+    gap: 2px;
+    margin-bottom: 12px;
+  }
+  
+  .svg-container__circle {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+  }
+  
+  .svg-container__circle--red {
+    background-color: #ed7678;
+  }
+  
+  .svg-container__circle--yellow {
+    background-color: #eddb76;
+  }
+  
+  .svg-container__circle--green {
+    background-color: #7ad08e;
+  }
+  
+  .svg-container__section{
+    width: 100%;
+  }
+  
+  .svg-container__collumn {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .svg-container__inline {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+  }
+  
+  .svg-container__line {
+    height: 13px;
+    border-radius: 4px;
+    background-color: #d9d9d9;
+    margin-bottom: 4px;
+  }
+  
+  .svg-container__line--short {
+    width: 39.68px;
+    height: 7px;
+    border-radius: 3.5px;
+  }
+  
+  .svg-container__line--long {
+    width: 100%;
+  }
+  

package/dist/collection/components/snk-layout-form-config/snk-view-representation/snk-view-representation.js

@@ -0,0 +1,57 @@
+import { h } from '@stencil/core';
+import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+export class SnkViewRepresentation {
+  constructor() {
+    this.mode = FormLayout.SIDE_BY_SIDE;
+  }
+  renderCascadeLayout() {
+    return (h("div", { class: "svg-container__collumn" }, [...Array(3)].map(() => (h("div", { class: "svg-container__section" }, h("div", { class: "svg-container__line svg-container__line--short" }), h("div", { class: "svg-container__line svg-container__line--long" }))))));
+  }
+  renderSideBySideLayout() {
+    return (h("div", { class: "svg-container__inline" }, [...Array(2)].map(() => this.renderCascadeLayout())));
+  }
+  render() {
+    return (h("div", { class: "svg-container ez-margin-left--small" }, h("div", { class: "svg-container__background" }, h("div", { class: "svg-container__header" }, h("div", { class: "svg-container__circle svg-container__circle--red" }), h("div", { class: "svg-container__circle svg-container__circle--yellow" }), h("div", { class: "svg-container__circle svg-container__circle--green" })), this.mode === FormLayout.CASCADE
+      ? this.renderCascadeLayout()
+      : this.renderSideBySideLayout())));
+  }
+  static get is() { return "snk-view-representation"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-view-representation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-view-representation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mode": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "FormLayout",
+          "resolved": "FormLayout",
+          "references": {
+            "FormLayout": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/collection/utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o layout do componente: 'CASCADE' ou 'SIDE_BY_SIDE'"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "FormLayout.SIDE_BY_SIDE"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,9 @@
+:host {
+  background: var(--background--xlight, #FFF);
+  overflow-x: auto;
+}
+
+ez-grid {
+  --ez-grid__container--shadow: none;
+  --ez-grid__header--shadow:none;
+}

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

@@ -0,0 +1,226 @@
+import { h, Host } from '@stencil/core';
+import InMemoryLoader from '../../../lib/dataUnit/InMemoryLoader';
+import { PesquisaFetcher } from '../../../lib';
+export class PesquisaGrid {
+  constructor() {
+    this._pesquisaFetcher = new PesquisaFetcher();
+    this.metadata = undefined;
+    this.dataSource = [];
+    this.pkField = undefined;
+    this.descriptionField = undefined;
+    this.entityName = undefined;
+    this.shouldLoadConfig = false;
+    this._gridConfig = undefined;
+    this._inMemoryLoader = undefined;
+    this._dataunit = undefined;
+  }
+  observeDataSource(newValue) {
+    if (!this._inMemoryLoader || !this._dataunit || !newValue)
+      return;
+    this._inMemoryLoader.records = [...newValue];
+  }
+  observeMetadata() {
+    this.initializeDataUnit();
+  }
+  async observeShouldLoadConfig(newValue) {
+    if (!newValue || this._gridConfig)
+      return;
+    await this.loadGridConfig();
+  }
+  async loadGridConfig() {
+    this._gridConfig = await this._pesquisaFetcher.loadPesquisaGridConfig(this.entityName);
+  }
+  initializeDataUnit() {
+    var _a;
+    if (!this.metadata || this._dataunit)
+      return;
+    this._inMemoryLoader = new InMemoryLoader(this.metadata, (_a = this.dataSource) !== null && _a !== void 0 ? _a : []);
+    this._dataunit = this._inMemoryLoader.dataUnit;
+    this._dataunit.pageSize = 0;
+  }
+  handleDbClick(record) {
+    const option = {
+      value: record[this.pkField],
+      label: record[this.descriptionField],
+    };
+    this.pesquisaGridSelectItem.emit(option);
+  }
+  async handleConfigChanged({ detail }) {
+    var _a;
+    const columns = (_a = detail === null || detail === void 0 ? void 0 : detail.columns) !== null && _a !== void 0 ? _a : [];
+    await this._pesquisaFetcher.savePesquisaGridConfig(this.entityName, columns);
+  }
+  render() {
+    if (!this.metadata || !this._dataunit)
+      return;
+    return (h(Host, null, h("ez-grid", { dataUnit: this._dataunit, config: this._gridConfig, canEdit: false, suppressCheckboxColumn: true, compact: true, autoFocus: false, onEzDoubleClick: ({ detail }) => this.handleDbClick(detail), onConfigChange: async (event) => this.handleConfigChanged(event) })));
+  }
+  static get is() { return "pesquisa-grid"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pesquisa-grid.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pesquisa-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "metadata": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "UnitMetadata",
+          "resolved": "UnitMetadata",
+          "references": {
+            "UnitMetadata": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campos que representam as colunas da grade."
+        }
+      },
+      "dataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record[]",
+          "resolved": "Record[]",
+          "references": {
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Registros da grade"
+        },
+        "defaultValue": "[]"
+      },
+      "pkField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campo que representa a chave prim\u00E1ria do registro"
+        },
+        "attribute": "pk-field",
+        "reflect": false
+      },
+      "descriptionField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campo que representa a descri\u00E7\u00E3o do registro"
+        },
+        "attribute": "description-field",
+        "reflect": false
+      },
+      "entityName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da entidade representada na grade"
+        },
+        "attribute": "entity-name",
+        "reflect": false
+      },
+      "shouldLoadConfig": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se deve carregar configura\u00E7\u00F5es da grade"
+        },
+        "attribute": "should-load-config",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_gridConfig": {},
+      "_inMemoryLoader": {},
+      "_dataunit": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pesquisaGridSelectItem",
+        "name": "pesquisaGridSelectItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/src/components/ez-search/ez-search"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "dataSource",
+        "methodName": "observeDataSource"
+      }, {
+        "propName": "metadata",
+        "methodName": "observeMetadata"
+      }, {
+        "propName": "shouldLoadConfig",
+        "methodName": "observeShouldLoadConfig"
+      }];
+  }
+}

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

@@ -0,0 +1,28 @@
+:host {
+  /*@doc Define o posicionamento superior do container de botões de ação.*/
+  --snk-pesquisa--tree__action-container--top: var(--space--sm);
+  /*@doc Define o posicionamento direito do container de botões de ação.*/
+  --snk-pesquisa--tree__action-container--right: var(--space--small);
+  /*@doc Define a altura mínima do componente.*/
+  --snk-pesquisa--tree__min-height: var(--space--extra-large);
+
+  background: var(--background--xlight, #FFF);
+  position: relative;
+  min-height: var(--snk-pesquisa--tree__min-height);
+
+  height: 100%;
+  display: block;
+  overflow-y: auto;
+}
+
+:host:hover .actions-container{
+  display: flex;
+}
+
+.actions-container {
+  flex-direction: row;
+  position: absolute;
+  top: var(--snk-pesquisa--tree__action-container--top);
+  right: var(--snk-pesquisa--tree__action-container--right);
+  display: none;
+}

package/dist/collection/components/snk-pesquisa/pesquisa-tree/pesquisa-tree.js

@@ -0,0 +1,208 @@
+import { Fragment, h, Host } from '@stencil/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+export class PesquisaTree {
+  constructor() {
+    this.treeLoader = undefined;
+    this.argument = undefined;
+    this.allowsNonAnalytic = false;
+    this.shouldLoadTree = false;
+    this.items = [];
+  }
+  async applyFilter() {
+    await this._tree.applyFilter(this.argument);
+  }
+  async observeShouldLoadTree(newValue) {
+    if (!newValue || this.items.length > 0)
+      return;
+    await this.loadTree();
+  }
+  async loadTree() {
+    if (!this.shouldLoadTree)
+      return;
+    if (!this.treeLoader || typeof this.treeLoader !== 'function')
+      return;
+    const response = await this.treeLoader((this.argument || '').trim());
+    this.items = [...response];
+  }
+  expandOrCloseAllItems(items, expanded) {
+    return items.map(item => (Object.assign(Object.assign({}, item), { expanded, children: item.children ? this.expandOrCloseAllItems(item.children, expanded) : undefined })));
+  }
+  handleExpandAll() {
+    this.items = [...this.expandOrCloseAllItems(this.items, true)];
+  }
+  handleCloseAll() {
+    this.items = [...this.expandOrCloseAllItems(this.items, false)];
+  }
+  handleDbClick(item) {
+    var _a;
+    if (!this.allowsNonAnalytic && !((_a = item['props']) === null || _a === void 0 ? void 0 : _a['analitico'])) {
+      const title = 'Erro';
+      const message = `Há pelo menos um registro inválido selecionado. Você deve selecionar itens do tipo 'analítico'.`;
+      ApplicationUtils.error(title, message);
+      return;
+    }
+    const option = {
+      value: item.id,
+      label: item.label,
+    };
+    this.pesquisaTreeSelectItem.emit(option);
+  }
+  renderEmptyMessage() {
+    return (h("div", { class: "ez-flex ez-flex--justify-center ez-flex--align-items-center ez-margin--large ez-text ez-text--xlarge ez-text--secondary" }, h("span", null, "Nenhum registro encontrado...")));
+  }
+  render() {
+    var _a;
+    return (h(Host, null, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ?
+      this.renderEmptyMessage() :
+      h(Fragment, null, h("div", { class: 'actions-container' }, h("ez-button", { size: 'small', mode: 'icon', class: 'ez-margin-right--small', iconName: 'show-list', title: "Expandir", onClick: () => this.handleExpandAll() }), h("ez-button", { size: 'small', mode: 'icon', iconName: 'hide-list', title: "Recolher", onClick: () => this.handleCloseAll() })), h("ez-tree", { ref: (element) => this._tree = element, onEzDbClickItem: ({ detail }) => this.handleDbClick(detail), items: this.items }))));
+  }
+  static get is() { return "pesquisa-tree"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pesquisa-tree.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pesquisa-tree.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "treeLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(text: string) => Promise<Array<ITreeItem>>",
+          "resolved": "(text: string) => Promise<ITreeItem[]>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/src/components/ez-tree/interfaces/ITreeItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o respons\u00E1vel por carregar a \u00E1rvore hier\u00E1rquica do componente"
+        }
+      },
+      "argument": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Argumentos que ser\u00E3o usados ao chamar a fun\u00E7\u00E3o treeLoader."
+        },
+        "attribute": "argument",
+        "reflect": false
+      },
+      "allowsNonAnalytic": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se permite sele\u00E7\u00E3o de items n\u00E3o anal\u00EDticos"
+        },
+        "attribute": "allows-non-analytic",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "shouldLoadTree": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a \u00E1rvore hier\u00E1rquica deve ou n\u00E3o ser carregada."
+        },
+        "attribute": "should-load-tree",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "items": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pesquisaTreeSelectItem",
+        "name": "pesquisaTreeSelectItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/src/components/ez-search/ez-search"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "applyFilter": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "shouldLoadTree",
+        "methodName": "observeShouldLoadTree"
+      }];
+  }
+}