@inspark/inspark-components 19.0.49 → 19.0.51

package/src/utils/hybrid/prime-table/prime-table-columns-multi-select/prime-table-columns-multi-select.component.html

@@ -0,0 +1,56 @@
+<app-overlay [isExpanded]="isExpanded">
+  <ng-container ngProjectAs="host">
+    <button class="c-btn c-btn_border-free c-btn_small">
+      <i class="in in-cog" [title]="('column switch' | translate)"></i><i class="c-caret"></i>
+    </button>
+
+  </ng-container>
+  <ng-container ngProjectAs="body">
+    <ul class="o-list">
+      <!--<li ng-repeat="cell in $ctrl.cells" role="menuitem"><input type="checkbox" class="c-dropdown__menu-li-checkbox"><a href="#">{{cell.header}}</a></li>-->
+      <li class="c-dropdown-menu__listitem" *ngFor="let column of columns" role="menuitem">
+        <div class="c-dropdown-menu__content">
+          <label class="c-checkbox c-checkbox_switch c-checkbox_compact">
+            <input class="c-checkbox__input"
+                   type="checkbox"
+                   [ngModel]="!column.isHidden "
+                   (ngModelChange)="columnChange($event, column)"
+                   [disabled]="isDisabled(column, columns)">
+            <i class="c-checkbox__icon"></i>
+            <span class="c-checkbox__label">{{column.header | translate}}</span>
+          </label>
+        </div>
+      </li>
+    </ul>
+
+  </ng-container>
+</app-overlay>
+
+<!--
+
+<div ng-if="$ctrl.tableOptions.columnSwitch.enable" class="c-btn-group" uib-dropdown dropdown-append-to-body
+     is-open="status.isopen"
+     auto-close="outsideClick">
+  <button id="single-button" type="button" class="c-btn c-btn_border-free c-btn_small" uib-dropdown-toggle
+          ng-disabled="disabled">
+    <i class="fa fa-cog" ng-attr-title="{{'column switch' | translate}}"></i><i class="c-caret"></i>
+  </button>
+  <ul class="c-dropdown-menu c-dropdown-menu_right" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+    &lt;!&ndash;<li ng-repeat="cell in $ctrl.cells" role="menuitem"><input type="checkbox" class="c-dropdown__menu-li-checkbox"><a href="#">{{cell.header}}</a></li>&ndash;&gt;
+    <li class="c-dropdown-menu__listitem" ng-repeat="cell in $ctrl.cells" role="menuitem">
+      <div class="c-dropdown-menu__content">
+        <label class="c-checkbox c-checkbox_switch c-checkbox_compact">
+          <input class="c-checkbox__input"
+                 type="checkbox"
+                 ng-model="cell.isHidden"
+                 ng-disabled="$ctrl.isLastChecked(cell, $ctrl.cells)"
+                 ng-true-value="false || undefined"
+                 ng-false-value="true">
+          <i class="c-checkbox__icon"></i>
+          <span class="c-checkbox__label">{{cell.header}}</span>
+        </label>
+      </div>
+    </li>
+  </ul>
+</div>
+-->

package/src/utils/hybrid/prime-table/prime-table-columns-multi-select/prime-table-columns-multi-select.component.scss

@@ -0,0 +1,4 @@
+ul {
+  text-align: left;
+
+}

package/src/utils/hybrid/prime-table/prime-table-columns-multi-select/prime-table-columns-multi-select.component.ts

@@ -0,0 +1,40 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {TableColumn} from '../table-column.model';
+
+@Component({
+  standalone: false,
+  selector: 'app-prime-table-columns-multi-select',
+  templateUrl: './prime-table-columns-multi-select.component.html',
+  styleUrls: ['./prime-table-columns-multi-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PrimeTableColumnsMultiSelectComponent implements OnInit {
+  public isExpanded: false;
+
+  @Input() columns: TableColumn[];
+  @Output() columnsChange = new EventEmitter<TableColumn[]>();
+
+  constructor() {
+  }
+
+  columnChange(isShown, column: TableColumn) {
+    const updatedColumns = this.columns.map(_column => {
+      if (_column === column) {
+        return {..._column, isHidden: !isShown};
+      }
+      return _column;
+    });
+
+    this.columnsChange.emit(updatedColumns);
+  }
+
+  ngOnInit() {
+  }
+
+  public isDisabled(column: TableColumn, columns: TableColumn[]) {
+    if (column.isHidden) return false;
+    return !column.isHidden && columns.filter(_column => !_column.isHidden).length === 1;
+  }
+
+
+}

package/src/utils/hybrid/prime-table/prime-table.component.html

@@ -0,0 +1,173 @@
+<p-table #dt
+         (onFilter)="onFilter($event)" (onSort)="onSort()"
+         (selectionChange)="checkedListChange.emit($event)"
+         [autoLayout]="false"
+         [columns]="visibleColumns()"
+         [paginator]="false"
+         [resizableColumns]="true"
+         columnResizeMode="expand"
+         [rows]="10"
+         [scrollHeight]="scrollHeight"
+         [scrollable]="true"
+         [selection]="checkedList"
+         [sortField]="options?.sort?.sortField || 'id'"
+         [sortOrder]="options?.sort && options.sort.isAscending ? 1 : -1"
+         [style]="{width:'100%',height: height}"
+         [value]="rowsData"
+         class="u-position-relative u-height-100pc"
+         dataKey="id"
+         [ngClass]="options.columnFilters && options.columnFilters.isOpen ? 'p-table-expanded-header' : ''"
+>
+  <ng-template let-columns pTemplate="colgroup">
+    <colgroup>
+      <col *ngIf="options.checkboxSelection" style="width: 44px">
+      <col *ngFor="let col of columns" [style.width]="col.width ? col.width : '180px'">
+    </colgroup>
+  </ng-template>
+  <ng-template pTemplate="caption">
+    <div class="c-form c-form_inline u-display-inline-block">
+      <label class="c-label">
+        <!--<span class="c-label__content sr-only ng-binding">{{'SHARED.FIND' | translate}} </span>-->
+        <input #searchTextInput
+               (input)="dt.filterGlobal($event.target.value, 'contains')"
+               [(ngModel)]="searchText"
+               autofocus=""
+               class="c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched"
+               pInputText
+               placeholder="{{('SHARED.SEARCH' | translate) + ':'}}"
+               tabindex="1"
+               type="search"
+        >
+      </label>
+    </div>
+
+    <button (click)="options.columnFilters.isOpen = !options.columnFilters.isOpen;"
+            *ngIf="options?.columnFilters?.enable"
+            class="c-btn c-btn_border-free c-btn_small">
+      <i aria-hidden="true" class="in in-filter"
+      ><!--{{filtersCount()}}--></i>
+    </button>
+    <app-prime-table-action-buttons (create)="create.emit()"
+                                    (groupDelete)="groupDelete.emit(checkedList)"
+                                    (groupEdit)="groupEdit.emit(checkedList)"
+                                    (userCSV)="userCsv.emit(checkedList)"
+                                    *ngIf="options?.actionButtons"
+                                    [isSomeSelected]="checkedList?.length>0"
+                                    [options]="options.actionButtons"
+    >
+    </app-prime-table-action-buttons>
+    <app-prime-table-columns-multi-select (columnsChange)="columnsChange.emit($event)"
+                                          [columns]="columns"></app-prime-table-columns-multi-select>
+    <ng-content></ng-content>
+
+    <!-- <label class="c-label u-float-left">
+       &lt;!&ndash;<span class="c-label__content sr-only ng-binding">{{'SHARED.FIND' | translate}} </span>&ndash;&gt;
+       <input class="c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched"
+              type="search"
+              pInputText
+              autofocus=""
+              tabindex="1"
+              placeholder="{{('SHARED.SEARCH' | translate) + ':'}}"
+              (input)="dt.filterGlobal($event.target.value, 'contains')"
+       >
+     </label>
+     <app-prime-table-controls></app-prime-table-controls>-->
+  </ng-template>
+  <ng-template pTemplate="header">
+    <tr>
+      <th *ngIf="options.checkboxSelection" class="u-text_center">
+        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+      </th>
+      <th *ngFor="let col of visibleColumns()" [pSortableColumn]="col.field" class="u-position-relative"
+          pResizableColumn>
+        <div class="p-table-thead-title"
+             title="{{col.header | translate }}">
+          {{col.header | translate }}
+        </div>
+        <p-sortIcon [field]="col.field"
+                    class="u-position-absolute u-position-absolute-right c-sorticon"
+                    style="display: flex; width: 18px; top: 0; height: 100%;"></p-sortIcon>
+      </th>
+    </tr>
+    <tr *ngIf="options?.columnFilters?.isOpen">
+      <th *ngIf="options.checkboxSelection">
+      </th>
+      <th *ngFor="let col of visibleColumns()" [ngSwitch]="col.filter?.type">
+        <p-multiSelect (onChange)="dt.filter($event.value, col.field, 'in')"
+                       *ngSwitchCase="tableFilterType.multiSelect"
+                       [appendTo]="'body'"
+                       [maxSelectedLabels]="1"
+                       [selectedItemsLabel]="'{0} selected' | translate"
+                       [defaultLabel]="'All' | translate"
+                       class="ui-fluid"
+                       [options]="$any(col.filter).options"></p-multiSelect>
+        <input (input)="dt.filter($event.target.value, col.field,'contains')"
+               *ngSwitchCase="tableFilterType.inputContains" class="c-input"
+               style="width:100%"/>
+      </th>
+    </tr>
+  </ng-template>
+  <ng-template let-columns="columns" let-rowData let-rowIndex="rowIndex" pTemplate="body">
+    <tr
+      (click)="rowGroupMetadata[rowData[grouping.field]].isCollapsed = !rowGroupMetadata[rowData[grouping.field]].isCollapsed"
+      *ngIf="grouping && rowGroupMetadata[rowData[grouping.field]].index === rowIndex"
+      class="row_hover_highlight">
+      <td [colSpan]="visibleColumns().length + number(options.checkboxSelection)">
+        <span>
+          <i
+            [ngClass]="rowGroupMetadata[rowData[grouping.field]].isCollapsed ? 'in fa-fw in-chevron-right' : 'in fa-fw in-chevron-down'"></i>
+          <!--<span>USTAS{{rowGroupMetadata[rowData[grouping.field]].header}}{{rowData[grouping.field]}}</span>-->
+          <span>{{rowGroupMetadata[rowData[grouping.field]].header}}</span>
+        </span>
+      </td>
+    </tr>
+    <tr [hidden]="grouping && rowGroupMetadata[rowData[grouping.field]].isCollapsed"
+        [ngClass]="{
+        row_active: isRowActive(rowData),
+        row_status_success: rowData._state === rowState.success,
+        row_status_error: rowData._state === rowState.error,
+        row_status_warning: rowData._state === rowState.warning,
+        row_status_critical: rowData._state === rowState.critical,
+        row_status_disabled: rowData._state === rowState.disabled
+       }"
+        [pSelectableRow]="rowData"
+        class="row">
+      <td *ngIf="options.checkboxSelection" class="u-text_center">
+        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
+      </td>
+      <td *ngFor="let col of visibleColumns()"
+          [style.text-align]="[col.align]"
+          (click)="activeChange.emit(rowData)">
+        <div [ngSwitch]="col.type"
+             class="p-table-tbody-content">
+          <ng-container *ngSwitchCase="columntype.dateTime">
+            <span [attr.title]="rowData[col.field] | date: 'dd-MM-yyyy HH:mm:ss' :null:locale()">{{rowData[col.field] | date: 'dd-MM-yyyy HH:mm:ss' :null:locale()}}</span>
+          </ng-container>
+          <ng-container *ngSwitchCase="columntype.schedule">
+            <app-schedule-template-planingarea-informer
+              *ngIf="rowData[col.field] && rowData[col.field].template"
+              [individual]="rowData[col.field].schedule.individual"
+              [item]="rowData[col.field].template"
+            ></app-schedule-template-planingarea-informer>
+          </ng-container>
+          <ng-container *ngSwitchCase="columntype.bool">
+            <span *ngIf="col.field === 'curvalue'"
+                  [ngClass]="'c-widget-status c-widget-status_icon-font-status-' +  rowData._state "
+                  [attr.title]="rowData[col.field] ? 'BOOLEAN.YES' : 'BOOLEAN.NO' | translate">{{rowData[col.field] ? 'BOOLEAN.YES' : 'BOOLEAN.NO' | translate}}</span>
+            <span
+              *ngIf="col.field !== 'curvalue'"
+              [attr.title]="(rowData[col.field] ? 'BOOLEAN.YES' : 'BOOLEAN.NO') | translate">{{(rowData[col.field] ? 'BOOLEAN.YES' : 'BOOLEAN.NO') | translate}}</span>
+          </ng-container>
+          <ng-container *ngSwitchDefault>
+            <span *ngIf="col.field === 'curvalue'"
+                  [ngClass]="'c-widget-status c-widget-status_icon-font-status-' +  rowData._state "
+                  [attr.title]="rowData[col.field]">{{rowData[col.field]}}</span>
+            <span *ngIf="col.field !== 'curvalue'"
+                  [attr.title]="rowData[col.field]">{{rowData[col.field]}}</span>
+          </ng-container>
+        </div>
+      </td>
+    </tr>
+
+  </ng-template>
+</p-table>

package/src/utils/hybrid/prime-table/prime-table.component.scss

@@ -0,0 +1,59 @@
+@use "inspark" as *;
+
+:host-context(.theme-dark) {
+  .row_active {
+    background: rgba($ids-theme-secondary, 0.2);
+    background: rgba(var(--ids-theme-secondary, $ids-theme-secondary), 0.2);
+  }
+
+  .row {
+    &:hover {
+      background-color: rgba($ids-theme-status-highlight, 0.6);
+
+      .cell-content_hover {
+        color: var(--ids-theme-primary, $ids-theme-primary);
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+
+.row_status_success {
+  td:first-child {
+    padding-left: 9px;
+    border-left: 8px solid var(--ids-theme-status-success, $ids-theme-status-success);
+  }
+}
+
+.row_status_error {
+  td:first-child {
+    padding-left: 9px;
+    border-left: 8px solid var(--ids-theme-status-error, $ids-theme-status-error);
+  }
+}
+
+.row_status_warning {
+  td:first-child {
+    padding-left: 9px;
+    border-left: 8px solid var(--ids-theme-status-warning, $ids-theme-status-warning);
+  }
+}
+
+.row_status_critical {
+  td:first-child {
+    padding-left: 9px;
+    border-left: 8px solid var(--ids-theme-status-critical, $ids-theme-status-critical);
+  }
+}
+
+.row_status_disabled {
+  td:first-child {
+    padding-left: 9px;
+    border-left: 8px solid var(--ids-theme-status-disabled, $ids-theme-status-disabled);
+  }
+}
+
+p-sortIcon a {
+  align-self: center;
+}

package/src/utils/hybrid/prime-table/prime-table.component.ts

@@ -0,0 +1,155 @@
+import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {TableColumn} from './table-column.model';
+import {TableRowData} from './table-row-data.model';
+import {TableColumnType} from './table-column-type.enum';
+import {TranslateService} from '@ngx-translate/core';
+import {TableGrouping} from './table-grouping.model';
+import {ColumnFilter} from './table-filters.model';
+import {ColumnFilterType} from './table-filter-type.enum';
+import {TableOptions} from './table-options.model';
+import {of} from 'rxjs';
+import {delay} from 'rxjs/operators';
+import {RowState} from "./row-state.enum";
+import {SortByPipe} from "../../../pipes/sort-by.pipe";
+
+@Component({
+  standalone: false,
+  selector: 'app-prime-table',
+  templateUrl: './prime-table.component.html',
+  styleUrls: ['./prime-table.component.scss', './prime-table-theme-light.component.scss'],
+  // changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PrimeTableComponent implements OnInit, AfterViewInit {
+  @ViewChild('searchTextInput', {static: false}) searchTextInput: ElementRef;
+  @Input() rowsData: TableRowData[];
+  @Input() columns: TableColumn[];
+  @Output() columnsChange = new EventEmitter<TableColumn[]>();
+  @Input() options: TableOptions;
+  @Input() checkedList: TableRowData[];
+  @Output() checkedListChange = new EventEmitter<TableRowData[]>();
+  @Input() active: TableRowData;
+  @Output() activeChange = new EventEmitter<TableRowData>();
+  @Output() create = new EventEmitter();
+  @Output() groupEdit = new EventEmitter<TableRowData[]>();
+  @Output() groupDelete = new EventEmitter<TableRowData[]>();
+  @Output() userCsv = new EventEmitter<TableRowData[]>();
+  @Input() scrollHeight = 'calc(100% - 50px)';
+  @Input() height = '100%';
+  public columntype = TableColumnType;
+  public rowState = RowState;
+  @Input() grouping: TableGrouping;
+  @Input() filters: ColumnFilter[];
+  public tableFilterType = ColumnFilterType;
+  rowGroupMetadata: { [key: string]: { index: number, isCollapsed?: boolean, header?: string } };
+  public number = Number;
+  public searchText;
+  private storedRowData;
+
+  constructor(private translateService: TranslateService, private sortByPipe: SortByPipe) {
+
+  }
+
+/* TODO: доделать счётчик фильтров
+ public filtersCount() {
+    console.log('33333333333:', 33333333333);
+
+    let filterCounter = 0;
+    this.columns.filter(column => {
+      if (!column.filter) return;
+      if (isMultiColumnFilter(column.filter) && column.filter.value && column.filter.value.length > 0) {
+        console.log('column.filter.value:', column.filter.value);
+        console.log('column.filter:', column.filter);
+        console.log('column:', column);
+
+
+
+        filterCounter++;
+      }
+      if (isInputContainsColumnFilter(column.filter) && column.filter.value) {
+        console.log('column.filter.value:', column.filter.value);
+
+        filterCounter++;
+      }
+    });
+    return filterCounter;
+  }*/
+
+  onSort() {
+    if (this.grouping) {
+      this.sortByGroup();
+    }
+  }
+
+  onFilter(event) {
+    if (this.options.searchCachingKey) {
+      window.localStorage.setItem(this.options.searchCachingKey, this.searchText);
+    }
+    if (this.grouping) {
+      this.grouping.groups
+        .map(group => ({
+          key: group.value.toString(),
+          index: event.filteredValue.findIndex(row => row[this.grouping.field] === group.value),
+        }))
+        .forEach(indexUpdate => {
+          this.rowGroupMetadata[indexUpdate.key].index = indexUpdate.index;
+          this.rowGroupMetadata[indexUpdate.key].isCollapsed = false;
+        });
+    }
+  }
+
+  public locale() {
+    return this.translateService.currentLang;
+
+  }
+
+  public visibleColumns(): TableColumn[] {
+    return this.columns.filter(column => !column.isHidden);
+  }
+
+  public isRowActive(row: TableRowData) {
+    return this.active && this.active.id === row.id;
+  }
+
+  test(a) {
+  }
+
+  ngOnInit() {
+    this.storedRowData = this.rowsData;
+    this.rowsData = [];
+    this.searchText = this.options.searchCachingKey ? window.localStorage.getItem(this.options.searchCachingKey) || '' : '';
+    if (this.grouping) {
+      this.initRowGroupMetaData();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    of('').pipe( // хз почему, без делея фмльтр не работает
+      delay(1)
+    ).subscribe(() => {
+      this.searchTextInput.nativeElement.dispatchEvent(new KeyboardEvent('input'));
+      this.rowsData = this.storedRowData;
+    });
+  }
+
+  initRowGroupMetaData() {
+    this.sortByPipe.transform(this.rowsData, this.options.secondarySort); /* SEM-472*/
+    this.sortByGroup();
+    this.rowGroupMetadata = Object.assign({}, ...this.grouping.groups.map(group => ({
+      [group.value.toString()]: {
+        index: this.rowsData.findIndex(row => row[this.grouping.field] === group.value),
+        isCollapsed: group.isCollapsed,
+        header: group.header
+      }
+    })));
+
+  }
+
+  private sortByGroup() {
+    this.rowsData.sort((row1: TableRowData, row2: TableRowData) => {
+      const groupIndex = (row: TableRowData) => this.grouping.groups.findIndex(group => group.value === row[this.grouping.field]);
+      return groupIndex(row1) - groupIndex(row2);
+    });
+
+  }
+
+}

package/src/utils/hybrid/prime-table/row-state.enum.ts

@@ -0,0 +1,7 @@
+export enum RowState {
+  success = 'success',
+  error = 'error',
+  warning = 'warning',
+  critical = 'critical',
+  disabled = 'disabled',
+}

package/src/utils/hybrid/prime-table/table-column-type.enum.ts

@@ -0,0 +1,5 @@
+export enum TableColumnType {
+  bool,
+  dateTime,
+  schedule
+}

package/src/utils/hybrid/prime-table/table-column.model.ts

@@ -0,0 +1,12 @@
+import {TableColumnType} from './table-column-type.enum';
+import {ColumnFilter} from './table-filters.model';
+
+export interface TableColumn {
+  field: string;
+  header: string;
+  type?: TableColumnType;
+  filter?: ColumnFilter;
+  isHidden?: boolean;
+  width?: string; // in px or %
+  align?: string; // "left", "center", "right". "left" is default.
+}

package/src/utils/hybrid/prime-table/table-filter-type.enum.ts

@@ -0,0 +1,4 @@
+export enum ColumnFilterType {
+  multiSelect,
+  inputContains,
+}

package/src/utils/hybrid/prime-table/table-filters.model.ts

@@ -0,0 +1,29 @@
+import {SelectItem} from 'primeng/api';
+import {ColumnFilterType} from './table-filter-type.enum';
+
+export type ColumnFilter = MultiColumnFilter | InputContainsColumnFilter;
+
+interface BaseColumnFilter {
+  type: ColumnFilterType;
+}
+
+export function isMultiColumnFilter(columnFilter: ColumnFilter): columnFilter is MultiColumnFilter {
+  return (<MultiColumnFilter>columnFilter).type === ColumnFilterType.multiSelect;
+}
+export function isInputContainsColumnFilter(columnFilter: ColumnFilter): columnFilter is InputContainsColumnFilter {
+  return (<InputContainsColumnFilter>columnFilter).type === ColumnFilterType.inputContains;
+}
+
+
+export interface MultiColumnFilter extends BaseColumnFilter {
+  type: ColumnFilterType.multiSelect;
+  defaultLabel: string;
+  options: SelectItem[];
+  value?: any[];
+}
+
+export interface InputContainsColumnFilter extends BaseColumnFilter {
+  type: ColumnFilterType.inputContains;
+  value?: string;
+}
+

package/src/utils/hybrid/prime-table/table-grouping.model.ts

@@ -0,0 +1,10 @@
+export interface TableGrouping {
+  field: string;
+  groups: TableGroups[];
+}
+
+export interface TableGroups {
+  value: any;
+  header: string;
+  isCollapsed?: boolean;
+}

package/src/utils/hybrid/prime-table/table-options.model.ts

@@ -0,0 +1,16 @@
+import {TableActionButtons} from './prime-table-action-buttons/table-action-buttons.model';
+
+export interface TableOptions {
+  actionButtons?: TableActionButtons;
+  checkboxSelection?: boolean;
+  columnFilters?: {enable: boolean, isOpen?: boolean};
+  sort?: {
+    sortField: string,
+    isAscending?: boolean;
+  };
+  secondarySort?: Array <{
+    sortField: string,
+    isAscending?: boolean;
+  }>;
+  searchCachingKey?: string;
+}

package/src/utils/hybrid/prime-table/table-row-data.model.ts

@@ -0,0 +1,7 @@
+import {RowState} from "./row-state.enum";
+
+export interface TableRowData {
+  id: string | number;
+  _state?: RowState;
+  [key: string]: any;
+}

package/src/utils/hybrid/prime-tree-table-hybrid/tree-table-column.model.ts

@@ -0,0 +1,10 @@
+export interface TreeTableColumn {
+  field: string;
+  header: string;
+  title?: string;
+  // type?: TableColumnType;
+  // filter?: ColumnFilter;
+  isHidden?: boolean;
+  isDisabled?: boolean;
+  width?: string;
+}

package/src/utils/hybrid/prime-tree-table-hybrid/tree-table-node-data.model.ts

@@ -0,0 +1,9 @@
+import {RowState} from "../prime-table/row-state.enum";
+
+export interface TreeTableNodeData {
+  _idUnique: string | number;
+  _type?: string | number;
+  _hidden?: boolean;
+  _state?: RowState;
+  [key: string]: any;
+}

package/src/utils/hybrid/prime-tree-table-hybrid/tree-table-node.model.ts

@@ -0,0 +1,9 @@
+import {TreeNode} from 'primeng/api';
+import {TreeTableNodeData} from './tree-table-node-data.model';
+
+export interface TreeTableNode extends TreeNode {
+  data: TreeTableNodeData;
+  children?: TreeTableNode[];
+  parent?: TreeTableNode;
+  contextMenuSelector?: string;
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "useDefineForClassFields": false
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declaration": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}