@sankhyalabs/sankhyablocks 4.4.0-hotfix-ga-SKA-99999.1 → 4.5.0

package/dist/collection/components/snk-filter-field-search/snk-filter-field-search.js

@@ -0,0 +1,297 @@
+import { h } from "@stencil/core";
+import { SelectedItemType } from "./interfaces";
+import { ApplicationContext, ElementIDUtils, JSUtils } from "@sankhyalabs/core";
+import { ListItem } from "./subcomponents";
+const SNK_CONTEXT_KEY = "__SNK__APPLICATION__";
+export class SnkFilterFieldSearch {
+  constructor() {
+    this._filterMetadataStorage = new Map();
+    this._dataSource = null;
+    this._filterText = "";
+    this._isLoading = false;
+    this.searchable = true;
+    this.breadcrumbItems = [];
+    this.linkItems = [];
+    this.fieldItems = [];
+  }
+  /**
+   * Define a fonte de dados do componente.
+   * @param {IFilterLink} currentLink - Link atual da entidade.
+   * @param {IFilterMetadata} fetchData - callback que executa a busca de dados.
+   * @throws {Error} - Quando os metadados não forem válidos.
+   * @throws {Error} - Quando o link atual não for do tipo link.
+  */
+  async setDataSource(currentLink, fetchData) {
+    var _a;
+    this._isLoading = true;
+    let metadata = this._filterMetadataStorage.get(currentLink.uri);
+    if (!metadata) {
+      metadata = await fetchData(currentLink);
+      this._filterMetadataStorage.set(currentLink.uri, metadata);
+    }
+    const { fields, links } = metadata || {};
+    if (!Array.isArray(fields) || !Array.isArray(links))
+      throw new Error('Invalid metadata');
+    if (currentLink.type !== SelectedItemType.LINK)
+      throw new Error('The current link must be a link type');
+    this._dataSource = metadata;
+    this._currentLink = currentLink;
+    this.mapDataSourceToLinkItems();
+    this.mapDataSourceToFieldItems();
+    this._isLoading = false;
+    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.show();
+    this._ezFieldList.scrollToTop();
+    this._ezLinkList.scrollToTop();
+  }
+  /**
+   * Filtra a fonte de dados do componente.
+   * @param {string} filterText - Texto para filtrar a fonte de dados.
+   * @throws {Error} - Quando o componente estiver com a propriedade searchable como true.
+  */
+  async filterDataSource(filterText) {
+    if (this.searchable)
+      throw new Error('This method is not available when searchable is true');
+    this.handleFilterChange(filterText);
+  }
+  mapDataSourceToLinkItems() {
+    var _a;
+    const { links } = this._dataSource;
+    const filterLinkLabelMessage = this.getMessage('snkFilterFieldSearch.linkLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
+    const items = links.map(link => (Object.assign({ label: link.description }, link)));
+    this.linkItems = [{
+        group: filterLinkLabelMessage,
+        items
+      }];
+    if (this.breadcrumbItems.length === 0) {
+      this.breadcrumbItems = [Object.assign({ id: JSUtils.generateUUID(), label: this._currentLink.description }, this._currentLink)];
+    }
+  }
+  mapDataSourceToFieldItems() {
+    var _a;
+    const { fields } = this._dataSource;
+    const filterFieldLabelMessage = this.getMessage('snkFilterFieldSearch.fieldLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
+    const filteredFields = fields.filter(field => {
+      if (!this._currentLink)
+        return true;
+      const searchableByDescription = field.description.toLowerCase().includes(this._filterText.toLowerCase());
+      const searchableByName = field.name.toLowerCase().includes(this._filterText.toLowerCase());
+      return searchableByDescription || searchableByName;
+    });
+    const items = filteredFields.map(field => (Object.assign({ label: field.description }, field)));
+    this.fieldItems = [{
+        group: filterFieldLabelMessage,
+        items
+      }];
+  }
+  handleFilterChange(filterText) {
+    if (this._isLoading)
+      return;
+    this._filterText = filterText;
+    this.mapDataSourceToFieldItems();
+  }
+  handleSelectLink({ detail: item }) {
+    if (this._isLoading)
+      return;
+    const breadcrumbByIndex = this.breadcrumbItems.findIndex(breadcrumbItem => breadcrumbItem.id === item.id);
+    item.cache = this._filterMetadataStorage.has(item.uri);
+    if (breadcrumbByIndex > -1) {
+      this.breadcrumbItems = this.breadcrumbItems.slice(0, (breadcrumbByIndex + 1));
+    }
+    else {
+      this.breadcrumbItems = [...this.breadcrumbItems, Object.assign({ id: JSUtils.generateUUID(), label: item.description }, item)];
+    }
+    this.ezSelectFilterItem.emit(Object.assign(Object.assign({}, item), { type: SelectedItemType.LINK }));
+  }
+  handleSelectField({ detail: item }) {
+    var _a;
+    const breadcrumbPath = this.breadcrumbItems.map(breadcrumbItem => breadcrumbItem.label).join('>>');
+    const selectedField = Object.assign(Object.assign({}, item), { type: SelectedItemType.FIELD, path: `${breadcrumbPath} >> ${item.description}` });
+    this.ezSelectFilterItem.emit(selectedField);
+    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.hide();
+  }
+  getElementID(sufix) {
+    return {
+      [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
+    };
+  }
+  /**
+   * 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-filter-field-search.msg.ts"
+  */
+  getMessage(key, params) {
+    var _a, _b, _c;
+    if (!this._application)
+      this._application = ApplicationContext.getContextValue(SNK_CONTEXT_KEY);
+    return (_c = (_b = (_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder) === null || _b === void 0 ? void 0 : _b.getMessage) === null || _c === void 0 ? void 0 : _c.call(_b, key, params);
+  }
+  ;
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue(SNK_CONTEXT_KEY);
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfoIfNotExists(this._ezPopover, 'popover');
+  }
+  disconnectedCallback() {
+    var _a;
+    this._filterMetadataStorage.clear();
+    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.hide();
+  }
+  render() {
+    var _a;
+    const searchLabelMessage = this.getMessage('snkFilterFieldSearch.searchLabel');
+    return (h("ez-popover", Object.assign({ ref: (el) => this._ezPopover = el, role: "dialog", "aria-hidden": !((_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.opened) }, this.getElementID('EzPopover')), h("div", { class: "snk-filter-field-search__container" }, h("header", { class: "snk-filter-field-search__header" }, this.searchable && !!searchLabelMessage && (h("ez-filter-input", Object.assign({ class: "snk-filter-field-search__input", label: searchLabelMessage, asyncSearch: true, canShowError: false, onEzSearching: (event) => this.handleFilterChange.bind(this)(event.detail), "aria-label": searchLabelMessage, "aria-required": "false", "aria-invalid": "false" }, this.getElementID('EzFilterInput')))), this.breadcrumbItems.length > 0 && (h("ez-breadcrumb", Object.assign({ items: this.breadcrumbItems, onSelectedItem: this.handleSelectLink.bind(this), role: "navigation", "aria-current": "step" }, this.getElementID('EzBreadcrumb')))), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })), h("section", { class: "snk-filter-field-search__section" }, h("ez-list", Object.assign({ ref: (el) => this._ezLinkList = el, class: "snk-filter-field-search__list", id: "filterLinkList", useGroups: true, dataSource: this.linkItems, onEzSelectItem: this.handleSelectLink.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ({ fieldCount }) => h("ez-badge", { label: fieldCount }), "aria-describedby": "filterLinkLabel" }, this.getElementID('EzListLinks'))), h("ez-list", Object.assign({ ref: (el) => this._ezFieldList = el, class: "snk-filter-field-search__list", id: "filterFieldList", useGroups: true, dataSource: this.fieldItems, onEzSelectItem: this.handleSelectField.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ListItem, "aria-describedby": "filterFieldLabel" }, this.getElementID('EzListFields')))))));
+  }
+  static get is() { return "snk-filter-field-search"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-field-search.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-field-search.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "searchable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente ir\u00E1 possuir um campo de pesquisa."
+        },
+        "attribute": "searchable",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "breadcrumbItems": {},
+      "linkItems": {},
+      "fieldItems": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezSelectFilterItem",
+        "name": "ezSelectFilterItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{EventEmitter<IFilterField | IFilterLink>}"
+            }],
+          "text": "Emitido sempre que um item da lista for selecionado"
+        },
+        "complexType": {
+          "original": "IFilterField | IFilterLink",
+          "resolved": "IFilterField | IFilterLink",
+          "references": {
+            "IFilterField": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "IFilterLink": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setDataSource": {
+        "complexType": {
+          "signature": "(currentLink: IFilterLink, fetchData: DataFetcher) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "currentLink - Link atual da entidade."
+                }],
+              "text": "- Link atual da entidade."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "fetchData - callback que executa a busca de dados."
+                }],
+              "text": "- callback que executa a busca de dados."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IFilterLink": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "DataFetcher": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Define a fonte de dados do componente.",
+          "tags": [{
+              "name": "param",
+              "text": "currentLink - Link atual da entidade."
+            }, {
+              "name": "param",
+              "text": "fetchData - callback que executa a busca de dados."
+            }, {
+              "name": "throws",
+              "text": "{Error} - Quando os metadados n\u00E3o forem v\u00E1lidos."
+            }, {
+              "name": "throws",
+              "text": "{Error} - Quando o link atual n\u00E3o for do tipo link."
+            }]
+        }
+      },
+      "filterDataSource": {
+        "complexType": {
+          "signature": "(filterText: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "filterText - Texto para filtrar a fonte de dados."
+                }],
+              "text": "- Texto para filtrar a fonte de dados."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Filtra a fonte de dados do componente.",
+          "tags": [{
+              "name": "param",
+              "text": "filterText - Texto para filtrar a fonte de dados."
+            }, {
+              "name": "throws",
+              "text": "{Error} - Quando o componente estiver com a propriedade searchable como true."
+            }]
+        }
+      }
+    };
+  }
+}

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

@@ -0,0 +1 @@
+export * from './list-item';

package/dist/collection/components/snk-filter-field-search/subcomponents/list-item.js

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+import { UserInterface } from "@sankhyalabs/core";
+const ICON_MODES = {
+  [UserInterface.SHORTTEXT]: 'text',
+  [UserInterface.LONGTEXT]: 'text',
+  [UserInterface.INTEGERNUMBER]: 'number',
+  [UserInterface.DECIMALNUMBER]: 'number',
+  [UserInterface.DATE]: 'calendar',
+  [UserInterface.DATETIME]: 'calendar',
+  [UserInterface.SWITCH]: 'boolean',
+  [UserInterface.CHECKBOX]: 'check-circle-inverted',
+  [UserInterface.OPTIONSELECTOR]: 'list',
+  [UserInterface.SEARCH]: 'search',
+  [UserInterface.HTML]: 'tag_code',
+  [UserInterface.IMAGE]: 'png',
+  [UserInterface.FILE]: 'edit-file',
+  [UserInterface.TIME]: 'timer-outline',
+  [UserInterface.ELAPSEDTIME]: 'timer',
+  [UserInterface.MASKEDTEXT]: 'text',
+  [UserInterface.PASSWORD]: 'email',
+};
+export const ListItem = ({ userInterface, description }) => {
+  return (h("ez-icon", { iconName: ICON_MODES[userInterface], className: "ez-padding-left--small", title: description }));
+};

package/dist/collection/components/snk-simple-crud/snk-simple-crud.css

@@ -0,0 +1,27 @@
+:host {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.simple-crud__container {
+  display: grid;
+  grid-template-rows: auto;
+  row-gap: 12px;
+  height: 100%;
+  width: 100%;
+}
+
+.simple-crud__taskbar {
+  z-index: var(--more-visible, 2);
+  margin-bottom: var(--space--medium);
+}
+
+ez-grid{
+  --ez-grid__container--shadow: none;
+  min-height: 300px;
+}
+
+ez-form{
+  min-height: 300px;
+}