@inspark/inspark-components 19.0.51 → 19.0.53

package/src/components/table/table.component.ts

@@ -1,538 +0,0 @@
-import {
-  AfterContentInit,
-  AfterViewInit,
-  Component,
-  ContentChildren,
-  EventEmitter,
-  Input,
-  NgModule, OnChanges, OnInit,
-  Output,
-  QueryList, SimpleChanges,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import {Table, TableModule, TableService} from 'primeng/table';
-import {CommonModule} from '@angular/common';
-import {InsparkTemplate} from '../inspark.shared';
-import {TranslateModule} from '@ngx-translate/core';
-import {FormsModule} from '@angular/forms';
-import {TableColumnsMultiselectComponent} from './table-columns-multiselect/table-columns-multiselect.component';
-import {TableMenuOverlayComponent} from './table-menu-overlay/table-menu-overlay.component';
-import {TableClickOutsideDirective} from './table-click-outside.directive';
-import {DropdownModule} from 'primeng/dropdown';
-import {MultiSelectModule} from 'primeng/multiselect';
-import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
-import {CheckboxModule} from 'primeng/checkbox';
-import {TableRowData} from '../../utils/hybrid/prime-table/table-row-data.model';
-import {PipesModule} from '../../pipes/pipes.module';
-import {TableColumns, ToolBar, ToolBarFilterColumn} from '../../interface';
-
-
-// NEW Factory Function
-export function tableFactory(wrapper: TableComponent) {
-  return wrapper.dt;
-}
-
-@Component({
-  standalone: false,
-  selector: 'in-table',
-  templateUrl: './table.component.html',
-  styleUrls: ['./table.component.scss'],
-  providers: [TableService],
-})
-
-export class TableComponent implements OnInit, AfterContentInit {
-
-  @Input() columns: TableColumns[] = [];
-  filteredColumns: TableColumns[] = [];
-  globalFilteredColumns: string[] = [];
-  primaryColumns: TableColumns[] = [];
-  @Input() values = [];
-  @Input() scrollHeight: string;
-  @Input() scrollable: boolean;
-  @Input() selectionMode: 'single' | 'multiple' | null = null;
-  @Input() label: string;
-  @Input() error: string;
-  @Input() class: string;
-  @Input() required: boolean;
-  @Input() style: any;
-  @Input() toolbar: ToolBar;
-  @Input() checkboxSelection = true;
-  @Input() active;
-  @Input() sortField;
-  @Input() isAscending;
-  @Input() dataKey;
-  @Input() stateKey;
-  @Input() isGrouped: boolean;
-  @Input() customSort: boolean;
-  @Input() isGroupedExpanded?: boolean;
-  @Input() showHeader = true;
-  @Input() isMobileView = false;
-  @Input() resizableColumns = true;
-  @Input() isTextSearch = true;
-  @Input() isSortIcon = true;
-  @Input() columnResizeMode: 'expand' | 'fit' = 'expand';
-
-  @Output() activeChange = new EventEmitter<any>();
-  @ContentChildren(InsparkTemplate) templates: QueryList<InsparkTemplate>;
-  @Output() selectionChange: EventEmitter<any> = new EventEmitter();
-  @Output() addAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() treeAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() csvAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() saveAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() removeAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() unlinkAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() linkAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() groupEditAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() paramsEditAction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() sortFunction: EventEmitter<any> = new EventEmitter<any>();
-  @Output() filterFunction: EventEmitter<any> = new EventEmitter<any>();
-
-  @ViewChild(Table) dt!: Table;
-
-  groupMode = 0;
-  groupInfo = {};
-  groupIndex = {};
-  headerTemplate: TemplateRef<any>;
-  bodyTemplate: TemplateRef<any>;
-  loadingBodyTemplate: TemplateRef<any>;
-  captionTemplate: TemplateRef<any>;
-  frozenRowsTemplate: TemplateRef<any>;
-  footerTemplate: TemplateRef<any>;
-  summaryTemplate: TemplateRef<any>;
-  colGroupTemplate: TemplateRef<any>;
-  expandedRowTemplate: TemplateRef<any>;
-  frozenHeaderTemplate: TemplateRef<any>;
-  frozenBodyTemplate: TemplateRef<any>;
-  frozenFooterTemplate: TemplateRef<any>;
-  frozenColGroupTemplate: TemplateRef<any>;
-  emptyMessageTemplate: TemplateRef<any>;
-  paginatorLeftTemplate: TemplateRef<any>;
-  paginatorRightTemplate: TemplateRef<any>;
-  valueTemplate: TemplateRef<any>;
-  searchText: string;
-  _selection = null;
-
-  constructor() {
-    TableComponent.patchPrimeTableSaveColumnWidths();
-  }
-
-  /**
-   * В PrimeNG 19 при восстановленном глобальном фильтре p-table может вызвать saveState()/saveColumnWidths()
-   * до того, как DOM-колонки полностью готовы. В таком случае внутри PrimeNG падает чтение offsetWidth.
-   * Патчим метод один раз на уровне прототипа Table: обычное поведение сохраняется, а в раннем ошибочном
-   * вызове в state возвращаются ранее сохраненные columnWidths/tableWidth.
-   */
-  private static patchPrimeTableSaveColumnWidths(): void {
-    const tablePrototype = (Table as any).prototype;
-
-    if (!tablePrototype || tablePrototype.__insparkSaveColumnWidthsPatched || typeof tablePrototype.saveColumnWidths !== 'function') {
-      return;
-    }
-
-    const originalSaveColumnWidths = tablePrototype.saveColumnWidths;
-
-    tablePrototype.saveColumnWidths = function(state: any) {
-      try {
-        return originalSaveColumnWidths.apply(this, arguments);
-      } catch (error) {
-        if (!TableComponent.isOffsetWidthError(error)) {
-          throw error;
-        }
-
-        TableComponent.copyColumnWidthsFromSavedState(this, state);
-      }
-    };
-
-    tablePrototype.__insparkSaveColumnWidthsPatched = true;
-  }
-
-  private static isOffsetWidthError(error: any): boolean {
-    return !!error && typeof error.message === 'string' && error.message.indexOf('offsetWidth') !== -1;
-  }
-
-  private static copyColumnWidthsFromSavedState(table: any, state: any): void {
-    if (!state || !table || !table.stateKey) {
-      return;
-    }
-
-    const storage = table.stateStorage === 'session' ? window.sessionStorage : window.localStorage;
-    const savedState = storage.getItem(table.stateKey);
-
-    if (!savedState) {
-      return;
-    }
-
-    try {
-      const parsedState = JSON.parse(savedState);
-
-      if (parsedState.columnWidths) {
-        state.columnWidths = parsedState.columnWidths;
-      }
-
-      if (parsedState.tableWidth) {
-        state.tableWidth = parsedState.tableWidth;
-      }
-    } catch (parseError) {
-      // сохраненный state поврежден; игнорируем его и даем PrimeNG сохранить новый state без ширин колонок
-    }
-  }
-
-  /** O(1) selected-row lookup. Rebuilt whenever selection changes.
-   *  Replaces p-tableCheckbox which calls dt.isSelected() (O(M)) for EVERY
-   *  row on EVERY CD cycle via TableService.selectionSource$ subscription. */
-  private _selectionSet = new Set<any>();
-
-  private _rebuildSelectionSet(val: any[]): void {
-    this._selectionSet = new Set<any>();
-    if (Array.isArray(val)) {
-      const key = this.dataKey || 'id';
-      for (const item of val) {
-        if (item != null) { this._selectionSet.add(item[key] ?? item); }
-      }
-    }
-  }
-
-  ngAfterContentInit() {
-    this.templates.forEach((item: InsparkTemplate) => {
-      switch (item.getType()) {
-        case 'value':
-          this.valueTemplate = item.template;
-          break;
-        case 'header':
-          this.headerTemplate = item.template;
-          break;
-        case 'body':
-          this.bodyTemplate = item.template;
-          break;
-        // добавьте другие типы по необходимости
-      }
-    });
-  }
-
-  /** O(1) check used in template instead of dt.isSelected() */
-  public _isRowSelected(row: any): boolean {
-    const key = this.dataKey || 'id';
-    return this._selectionSet.has(row?.[key] ?? row);
-  }
-
-  /** Check — uses filteredValue when filter is active, full values otherwise */
-  public _isAllSelected(): boolean {
-    const data = this.dt?.filteredValue ?? this.values;
-    if (!data || data.length === 0) { return false; }
-    const key = this.dataKey || 'id';
-    return data.every(row => this._selectionSet.has(row?.[key] ?? row));
-  }
-
-  /** Select/deselect all rows respecting active filter */
-  public _onHeaderCheckboxChange(event: Event): void {
-    const checked = (event.target as HTMLInputElement).checked;
-    const key = this.dataKey || 'id';
-    const data = this.dt?.filteredValue ?? this.values;
-    if (checked) {
-      this._selectionSet = new Set<any>(
-        (data || []).map(row => row?.[key] ?? row)
-      );
-      this._selection = [...(data || [])];
-    } else {
-      this._selectionSet = new Set<any>();
-      this._selection = [];
-    }
-    this.selectionValue = this._selection;
-  }
-
-  /** Called when native checkbox changes */
-  public _onCheckboxChange(event: Event, row: any): void {
-    const checked = (event.target as HTMLInputElement).checked;
-    const key = this.dataKey || 'id';
-
-    const rowKey = row?.[key] ?? row;
-    if (checked) {
-      this._selectionSet.add(rowKey);
-      this._selection = [...(this._selection || []), row];
-    } else {
-      this._selectionSet.delete(rowKey);
-      this._selection = (this._selection || []).filter(
-        (item: any) => (item?.[key] ?? item) !== rowKey
-      );
-    }
-    this.selectionValue = this._selection;
-  }
-
-  @Input() set selection(val) {
-    this._selection = val;
-    this._rebuildSelectionSet(val);
-  }
-
-  get selectionValue() {
-    return this._selection;
-  }
-
-  set selectionValue(val) {
-    this._selection = val;
-    this._rebuildSelectionSet(val);
-    this.selectionChange.emit(val);
-  }
-
-  public isRowActive(row: TableRowData) {
-    return this.active && this.active.id === row.id;
-  }
-
-  ngOnInit() {
-    this.updateData();
-  }
-
-
-  updateData() {
-    this.primaryColumns = this.columns.filter(column => !column.isSecondary);
-    this.globalFilteredColumns = this.columns.filter(column => column.isFiltering !== false).map(val => val.field);
-    this.visibleColumns();
-  }
-
-  public visibleColumns(): TableColumns[] {
-    this.restoreHiddenColumns();
-    this.filteredColumns = this.columns.filter(column => !column.isHidden);
-    return this.filteredColumns;
-  }
-
-  public columnsChange(data) {
-    data.column.isHidden = !data.event;
-    this.resetColumnWidth();
-    this.saveHiddenColumns();
-    this.visibleColumns();
-  }
-
-  public showTooltip(event) {
-    const target = event.target;
-    if (target.title === undefined || !target.textContent) {
-      return;
-    }
-    target.title = target.scrollWidth > target.clientWidth ? target.textContent : '';
-  }
-
-  public colFilter(field): ToolBarFilterColumn {
-    const found = this.toolbar.filter.cols.filter(item => item.field === field);
-    return found.length === 1 ? found[0] : undefined;
-  }
-
-  public onFilterToolbar(event) {
-    if (this.toolbar && this.toolbar.filter) {
-      this.toolbar.filter.active = !this.toolbar.filter.active;
-    }
-  }
-  public onFilter(event) {
-    this.onSort();
-    this.filterFunction.emit(event.filteredValue);
-  }
-
-  public stateSave(state) {
-  }
-
-  public saveToLocalStorage(state, key) {
-    if (key) {
-      window.localStorage.setItem(key, JSON.stringify(state));
-    }
-  }
-
-  public isHiddenFieldsChanged(): boolean {
-    const hiddenFieldsSaved = this.getHiddenHiddenFieldsFromStorage();
-    const hiddenFieldsColumns = (this.columns || []).filter(_col => _col.isHidden).map(_col => _col.field);
-    if (hiddenFieldsSaved.length === hiddenFieldsColumns.length) {
-      const diff = hiddenFieldsSaved.filter(field => !hiddenFieldsColumns.includes(field));
-      // tslint:disable-next-line:no-unused-expression
-      diff.length !== 0;
-    }
-    return true;
-  }
-  public saveHiddenColumns() {
-    if (this.stateKey) {
-      if (!this.isHiddenFieldsChanged()) {
-        return;
-      }
-      const hiddenFields = (this.columns || []).filter(_col => _col.isHidden).map(_col => _col.field).join(',');
-      this.saveToLocalStorage(hiddenFields, this.stateKey + 'HiddenFields');
-      window.localStorage.removeItem(this.stateKey);
-
-      if (this.searchText) {
-        window.localStorage.setItem(this.stateKey, JSON.stringify({
-          filters: {global: {value: this.searchText, matchMode: 'contains'}}
-        }));
-      }
-
-      if (this.dt) {
-        this.dt.restoreState();
-      }
-    }
-  }
-
-  public countVisibleColumns() {
-    return (this.columns || []).filter(_col => !_col.isHidden).length;
-  }
-
-
-  public restoreSearchText() {
-    const state = window.localStorage.getItem(this.stateKey);
-    if (state) {
-      const parsedState = JSON.parse(state);
-      // tslint:disable-next-line:max-line-length
-      this.searchText = (parsedState.filters || {global: {value: ''}}).global ? (parsedState.filters || {global: {value: ''}}).global.value : '';
-      this.sortField = parsedState.sortField || this.sortField;
-    } else {
-      this.resetColumnWidth();
-    }
-  }
-
-  public resetColumnWidthIfToWide() {
-    const visibleColumns = this.columns.filter(_column => !_column.isHidden);
-    const totalWidthInPercent = visibleColumns.reduce((s, column) => {
-      const percent = column.width.indexOf('%') > 0 ? parseInt(column.width, 10) : 0;
-      return s + percent;
-    }, 0);
-
-    if (totalWidthInPercent > 100) {
-      console.error(`Масимальная суммарная ширина столбцов таблицы  100%, текущая суммарная ширина ${totalWidthInPercent}%.`
-        + `Выполняется принудительный перерасчет ширины для таблицы ${this.stateKey}`);
-      this.resetColumnWidth();
-    }
-    if (totalWidthInPercent < 100 && this.columns.length > 0) {
-      // расширяем первый столбец, чтобы не тянулся столбец с чекбоксом
-      const percent = this.columns[0].width.indexOf('%') > 0 ? parseInt(this.columns[0].width, 10) : 0;
-      this.columns[0].width = 100 - totalWidthInPercent + percent + '%';
-    }
-
-  }
-
-  public resetColumnWidth() {
-    const cvc = this.countVisibleColumns();
-    let percent = Math.floor(100 / cvc);
-    let firstColumnPercent = percent;
-    if (cvc > 10) {
-      percent = Math.floor(90 / (cvc - 1));
-      firstColumnPercent = Math.floor(100 - (percent * (cvc - 1)));
-    }
-    this.columns.forEach((column, index) => column.width = index === 0 ? firstColumnPercent + '%' : `${percent}%`);
-  }
-
-  private getHiddenHiddenFieldsFromStorage(): string[] {
-    if (this.stateKey) {
-      const hiddenFields = window.localStorage.getItem(this.stateKey + 'HiddenFields');
-      if (hiddenFields) {
-        return JSON.parse(hiddenFields).split(',');
-      }
-    }
-    return [];
-  }
-  public restoreHiddenColumns() {
-    if (this.stateKey && window.localStorage.getItem(this.stateKey + 'HiddenFields')) {
-      const hiddenFieldsArray = this.getHiddenHiddenFieldsFromStorage();
-      this.columns.forEach(_col => _col.isHidden = hiddenFieldsArray.includes(_col.field) || _col.col_invisible);
-    }
-  }
-
-  public calcWidth(idx, label, width) {
-    return width && idx >= 0 ? width : 'auto';
-  }
-
-
-  public onSort() {
-    if (this.isGrouped) {
-
-      Object.entries(this.groupInfo).forEach(([key, value]) => {
-        const cacheFlag = (this.groupInfo[key] || {}).isExpanded;
-        this.groupInfo[key] = {isExpanded: cacheFlag === undefined ? true : cacheFlag};
-      });
-
-      this.sortByGroup();
-      if (this.dt && this.dt.filteredValue) {
-        this.sortByGroup(this.dt.filteredValue, this.dt._sortOrder);
-      } else if (this.dt && this.dt._value && this.dt._sortOrder) {
-        this.sortByGroup(this.dt._value, this.dt._sortOrder);
-      }
-    }
-  }
-
-  public isShowGroup(key, rowIndex) {
-    if (rowIndex === 0) {
-      this.groupIndex = {};
-    }
-
-    if (!this.groupInfo[key]) {
-      this.groupInfo[key] = {isExpanded: this.isGroupedExpanded !== undefined ? this.isGroupedExpanded : true};
-    }
-
-    if (!this.groupIndex[key]) {
-      this.groupIndex[key] = {rowIndex};
-    }
-    return this.groupIndex[key].rowIndex === rowIndex;
-  }
-
-  public toggleGroup(rowIndex: number, key: string) {
-    this.groupInfo[key].isExpanded = !this.groupInfo[key].isExpanded;
-    this.onSort();
-  }
-
-  clear() {
-    this.dt.filterGlobal('', 'contains');
-    this.searchText = '';
-    this.dt.saveState();
-  }
-
-  localSearch(dt, searchText) {
-    dt.filterGlobal(searchText, 'contains');
-  }
-
-  private sortByGroup(values?: any, sortOrder?: number) {
-    const g = this.groupMode;
-    if (values) {
-      return values.sort((row1: TableRowData, row2: TableRowData) => {
-      if (typeof (row1['groupOrder'][g]) === 'number') {
-          return sortOrder * (row1['groupOrder'][g] - row2['groupOrder'][g]);
-        } else {
-          return sortOrder * row1['groupOrder'][g].localeCompare(row2['groupOrder'][g], undefined, {numeric: true, sensitivity: 'base'});
-        }
-      });
-    }
-    this.values.sort((row1: TableRowData, row2: TableRowData) => {
-      if (typeof (row1['groupOrder'][g]) === 'number') {
-        return row1['groupOrder'][g] - row2['groupOrder'][g];
-      } else {
-        return row1['groupOrder'][g].localeCompare(row2['groupOrder'][g], undefined, {numeric: true, sensitivity: 'base'});
-      }
-    });
-  }
-
-  countGroup(groupKey, g: number): number {
-    return this.values.filter(_value => _value.groupKey[g] === groupKey).length;
-  }
-
-  toggleNodes(isExpanded: boolean) {
-    const g = this.groupMode;
-    this.values.forEach(v => {
-      if (this.groupInfo[v.groupKey[g]]) {
-        this.groupInfo[v.groupKey[g]].isExpanded = isExpanded;
-      }
-    });
-  }
-
-  toggleMode(item) {
-    this.groupMode = item;
-    this.groupInfo = {};
-    for (let i = 0; i < this.values.length; i++) {
-      this.isShowGroup(this.values[i].groupKey[this.groupMode], i);
-    }
-    if (this.searchText) {
-      this.dt.filterGlobal(this.searchText, 'contains');
-    }
-    this.sortByGroup();
-  }
-}
-
-
-@NgModule({
-  // tslint:disable-next-line:max-line-length
-  imports: [CommonModule, TableModule, PipesModule, TranslateModule.forChild(), FormsModule, DropdownModule, MultiSelectModule, NgbDropdownModule, CheckboxModule],
-  exports: [TableComponent, TableColumnsMultiselectComponent],
-  declarations: [TableComponent, TableColumnsMultiselectComponent, TableMenuOverlayComponent, TableClickOutsideDirective]
-})
-export class TableComponentModule {
-}

package/src/components/textarea/textarea.component.html

@@ -1,19 +0,0 @@
-<label class="c-label">
-    <span *ngIf="label" class="c-label__content">
-        {{label}}
-      <span *ngIf="required" class="c-label__req">*</span>
-<span *ngIf="error" class="c-label__sub_is-error">{{error}}</span>
-    </span>
-  <textarea (change)="onChange($event)"
-            (input)="onChange($event)"
-            [(ngModel)]="value"
-            [disabled]="disabled"
-            [id]="id"
-            [name]="name"
-            [ngStyle]="{ 'min-height': minHeight+'px' }"
-            [placeholder]="placeholder"
-            [required]="required"
-            class="c-textarea field_{{id}}"
-            type="text"
-  ></textarea>
-</label>

package/src/components/textarea/textarea.component.ts

@@ -1,71 +0,0 @@
-import {Component, forwardRef, Input} from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-
-@Component({
-  standalone: false,
-  selector: 'in-textarea',
-  templateUrl: './textarea.component.html',
-  styleUrls: ['./textarea.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => TextareaComponent),
-      multi: true,
-    }
-  ],
-})
-export class TextareaComponent implements ControlValueAccessor {
-
-  @Input() name = null;
-  @Input() label = null;
-  @Input() required = false;
-  @Input() error = null;
-  @Input() placeholder = '';
-  @Input() id = null;
-  @Input() disabled: boolean;
-  @Input() minHeight = 30;
-  @Input() maxlength = 100000;
-
-  value: string;
-
-  /**
-   * Write form value to the DOM element (model => view)
-   */
-  writeValue(value: any): void {
-    this.value = value;
-  }
-
-  /**
-   * Write form disabled state to the DOM element (model => view)
-   */
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  /**
-   * Update form when DOM element value changes (view => model)
-   */
-  registerOnChange(fn: any): void {
-    // Store the provided function as an internal method.
-    this.propagateChange = fn;
-  }
-
-  /**
-   * Update form when DOM element is blurred (view => model)
-   */
-  registerOnTouched(fn: any): void {
-    // Store the provided function as an internal method.
-    this.onTouched = fn;
-  }
-
-  private propagateChange = (_: any) => {
-  };
-
-  onChange(_: any) {
-    this.propagateChange(this.value);
-  }
-
-  private onTouched() {
-  }
-
-}

package/src/components/textarea/textarea.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { TextareaComponent } from './textarea.component';
-import {SharedUiModule } from '../shared/shared-ui.module';
-
-@NgModule({
-  declarations: [
-    TextareaComponent
-  ],
-  imports: [
-    SharedUiModule,
-    FormsModule
-  ],
-  exports: [
-    TextareaComponent
-  ]
-})
-export class TextareaComponentModule {}

package/src/components/toolbar/toolbar.component.html

@@ -1,19 +0,0 @@
-<div class="toolbar-wrapper">
-  <in-sticky [top]="60">
-
-    <div class="c-panel toolbar-container">
-      <div class="c-toolbar">
-        <div class="c-toolbar__side-left">
-          <div class="c-toolbar__title">{{title}}</div>
-        </div>
-        <div class="c-toolbar__side-center">
-
-        </div>
-        <div class="c-toolbar__side-right">
-          <ng-content></ng-content>
-        </div>
-
-      </div>
-    </div>
-  </in-sticky>
-</div>