tuain-ng-forms-lib 14.4.90 → 14.4.93

package/src/lib/classes/forms/table/table.ts

@@ -0,0 +1,478 @@
+import { Subject } from 'rxjs';
+import { elementTypes } from '../form.constants';
+import { FormElement } from '../element';
+import { RecordTableColumn } from './column';
+import { TableAction } from './action';
+import { TableRecordData } from './row-data';
+
+const TABLE_SORT_ASCENDING = 'asc';
+const TABLE_SORT_DESCENDING = 'desc';
+
+const attrs = {
+  allSelected: { name: 'allSelected', propagate: 'allSelected' },
+  tableCode: { name: 'tableCode', propagate: 'code' },
+  clientPaging: { name: 'clientPaging', propagate: null },
+  globalSearch: { name: 'globalSearch', propagate: 'globalSearch' },
+  globalFilterString: { name: 'globalFilterString', propagate: 'globalFilterString' },
+  sorting: { name: 'sorting', propagate: null },
+  recordsPerPage: { name: 'recordsPerPage', propagate: 'recordsPerPage' },
+  layout: { name: 'layout', propagate: 'layout' },
+  columns: { name: 'columns', propagate: 'columns' },
+  selectedRecords: { name: 'selectedRecords', propagate: 'selectedRecords' },
+  currentPage: { name: 'currentPage', propagate: 'currentPage' },
+  totalRecordsNumber: { name: 'totalRecordsNumber', propagate: 'totalRecordsNumber' },
+  visibleRecords: { name: 'visibleRecords', propagate: 'visibleRecords' },
+};
+
+export interface TableActionEvent {
+  actionCode: string;
+  recordId: any;
+  recordData: any;
+}
+
+export interface TableEvent {
+  tableCode: string;
+  actionCode: string | null;
+  actionDetail: any;
+}
+
+export class RecordTable extends FormElement {
+  private readonly _inlineActionTrigger = new Subject<TableEvent>();
+  private readonly _globalActionTrigger = new Subject<TableEvent>();
+  private readonly _recordSelectionTrigger = new Subject<TableEvent>();
+  private readonly _selectionActionTrigger = new Subject<TableEvent>();
+  private readonly _getDataTrigger = new Subject<TableEvent>();
+  private _tableColumnObj = {};
+  private _appendPages: boolean;
+  private _actions: TableAction[];
+  private _actionsObj = {};
+
+  // Mecanismos de filtrado nueva versión
+  private globalFilterString: string = '';
+  private globalFilterStrings: string[] = [];
+  private selectedRecords: any;
+  private restrictedId: any;
+  private layout: string | null = null;
+
+  globalSearch: boolean;
+  tableRecords: TableRecordData[];
+  tableRecordObj = {};
+  visibleRecords: TableRecordData[] | null = null;
+  columns: RecordTableColumn[];
+  selectable: boolean;
+  selectionBackend: boolean;
+  selectionField: string;
+  allSelected = false;
+
+  tableCode: string = '';
+  tableTitle: string;
+  currentPage: number;
+  totalPages: number;
+  requestedPage: number;
+  recordsPerPage: number = 10;
+  totalRecordsNumber: number = 0;
+  recordsNumber: number = 0;
+  sorting: any;
+
+  waiting: boolean;
+  clientPaging: boolean = true;
+  sortable: boolean;
+
+  constructor(tableReceived, formConfig) {
+    super(tableReceived, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.tables ?? [];
+    this.elementType = elementTypes.table;
+    this.waiting = false;
+    this.currentPage = 1;
+    this.totalPages = 1;
+    this.requestedPage = 1;
+    this.columns = [];
+    this._tableColumnObj = {};
+    this._actions = [];
+    this._actionsObj = {};
+    this.tableRecords = [];
+    this.globalSearch = false;
+    this.restrictedId = null;
+
+    this.tableTitle = tableReceived.tableTitle;
+    this._appendPages = tableReceived?.append ?? false;
+    this.selectable = tableReceived?.selectable ?? false;
+    this.selectionBackend = tableReceived?.selectionBackend ?? false;
+    this.sortable = tableReceived?.sortable ?? false;
+
+    this.setAttr(attrs.allSelected, false);
+    this.setAttr(attrs.tableCode, tableReceived.tableCode);
+    this.setAttr(attrs.clientPaging, tableReceived?.clientPaging ?? true);
+    this.setAttr(attrs.globalSearch, tableReceived?.simpleFilter ?? false);
+    this.setAttr(attrs.globalFilterString, '');
+    this.setAttr(attrs.sorting, { columnName: '', direction: '' });
+    this.setAttr(attrs.recordsPerPage, formConfig.defaultRecordsPerPage);
+    this.setAttr(attrs.layout, '');
+
+    if (tableReceived.fields) {
+      const columns: RecordTableColumn[] = [];
+      for (const columnReceived of tableReceived.fields) {
+        const columnEnriched = {
+          ...columnReceived,
+          visibleStates: this.visibleStates,
+          enabledStates: this.enabledStates
+        };
+        const columnDefinition: RecordTableColumn = new RecordTableColumn(columnEnriched, this._formConfig);
+        columns.push(columnDefinition);
+        this._tableColumnObj[columnDefinition.fieldCode] = columnDefinition;
+      }
+      this.setAttr(attrs.columns, columns);
+    }
+    if (tableReceived.actions) {
+      const tableActions = tableReceived.actions.map(objDef => {
+        let visibleStates = objDef.visibleStates;
+        let enabledStates = objDef.enabledStates;
+        if (!visibleStates) {
+          visibleStates = (objDef.actionModes || '').split(',')
+            .map(state => state.trim())
+            .filter(state => state.length > 0);
+          enabledStates = (objDef.actionModes || '').split(',')
+            .map(state => state.trim())
+            .filter(state => state.length > 0);
+        }
+        return { ...objDef, visibleStates, enabledStates };
+      });
+      for (const actionReceived of tableActions) {
+        const inlineAction = new TableAction(actionReceived, this._formConfig);
+        this._actions.push(inlineAction);
+        this._actionsObj[inlineAction.actionCode] = inlineAction;
+      }
+    }
+    this.selectionField = (this.selectable) ? tableReceived?.selectionField : null;
+    // Filtros predefinidos en el formulario
+    if (tableReceived.filters) {
+      for (let index = 0; index < tableReceived.filters.length; index++) {
+        this.addFilterDefinition(tableReceived.filters[index].fieldCode, tableReceived.filters[index]);
+      }
+    }
+  }
+
+  get columnNames() { return Object.keys(this._tableColumnObj); }
+  get inlineActionTrigger() { return this._inlineActionTrigger; }
+  get globalActionTrigger() { return this._globalActionTrigger; }
+  get selectionActionTrigger() { return this._selectionActionTrigger; }
+  get recordSelectionTrigger() { return this._recordSelectionTrigger; }
+  get getDataTrigger() { return this._getDataTrigger; }
+
+  getLayout() { return this.layout; }
+  setLayout(layout) { this.setAttr(attrs.layout, layout); }
+  hasActions() { return (this._actions.length > 0); }
+  getSelectedRecords() { return this.tableRecords.filter(rec => rec.selected).map(rec => rec.recordId); }
+  activateGlobalSearch() { this.globalSearch = true; }
+  inactivateGlobalSearch() { this.globalSearch = false; }
+  columnDefinition(fieldCode): RecordTableColumn { return this._tableColumnObj[fieldCode]; }
+  putOnWait() { this.waiting = true; }
+  freeWaiting() { this.waiting = false; }
+
+  notifyGlobalAction(actionCode) {
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode,
+      actionDetail: null
+    };
+    this._globalActionTrigger.next(tableEvent);
+  }
+
+  notifyInlineAction(tableActionEvent: TableActionEvent) {
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode: tableActionEvent.actionCode,
+      actionDetail: {
+        recordId: tableActionEvent.recordId,
+        recordData: tableActionEvent.recordData
+      }
+    };
+    this._inlineActionTrigger.next(tableEvent);
+  }
+
+  notifyRecordSelection(recordId) {
+    const record = this.getTableRecord(recordId);
+    if (!record) { return; }
+    record.toggleSelect();
+    this.requestedPage = this.currentPage ?? 1;
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode: null,
+      actionDetail: {
+        recordId: record.recordId,
+        recordData: record.recordData
+      }
+    };
+    this.recordSelectionTrigger.next(tableEvent);
+  }
+
+  notifySelectionAction(actionCode) {
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode,
+      actionDetail: {
+        selectedRecords: this.selectedRecords
+      }
+    };
+    this._selectionActionTrigger.next(tableEvent);
+  }
+
+  notifyGetDataAction(requestedPage = null) {
+    this.updateVisibleRecords();
+    this.requestedPage = requestedPage || this.currentPage || 1;
+    const tableEvent: TableEvent = {
+      tableCode: this.tableCode,
+      actionCode: null,
+      actionDetail: null,
+    };
+    this._getDataTrigger.next(tableEvent);
+    return null;
+  }
+
+  clean() {
+    this.tableRecords = [];
+    this.unSelectAll();
+    this.tableRecordObj = {};
+    this.updateVisibleRecords();
+  }
+
+  selectAll() {
+    this.setAttr(attrs.allSelected, true);
+    this.tableRecords.forEach(record => record.select());
+    this.setAttr(attrs.selectedRecords, this.getSelectedRecords());
+    return true;
+
+  }
+
+  unSelectAll() {
+    this.setAttr(attrs.allSelected, false);
+    this.tableRecords.forEach(record => record.unselect());
+    this.setAttr(attrs.selectedRecords, this.getSelectedRecords());
+    return true;
+  }
+
+  setTableRecords(tableRecords, append) {
+    if (!append) {
+      this.tableRecords = [];
+      this.setAttr(attrs.allSelected, false);
+      this.tableRecords.forEach(record => record.unselect());
+      this.setAttr(attrs.selectedRecords, []);
+      this.tableRecordObj = {};
+    }
+    const newRecordsObj = { ...this.tableRecordObj };
+    const newRecords = [...this.tableRecords];
+    for (const tableRecord of tableRecords) {
+      const recordReceived: TableRecordData = new TableRecordData(tableRecord, this.columns, this.selectionField);
+      const recordIdKey = recordReceived.recordIdKey;
+      newRecords.push(recordReceived);
+      newRecordsObj[recordIdKey] = recordReceived;
+    }
+    this.tableRecords = newRecords;
+    this.setAttr(attrs.selectedRecords, this.getSelectedRecords());
+    this.tableRecordObj = newRecordsObj;
+    this.updateVisibleRecords();
+  }
+
+  appendRecords(records) { this.setTableRecords(records, true); }
+  replaceRecords(records) { this.setTableRecords(records, false); }
+
+  setTableAppend(append: boolean) { this._appendPages = append }
+
+  changePage(requestedPage) {
+    if (this.clientPaging) {
+      this.setAttr(attrs.currentPage, requestedPage);
+      this.updateVisibleRecords();
+    } else {
+      this.notifyGetDataAction(requestedPage);
+    }
+  }
+
+  updateVisibleRecords() {
+    let visibleRecords: any[];
+    if (this.clientPaging) {
+      let filteredRecords = this.getFilteredRecords();
+      this.setAttr(attrs.totalRecordsNumber, filteredRecords.length);
+      const sliceNumber1 = (this.currentPage - 1) * this.recordsPerPage;
+      const sliceNumber2 = (this.currentPage - 1) * this.recordsPerPage + this.recordsPerPage
+      visibleRecords = filteredRecords.slice(sliceNumber1, sliceNumber2);
+      const recordsLastPage = this.totalRecordsNumber % this.recordsPerPage;
+      const totalPages = Math.trunc(this.totalRecordsNumber / this.recordsPerPage + (recordsLastPage ? 1 : 0));
+      if (this.currentPage > totalPages) {
+        this.currentPage = totalPages || 1;
+      }
+    } else {
+      visibleRecords = this.tableRecords;
+    }
+    this.setAttr(attrs.visibleRecords, visibleRecords);
+  }
+
+  updateFromServer(tableReceived) {
+    this.requestedPage = 1;
+    this.visible = tableReceived?.visible || true;
+    this.totalPages = tableReceived.totalPages || 1;
+    this.recordsNumber = tableReceived.recordsNumber;
+    this.setAttr(attrs.currentPage, +tableReceived?.currentPage || 1);
+    this.setAttr(attrs.recordsPerPage, +tableReceived.recordsPerPage);
+    this.setAttr(attrs.totalRecordsNumber, (this.clientPaging) ? tableReceived.tableRecords.length : +tableReceived.totalRecordsNumber);
+    this.setAttr(attrs.sorting, {
+      columnName: tableReceived.sortingColumn || '',
+      direction: tableReceived.sortingDirection || ''
+    });
+    this.waiting = false;
+    if (!this._appendPages) {
+      this.replaceRecords(tableReceived.tableRecords);
+    } else {
+      this.appendRecords(tableReceived.tableRecords);
+    }
+    this.updateVisibleRecords();
+  }
+
+  getTableRecord(recordId) {
+    const recordIdKey = (typeof recordId === 'object') ? JSON.stringify(recordId) : recordId;
+    return (this.tableRecordObj && recordId && this.tableRecordObj[recordId])
+      ? this.tableRecordObj[recordId] : null;
+  }
+
+  getAction(actionCode) {
+    return (this._actionsObj && actionCode && this._actionsObj[actionCode])
+      ? this._actionsObj[actionCode] : null;
+  }
+
+  getActions(actionClass: string = this._formConfig.tableActions.inline, actionTypes: string[] = null) {
+    return this._actions.filter(actionDef => {
+      const typeIncluded = (actionTypes) ? actionTypes.includes(actionDef.actionType) : true;
+      return actionDef.actionClass === actionClass && typeIncluded;
+    });
+  }
+
+  // Filtros
+
+  setFilterById(id) {
+    if (this.restrictedId === id) { return; }
+    this.restrictedId = id;
+    this.updateVisibleRecords();
+  }
+
+  cleanIdFilter() {
+    if (this.restrictedId === null) { return; }
+    this.restrictedId = null;
+    this.updateVisibleRecords();
+  }
+
+  setGlobalFilterString(text, notifyComponent = true) {
+    this.globalFilterStrings = text.split(' ').filter(t => t && t.trim().length > 0).map(t => t.trim()) ?? [];
+    if (this.clientPaging) {
+      this.changePage(1);
+    }
+    if (notifyComponent) {
+      this.setAttr(attrs.globalFilterString, text.trim());
+    }
+  }
+
+  addFilterDefinition(columnName, filterDefinition) {
+    const tableColumn = this.columnDefinition(columnName);
+    tableColumn && tableColumn.addFilterDefinition(filterDefinition);
+  }
+
+  getFilteredRecords() {
+    let filteredRecords = this.tableRecords;
+    if (this.restrictedId) {
+      filteredRecords = filteredRecords.filter(record => record.recordId === this.restrictedId);
+    }
+    if (this.globalFilterStrings.length > 0) {
+      filteredRecords = filteredRecords.filter(record => record.hasPattern(this.globalFilterStrings, this._tableColumnObj));
+    }
+    const columnFilters = this.columns.filter(column => column.filter).map(column => column.filter);
+    if (columnFilters.length > 0) {
+      filteredRecords = filteredRecords.filter(record => record.hasCondition(columnFilters));
+    }
+    return filteredRecords;
+  }
+
+  getColumnFilter(columnName: string) {
+    const tableColumn = this.columnDefinition(columnName);
+    return tableColumn?.filter ?? null;
+  }
+
+  addColumnFilter(columnName: string, columnValues: any | any[], operator: string = null) {
+    const tableColumn = this.columnDefinition(columnName);
+    const columnFilterDefinition = tableColumn?.filterDefinition ?? null;
+    if (!columnFilterDefinition) {
+      return;
+    }
+    tableColumn && tableColumn.addFilter(columnValues, operator);
+    this.updateVisibleRecords();
+  }
+
+  removeColumnFilter(columnName: string) {
+    const tableColumn = this.columnDefinition(columnName);
+    tableColumn && tableColumn.removeFilter();
+    this.updateVisibleRecords();
+  }
+
+  get currentFilter() {
+    const compactFilter: any = {
+      simpleFilterWords: this.globalFilterStrings,
+      advancedFilter: [],
+    };
+    const columnFilters = this.columns.filter(column => column.filter).map(column => column.filter);
+    for (let index = 0; index < columnFilters.length; index++) {
+      const columnFilter = columnFilters[index];
+      compactFilter.advancedFilter.push({
+        fieldCode: columnFilter?.fieldCode,
+        operator: columnFilter?.operator,
+        fieldValue1: columnFilter?.values[0],
+        fieldValue2: columnFilter?.values[1],
+      });
+    }
+    return compactFilter;
+  }
+
+  // Ordenamiento de registros local
+
+  sort(columnName, direction) {
+    this.setRequiredOrder(columnName, direction);
+    if (this.clientPaging) {
+      this.localSortData()
+    } else {
+      this.notifyGetDataAction();
+    }
+  }
+
+  setRequiredOrder(columnField, direction = null) {
+    this.setAttr(attrs.sorting, {
+      columnName: columnField,
+      direction: (direction === 'ascend') ? TABLE_SORT_ASCENDING : TABLE_SORT_DESCENDING,
+    });
+  }
+
+  localSortData() {
+    if (!this.sorting.columnName || !this.sorting.direction) { return; }
+    this.tableRecords.sort((a, b) => this.recordCompare(a, b, this.sorting.columnName, this.sorting.direction));
+    //this.unSelectAll();
+    this.updateVisibleRecords();
+  }
+
+  recordCompare(recordA: TableRecordData, recordB: TableRecordData, columnCompare, direction) {
+    const recordAValue = recordA.getFieldValue(columnCompare);
+    const recordBValue = recordB.getFieldValue(columnCompare);
+    const recordAColumn = isNaN(recordAValue) ? recordAValue.toLocaleLowerCase() : +recordAValue;
+    const recordBColumn = isNaN(recordBValue) ? recordBValue.toLocaleLowerCase() : +recordBValue;
+    let result = 0;
+    if (recordAColumn < recordBColumn) {
+      result = -1;
+    } else if (recordAColumn > recordBColumn) {
+      result = 1;
+    }
+    return direction === TABLE_SORT_ASCENDING ? result : -result;
+  }
+
+  override formStateChangeCustomSubscribe(formChangeSubject) {
+    this.columns?.forEach(column => {
+      column?.subscribeFormStateChange(formChangeSubject);
+    });
+    this._actions?.forEach(action => {
+      action?.subscribeFormStateChange(formChangeSubject);
+    });
+  }
+}

package/src/lib/components/elements/action.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormAction } from '../../classes/forms/action';
+import { ElementComponent } from './layout/element.component'
+
+@Component({
+  selector: 'lib-action',
+  template: `<ng-content></ng-content>`
+})
+
+export class ActionComponent extends ElementComponent implements OnInit {
+  inProgress: boolean = false;
+
+  @Input() action: FormAction | null = null;
+  @Input() busy: any;
+  @Input() relatedField: any;
+
+  @Input() style = 'primary';
+  @Input() showLabel = true;
+
+  ngOnInit() {
+    if (!this.action) { return; }
+    this.formConfig = this.action?._formConfig;
+    const mapping = Object.entries(this.formConfig?.actionPropagateAttributes);
+    for (let index = 0; index < mapping.length; index++) {
+      const actionAttr = mapping[index]?.[0];
+      const componentAttr = mapping[index]?.[1]?.toString() ?? '';
+      if (componentAttr) {
+        const value = this.action?.[actionAttr];
+        this.defaultProcessAttributeChange(componentAttr, value);
+        this.customProcessAttributeChange(componentAttr, value);
+      }
+    }
+    this.action?.attributeChange?.subscribe(event => {
+      const { name: componentAttr, value } = event;
+      this.defaultProcessAttributeChange(componentAttr, value);
+      this.customProcessAttributeChange(componentAttr, value);
+    });
+    this.start();
+  }
+
+  activate() {
+    if (this.action?.notifyActivation) {
+      this.action.notifyActivation();
+    }
+  }
+
+  visibleOnRestriction() {
+    if (!this.action?.restrictedOnField) {
+      return true;
+    }
+    if ((this.action?.restrictedOnOperator === '=='
+      && this.relatedField === this.action?.restrictedOnValue)
+      || (this.action?.restrictedOnOperator === '!='
+        && this.relatedField !== this.action?.restrictedOnValue)) {
+      return true;
+    }
+    return false;
+  }
+}

package/src/lib/components/elements/field.component.ts

@@ -0,0 +1,92 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FieldDescriptor } from '../../classes/forms/field';
+import { ElementComponent } from './layout/element.component'
+
+const VALUE = 'value';
+const FOCUS = 'focus';
+@Component({
+  selector: 'lib-field',
+  template: `<ng-content></ng-content>`
+})
+export class FieldComponent extends ElementComponent implements OnInit {
+  // Atributos obtenidos estáticamente
+  code: string = '';
+  value: any;
+  info: string = '';
+  alignment: string = '';
+  tooltip: string = '';
+
+  // Atributos actualizados por subscripción
+  maxLength: any;
+  minValue: any;
+  maxValue: any;
+  onValidation: any;
+  captureType: any;
+  title: any;
+  type: any;
+  visibleLabel: any;
+  required: any;
+  options: any;
+
+  errorType: any;
+  errorCode: any;
+  errorMessage: any;
+
+  @Input() field: FieldDescriptor | null = null;
+
+  ngOnInit() {
+    if (!this.field) { return; }
+    this.formConfig = this.field?._formConfig;
+    const mapping = Object.entries(this.formConfig?.fieldPropagateAttributes);
+    for (let index = 0; index < mapping.length; index++) {
+      const fieldAttr = mapping[index]?.[0];
+      const componentAttr = mapping[index]?.[1]?.toString() ?? '';
+      if (componentAttr) {
+        const value = this.field?.[fieldAttr];
+        this.defaultProcessAttributeChange(componentAttr, value);
+        this.customProcessAttributeChange(componentAttr, value);
+      }
+    }
+    // Subscripción a cambios en atributos
+    this.field?.attributeChange.subscribe(event => {
+      const { name: componentAttr, value } = event;
+      this.defaultProcessAttributeChange(componentAttr, value);
+      this.customProcessAttributeChange(componentAttr, value);
+    });
+    this.start();
+  }
+
+  override defaultProcessAttributeChange(attribute: string, value?: any): boolean {
+    if (attribute === VALUE) {
+      this.updateValue();
+    } else if (attribute === FOCUS) {
+      this.focus();
+    } else {
+      return super.defaultProcessAttributeChange(attribute, value);
+    }
+    return true;
+  }
+
+  updateValue() { this.value = this.field?.value; }
+  onInputChange() { setTimeout(() => this.field?.notifyEditionPartial(), 50); }
+  onChangeContent() { setTimeout(() => this.field?.notifyEditionFinish(), 50); }
+  onShowInfo(detail = null) { setTimeout(() => this.field?.notifyEditionDetailRequest(detail), 50); }
+
+  focus() { }
+  updateObject(widgetUpdate = true) { this.field?.setValue(this.value, widgetUpdate); }
+
+  inputChanged() {
+    this.field?.setValue(this.value);
+    this.onChangeContent();
+  }
+
+  inputTyped() {
+    this.updateObject(false);
+    this.onInputChange();
+  }
+
+  numberInputValidation(event) {
+    const k = event.charCode;
+    return (k > 47 && k < 58);
+  }
+}

package/src/lib/components/elements/layout/element.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PieceComponent } from './piece.component';
+
+@Component({
+  selector: 'lib-element',
+  template: `<ng-content></ng-content>`
+})
+export class ElementComponent extends PieceComponent {
+  @Input() element: any;
+  @Input() form: any;
+
+  start() { }
+}

package/src/lib/components/elements/layout/form-error.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-form-error',
+  template: `<ng-content></ng-content>`
+})
+export class FormErrorComponent {
+  @Input() errorTitle: any;
+  @Input() errorMessage: any;
+  @Input() errorType: any;
+}

package/src/lib/components/elements/layout/form-header.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'lib-form-header',
+  template: `<ng-content></ng-content>`
+})
+export class FormHeaderComponent {
+  @Input() form: any;
+  @Input() canGoBack: boolean = false;
+  @Input() showTitle: any;
+  @Input() headerActions: any;
+  @Output() goBackEvent: EventEmitter<void> = new EventEmitter<void>();
+
+  goBackForm() {
+    this.goBackEvent.emit();
+  }
+}