@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-11997.0

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

@@ -0,0 +1,572 @@
+import { h, Host } from '@stencil/core';
+import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+import { PresentationMode } from '../../lib';
+import { VIEW_MODE } from '../../lib/utils/constants';
+import { AutorizationType } from '../../lib/http/data-fetcher/fetchers/auth-fetcher';
+/**
+ * É 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 os arquivos neste projeto "/src/lib/message/resources/*.msg.ts"
+ */
+export class SnkCrud {
+  constructor() {
+    this._viewHistory = [];
+    this._dataUnit = undefined;
+    this._dataState = undefined;
+    this.attachmentRegisterKey = undefined;
+    this._currentViewMode = VIEW_MODE.GRID;
+    this._canEdit = undefined;
+    this._resourceID = undefined;
+    this.configName = undefined;
+    this.selectionToastConfig = undefined;
+    this.showActionButtons = false;
+    this.actionsList = undefined;
+    this.taskbarManager = undefined;
+    this.recordsValidator = undefined;
+    this.statusResolver = undefined;
+    this.multipleSelection = true;
+    this.presentationMode = PresentationMode.PRIMARY;
+    this.messagesBuilder = undefined;
+    this.useEnterLikeTab = false;
+    this.customContainerId = `SNK-CRUD-CUSTOM-CONTAINER-${StringUtils.generateUUID()}`;
+  }
+  /**
+   * Usado para alternar a visão entre GRID e FORM externamente.
+   */
+  async goToView(mode) {
+    this.executeAction(mode);
+  }
+  /**
+   * Usado para abrir o configurator do CRUD
+   */
+  async openConfigurator() {
+    var _a;
+    (_a = this._snkConfigurator) === null || _a === void 0 ? void 0 : _a.open();
+  }
+  /**
+   * Usado para fechar o configurator do CRUD
+   */
+  async closeConfigurator() {
+    var _a;
+    (_a = this._snkConfigurator) === null || _a === void 0 ? void 0 : _a.close();
+  }
+  /**
+   * Faz o recarregamento da filter-bar do crud, buscando o state no servidor.
+   */
+  async reloadFilterBar() {
+    var _a;
+    (_a = this._snkGrid) === null || _a === void 0 ? void 0 : _a.reloadFilterBar();
+  }
+  currentViewModeWatcher(currentView) {
+    this._viewHistory = [...this._viewHistory.slice(-1), currentView];
+  }
+  async gridToForm(keepFormMode = false) {
+    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === VIEW_MODE.GRID;
+    this.setViewMode(VIEW_MODE.FORM);
+  }
+  async executeAction(act) {
+    if (act === TaskbarElement.GRID_MODE)
+      return this.setViewMode(VIEW_MODE.GRID);
+    if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE)
+      return this.gridToForm(act !== TaskbarElement.UPDATE);
+    if (act === TaskbarElement.CONFIGURATOR)
+      return this._snkConfigurator.open();
+    if (act === "ATTACH")
+      return this.setViewMode(VIEW_MODE.ATTACHMENT);
+  }
+  backView() {
+    const lastView = this._viewHistory.at(-2) || VIEW_MODE.GRID;
+    this.setViewMode(lastView);
+  }
+  setViewMode(viewMode) {
+    this._viewStack.show(viewMode);
+    this._currentViewMode = viewMode;
+  }
+  openConfig(viewMode) {
+    this._snkConfigurator.close();
+    if (viewMode === VIEW_MODE.GRID) {
+      this._snkGrid.showConfig();
+    }
+    else if (viewMode === VIEW_MODE.FORM) {
+      this._guidesViewer.showFormConfig();
+    }
+  }
+  addDataElementID() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  insertionModeHandler() {
+    this.gridToForm();
+  }
+  cancelHandler() {
+    if (this._backToGrid) {
+      this.setViewMode(VIEW_MODE.GRID);
+    }
+  }
+  async getAttachmentRegisterKey() {
+    if (!this._snkDataUnit)
+      return;
+    const recordCriteria = await this._snkDataUnit.getSelectedRecordsIDsInfo();
+    const joinedPrimaryKeys = recordCriteria.map(({ value }) => value).join('_');
+    return joinedPrimaryKeys;
+  }
+  componentWillLoad() {
+    const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    application.hasAccess(AutorizationType.UPDATE, this._resourceID).then(canEdit => this._canEdit = canEdit);
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._snkDataUnit.addEventListener("insertionMode", () => this.insertionModeHandler());
+        this._snkDataUnit.addEventListener("cancelEdition", () => this.cancelHandler());
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        this._dataState = this._snkDataUnit.dataState;
+        if (!this._dataUnit) {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+            this.initDataUnit(application);
+          });
+        }
+        else {
+          this.initDataUnit(application);
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", async ({ detail: dataState }) => {
+          this._dataState = dataState;
+          if (dataState.selectedRecord !== undefined) {
+            this.attachmentRegisterKey = await this.getAttachmentRegisterKey();
+          }
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    if (!this.configName) {
+      this.configName = application.configName;
+    }
+  }
+  async initDataUnit(application) {
+    this.addDataElementID();
+    if (!this.messagesBuilder) {
+      this.messagesBuilder = this._snkDataUnit.messagesBuilder;
+    }
+    if (this._resourceID == undefined) {
+      //Tenta pegar o resourceID do snkDataUnit;
+      this._resourceID = this._snkDataUnit.resourceID;
+      if (this._resourceID == undefined) {
+        this._resourceID = await application.getResourceID();
+      }
+    }
+  }
+  handleConfiguratorEvent(evt, type) {
+    evt.stopImmediatePropagation();
+    if (type === 'SAVE') {
+      this.configuratorSave.emit();
+      return;
+    }
+    this.configuratorCancel.emit();
+  }
+  render() {
+    if (this._resourceID == undefined) {
+      return;
+    }
+    this._snkDataUnit.ignoreSaveMessage = this._currentViewMode === VIEW_MODE.GRID;
+    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
+  }
+  static get is() { return "snk-crud"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-crud.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-crud.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para salvar as configura\u00E7\u00F5es dos blocos de constru\u00E7\u00E3o."
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "selectionToastConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ISelectionToastConfig",
+          "resolved": "ISelectionToastConfig",
+          "references": {
+            "ISelectionToastConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Configura\u00E7\u00E3o da sele\u00E7\u00E3o de grade no toast."
+        }
+      },
+      "showActionButtons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para exibir os bot\u00F5es de a\u00E7\u00E3o do snk-configurator"
+        },
+        "attribute": "show-action-buttons",
+        "reflect": false,
+        "defaultValue": "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": "A\u00E7\u00F5es a serem colocadas no bot\u00E3o \"Mais op\u00E7\u00F5es\" do componente snk-taskbar."
+        }
+      },
+      "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."
+        }
+      },
+      "recordsValidator": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IRecordValidator",
+          "resolved": "IRecordValidator",
+          "references": {
+            "IRecordValidator": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Validador respons\u00E1vel por checar a integridade das informa\u00E7\u00F5es do registro."
+        }
+      },
+      "statusResolver": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IStatusResolver | StatusResolverFunction",
+          "resolved": "((data: object) => string) | IStatusResolver",
+          "references": {
+            "IStatusResolver": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            },
+            "StatusResolverFunction": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Configura\u00E7\u00E3o do valor da coluna de status.\nExemplo: { \"RECDESP\": { \"-1\" : \"#BD0025\", \"1\" : \"#157A00\" } }"
+        }
+      },
+      "multipleSelection": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se pode haver mais de uma linha selecionada na grade."
+        },
+        "attribute": "multiple-selection",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "presentationMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PresentationMode",
+          "resolved": "PresentationMode.PRIMARY | PresentationMode.SECONDARY",
+          "references": {
+            "PresentationMode": {
+              "location": "import",
+              "path": "../../lib"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Altera o modo de apresenta\u00E7\u00E3o dos bot\u00F5es do snk-taskbar."
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "PresentationMode.PRIMARY"
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
+        }
+      },
+      "useEnterLikeTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o ENTER far\u00E1 a navega\u00E7\u00E3o como se fosse a tecla TAB na grade."
+        },
+        "attribute": "use-enter-like-tab",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_dataUnit": {},
+      "_dataState": {},
+      "attachmentRegisterKey": {},
+      "_currentViewMode": {},
+      "_canEdit": {},
+      "_resourceID": {},
+      "customContainerId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "actionClick",
+        "name": "actionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido pela taskbar sempre que houver click de bot\u00E3o ou a\u00E7\u00E3o."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "configuratorSave",
+        "name": "configuratorSave",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando salva a configura\u00E7\u00E3o no configurator do CRUD."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "configuratorCancel",
+        "name": "configuratorCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando cancela o salvamento da configura\u00E7\u00E3o no configurator do CRUD."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "formItemsReady",
+        "name": "formItemsReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
+        },
+        "complexType": {
+          "original": "Array<HTMLElement>",
+          "resolved": "HTMLElement[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "goToView": {
+        "complexType": {
+          "signature": "(mode: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Usado para alternar a vis\u00E3o entre GRID e FORM externamente.",
+          "tags": []
+        }
+      },
+      "openConfigurator": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Usado para abrir o configurator do CRUD",
+          "tags": []
+        }
+      },
+      "closeConfigurator": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Usado para fechar o configurator do CRUD",
+          "tags": []
+        }
+      },
+      "reloadFilterBar": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Faz o recarregamento da filter-bar do crud, buscando o state no servidor.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "_currentViewMode",
+        "methodName": "currentViewModeWatcher"
+      }];
+  }
+}

package/dist/collection/components/snk-crud/subcomponents/CardFormResizeObserver.js

@@ -0,0 +1,26 @@
+const BOUNDARY_FALSE_POSITIVE_VALUE = 14;
+export const cardFormResizeObserver = new ResizeObserver((entries) => {
+  var _a;
+  for (let entry of entries) {
+    const children = ((_a = entry === null || entry === void 0 ? void 0 : entry.target) === null || _a === void 0 ? void 0 : _a.children) || [];
+    const { parentElement } = (entry === null || entry === void 0 ? void 0 : entry.target) || {};
+    if (!(parentElement === null || parentElement === void 0 ? void 0 : parentElement.clientWidth))
+      return;
+    const limitWidth = parentElement.clientWidth - BOUNDARY_FALSE_POSITIVE_VALUE;
+    if (entry.target.hasChildNodes()) {
+      const listWidth = [];
+      for (const node of children)
+        listWidth.push(node);
+      listWidth.reduce((total, child) => {
+        const totalWidth = total + child.clientWidth;
+        if (totalWidth > limitWidth) {
+          child.style.visibility = 'hidden';
+        }
+        else {
+          child.style.visibility = 'visible';
+        }
+        return totalWidth;
+      }, 0);
+    }
+  }
+});

package/dist/collection/components/snk-crud/subcomponents/GuideBuilder.js

@@ -0,0 +1,43 @@
+import { FormMetadata } from "@sankhyalabs/ezui/dist/collection/utils/form";
+export class GuideBuilder {
+  constructor(parentGuide, formMetadata, dataUnit) {
+    this._parentGuide = parentGuide;
+    this._formMetadata = formMetadata;
+    this._dataUnit = dataUnit;
+  }
+  get id() {
+    return this._parentGuide.id;
+  }
+  buildGuideItem(detailBuilders) {
+    const item = Object.assign({}, this._parentGuide);
+    delete item.expanded;
+    delete item.children;
+    const currentRecord = this._dataUnit.getSelectedRecord();
+    if (!currentRecord) {
+      return item;
+    }
+    const isNewRecord = this._dataUnit.isNewRecord(currentRecord.__record__id__);
+    const children = Array.from(this._formMetadata.getAllSheets().values()).map((sheet) => {
+      const { name, label } = sheet;
+      const isDetail = FormMetadata.getDetailName(name.split("::").pop()) != undefined;
+      const disabled = isDetail && isNewRecord;
+      const parentId = this._parentGuide.id;
+      const id = isDetail ? `${parentId}::${name}` : `${parentId}__FORM:${name}`;
+      if (isDetail && detailBuilders.has(id) && !disabled) {
+        const item = detailBuilders.get(id).buildGuideItem(detailBuilders);
+        return item;
+      }
+      return {
+        id,
+        label,
+        disabled,
+        tooltip: disabled ? "Finalize o cadastro para ter acesso a esta guia." : undefined
+      };
+    });
+    const newGuideItem = children.shift();
+    newGuideItem.label = isNewRecord ? "Novo Registro" : currentRecord.__record__label__;
+    newGuideItem.children = children;
+    item.children = [newGuideItem];
+    return item;
+  }
+}

package/dist/collection/components/snk-crud/subcomponents/snk-detail-view/snk-detail-view.css

@@ -0,0 +1,26 @@
+:host {
+  display: flex;
+  row-gap: 24px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.level-path{
+  color: var(--color--title-primary, #2B3A54);
+  font-weight: var(--text-weight--medium, 400);
+  padding-right: 3px;
+}
+
+.form-taskbar{
+  padding-bottom: var(--space--medium);
+}
+
+.grid-container{
+  background-color: #FFF;
+  min-height: 100px;
+}
+
+.detail-header{
+  padding-bottom: 0;
+}