@sankhyalabs/ezui 1.1.76 → 1.1.79

package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+export const buildComboBox = ({ name, label }, properties) => {
+  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-combo-box", { label: label, "data-field-name": name, key: name, options: options })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildDate = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-date-input", { label: label, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildFile = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small" },
+    h("ez-upload", { label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+export const buildDecimal = ({ name, label }, properties) => {
+  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
+  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
+  return buildNumeric(name, label, precision, prettyPrecision);
+};
+export const buildInteger = ({ name, label }) => {
+  return buildNumeric(name, label, 0, 0);
+};
+function buildNumeric(fieldName, fieldLabel, precision, prettyPrecision) {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-number-input", { label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+}

package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildSearch = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-search", { label: label, optionLoader: (_argument) => { }, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildTextArea = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 padding--small", key: name },
+    h("ez-text-area", { label: label, "data-field-name": name })));
+};

package/dist/collection/components/ez-form/fieldbuilder/tpl/TextInput.tpl.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const buildTextInput = ({ name, label }) => {
+  return (h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+    h("ez-text-input", { label: label, "data-field-name": name, key: name })));
+};

package/dist/collection/components/ez-form/store/form.slice.js

@@ -0,0 +1,38 @@
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+export function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+export function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+export function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: currentSheet
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+export function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+export function selectCurrentSheet(state) {
+  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));

package/dist/collection/components/ez-form/structure/FormItem.js

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import { buildField } from "../fieldbuilder/FieldBuilder";
+export const FormItem = ({ source }) => {
+  if ("items" in source) {
+    const fieldSet = source;
+    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+  }
+  else {
+    return buildField(source);
+  }
+};

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+import { FormItem } from "./FormItem";
+export const FormSheet = ({ store, source }) => {
+  return (h("div", { class: "box__container" }, source.items.map(item => h(FormItem, { store: store, source: item }))));
+};

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -0,0 +1,86 @@
+export class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+}
+export const buildFromDataUnit = (dataUnit) => {
+  var _a;
+  const unitMD = dataUnit.metadata;
+  const metadata = new FormMetadata();
+  if (unitMD) {
+    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
+    metadata.addSheet({
+      label: unitMD.label,
+      name: unitMD.name,
+      items: visibleFields.map(descriptor => { return { descriptor }; }),
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name)
+    });
+  }
+  return metadata;
+};
+export const buildFromConfig = (fields, dataUnit) => {
+  const sheets = new Map();
+  const requiredFields = [];
+  fields.forEach(config => {
+    if (config.visible !== false) {
+      const tab = config.tab || "Geral";
+      const descriptor = dataUnit.getField(config.name);
+      if (!sheets.has(tab)) {
+        sheets.set(tab, new Map());
+      }
+      let isRequired = false;
+      if (config.required === undefined) {
+        if (descriptor) {
+          isRequired = descriptor.required;
+        }
+      }
+      else {
+        isRequired = config.required;
+      }
+      if (isRequired) {
+        requiredFields.push(config.name);
+      }
+      const tabItens = sheets.get(tab);
+      const fieldMD = { config, descriptor };
+      const group = config.group;
+      if (group) {
+        const key = `group::${group}`;
+        if (!tabItens.has(key)) {
+          tabItens.set(key, { label: group, items: [fieldMD] });
+        }
+        else {
+          tabItens.get(key).items.push(fieldMD);
+        }
+      }
+      else {
+        tabItens.set(config.name, fieldMD);
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  sheets.forEach((value, key) => {
+    metadata.addSheet({
+      label: key,
+      name: key,
+      items: Array.from(value.values()),
+      requiredFields
+    });
+  });
+  return metadata;
+};

package/dist/collection/components/ez-grid/controller/DataUnitBridge.js

@@ -0,0 +1,21 @@
+import { Action } from "@sankhyalabs/core";
+export default class DataUnitBridge {
+  constructor(gridController, dataUnit) {
+    this._gridController = gridController;
+    this._dataUnit = dataUnit;
+    this._dataUnit.subscribe(action => this.processAction(action));
+  }
+  processAction(action) {
+    switch (action.type) {
+      case Action.METADATA_LOADED:
+        const columnDefs = [];
+        this._dataUnit.metadata.fields.forEach(f => {
+          if (f.visible !== false) {
+            columnDefs.push({ label: f.label, name: f.name });
+          }
+        });
+        this._gridController.setColumnsDef(columnDefs, true);
+        break;
+    }
+  }
+}

package/dist/collection/components/ez-grid/controller/EzGridController.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -0,0 +1,203 @@
+import { Grid as EnterpriseGrid } from "ag-grid-enterprise";
+import { Grid } from "ag-grid-community";
+import gridTerms from "./i18n/pt-BR.js";
+import HeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
+import DataSource from "./DataSource";
+export default class AgGridController {
+  constructor(enterprise) {
+    this._menuItems = [];
+    this._enterprise = enterprise;
+  }
+  initDatagrid(container, options) {
+    if (this._grid === undefined) {
+      this._columnStateChangeCallback = options.onColumnStateChange;
+      this._selectionChangeCallback = options.onSelectionChange;
+      this._paginationChangeCallback = options.onPaginationChange;
+      this._multipleSelection = options.allowMultipleSelection;
+      this._pageSize = options.pageSize;
+      this._serverURL = options.serverURL;
+      this._dataUnit = options.dataUnit;
+      this._gridOptions = {
+        localeText: gridTerms,
+        rowModelType: "serverSide",
+        serverSideStoreType: "partial",
+        rowSelection: this._multipleSelection ? "multiple" : "single",
+        serverSideDatasource: new DataSource(this._dataUnit, this._serverURL),
+        getMainMenuItems: (params) => {
+          const column = params.column;
+          const items = [column.isPinned() ? "clearPinned" : "pinLeft", "separator"];
+          this._menuItems.forEach(m => items.push({
+            name: m.label,
+            action: () => m.action(column.getColId(), m.name)
+          }));
+          return items;
+        }
+      };
+      this.setOptionsEvents(this._gridOptions);
+      this.setOptionsPagination(this._gridOptions);
+      this.setOptionsSupress(this._gridOptions);
+      if (this._enterprise) {
+        this._grid = new EnterpriseGrid(container, this._gridOptions);
+      }
+      else {
+        this._grid = new Grid(container, this._gridOptions);
+      }
+    }
+  }
+  setOptionsEvents(opt) {
+    opt.onSortChanged = e => this.onCallStateChange("sort", e);
+    opt.onColumnResized = e => this.onCallStateChange("columnResize", e);
+    opt.onColumnPinned = e => this.onCallStateChange("columnPinned", e);
+    opt.onColumnMoved = e => this.onCallStateChange("columnMoved", e);
+    opt.onColumnVisible = e => this.onCallStateChange("visibleChange", e);
+    opt.onSelectionChanged = e => this.onSelectionChange(e);
+    opt.onPaginationChanged = () => this.onPaginationChange();
+  }
+  setOptionsPagination(opt) {
+    opt.pagination = (this._pageSize > -1);
+    opt.paginationPageSize = this._pageSize;
+    opt.cacheBlockSize = this._pageSize;
+  }
+  setOptionsSupress(opt) {
+    opt.suppressDragLeaveHidesColumns = true;
+    opt.suppressPaginationPanel = true;
+    opt.suppressMenuHide = true;
+  }
+  setData(data) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    this._gridOptions.api.setRowData(data);
+  }
+  setColumnsDef(cols, showCheckSelection) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    const colDefs = [];
+    if (showCheckSelection) {
+      colDefs.push({
+        headerName: "",
+        checkboxSelection: true,
+        headerCheckboxSelection: false,
+        width: 100,
+        suppressMovable: true
+      });
+    }
+    cols.forEach(c => {
+      colDefs.push(this.buildColDef(c));
+    });
+    this._gridOptions.api.setColumnDefs(colDefs);
+  }
+  getColumnsDef() {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    const colDef = this._gridOptions.columnApi.getAllColumns();
+    return colDef.map(c => {
+      const def = c.getColDef();
+      const colDef = { name: def.field, label: def.headerName };
+      this.conditionalSet(colDef, "sortable", def.sortable);
+      this.conditionalSet(colDef, "resizable", def.resizable);
+      this.conditionalSet(colDef, "sort", def.sort);
+      this.conditionalSet(colDef, "sortIndex", def.sortIndex);
+      this.conditionalSet(colDef, "width", def.width);
+      this.conditionalSet(colDef, "pinned", def.pinned !== null);
+      this.conditionalSet(colDef, "hidden", def.hide);
+      return colDef;
+    });
+  }
+  setColumnsState(state) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    this._gridOptions.columnApi.applyColumnState({ state: state.map(s => this.buildColState(s)) });
+  }
+  getColumnsState() {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    const colState = this._gridOptions.columnApi.getColumnState();
+    return colState.map(s => {
+      const def = this._gridOptions.columnApi.getColumn(s.colId).getColDef();
+      const label = def.headerName;
+      const name = def.checkboxSelection ? "__SELECTION__" : s.colId;
+      const colState = { label, name };
+      this.conditionalSet(colState, "sort", s.sort);
+      this.conditionalSet(colState, "sortIndex", s.sortIndex);
+      this.conditionalSet(colState, "width", s.width);
+      this.conditionalSet(colState, "pinned", s.pinned !== null);
+      this.conditionalSet(colState, "hidden", s.hide);
+      return colState;
+    }).filter(c => c.name !== "__SELECTION__");
+  }
+  getSelection() {
+    return this._gridOptions.api.getSelectedRows();
+  }
+  addColumnMenuItem(item) {
+    this._menuItems.push(item);
+  }
+  nextPage() {
+    this._gridOptions.api.paginationGoToNextPage();
+  }
+  previousPage() {
+    this._gridOptions.api.paginationGoToPreviousPage();
+  }
+  buildColDef(source) {
+    return {
+      headerName: source.label,
+      field: source.name,
+      sortable: true,
+      resizable: true,
+      headerComponentParams: {
+        template: HeaderColumnTemplate
+      }
+    };
+  }
+  buildColState(source) {
+    return {
+      colId: source.name,
+      sort: source.sort,
+      sortIndex: source.sortIndex,
+      width: source.width,
+      pinned: source.pinned ? "left" : null,
+      hide: source.hidden
+    };
+  }
+  onCallStateChange(type, e) {
+    const finished = !("finished" in e) || e["finished"];
+    if (finished && this._columnStateChangeCallback) {
+      this._columnStateChangeCallback(type, this.getColumnsState());
+    }
+  }
+  onSelectionChange(e) {
+    if (this._selectionChangeCallback) {
+      this._selectionChangeCallback(e.api.getSelectedRows());
+    }
+  }
+  onPaginationChange() {
+    if (this._paginationChangeCallback) {
+      if (this._gridOptions.api) {
+        const api = this._gridOptions.api;
+        const currentPage = api.paginationGetCurrentPage();
+        const isLastPage = api.paginationGetTotalPages() === (currentPage + 1);
+        const pageSize = api.paginationGetPageSize();
+        const totalRows = api.paginationGetRowCount();
+        const pageStart = currentPage * pageSize + 1;
+        const pageEnd = Math.min(totalRows, (currentPage + 1) * pageSize);
+        this._paginationChangeCallback({
+          hasPrevious: currentPage > 0,
+          hasNext: !isLastPage,
+          currentPage: currentPage + 1,
+          pageStart,
+          pageEnd,
+          totalRows
+        });
+      }
+    }
+  }
+  conditionalSet(host, attribute, value) {
+    if (value !== null && value !== undefined && value !== false) {
+      host[attribute] = value;
+    }
+  }
+}

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -0,0 +1,41 @@
+import Server from "./mock/Server";
+export default class DataSource {
+  constructor(dataUnit, serverURL) {
+    this._dataUnit = dataUnit;
+    this._serverURL = serverURL;
+  }
+  getRows(params) {
+    if (this._useMockedServer) {
+      if (this._mockedServer === undefined) {
+        this.loadData()
+          .then(data => {
+          this._mockedServer = new Server(data.rowData);
+          params.success(this._mockedServer.getData(params.request));
+        })
+          .catch(() => params.fail());
+      }
+      else {
+        params.success(this._mockedServer.getData(params.request));
+      }
+    }
+    else {
+      this.loadData()
+        .then(data => params.success(data))
+        .catch(() => params.fail());
+    }
+  }
+  loadData() {
+    return new Promise((resolve, reject) => {
+      if (this._dataUnit) {
+        this._dataUnit.loadData().then(rowData => resolve({ rowData, rowCount: rowData.length }));
+      }
+      else {
+        fetch(this._serverURL)
+          .then(response => {
+          response.json().then(rowData => resolve({ rowData }));
+        })
+          .catch(() => reject());
+      }
+    });
+  }
+}

package/dist/collection/components/ez-grid/controller/ag-grid/i18n/pt-BR.js

@@ -0,0 +1,75 @@
+const gridTerms = {
+  // for filter panel
+  page: "Página",
+  more: "mais",
+  to: "para",
+  of: "de",
+  next: "Próximo",
+  last: "Último",
+  first: "Primeiro",
+  previous: "Anterior",
+  loadingOoo: "Carregar",
+  // for set filter
+  selectAll: "Selecionar tudo",
+  searchOoo: "Procurar",
+  blanks: "Vazio",
+  // for number filter and text filter
+  filterOoo: "Filtrar",
+  applyFilter: "Aplicar filtro",
+  // for number filter
+  equals: "Igual",
+  lessThan: "Menor que",
+  greaterThan: "Maior que",
+  // for text filter
+  contains: "Contém",
+  startsWith: "Começa com",
+  endsWith: "Termina com",
+  // the header of the default group column
+  group: "Grupo",
+  // tool panel
+  columns: "Colunas",
+  rowGroupColumns: "Colunas do grupo de linhas",
+  rowGroupColumnsEmptyMessage: "Colunas do grupo de linhas vazias",
+  valueColumns: "Valores das colunas",
+  pivotMode: "Modo pivô",
+  groups: "Grupos",
+  values: "Valores",
+  pivots: "Pivôs",
+  valueColumnsEmptyMessage: "Valores de colunas vazias",
+  pivotColumnsEmptyMessage: "Pivôs de colunas vazias",
+  toolPanelButton: "Botão de painel de ferramentas",
+  // other
+  noRowsToShow: "Não há registros para mostrar.",
+  // enterprise menu
+  pinColumn: "Fixar coluna",
+  valueAggregation: "Agregar valor",
+  autosizeThiscolumn: "Redimensionar esta coluna",
+  autosizeAllColumns: "Redimensionar todas colunas",
+  groupBy: "Agrupar por",
+  ungroupBy: "Desagrupar por",
+  resetColumns: "Resetar colunas",
+  expandAll: "Expandir tudo",
+  collapseAll: "Contrair tudo",
+  toolPanel: "Painel de ferramentas",
+  export: "Exportar",
+  csvExport: "Exportar para CSV",
+  excelExport: "Exportar para Excel",
+  // enterprise menu pinning
+  pinLeft: "Fixar coluna",
+  pinRight: "Fixar a direita",
+  noPin: "Desfixar coluna",
+  // enterprise menu aggregation and status panel
+  sum: "Soma",
+  min: "Mínimo",
+  max: "Máximo",
+  none: "Nenhum",
+  count: "Contagem",
+  average: "Média",
+  // standard menu
+  copy: "Copiar",
+  copyWithHeaders: "Copiar com cabeçalho",
+  ctrlC: "Ctrl+C",
+  paste: "Colar",
+  ctrlV: "Ctrl+V"
+};
+export default gridTerms;

package/dist/collection/components/ez-grid/controller/ag-grid/mock/Server.js

@@ -0,0 +1,69 @@
+export default class Server {
+  constructor(data) {
+    this._data = data;
+  }
+  getData(request) {
+    const finalArray = this.sort(this.filter(this._data, request), request);
+    return { rowData: finalArray.slice(request.startRow, request.endRow), rowCount: finalArray.length };
+  }
+  filter(data, _request) {
+    return data;
+  }
+  sort(data, _request) {
+    return data;
+  }
+}
+/*    alasql.options.cache = false;
+  
+    return {
+      getData: function (request) {
+        var results = executeQuery(request);
+  
+        return {
+          success: true,
+          rows: results,
+          lastRow: getLastRowIndex(request, results),
+        };
+      },
+    };
+  
+    function executeQuery(request) {
+      var sql = buildSql(request);
+  
+      console.log("[FakeServer] - about to execute query:", sql);
+  
+      return alasql(sql, [allData]);
+    }
+  
+    function buildSql(request) {
+      return "SELECT * FROM ?" + orderBySql(request) + limitSql(request);
+    }
+  
+    function orderBySql(request) {
+      var sortModel = request.sortModel;
+  
+      if (sortModel.length === 0) return "";
+  
+      var sorts = sortModel.map(function (s) {
+        return s.colId + " " + s.sort.toUpperCase();
+      });
+  
+      return " ORDER BY " + sorts.join(", ");
+    }
+  
+    function limitSql(request) {
+      var blockSize = request.endRow - request.startRow;
+  
+      return " LIMIT " + (blockSize + 1) + " OFFSET " + request.startRow;
+    }
+  
+    function getLastRowIndex(request, results) {
+      if (!results || results.length === 0) {
+        return null;
+      }
+  
+      var currentLastRow = request.startRow + results.length;
+  
+      return currentLastRow <= request.endRow ? currentLastRow : -1;
+    }
+  }*/ 

package/dist/collection/components/ez-grid/controller/ag-grid/template/HeaderColumnTemplate.js

@@ -0,0 +1,12 @@
+const HeaderColumnTemplate = `<div class="ag-cell-label-container" role="presentation">
+    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
+    <div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
+        <span ref="eText" class="ag-header-cell-text" unselectable="on"></span>
+        <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
+        <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
+        <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
+        <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
+    </div>
+</div>`;
+
+export default HeaderColumnTemplate;

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

@@ -0,0 +1,15 @@
+:host {
+
+  /*@doc Define a cor de fundo do header do componente.*/
+  --ezgrid__header--background-color: var(--background--xlight, #FFF)
+}
+
+.grid__header {
+  /*private*/
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  /*public*/
+  background-color: var(--ezgrid__header--background-color);
+}