@sankhyalabs/sankhyablocks 1.3.34 → 1.4.0-beta.1

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -0,0 +1,353 @@
+import { h, Host } from '@stencil/core';
+import { ApplicationContext, DataType, ErrorException, ObjectUtils } from '@sankhyalabs/core';
+import FilterItemType from './filter-item/filter-item-type.enum';
+import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+const PERSONALIZED_FILTER = "PERSONALIZED_FILTER";
+const DEFAULT_FILTER = "DEFAULT_FILTER";
+const CLEAR_ALL_FILTERS = "CLEAR_ALL_FILTERS";
+export class SnkFilterBar {
+  constructor() {
+    this._updateSequence = [];
+    this._calculateSortIndex = (item) => {
+      let index = item.hardFixed ? 1000000 : 0;
+      //campos Hard Fixed não variam a ordem
+      if (!item.hardFixed) {
+        index += item.fixed ? 100000 : 0;
+        index += item.value == undefined ? 0 : 10000;
+        index += this._updateSequence.lastIndexOf(item.id) + 1;
+      }
+      return index;
+    };
+    this._filtersComparator = (a, b) => {
+      return this._calculateSortIndex(b) - this._calculateSortIndex(a);
+    };
+  }
+  /**
+   * 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-bar.msg.ts"
+   */
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  getFilter(_dataUnit) {
+    var _a;
+    const filters = [];
+    (_a = this.filterConfig) === null || _a === void 0 ? void 0 : _a.filter(item => item.value).forEach(item => {
+      const filter = this.buildDUFilter(item);
+      if (filter) {
+        filters.push(filter);
+      }
+    });
+    return filters;
+  }
+  buildDUFilter(item) {
+    const { id, value, type, props, visible } = item;
+    if (value && visible) {
+      if (type === FilterItemType.BINARY_SELECT) {
+        const options = props.options;
+        const selectedOption = options.find(opt => opt.name === value);
+        //FIXME: ajustar o backend para não exigir parametros
+        return { name: id, expression: selectedOption.expression, params: [] };
+      }
+      if (type === FilterItemType.MULTI_SELECT) {
+        return { name: id, expression: props.expression, params: [{ name: id, dataType: DataType.TEXT, value }] };
+      }
+      if (type === FilterItemType.PERIOD) {
+        let { end, start } = value;
+        if (typeof end === "string") {
+          end = new Date(end);
+        }
+        if (typeof start === "string") {
+          start = new Date(start);
+        }
+        const params = [];
+        let expression;
+        if (end && start) {
+          expression = props.expression.fullfill;
+          params.push({ name: `${id}.START`, dataType: DataType.DATE, value: toString(DataType.DATE, start) }, { name: `${id}.END`, dataType: DataType.DATE, value: toString(DataType.DATE, end) });
+        }
+        else {
+          if (start) {
+            expression = props.expression.onlystart;
+            params.push({ name: id, dataType: DataType.DATE, value: toString(DataType.DATE, start) });
+          }
+          else {
+            expression = props.expression.onlyend;
+            params.push({ name: id, dataType: DataType.DATE, value: toString(DataType.DATE, end) });
+          }
+        }
+        return { name: id, expression, params };
+      }
+      if (type === FilterItemType.SEARCH) {
+        const expression = props.expression;
+        return { name: id, expression, params: [{ name: id, dataType: DataType.TEXT, value: toString(DataType.TEXT, value.value) }] };
+      }
+      if (type === FilterItemType.TEXT) {
+        const expression = props.expression;
+        return { name: id, expression, params: [{ name: id, dataType: DataType.TEXT, value: toString(DataType.TEXT, value) }] };
+      }
+      if (type === FilterItemType.NUMBER) {
+        const expression = props.expression;
+        return { name: id, expression, params: [{ name: id, dataType: DataType.NUMBER, value: toString(DataType.NUMBER, value) }] };
+      }
+      //No mapeamento dos outros tipos precisamos saber o tipo de dado.
+    }
+    return undefined;
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application) {
+      this._application.getFilterBarConfig(this.configName)
+        .then((filters) => {
+        this.filterConfig = filters;
+      })
+        .catch(reason => {
+        throw new ErrorException(this.getMessage("snkFilterBar.failToLoadConfig"), reason);
+      });
+    }
+    if (this.dataUnit == undefined) {
+      let parent = this._element.parentElement;
+      while (parent) {
+        if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+          const snkDataUnit = parent;
+          this.dataUnit = snkDataUnit.dataUnit;
+          if (this.dataUnit) {
+            this.dataUnit.addFilterProvider(this);
+          }
+          else {
+            snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+              this.dataUnit = evt.detail;
+              this.dataUnit.addFilterProvider(this);
+            });
+          }
+          break;
+        }
+      }
+      parent = parent.parentElement;
+    }
+    else {
+      this.dataUnit.addFilterProvider(this);
+    }
+  }
+  getFilterItems() {
+    const pinnedItems = [];
+    const unpinnedItems = [];
+    this.filterConfig
+      .filter(item => item.visible)
+      .sort((a, b) => this._filtersComparator(a, b))
+      .forEach((item, index) => {
+      const filterItem = (h("snk-filter-item", { id: `filter-${item.id}`, config: this.normalizeItem(item), class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
+      if (item.fixed || item.hardFixed) {
+        pinnedItems.push(filterItem);
+      }
+      else {
+        unpinnedItems.push(filterItem);
+      }
+      return filterItem;
+    });
+    const elements = [];
+    elements.push(...pinnedItems);
+    if (pinnedItems.length > 0 && unpinnedItems.length > 0) {
+      elements.push(h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-filter-bar__divider" }));
+    }
+    elements.push(...unpinnedItems);
+    return elements;
+  }
+  calculateUpdateSequence(item) {
+    if (item) {
+      this._updateSequence = this._updateSequence.filter(itemId => item.id !== itemId);
+      this._updateSequence.push(item.id);
+    }
+  }
+  filterChangeListener(evt) {
+    this.updateFilter(evt.detail);
+  }
+  normalizeItem(item) {
+    const normalized = Object.assign({}, item);
+    const optionals = ["props", "value", "hardFixed", "fixed"];
+    optionals.forEach(prop => {
+      if (normalized[prop] == undefined) {
+        delete normalized[prop];
+      }
+    });
+    if (item.value === "") {
+      delete item.value;
+    }
+    return normalized;
+  }
+  updateFilter(newItem, clear = false) {
+    let needLoad = false;
+    let updated = false;
+    this.filterConfig = this.filterConfig.map(item => {
+      if (clear) {
+        if (item.value != undefined) {
+          updated = true;
+          needLoad = true;
+        }
+        return Object.assign(Object.assign({}, item), { value: undefined });
+      }
+      else {
+        if (item.id === newItem.id) {
+          const normalizedOne = this.normalizeItem(item);
+          const normalizedTwo = this.normalizeItem(newItem);
+          updated = ObjectUtils.objectToString(normalizedOne) != ObjectUtils.objectToString(normalizedTwo);
+          needLoad = ObjectUtils.objectToString(normalizedOne.value) !== ObjectUtils.objectToString(normalizedTwo.value);
+          return newItem;
+        }
+      }
+      return item;
+    });
+    if (needLoad) {
+      this.dataUnit.loadData();
+    }
+    if (updated) {
+      this.calculateUpdateSequence(newItem);
+      this._application.saveFilterBarConfig(this.filterConfig, this.configName);
+    }
+    return needLoad;
+  }
+  getAddListItems() {
+    const hiddenItems = this.filterConfig
+      .filter(item => !item.visible)
+      .sort(this._filtersComparator);
+    return hiddenItems.map(filter => {
+      return { name: filter.id, label: filter.label, kind: "FILTER", iconName: null };
+    }).concat([
+      { name: PERSONALIZED_FILTER, label: this.getMessage("snkFilterBar.customFilter"), iconName: "tune", kind: "FOOTER" },
+      { name: DEFAULT_FILTER, label: this.getMessage("snkFilterBar.defaultFilter"), iconName: "configuration", kind: "FOOTER" }
+    ]);
+  }
+  getActiveClass() {
+    const filterApplied = this.filterConfig.filter(item => item.value != undefined).length > 0;
+    return filterApplied ? "sc-snk-filter-bar snk-filter-bar__filter-list-items-button--active" : "";
+  }
+  getAppliedListItems() {
+    const appliedItems = this.filterConfig
+      .filter(item => item.value != undefined)
+      .sort(this._filtersComparator);
+    return appliedItems.map(filter => {
+      return { name: filter.id, label: filter.label, kind: "FILTER", iconName: null };
+    }).concat([
+      { name: CLEAR_ALL_FILTERS, label: this.getMessage("snkFilterBar.clearAllFilters"), iconName: "cleaning", kind: "FOOTER" }
+    ]);
+  }
+  addFilterHandler(itemName) {
+    const filterItem = this.filterConfig.find(currentFilter => currentFilter.id === itemName);
+    if (filterItem) {
+      this.updateFilter(Object.assign(Object.assign({}, filterItem), { visible: true }));
+      window.requestAnimationFrame(() => {
+        const itemElement = this._element.querySelector("#filter-" + itemName);
+        if (itemElement) {
+          itemElement.showUp();
+        }
+      });
+    }
+  }
+  appliedFilterHandler(itemName) {
+    if (itemName === CLEAR_ALL_FILTERS) {
+      if (this.updateFilter(null, true)) {
+        this._application.info(this.getMessage("snkFilterBar.successfullyCleaned"), { iconName: "check" });
+      }
+    }
+    else {
+      const itemElement = this._element.querySelector("#filter-" + itemName);
+      if (itemElement) {
+        itemElement.showUp(true);
+      }
+    }
+  }
+  render() {
+    if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
+      return undefined;
+    }
+    return (h(Host, null, h("ez-scroller", { direction: "horizontal" }, this.getFilterItems()), h("snk-filter-list", { items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail) }), h("snk-filter-list", { items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail) }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
+  }
+  static get is() { return "snk-filter-bar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-bar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Recebe o DataUnit do ambiente. Se n\u00E3o for informado, procura pela refer\u00EAncia\ndo SnkDataUnit. Necess\u00E1rio para se registrar como provedor de filtros."
+        }
+      },
+      "configName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Eventualmente poderemos ter mais de uma barra de filtros. Essa propriedade\nserve para separar a configura\u00E7\u00E3o de cada uma."
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "filterConfig": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<SnkFilterItemConfig>",
+          "resolved": "SnkFilterItemConfig[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de todos os filtros dispon\u00EDveis ao usu\u00E1rio."
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "filterChange",
+        "method": "filterChangeListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+
+.snk-form {
+  position: relative;
+
+  /*public*/
+  padding: var(--space--large);
+  padding-top: var(--space--medium);
+}
+
+.snk-form__header {
+  position: relative;
+
+  /*public*/
+  padding-top: var(--space--medium);
+  padding-bottom: var(--space--medium);
+  margin-bottom: var(--space--medium);
+}
+
+.snk-form__header--fixed {
+  position: sticky;
+  top: 0;
+
+  /*public*/
+  background: var(--background--body);
+  z-index: var(--more-visible, 2);
+  padding-left: var(--space--large);
+  padding-right: var(--space--large);
+  margin-left: calc(var(--space--large) * -1);
+  margin-right: calc(var(--space--large) * -1);
+  width: calc(100% + (var(--space--large) * 2));
+}

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);
+}