\n \n @if (hasSorting$() || hasFilter$()) {\n \n @if (hasFilter$()) {\n \n }\n @if (hasSorting$()) {\n \n }\n
\n }\n\n\n\n @if (column?.headerCellTemplate) {\n \n } @else {\n \n {{ column?.labelValueChanges$ | async }}\n \n }\n\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnDestroy,\n OnInit,\n ViewEncapsulation,\n signal\n} from '@angular/core';\nimport { TableDialogCommonData } from '@fundamental-ngx/platform/table-helpers';\nimport { BehaviorSubject, Subscription, combineLatest } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nimport { DialogRef } from '@fundamental-ngx/core/dialog';\nimport { SearchInput } from '@fundamental-ngx/platform/search-field';\n\nimport { CdkScrollable } from '@angular/cdk/overlay';\nimport { AsyncPipe } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { InitialFocusDirective, TemplateDirective } from '@fundamental-ngx/cdk/utils';\nimport {\n BarElementDirective,\n BarLeftDirective,\n BarRightDirective,\n ButtonBarComponent\n} from '@fundamental-ngx/core/bar';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { CheckboxComponent } from '@fundamental-ngx/core/checkbox';\nimport {\n DialogBodyComponent,\n DialogComponent,\n DialogFooterComponent,\n DialogHeaderComponent\n} from '@fundamental-ngx/core/dialog';\nimport { ListComponent, ListItemComponent, ListTitleDirective } from '@fundamental-ngx/core/list';\nimport { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { ToolbarComponent, ToolbarItemDirective, ToolbarSpacerDirective } from '@fundamental-ngx/core/toolbar';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { SearchFieldComponent } from '@fundamental-ngx/platform/search-field';\nimport { RESETTABLE_TOKEN, ResetButtonComponent, Resettable } from '../../reset-button/reset-button.component';\n\nexport interface DialogTableColumn {\n label: string;\n key: string;\n}\n\nexport type VisibleColumnType = string; // ColumnKey\n\nexport interface ColumnsDialogData extends TableDialogCommonData {\n availableColumns: DialogTableColumn[];\n visibleColumns: VisibleColumnType[];\n}\n\nexport interface ColumnsDialogResultData {\n visibleColumns: VisibleColumnType[];\n columnOrder?: VisibleColumnType[];\n}\n\nclass SelectableColumn {\n constructor(\n /** Selected */\n public selected: boolean,\n /** Active */\n public active: boolean,\n /** Table Column it belongs to */\n public column: DialogTableColumn\n ) {}\n}\n\nconst INITIAL_SEARCH_TEXT = '';\nconst INITIAL_SHOW_ALL_ITEMS = true;\n\n@Component({\n templateUrl: './columns.component.html',\n styleUrl: './columns.component.scss',\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DialogComponent,\n DialogHeaderComponent,\n TemplateDirective,\n BarLeftDirective,\n BarElementDirective,\n TitleComponent,\n BarRightDirective,\n ResetButtonComponent,\n CdkScrollable,\n ScrollbarDirective,\n DialogBodyComponent,\n ToolbarComponent,\n SearchFieldComponent,\n ToolbarSpacerDirective,\n ButtonComponent,\n ToolbarItemDirective,\n ListComponent,\n ListItemComponent,\n CheckboxComponent,\n FormsModule,\n ListTitleDirective,\n DialogFooterComponent,\n ButtonBarComponent,\n AsyncPipe,\n FdTranslatePipe,\n InitialFocusDirective\n ]\n})\nexport class P13ColumnsDialogComponent implements Resettable, OnInit, OnDestroy {\n /** Indicates when reset command is available */\n readonly isResetAvailable$ = signal(false);\n\n /** Table columns available for grouping */\n readonly availableColumns: DialogTableColumn[] = [];\n\n /** All available columns for interacting */\n _selectableColumns: SelectableColumn[] = [];\n\n /** filtered columns that are rendered in the list */\n _filteredColumns: SelectableColumn[] = [];\n\n /** Search Query subject */\n _searchQuerySubject = new BehaviorSubject(INITIAL_SEARCH_TEXT);\n /** Show All flag subject */\n _showAllItemsSubject = new BehaviorSubject(INITIAL_SHOW_ALL_ITEMS);\n\n /** Selected columns count */\n _selectedColumnsCount = 0;\n\n /** Flag to track disabled state for move-down move-up buttons */\n _moveUpDisabled = true;\n /** Flag to track disabled state for move-down move-up buttons */\n _moveDownDisabled = true;\n\n /** @hidden */\n get _isShownAllItems(): boolean {\n return this._showAllItemsSubject.getValue();\n }\n\n /** @hidden */\n get _selectAllDisabled(): boolean {\n return !this._isShownAllItems || this._filteredColumns.length === 0;\n }\n\n /** @hidden */\n private _subscriptions = new Subscription();\n\n /** @hidden */\n constructor(\n public dialogRef: DialogRef,\n private cdr: ChangeDetectorRef\n ) {\n const { availableColumns, visibleColumns } = this.dialogRef.data;\n\n this.availableColumns = availableColumns?.map(({ label, key }) => ({ label, key })) || [];\n\n this._initiateColumns(visibleColumns);\n }\n\n /** @hidden */\n ngOnInit(): void {\n this._listenToFilterOptions();\n }\n\n /** @hidden */\n ngOnDestroy(): void {\n this._subscriptions.unsubscribe();\n }\n\n /** Reset to the initial state */\n reset(): void {\n this._initiateColumns(this.availableColumns.map((c) => c.key));\n this.isResetAvailable$.set(false);\n }\n\n /** Close dialog */\n cancel(): void {\n this.dialogRef.close(null);\n }\n\n /** Confirm changes and close dialog */\n confirm(): void {\n const visibleColumns = this._getVisibleColumnsFromSelectedColumns(this._selectableColumns);\n const columnOrder = this._getColumnOrder(this._selectableColumns);\n const result: ColumnsDialogResultData = { visibleColumns, columnOrder };\n this.dialogRef.close(result);\n }\n\n /** @hidden */\n _toggleSelectAll(selectAll: boolean): void {\n this._selectableColumns.forEach((column) => (column.selected = selectAll));\n this._onToggleColumn();\n }\n\n /** @hidden */\n _onToggleColumn(): void {\n this._countSelectedColumns();\n this._recalculateResetAvailability();\n }\n\n /** @hidden */\n _recalculateResetAvailability(): void {\n let resettable = false;\n if (this._selectedColumnsCount !== this.availableColumns.length) {\n // Initially all columns are selected. If not, reset should be active\n resettable = true;\n } else {\n // if all are selected, check for columns order to match the initial one\n for (let index = 0; index < this.availableColumns.length; index++) {\n if (this._selectableColumns[index].column.key !== this.availableColumns[index].key) {\n resettable = true;\n break;\n }\n }\n }\n this.isResetAvailable$.set(resettable);\n }\n\n /** @hidden */\n _searchInputChange({ text }: SearchInput): void {\n this._searchQuerySubject.next(text || '');\n }\n\n /** @hidden */\n _toggleShowAll(): void {\n const showAllItems = this._showAllItemsSubject.getValue();\n this._showAllItemsSubject.next(!showAllItems);\n }\n\n /** @hidden */\n _setActiveColumn(column: SelectableColumn | null): void {\n this._selectableColumns.map((_column) => {\n _column.active = _column === column;\n });\n\n this._calculateMovementButtonsState();\n }\n\n /** @hidden */\n _moveActiveToTop(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n this._moveColumnInFilteredListByIndex(this._getActiveColumnIndexInFilteredList(), 0);\n }\n\n /** @hidden */\n _moveActiveToBottom(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n this._moveColumnInFilteredListByIndex(\n this._getActiveColumnIndexInFilteredList(),\n this._filteredColumns.length - 1\n );\n }\n\n /** @hidden */\n _moveActiveUp(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n const activeColumnIndex = this._getActiveColumnIndexInFilteredList();\n this._moveColumnInFilteredListByIndex(activeColumnIndex, activeColumnIndex - 1);\n\n // keep the focus back to the move up button as it gets lost on click\n setTimeout(() => {\n const moveUpBtn = event.target as HTMLElement;\n moveUpBtn.focus();\n }, 0);\n }\n\n /** @hidden */\n _moveActiveDown(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n const activeColumnIndex = this._getActiveColumnIndexInFilteredList();\n this._moveColumnInFilteredListByIndex(activeColumnIndex, activeColumnIndex + 1);\n }\n\n /** @hidden */\n _isReorderColumnButtonShowable(item: SelectableColumn): boolean {\n return item.active && item.selected;\n }\n\n /** @hidden */\n _filterByColumnKy(index: number, item: SelectableColumn): string {\n return item?.column.key;\n }\n\n /**\n * @hidden\n * @param visibleColumnKeys keys of columns that should be displayed as selected.\n * Also, their order matters: it will be used\n */\n private _initiateColumns(visibleColumnKeys: string[]): void {\n const visibleColumnIndexMap = new Map(visibleColumnKeys.map((key, index) => [key, index]));\n this._selectableColumns = this.availableColumns.slice().map(\n (column, index: number): SelectableColumn => ({\n column,\n selected: visibleColumnKeys.includes(column.key),\n active: index === 0\n })\n );\n\n // keep count of selected\n this._countSelectedColumns();\n\n this._recalculateResetAvailability();\n\n // reset filter settings settings\n this._searchQuerySubject.next(INITIAL_SEARCH_TEXT);\n this._showAllItemsSubject.next(INITIAL_SHOW_ALL_ITEMS);\n }\n\n /** @hidden */\n private _listenToFilterOptions(): void {\n this._subscriptions.add(\n combineLatest([this._showAllItemsSubject, this._searchQuerySubject])\n .pipe(debounceTime(20))\n .subscribe(([showAll, searchQuery]) => {\n this._filteredColumns = this._selectableColumns.filter((item) => {\n const matchesSearchQuery = item.column.label\n .toLocaleLowerCase()\n .includes(searchQuery.toLocaleLowerCase());\n const matchesShowAll = showAll || item.selected;\n return matchesSearchQuery && matchesShowAll;\n });\n this._onChangeFilteredColumnsList();\n\n this.cdr.markForCheck();\n })\n );\n }\n\n /** @hidden */\n private _onChangeFilteredColumnsList(): void {\n this._calculateMovementButtonsState();\n }\n\n /** @hidden */\n private _getVisibleColumnsFromSelectedColumns(columns = this._selectableColumns): VisibleColumnType[] {\n return columns.filter(({ selected }) => selected).map(({ column }): VisibleColumnType => column.key);\n }\n\n /** @hidden */\n private _getColumnOrder(columns: SelectableColumn[]): VisibleColumnType[] {\n return columns.map((column) => column.column.key);\n }\n\n /** @hidden */\n private _getActiveColumnIndexInFilteredList(): number {\n return this._filteredColumns.findIndex(({ active }) => active);\n }\n\n /** @hidden */\n private _moveColumnInFilteredListByIndex(from: number, to: number): void {\n const { movedItem, replacedItem } = this._moveElementInTheListByIndex(this._filteredColumns, from, to);\n /**\n * need to reflect analogical movement in the original list\n * with respect to the original list order\n */\n this._moveColumnInSelectableList(movedItem, replacedItem);\n\n this._calculateMovementButtonsState();\n this._recalculateResetAvailability();\n }\n\n /**\n * @hidden\n * Move column in selectable list.\n */\n private _moveColumnInSelectableList(itemToMove: SelectableColumn, targetItem: SelectableColumn): void {\n const list = this._selectableColumns;\n this._moveElementInTheListByIndex(list, list.indexOf(itemToMove), list.indexOf(targetItem));\n }\n\n /**\n * @hidden\n * Move element in the list\n * @return moved item and replaced item.\n */\n private _moveElementInTheListByIndex(\n list: T[],\n fromIndex: number,\n toIndex: number\n ): { movedItem: T; replacedItem: T } {\n const listLength = list.length;\n\n fromIndex = Math.min(Math.max(fromIndex, 0), listLength - 1);\n toIndex = Math.min(Math.max(toIndex, 0), listLength - 1);\n\n const replacedItem = list[toIndex];\n const movedItem = list.splice(fromIndex, 1)[0];\n\n list.splice(toIndex, 0, movedItem);\n\n return { movedItem, replacedItem };\n }\n\n /** @hidden */\n private _countSelectedColumns(): void {\n this._selectedColumnsCount = this._selectableColumns.filter(({ selected }) => selected).length;\n }\n\n /** @hidden */\n private _calculateMovementButtonsState(): void {\n const activeIndex = this._getActiveColumnIndexInFilteredList();\n this._moveUpDisabled = activeIndex < 1;\n this._moveDownDisabled = activeIndex < 0 || activeIndex >= this._filteredColumns.length - 1;\n }\n}\n","\n \n \n \n \n \n {{ ('platformTable.P13ColumnsDialogHeader' | fdTranslate)() }}\n
\n \n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n {{\n (\n 'platformTable.P13ColumnsDialogSelectAll'\n | fdTranslate\n : {\n selectedColumnsCount: _selectedColumnsCount,\n selectableColumnsCount: _selectableColumns.length\n }\n )()\n }}\n \n \n @for (item of _filteredColumns; track _filterByColumnKy($index, item)) {\n \n \n \n {{ item.column.label }}\n \n\n \n @if (_isReorderColumnButtonShowable(item)) {\n \n }\n @if (_isReorderColumnButtonShowable(item)) {\n \n }\n @if (_isReorderColumnButtonShowable(item)) {\n \n }\n @if (_isReorderColumnButtonShowable(item)) {\n \n }\n \n }\n
\n \n \n \n \n \n\n","import {\n CollectionFilter,\n FilterableColumnDataType,\n FilterStrategy,\n getFilterStrategiesBasedOnDataType,\n TableDialogCommonData\n} from '@fundamental-ngx/platform/table-helpers';\n\nexport interface FilterableColumn {\n label: string;\n key: string;\n dataType: FilterableColumnDataType;\n filterable?: boolean;\n filterSelectOptions?: string[]; // add optional filterSelectOptions\n}\n\nexport interface FilterDialogData extends TableDialogCommonData {\n collectionFilter: CollectionFilter[];\n columns: FilterableColumn[];\n validator?: ((rules: CollectionFilter[]) => boolean) | undefined;\n}\n\nexport interface FilterDialogResultData {\n collectionFilter: CollectionFilter[];\n}\n\n/**\n * Filter Rule\n *\n * represents one rule per row\n */\n\nexport class FilterRule {\n /** Validation flg */\n isValid = false;\n\n /** Available strategies options */\n strategies: ReadonlyArray = [];\n\n /** Data type */\n dataType?: FilterableColumnDataType;\n\n /**\n * Optional array of available filter options.\n * Providing values to this input will cause the filter to change from a text-type input to a select-type input.\n * */\n filterSelectOptions: string[] = [];\n\n /** returns whether filter rule has value */\n get hasValue(): boolean {\n return this.valueExists(this.value) || this.valueExists(this.value2);\n }\n\n /** @hidden */\n constructor(\n readonly columns: ReadonlyArray,\n /** Column key the rule belongs to */\n public columnKey?: string,\n /** Data type */\n public strategy?: FilterStrategy,\n /** Main filter value */\n public value?: T | null,\n /** Additional filter value */\n public value2?: T | null\n ) {\n if (!this.columnKey) {\n this.setColumnKey(columns[0]?.key);\n }\n if (!this.dataType) {\n this.setDataTypeByColumnKey(this.columnKey);\n }\n if (this.strategies.length === 0) {\n this.setStrategiesByColumnKey(this.columnKey);\n }\n if (this.filterSelectOptions.length === 0) {\n this.setFilterSelectOptionsByColumnKey(this.columnKey);\n }\n }\n\n /** @hidden */\n setValid(isValid: boolean): void {\n this.isValid = isValid;\n }\n\n /** @hidden */\n setValue(value: T | null): void {\n this.value = value;\n }\n\n /** @hidden */\n setValue2(value: T | null): void {\n this.value2 = value;\n }\n\n /** @hidden */\n setStrategy(strategy: FilterStrategy): void {\n this.strategy = strategy;\n }\n\n /** @hidden */\n setStrategiesByColumnKey(columnKey?: string): void {\n const dataType = this.columns.find((column) => column.key === columnKey)?.dataType;\n if (!dataType) {\n return;\n }\n\n const strategies = getFilterStrategiesBasedOnDataType(dataType);\n\n if (this.strategies === strategies) {\n return;\n }\n\n this.strategies = strategies;\n\n if (!this.strategies.includes(this.strategy!)) {\n this.setStrategy(strategies[0]);\n }\n }\n\n /** @hidden */\n setColumnKey(columnKey: string): void {\n if (columnKey === this.columnKey) {\n return;\n }\n this.columnKey = columnKey;\n\n // reset values\n this.setValue(null);\n this.setValue2(null);\n\n // update data type\n this.setDataTypeByColumnKey(columnKey);\n\n // update available Filter options\n this.setFilterSelectOptionsByColumnKey(columnKey);\n\n // update available strategies list\n this.setStrategiesByColumnKey(columnKey);\n }\n\n /** @hidden */\n setDataTypeByColumnKey(columnKey?: string): void {\n const dataType = this.columns.find((column) => column.key === columnKey)?.dataType;\n this.dataType = dataType;\n }\n\n /** @hidden */\n setFilterSelectOptionsByColumnKey(columnKey?: string): void {\n const filterSelectOptions = this.columns.find((column) => column.key === columnKey)?.filterSelectOptions;\n this.filterSelectOptions = filterSelectOptions ? filterSelectOptions : [];\n }\n\n /** @hidden */\n private valueExists(value: any): boolean {\n return !!value || value === 0 || typeof value === 'boolean';\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { FormsModule, NgForm } from '@angular/forms';\nimport {\n FILTER_STRATEGY,\n FILTER_STRATEGY_LABEL,\n FilterableColumnDataType\n} from '@fundamental-ngx/platform/table-helpers';\nimport { Subscription } from 'rxjs';\nimport { skip } from 'rxjs/operators';\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { DatePickerComponent } from '@fundamental-ngx/core/date-picker';\nimport { FormControlComponent } from '@fundamental-ngx/core/form';\nimport { LayoutGridColDirective, LayoutGridRowDirective } from '@fundamental-ngx/core/layout-grid';\nimport { OptionComponent, SelectComponent } from '@fundamental-ngx/core/select';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { FilterRule } from './filtering.model';\n\n@Component({\n selector: 'fdp-table-filter-rule',\n templateUrl: './filter-rule.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n LayoutGridRowDirective,\n LayoutGridColDirective,\n SelectComponent,\n FormsModule,\n OptionComponent,\n NgTemplateOutlet,\n DatePickerComponent,\n FormControlComponent,\n FdTranslatePipe\n ]\n})\nexport class FilterRuleComponent implements OnDestroy {\n /** Rule to be displayed **/\n @Input() rule: FilterRule;\n\n /** Emits when rule is changed */\n @Output() ruleChange: EventEmitter = new EventEmitter();\n\n /** Emits when rule state is changed */\n @Output() ruleStateChange: EventEmitter = new EventEmitter();\n\n /** @hidden */\n readonly FILTER_STRATEGY = FILTER_STRATEGY;\n\n /** @hidden */\n readonly DATA_TYPE = FilterableColumnDataType;\n\n /** @hidden */\n readonly strategyLabels = FILTER_STRATEGY_LABEL;\n\n /** @hidden */\n @ViewChild(NgForm)\n set ngForm(ngForm: NgForm) {\n if (!ngForm) {\n return;\n }\n this._subscriptions.add(\n ngForm.statusChanges\n ?.pipe(\n // Skip first that triggers on initial phase\n skip(1)\n )\n .subscribe(() => {\n const isValid = !!ngForm.valid;\n this.rule.setValid(isValid);\n this.ruleStateChange.emit(isValid);\n })\n );\n }\n\n /** @hidden */\n private _subscriptions = new Subscription();\n\n /** @hidden */\n ngOnDestroy(): void {\n this._subscriptions.unsubscribe();\n }\n\n /** @hidden */\n _onModelChange(): void {\n this.ruleChange.emit();\n }\n}\n","\n
\n
\n
\n \n \n @for (column of rule.columns; track column) {\n {{ column.label }}\n }\n \n
\n
\n \n \n @for (strategy of rule.strategies; track strategy) {\n \n {{\n (\n strategyLabels[strategy] || 'platformTable.P13FilterStrategyLabelNotDefined'\n | fdTranslate\n )()\n }}\n \n }\n \n
\n
\n
\n
\n
\n @if (rule.strategy === FILTER_STRATEGY.BETWEEN) {\n
\n \n
\n
\n \n
\n } @else {\n
\n \n
\n }\n\n \n
\n @if (rule.dataType === DATA_TYPE.DATE) {\n \n } @else if (rule.dataType === DATA_TYPE.BOOLEAN) {\n \n \n {{ ('platformTable.P13FilterBooleanOptionNotDefined' | fdTranslate)() }}\n \n \n {{ ('platformTable.P13FilterBooleanOptionTrue' | fdTranslate)() }}\n \n \n {{ ('platformTable.P13FilterBooleanOptionFalse' | fdTranslate)() }}\n \n \n } @else if (rule.filterSelectOptions.length) {\n \n \n @for (option of rule.filterSelectOptions; track $index) {\n {{ option }}\n }\n \n } @else {\n \n }\n \n
\n
\n
\n \n {{ ('platformTable.P13FilterDialogHeader' | fdTranslate)() }}
\n \n
\n \n \n \n \n
\n \n \n \n \n \n \n {{\n (\n (_validIncludeRulesCount > 0\n ? 'platformTable.P13FilterDialogIncludePanelTitleWithCount'\n : 'platformTable.P13FilterDialogIncludePanelTitleWithoutCount'\n ) | fdTranslate: { count: _validIncludeRulesCount }\n )()\n }}\n
\n \n @for (rule of _includeRules; track rule) {\n
\n \n
\n \n \n \n @if (_includeRules.length - 1 === $index) {\n \n }\n
\n \n }\n
\n {{\n (\n (_validExcludeRulesCount > 0\n ? 'platformTable.P13FilterDialogExcludePanelTitleWithCount'\n : 'platformTable.P13FilterDialogExcludePanelTitleWithoutCount'\n ) | fdTranslate: { count: _validExcludeRulesCount }\n )()\n }}\n
\n \n @for (rule of _excludeRules; track rule) {\n
\n \n
\n \n \n \n @if (_excludeRules.length - 1 === $index) {\n \n }\n
\n \n }\n
\n \n {{ ('platformTable.P13GroupDialogHeader' | fdTranslate)() }}
\n \n
\n \n \n \n \n
\n \n \n\n \n @for (rule of rules; track rule; let i = $index) {\n \n
\n @for (column of getAvailableColumns(rule); track column) {\n \n {{ column.label }}\n \n }\n \n\n \n\n \n \n\n = columns.length || !rule.columnKey\"\n >\n
\n \n \n \n {{ ('platformTable.P13SortDialogHeader' | fdTranslate)() }}\n
\n \n
\n \n \n \n \n
\n \n \n \n @for (rule of rules; track _trackByColumnKey(i, rule); let i = $index) {\n \n
\n @for (column of columns | getAvailableSortColumns: rules : rule.columnKey; track column) {\n \n {{ column.label }}\n \n }\n \n \n \n {{ ('platformTable.P13SortDialogSortOrderSelectOptionAsc' | fdTranslate)() }}\n \n \n {{ ('platformTable.P13SortDialogSortOrderSelectOptionDesc' | fdTranslate)() }}\n \n \n \n \n \n
\n \n @if (!!title || !!titleTemplate() || !hideItemCount) {\n \n }\n \n
\n }\n \n @if (!hideSearchInput) {\n \n }\n @if (editMode !== 'none') {\n \n @if (_showSaveButton) {\n @if (_showSaveButton) {\n \n }\n \n \n }\n @if (tableToolbarActionsComponent || hasAnyActions()) {\n \n }\n }\n @if (tableToolbarActionsComponent) {\n \n \n \n }\n @if (showExpandCollapseButtons || hasAnyActions()) {\n @if (tableToolbarActionsComponent) {\n \n }\n @if (showExpandCollapseButtons) {\n \n \n }\n @if (settings()) {\n \n }\n @if (sortable()) {\n \n }\n @if (filterable()) {\n \n }\n @if (groupable()) {\n \n }\n @if (columns()) {\n \n }\n }\n \n @if (appliedFilters().length) {\n \n \n \n \n \n }\n\n","export const NOT_FILTERED_OPTION_VALUE = `table-filters-not-filtered-option-value-${Math.random()\n .toString()\n .slice(2, 5)}`;\n","import { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport {\n FdpViewSettingsFilterCustomDef,\n FilterType,\n TableFilterSelectOption\n} from '@fundamental-ngx/platform/table-helpers';\n\n/**\n * View settings dialog filter component.\n *\n * ```html\n * \n * \n * \n * \n * \n * \n * \n *\n * \n * \n * \n * ```\n *\n * */\n@Component({\n selector: 'fdp-table-view-settings-filter',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: true\n})\nexport class TableViewSettingsFilterComponent {\n /** Table column name on which to filter. */\n @Input()\n column: string;\n\n /** Label for the column. */\n @Input()\n label: string;\n\n /**\n * Type of filter interface.\n * @type {'single-select' | 'multi-select' | 'custom' 'category'}\n */\n @Input()\n type: FilterType;\n\n /** Selection values for 'single-select' or 'multi-select' filter types. */\n @Input()\n values: TableFilterSelectOption[];\n\n /** Custom filter template directive reference */\n customFilterTemplate: TemplateRef;\n\n /** @hidden */\n @ContentChild(FdpViewSettingsFilterCustomDef)\n set _filterCustomDef(filterCustomDef: FdpViewSettingsFilterCustomDef) {\n this.customFilterTemplate = filterCustomDef?.templateRef;\n }\n}\n","import {\n afterEveryRender,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n inject,\n Input,\n Output\n} from '@angular/core';\nimport { CollectionFilter } from '@fundamental-ngx/platform/table-helpers';\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n ContentDensityMode,\n ContentDensityObserver,\n contentDensityObserverProviders\n} from '@fundamental-ngx/core/content-density';\nimport { TableViewSettingsFilterComponent } from '../table-view-settings-filter.component';\n\n/**\n * Custom Select filter type.\n *\n * Used to render user's custom filter template\n *\n */\n\n@Component({\n selector: 'fdp-filter-custom',\n templateUrl: './filter-custom.component.html',\n // afterEveryRender is used to detect mutations on the _value object after each render cycle.\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [contentDensityObserverProviders()],\n imports: [NgTemplateOutlet]\n})\nexport class FilterCustomComponent {\n /** ViewSettingsFilter options the filter is created from */\n @Input()\n filter: TableViewSettingsFilterComponent;\n\n /** The filter model */\n @Input()\n set filterBy(filterBy: CollectionFilter | undefined) {\n if (!filterBy?.value || Object.prototype.toString.call(filterBy?.value) !== '[object Object]') {\n // force value to be an object\n this._value = {};\n } else {\n this._value = { ...filterBy.value };\n }\n\n this._valueLastEmitted = { ...this._value };\n }\n\n /** Filter model change event */\n @Output()\n valueChange: EventEmitter = new EventEmitter();\n\n /** Content Density, comes from table injector */\n get contentDensity(): ContentDensityMode {\n return this.contentDensityObserver.value;\n }\n /**\n * @hidden\n * Currently selected value\n */\n _value: Record;\n\n /**\n * @hidden\n * Last emitted value\n */\n _valueLastEmitted: Record;\n\n /** @hidden */\n private readonly _cdr = inject(ChangeDetectorRef);\n\n /** @hidden */\n constructor(private contentDensityObserver: ContentDensityObserver) {\n afterEveryRender(() => this._checkValueChanges());\n }\n\n /** @hidden */\n _checkValueChanges(): void {\n try {\n if (JSON.stringify(this._value) === JSON.stringify(this._valueLastEmitted)) {\n return;\n }\n\n this._valueLastEmitted = { ...this._value };\n\n this.valueChange.emit(this._value);\n this._cdr.markForCheck();\n } catch {}\n }\n}\n","\n\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CheckboxComponent } from '@fundamental-ngx/core/checkbox';\nimport { ListComponent, ListItemComponent, ListTitleDirective } from '@fundamental-ngx/core/list';\nimport { CollectionFilter, TableFilterSelectOption } from '@fundamental-ngx/platform/table-helpers';\n\n/**\n * Multi Select filter type.\n *\n */\n\ntype SelectableOption = TableFilterSelectOption & { selected: boolean };\n\n@Component({\n selector: 'fdp-filter-multi-select',\n templateUrl: './filter-multi-select.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [ListComponent, ListItemComponent, CheckboxComponent, FormsModule, ListTitleDirective]\n})\nexport class FilterMultiSelectComponent {\n /** Selectable filter options */\n @Input()\n options: TableFilterSelectOption[] = [];\n\n /** The filter model */\n @Input()\n set filterBy(filterBy: CollectionFilter | undefined) {\n const filterByValue = filterBy?.value || [];\n this._selectableOptions = this.options.map(\n (option): SelectableOption => ({\n ...option,\n selected: filterByValue.includes(option.value)\n })\n );\n this._updateValueBasedOnOptions();\n }\n\n /** Filter model change event */\n @Output()\n valueChange: EventEmitter = new EventEmitter();\n\n /**\n * @hidden\n * Currently selected values\n */\n _value: any[];\n\n /** @hidden */\n _selectableOptions: SelectableOption[];\n\n /** @hidden */\n _onSelectChange(option: SelectableOption, selected: boolean): void {\n option.selected = selected;\n this._updateValueBasedOnOptions();\n this.valueChange.emit(this._value);\n }\n\n /** @hidden */\n _updateValueBasedOnOptions(): void {\n this._value = this._selectableOptions.filter(({ selected }) => selected).map(({ value }) => value);\n }\n}\n","\n @for (option of _selectableOptions; track option) {\n - \n \n {{ option.label }}\n
\n }\n
\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { CollectionFilter, TableFilterSelectOption } from '@fundamental-ngx/platform/table-helpers';\n\nimport { FormsModule } from '@angular/forms';\nimport { ListComponent, ListItemComponent, ListTitleDirective } from '@fundamental-ngx/core/list';\nimport { RadioButtonComponent } from '@fundamental-ngx/core/radio';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { NOT_FILTERED_OPTION_VALUE } from './constants';\n\n/**\n * Single Select filter type.\n *\n */\n\n@Component({\n selector: 'fdp-filter-single-select',\n templateUrl: './filter-single-select.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [ListComponent, ListItemComponent, RadioButtonComponent, FormsModule, ListTitleDirective, FdTranslatePipe]\n})\nexport class FilterSingleSelectComponent {\n /** Selectable filter options */\n @Input()\n options: TableFilterSelectOption[] = [];\n\n /** The filter model */\n @Input()\n set filterBy(filterBy: CollectionFilter | undefined) {\n const value = filterBy?.value?.[0];\n this._value = value === undefined ? NOT_FILTERED_OPTION_VALUE : value;\n }\n\n /** Filter model change event */\n @Output()\n valueChange: EventEmitter = new EventEmitter();\n\n /** @hidden */\n readonly NOT_FILTERED_OPTION_VALUE = NOT_FILTERED_OPTION_VALUE;\n\n /**\n * @hidden\n * Currently selected value\n */\n _value: any;\n\n /** @hidden */\n _onValueChange(value: unknown): void {\n if (value === this._value) {\n return;\n }\n\n this._value = value;\n\n if (value === NOT_FILTERED_OPTION_VALUE) {\n this.valueChange.emit([]);\n } else {\n this.valueChange.emit([value]);\n }\n }\n}\n","\n - \n \n {{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}\n
\n @for (option of options; track option) {\n - \n \n {{ option.label }}\n
\n }\n
\n","import { InjectionToken, TemplateRef } from '@angular/core';\n\nexport interface FiltersViewStep {\n titleTemplateRef: TemplateRef;\n bodyTemplateRef: TemplateRef;\n}\n\nexport const FILTERS_VIEW_STEP_TOKEN = new InjectionToken('FiltersViewStep');\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n forwardRef,\n Input,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\n\nimport { ContentDensity } from '@fundamental-ngx/cdk/utils';\nimport { CollectionFilter, FILTER_STRATEGY, FilterType } from '@fundamental-ngx/platform/table-helpers';\n\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { TableViewSettingsFilterComponent } from '../table-view-settings-filter.component';\nimport { FilterCustomComponent } from './filter-custom.component';\nimport { FilterMultiSelectComponent } from './filter-multi-select.component';\nimport { FilterSingleSelectComponent } from './filter-single-select.component';\nimport { FILTERS_VIEW_STEP_TOKEN, FiltersViewStep } from './filters-active-step';\n\n/**\n * Filter dialog step.\n *\n * Used to render selected filter options.\n *\n */\n\n@Component({\n selector: 'fdp-filter-step',\n templateUrl: './filter-step.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n /** Each filters dialog step must provide FILTERS_VIEW_STEP_TOKEN to be accessible */\n providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FilterStepComponent) }],\n imports: [\n ButtonComponent,\n TitleComponent,\n FilterSingleSelectComponent,\n FilterMultiSelectComponent,\n FilterCustomComponent,\n FdTranslatePipe\n ]\n})\nexport class FilterStepComponent implements FiltersViewStep {\n /** ViewSettingsFilter options the filter is created from */\n @Input()\n filter: TableViewSettingsFilterComponent;\n\n /** Column key to apply this filter to */\n @Input()\n columnKey: string;\n\n /** Table's content density to be used */\n @Input()\n contentDensity: ContentDensity;\n\n /** The current filter model */\n @Input()\n set filterBy(filterByList: CollectionFilter[]) {\n this._filterBy = filterByList.find(({ field }) => field === this.columnKey);\n }\n\n /** Column name to display in the filter */\n @Input()\n columnName: string;\n\n /** Heading level of the dialog. */\n @Input()\n headingLevel = 2;\n\n /** Go back event */\n @Output()\n back: EventEmitter = new EventEmitter();\n\n /** Filter model change event */\n @Output()\n valueChange: EventEmitter = new EventEmitter();\n\n /** Template ref to the filter title */\n @ViewChild('titleTemplate')\n titleTemplateRef: TemplateRef;\n\n /** Template ref to the filter body */\n @ViewChild('bodyTemplate')\n bodyTemplateRef: TemplateRef;\n\n /** @hidden */\n readonly FILTER_TYPE = FilterType;\n\n /** @hidden */\n _filterBy?: CollectionFilter;\n\n /** @hidden */\n _onFilterValueChange(filterValue: any): void {\n const filterBy: CollectionFilter = this._filterBy || {\n field: this.columnKey,\n value: null,\n fieldName: this.columnName,\n strategy: FILTER_STRATEGY.EQ,\n exclude: false\n };\n\n const newFilterBy = { ...filterBy, value: filterValue };\n\n this.valueChange.emit(newFilterBy);\n }\n}\n","\n \n \n {{ ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: filter.label })() }}\n \n\n\n\n @switch (filter.type) {\n @case (FILTER_TYPE.SINGLE) {\n \n }\n @case (FILTER_TYPE.MULTI) {\n \n }\n @case (FILTER_TYPE.CUSTOM) {\n \n }\n @case (FILTER_TYPE.CATEGORY) {\n Categories list is not implemented\n }\n }\n\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n forwardRef,\n Input,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\n\nimport {\n ListComponent,\n ListGroupHeaderDirective,\n ListItemComponent,\n ListLinkDirective,\n ListTitleDirective\n} from '@fundamental-ngx/core/list';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { FILTERS_VIEW_STEP_TOKEN, FiltersViewStep } from './filters-active-step';\n\n/**\n * Filters list dialog step.\n *\n * Used to render available filters to drill down.\n *\n */\n\nexport interface SelectableFilter {\n label: string;\n}\n@Component({\n selector: 'fdp-filters-list-step',\n templateUrl: './filters-list-step.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n /** Each filters dialog step must provide FILTERS_VIEW_STEP_TOKEN to be accessible */\n providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FiltersListStepComponent) }],\n imports: [\n TitleComponent,\n ListComponent,\n ListGroupHeaderDirective,\n ListItemComponent,\n ListLinkDirective,\n ListTitleDirective,\n FdTranslatePipe\n ]\n})\nexport class FiltersListStepComponent implements FiltersViewStep {\n /** Selectable filters list */\n @Input()\n filters: SelectableFilter[] = [];\n\n /** Heading level of the dialog. */\n @Input()\n headingLevel: number;\n\n /** Select event is fired once some filter is selected */\n @Output()\n selectFilter: EventEmitter = new EventEmitter();\n\n /** Template ref to the filter title */\n @ViewChild('titleTemplate')\n titleTemplateRef: TemplateRef;\n\n /** Template ref to the filter body */\n @ViewChild('bodyTemplate')\n bodyTemplateRef: TemplateRef;\n}\n","\n {{\n ('platformTable.filterDialogFilterTitle' | fdTranslate)()\n }}\n\n\n\n \n","import {\n CollectionFilter,\n SortDirection,\n TableColumn,\n TableDialogCommonData\n} from '@fundamental-ngx/platform/table-helpers';\nimport { TableViewSettingsFilterComponent } from './table-view-settings-filter.component';\n\nexport interface SettingsSortDialogColumn {\n label: string;\n key: string;\n}\n\nexport interface SettingsSortDialogData extends TableDialogCommonData {\n direction: SortDirection;\n field: string | null;\n columns: SettingsSortDialogColumn[];\n allowDisablingSorting: boolean;\n}\n\nexport interface SettingsSortDialogResultData {\n field: string | null;\n direction: SortDirection;\n}\n\nexport const NOT_SORTED_OPTION_VALUE = null;\nexport const INITIAL_DIRECTION = SortDirection.ASC;\n\nexport interface SettingsGroupDialogColumn {\n label: string;\n key: string;\n}\n\nexport interface SettingsGroupDialogData extends TableDialogCommonData {\n direction: SortDirection;\n field: string | null;\n columns: SettingsGroupDialogColumn[];\n}\n\nexport interface SettingsGroupDialogResultData {\n field: string | null;\n direction: SortDirection;\n}\n\nexport const NOT_GROUPED_OPTION_VALUE = null;\n\nexport interface FiltersDialogData extends TableDialogCommonData {\n filterBy: CollectionFilter[];\n columns: TableColumn[];\n viewSettingsFilters: TableViewSettingsFilterComponent[];\n}\n\nexport interface FiltersDialogResultData {\n filterBy: CollectionFilter[];\n}\n\nexport enum ACTIVE_STEP {\n SELECT_FILTER = 'SELECT_FILTER',\n FILTER = 'FILTER'\n}\n\nexport enum ActiveTab {\n SORT = 'sort',\n FILTER = 'filter',\n GROUP = 'group'\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n input,\n Input,\n OnInit,\n output,\n signal,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport { CollectionFilter, FilterType, TableColumn } from '@fundamental-ngx/platform/table-helpers';\nimport { shallowEqual } from 'fast-equals';\nimport { TableViewSettingsFilterComponent } from '../table-view-settings-filter.component';\nimport { ACTIVE_STEP, FiltersDialogData, FiltersDialogResultData } from '../table-view-settings.model';\nimport { FilterStepComponent } from './filter-step.component';\nimport { FILTERS_VIEW_STEP_TOKEN, FiltersViewStep } from './filters-active-step';\nimport { FiltersListStepComponent, SelectableFilter } from './filters-list-step.component';\n\n@Component({\n selector: 'fdp-filters',\n templateUrl: './filters.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [NgTemplateOutlet, FiltersListStepComponent, FilterStepComponent]\n})\nexport class FiltersComponent implements AfterViewInit, OnInit {\n /** Data for the filtering dialog */\n @Input() set filteringData(value: FiltersDialogData) {\n this._initializeFilterData(value);\n }\n\n /** @hidden Heading level */\n headingLevel = input(2);\n\n /** Initial set of filters applied */\n initialFilters = input([]);\n\n /** Emits when the active filter step view changes */\n activeFilterStepViewChange = output();\n\n /** Emits the final result of filter changes */\n filterChange = output();\n\n /** Emits whether the reset button should be enabled */\n resetAvailabilityChange = output();\n\n /** Signal to hold currently applied filter rules */\n filterBy = signal([]);\n\n /** Signal for table columns, used to retrieve the column key */\n columns = signal([]);\n\n /** Signal for declared filter options */\n viewSettingsFilters = signal([]);\n\n /** Signal to track the currently selected filter step */\n activeStep = signal(ACTIVE_STEP.SELECT_FILTER);\n\n /** Signal to track the currently selected filter */\n activeFilter = signal>(null);\n\n /** Signal to track the column key associated with the active filter */\n activeFilterColumnKey = signal>(null);\n\n /** Signal for the currently active filter step view */\n activeFilterStepView = signal>(null);\n\n /** Reference to the available steps */\n readonly ACTIVE_STEP = ACTIVE_STEP;\n\n /** hidden */\n constructor(private readonly _cd: ChangeDetectorRef) {}\n\n /** hidden */\n ngOnInit(): void {\n this._compareSelectedFilters();\n }\n\n /** hidden */\n ngAfterViewInit(): void {\n this._cd.detectChanges();\n }\n\n /** Setter for the active filter step view to trigger updates */\n @ViewChild(FILTERS_VIEW_STEP_TOKEN)\n set setActiveFilterStepView(view: FiltersViewStep) {\n this.activeFilterStepView.set(view);\n this.activeFilterStepViewChange.emit(view);\n this._cd.detectChanges();\n }\n\n /**\n * Select a filter to drill down and update the active filter step.\n * @param filter The filter to be selected and applied.\n */\n selectFilter(filter: SelectableFilter): void {\n this.activeStep.set(ACTIVE_STEP.FILTER);\n const selectedFilter = filter as TableViewSettingsFilterComponent;\n this.activeFilter.set(selectedFilter);\n const columnKey = this.columns().find(({ name }) => name === selectedFilter.column)?.key || null;\n this.activeFilterColumnKey.set(columnKey);\n this._cd.detectChanges();\n }\n\n /** Navigate back to the top-level filters list */\n goToFilters(): void {\n this.activeStep.set(ACTIVE_STEP.SELECT_FILTER);\n this.activeFilter.set(null);\n }\n\n /**\n * Apply changes to the selected filter and emit the filter change event.\n * @param filter The filter to apply\n * @param filterComponent The component for the filter (provides type info)\n */\n applyFilter(filter: CollectionFilter, filterComponent: Nullable): void {\n if (!filter) {\n return;\n }\n\n // Update the filter by removing the previous filter for the field\n this.filterBy.set(this.filterBy().filter(({ field }) => field !== filter.field));\n\n if (!filterComponent) {\n return;\n }\n const filterIsNotEmpty =\n filterComponent.type === FilterType.CUSTOM ||\n (filterComponent.type === FilterType.MULTI && filter.value?.length) ||\n (filterComponent.type === FilterType.SINGLE && filter.value?.length);\n\n // Add the new filter if it has a value\n if (filterIsNotEmpty) {\n this.filterBy.set([...this.filterBy(), filter]);\n }\n\n this._compareSelectedFilters();\n this.filterChange.emit({ filterBy: this.filterBy() });\n this._cd.detectChanges();\n }\n\n /**\n * Private method to initialize filter data on component initialization.\n * Extracts the initial filter values and table column data.\n */\n private _initializeFilterData(filteringData: FiltersDialogData): void {\n if (filteringData) {\n this.filterBy.set([...filteringData.filterBy]);\n this.viewSettingsFilters.set(filteringData.viewSettingsFilters);\n this.columns.set(filteringData.columns);\n }\n }\n\n /**\n * Private method to compare the current selected filters against the initial state.\n * Enables or disables the reset button based on filter state comparison.\n */\n private _compareSelectedFilters(): void {\n if (!shallowEqual(this.initialFilters(), this.filterBy())) {\n this.resetAvailabilityChange.emit(true);\n } else {\n this.resetAvailabilityChange.emit(false);\n }\n }\n}\n","@if (activeFilterStepView()?.bodyTemplateRef) {\n \n}\n\n@if (activeStep() === ACTIVE_STEP.SELECT_FILTER) {\n \n} @else if (activeStep() === ACTIVE_STEP.FILTER) {\n \n}\n","import { ChangeDetectionStrategy, Component, input, OnInit, output, signal, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport {\n ListComponent,\n ListGroupHeaderDirective,\n ListItemComponent,\n ListTitleDirective\n} from '@fundamental-ngx/core/list';\nimport { RadioButtonComponent } from '@fundamental-ngx/core/radio';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { SortDirection } from '@fundamental-ngx/platform/table-helpers';\nimport { shallowEqual } from 'fast-equals';\nimport {\n INITIAL_DIRECTION,\n NOT_GROUPED_OPTION_VALUE,\n SettingsGroupDialogColumn,\n SettingsGroupDialogData,\n SettingsGroupDialogResultData\n} from '../table-view-settings.model';\n\nlet groupOrderHeaderUniqueId = 0;\n\n@Component({\n selector: 'fdp-grouping',\n templateUrl: './grouping.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n ListComponent,\n ListGroupHeaderDirective,\n ListTitleDirective,\n ListItemComponent,\n RadioButtonComponent,\n FormsModule,\n FdTranslatePipe\n ]\n})\nexport class GroupingComponent implements OnInit {\n /** Input data for grouping */\n groupingData = input();\n\n /** @hidden Initial grouping settings */\n initialGrouping = input>();\n\n /** @hidden Heading level */\n headingLevel = input(2);\n\n /** Event emitter for group changes */\n groupChange = output();\n\n /** Event emitter for reset availability changes */\n resetAvailabilityChange = output();\n\n /** Current selected grouping direction */\n direction = signal(INITIAL_DIRECTION);\n\n /** Current selected grouping field */\n field = signal(NOT_GROUPED_OPTION_VALUE);\n\n /** Table columns available for grouping */\n columns = signal([]);\n\n /** @hidden */\n groupOrderHeaderId = `fdp-table-group-dialog-group-order-header-${groupOrderHeaderUniqueId++}`;\n\n /** @hidden */\n groupByHeaderId = `fdp-table-group-dialog-group-by-header-${groupOrderHeaderUniqueId++}`;\n\n /** Constants for grouping directions */\n readonly SORT_DIRECTION = SortDirection;\n\n /** Constant for 'Not grouped' option */\n readonly NOT_GROUPED_OPTION_VALUE = NOT_GROUPED_OPTION_VALUE;\n\n /** hidden */\n ngOnInit(): void {\n const data = this.groupingData();\n if (data) {\n this._initGroupingData(data);\n }\n\n this._compareInitialGrouping();\n }\n\n /**\n * Handle changes to grouping direction.\n * @param direction New grouping direction.\n */\n _groupOrderChange(direction: SortDirection): void {\n this.direction.set(direction);\n this._onModelChange();\n }\n\n /**\n * Handle changes to the grouping field.\n * @param field New grouping field.\n */\n _groupFieldChange(field: string): void {\n this.field.set(field);\n this._onModelChange();\n }\n\n /**\n * Initialize grouping data and signals.\n * @param groupingData Input grouping data.\n * @hidden\n */\n private _initGroupingData(groupingData: SettingsGroupDialogData): void {\n this.columns.set(groupingData.columns || []);\n this.direction.set(groupingData.direction ?? INITIAL_DIRECTION);\n this.field.set(groupingData.field ?? NOT_GROUPED_OPTION_VALUE);\n }\n\n /**\n * Compare current grouping state with the initial state, emit events for group and reset availability changes.\n * @hidden\n */\n private _onModelChange(): void {\n const initialGrouping = this.initialGrouping();\n if (!initialGrouping) {\n return;\n }\n const isInitialDiffers =\n this.direction() !== initialGrouping.direction || this.field() !== initialGrouping.field;\n\n const result: SettingsGroupDialogResultData = { field: this.field(), direction: this.direction() };\n this.groupChange.emit(result);\n this.resetAvailabilityChange.emit(isInitialDiffers);\n }\n\n /**\n * Compare the initial grouping state with the current state and emit reset availability change if needed.\n * @hidden\n */\n private _compareInitialGrouping(): void {\n const appliedGrouping: SettingsGroupDialogResultData = {\n field: this.field(),\n direction: this.direction()\n };\n\n if (!shallowEqual(this.initialGrouping(), appliedGrouping)) {\n this.resetAvailabilityChange.emit(true);\n }\n }\n}\n","\n \n {{ ('platformTable.groupDialogGroupOrderHeader' | fdTranslate)() }}\n \n\n\n - \n \n {{ ('platformTable.groupDialogGroupOrderAsc' | fdTranslate)() }}\n
\n - \n \n {{ ('platformTable.groupDialogGroupOrderDesc' | fdTranslate)() }}\n
\n
\n\n \n {{ ('platformTable.groupDialogGroupByHeader' | fdTranslate)() }}\n \n\n\n - \n \n {{ ('platformTable.groupDialogNotGroupedLabel' | fdTranslate)() }}\n
\n @for (column of columns(); track column) {\n - \n \n {{ column.label }}\n
\n }\n
\n","import { ChangeDetectionStrategy, Component, input, OnInit, output, signal, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport {\n ListComponent,\n ListGroupHeaderDirective,\n ListItemComponent,\n ListTitleDirective\n} from '@fundamental-ngx/core/list';\nimport { RadioButtonComponent } from '@fundamental-ngx/core/radio';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { CollectionSort, SortDirection } from '@fundamental-ngx/platform/table-helpers';\nimport { shallowEqual } from 'fast-equals';\nimport {\n INITIAL_DIRECTION,\n NOT_SORTED_OPTION_VALUE,\n SettingsSortDialogColumn,\n SettingsSortDialogData,\n SettingsSortDialogResultData\n} from '../table-view-settings.model';\n\nlet sortOrderHeaderUniqueId = 0;\nlet sortDialogSortByHeaderUniqueId = 0;\n\n@Component({\n selector: 'fdp-sorting',\n templateUrl: './sorting.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n ListComponent,\n ListGroupHeaderDirective,\n ListTitleDirective,\n ListItemComponent,\n RadioButtonComponent,\n FormsModule,\n FdTranslatePipe\n ]\n})\nexport class SortingComponent implements OnInit {\n /** Input data for sorting */\n sortingData = input();\n\n /** @hidden Heading level */\n headingLevel = input(2);\n\n /** @hidden Initial sorting state */\n initialSorting = input>();\n\n /** Event emitter for sort changes */\n sortChange = output();\n\n /** Event emitter for reset availability changes */\n resetAvailabilityChange = output();\n\n /** Current selected sorting direction */\n direction = signal(INITIAL_DIRECTION);\n\n /** Current selected sorting field */\n field = signal(NOT_SORTED_OPTION_VALUE);\n\n /** Whether disabling sorting is allowed */\n allowDisablingSorting = signal(false);\n\n /** Available table columns for sorting */\n columns = signal([]);\n\n /** @hidden */\n sortOrderHeaderId = `fdp-table-sort-order-header-${sortOrderHeaderUniqueId++}`;\n\n /** @hidden */\n sortDialogSortByHeaderId = `fdp-table-sort-dialog-sort-by-header-${sortDialogSortByHeaderUniqueId++}`;\n\n /** @hidden Constants for sort direction */\n readonly SORT_DIRECTION = SortDirection;\n\n /** @hidden Constant for 'Not sorted' option value */\n readonly NOT_SORTED_OPTION_VALUE = NOT_SORTED_OPTION_VALUE;\n\n /** hidden */\n ngOnInit(): void {\n const sortingData = this.sortingData();\n if (sortingData) {\n this._initSortingData(sortingData);\n }\n\n this._compareInitialSorting();\n }\n\n /**\n * Handle sort direction changes.\n * @param direction New sorting direction.\n */\n _sortDirectionChange(direction: SortDirection): void {\n this.direction.set(direction);\n this._onModelChange();\n }\n\n /**\n * Handle sort field changes.\n * @param field New sorting field.\n */\n _sortFieldChange(field: string): void {\n this.field.set(field);\n this._onModelChange();\n }\n\n /**\n * Initialize sorting data and signals.\n * @param sortingData Input sorting data.\n * @hidden\n */\n private _initSortingData(sortingData: SettingsSortDialogData): void {\n this.columns.set(sortingData.columns || []);\n this.direction.set(sortingData.direction ?? INITIAL_DIRECTION);\n this.field.set(sortingData.field ?? NOT_SORTED_OPTION_VALUE);\n this.allowDisablingSorting.set(sortingData.allowDisablingSorting);\n }\n\n /**\n * Emit changes to the model and compare with initial sorting.\n * @hidden\n */\n private _onModelChange(): void {\n const initialSorting = this.initialSorting();\n if (!initialSorting) {\n return;\n }\n const isInitialDiffers = this.direction() !== initialSorting.direction || this.field() !== initialSorting.field;\n\n this.resetAvailabilityChange.emit(isInitialDiffers);\n this.sortChange.emit({ direction: this.direction(), field: this.field() });\n }\n\n /**\n * Compare the current sorting state with the initial state.\n * Emit reset availability if the sorting has changed.\n * @hidden\n */\n private _compareInitialSorting(): void {\n const appliedSorting: CollectionSort = {\n field: this.field(),\n direction: this.direction()\n };\n\n const isEqual = shallowEqual(this.initialSorting(), appliedSorting);\n if (!isEqual) {\n this.resetAvailabilityChange.emit(true);\n }\n }\n}\n","\n \n {{ ('platformTable.sortDialogSortOrderHeader' | fdTranslate)() }}\n \n\n\n - \n \n {{ ('platformTable.sortDialogSortOrderAsc' | fdTranslate)() }}\n
\n - \n \n {{ ('platformTable.sortDialogSortOrderDesc' | fdTranslate)() }}\n
\n
\n\n\n \n {{ ('platformTable.sortDialogSortByHeader' | fdTranslate)() }}\n \n\n\n @if (allowDisablingSorting()) {\n \n \n {{ ('platformTable.sortDialogNotSortedLabel' | fdTranslate)() }}\n \n }\n @for (column of columns(); track column) {\n - \n \n {{ column.label }}\n
\n }\n
\n","import { CdkScrollable } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { FocusableItemDirective, InitialFocusDirective, Nullable, TemplateDirective } from '@fundamental-ngx/cdk/utils';\nimport {\n BarElementDirective,\n BarLeftDirective,\n BarRightDirective,\n ButtonBarComponent\n} from '@fundamental-ngx/core/bar';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport {\n DialogBodyComponent,\n DialogComponent,\n DialogFooterComponent,\n DialogHeaderComponent,\n DialogRef\n} from '@fundamental-ngx/core/dialog';\nimport { SegmentedButtonComponent } from '@fundamental-ngx/core/segmented-button';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { CollectionFilter, CollectionSort, Table } from '@fundamental-ngx/platform/table-helpers';\nimport { RESETTABLE_TOKEN, ResetButtonComponent, Resettable } from '../../reset-button/reset-button.component';\nimport { FiltersViewStep } from '../filtering/filters-active-step';\nimport { FiltersComponent } from '../filtering/filters.component';\nimport { GroupingComponent } from '../grouping/grouping.component';\nimport { SortingComponent } from '../sorting/sorting.component';\nimport {\n ActiveTab,\n FiltersDialogData,\n FiltersDialogResultData,\n INITIAL_DIRECTION,\n NOT_GROUPED_OPTION_VALUE,\n NOT_SORTED_OPTION_VALUE,\n SettingsGroupDialogData,\n SettingsGroupDialogResultData,\n SettingsSortDialogData,\n SettingsSortDialogResultData\n} from '../table-view-settings.model';\n\n@Component({\n selector: 'fdp-settings-dialog-settings',\n standalone: true,\n providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DialogComponent,\n DialogHeaderComponent,\n BarLeftDirective,\n BarElementDirective,\n BarRightDirective,\n ResetButtonComponent,\n CdkScrollable,\n DialogBodyComponent,\n DialogFooterComponent,\n FdTranslatePipe,\n FormsModule,\n ButtonComponent,\n SortingComponent,\n FiltersComponent,\n GroupingComponent,\n NgTemplateOutlet,\n SegmentedButtonComponent,\n TemplateDirective,\n TitleComponent,\n ButtonBarComponent,\n InitialFocusDirective,\n FocusableItemDirective\n ],\n templateUrl: './settings-dialog.component.html'\n})\nexport class SettingsDialogComponent implements Resettable {\n /** Data for sorting */\n sortingData = signal>(null);\n\n /** Data for filtering */\n filteringData = signal>(null);\n\n /** Data for grouping */\n groupingData = signal>(null);\n\n /** The active tab to display ('sort', 'filter', or 'group') */\n activeTab = signal>(null);\n\n /** Flag indicating whether the subheader should be shown */\n showSubheader = signal(false);\n\n /** Heading level of the dialog header. */\n headingLevel: number;\n\n /** Current step component to render for filtering */\n activeFilterStepView = signal>(null);\n\n /** Signal to track reset availability */\n readonly isResetAvailable$ = signal(false);\n\n /** @hidden Initial sorting configuration */\n _initialSorting = signal>(null);\n\n /** @hidden Initial filter configurations */\n _initialFilters = signal([]);\n\n /** @hidden Initial grouping configurations */\n _initialGrouping = signal>(null);\n\n /**\n * Constructor that initializes dialog data and sets initial values for sorting, filtering, and grouping.\n */\n constructor(\n private readonly dialogRef: DialogRef<{\n sortingData: Nullable;\n filteringData: Nullable;\n groupingData: Nullable;\n headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n }>,\n private readonly _table: Table\n ) {\n const data = this.dialogRef.data;\n this.sortingData.set(data.sortingData);\n this.filteringData.set(data.filteringData);\n this.groupingData.set(data.groupingData);\n this.headingLevel = data.headingLevel;\n this.activeTab.set(this._getInitialActiveTab());\n this._shouldRenderSubheader();\n this._setInitialSorting();\n this._setInitialFilters();\n this._setInitialGrouping();\n }\n\n /**\n * Confirm the dialog action and close the dialog, returning updated settings data.\n */\n confirm(): void {\n this.dialogRef.close({\n sortingData: this.sortingData(),\n filteringData: this.filteringData(),\n groupingData: this.groupingData()\n });\n }\n\n /**\n * Cancel the dialog and close it without saving any changes.\n */\n cancel(): void {\n this.dialogRef.close(null);\n }\n\n /**\n * Reset the settings based on the currently active tab (sort, filter, group).\n */\n reset(): void {\n if (this.activeTab() === ActiveTab.SORT && this.sortingData()) {\n this.sortingData.set({\n ...this.sortingData()!,\n field: this._initialSorting()!.field,\n direction: this._initialSorting()!.direction\n });\n }\n if (this.activeTab() === ActiveTab.FILTER && this.filteringData()) {\n this.filteringData.set({\n ...this.filteringData()!,\n filterBy: this._initialFilters()\n });\n }\n if (this.activeTab() === ActiveTab.GROUP && this.groupingData()) {\n this.groupingData.set({\n ...this.groupingData()!,\n field: this._initialGrouping()!.field,\n direction: this._initialGrouping()!.direction\n });\n }\n this.isResetAvailable$.set(false);\n }\n\n /**\n * Handle sort change event and update sorting data.\n * @param event Updated sorting data.\n */\n onSortChange(event: SettingsSortDialogResultData): void {\n this.sortingData.set({\n ...this.sortingData()!,\n field: event.field,\n direction: event.direction\n });\n }\n\n /**\n * Handle filter change event and update filtering data.\n * @param event Updated filtering data.\n */\n onFilterChange(event: FiltersDialogResultData): void {\n this.filteringData.set({\n ...this.filteringData()!,\n filterBy: event.filterBy\n });\n }\n\n /**\n * Handle group change event and update grouping data.\n * @param event Updated grouping data.\n */\n onGroupChange(event: SettingsGroupDialogResultData): void {\n this.groupingData.set({\n ...this.groupingData()!,\n field: event.field,\n direction: event.direction\n });\n }\n\n /**\n * Update the active filter step view when a change occurs.\n * @param event The new active filter step view.\n */\n onActiveFilterStepViewChange(event: FiltersViewStep): void {\n this.activeFilterStepView.set(event);\n }\n\n /**\n * Handle changes to the reset availability.\n * @param event Boolean indicating if reset is available.\n */\n onResetAvailabilityChange(event: boolean): void {\n this.isResetAvailable$.set(event);\n }\n\n /**\n * Determine the initial active tab based on available data.\n * @returns The name of the active tab to display.\n */\n private _getInitialActiveTab(): Nullable {\n if (this.sortingData()) {\n return ActiveTab.SORT;\n } else if (this.filteringData()) {\n return ActiveTab.FILTER;\n } else if (this.groupingData()) {\n return ActiveTab.GROUP;\n }\n return null;\n }\n\n /**\n * Determine if the subheader should be shown based on the availability of sorting, filtering, and grouping data.\n */\n private _shouldRenderSubheader(): void {\n const validDataCount = [this.sortingData(), this.filteringData(), this.groupingData()].filter(\n (data) => data !== null\n ).length;\n this.showSubheader.set(validDataCount >= 2);\n }\n\n /**\n * Set initial sorting configuration from the table's state.\n */\n private _setInitialSorting(): void {\n const initialSorting = (this._table.initialState?.initialSortBy || [])[0];\n this._initialSorting.set({\n field: initialSorting?.field ?? NOT_SORTED_OPTION_VALUE,\n direction: initialSorting?.direction ?? INITIAL_DIRECTION\n });\n }\n\n /**\n * Set initial filter configuration from the table's state.\n */\n private _setInitialFilters(): void {\n this._initialFilters.set(this._table.initialState?.initialFilterBy ?? []);\n }\n\n /**\n * Set initial grouping configuration from the table's state.\n */\n private _setInitialGrouping(): void {\n const initialGrouping = (this._table.initialState?.initialGroupBy || [])[0];\n this._initialGrouping.set({\n field: initialGrouping?.field ?? NOT_GROUPED_OPTION_VALUE,\n direction: initialGrouping?.direction ?? INITIAL_DIRECTION\n });\n }\n}\n","\n \n \n \n @if (activeTab() !== 'filter') {\n \n {{\n ('platformTable.settingsDialogHeader' | fdTranslate)()\n }}\n \n } @else {\n \n @if (activeFilterStepView()?.titleTemplateRef) {\n \n }\n \n }\n
\n \n \n \n \n
\n \n\n @if (showSubheader()) {\n \n \n @if (sortingData()) {\n \n }\n @if (filteringData()) {\n \n }\n @if (groupingData()) {\n \n }\n \n \n }\n \n\n \n @switch (activeTab()) {\n @case ('sort') {\n \n }\n @case ('filter') {\n \n }\n @case ('group') {\n \n }\n }\n \n\n \n \n \n \n\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n DestroyRef,\n forwardRef,\n inject,\n Input,\n QueryList,\n ViewEncapsulation\n} from '@angular/core';\nimport { filter, startWith } from 'rxjs/operators';\n\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DialogConfig, DialogRef, DialogService } from '@fundamental-ngx/core/dialog';\nimport {\n CollectionFilter,\n SortDirection,\n Table,\n TableColumn,\n TableDialogCommonData,\n TableState\n} from '@fundamental-ngx/platform/table-helpers';\nimport { SettingsDialogComponent } from './settings-dialog/settings-dialog.component';\nimport { TableViewSettingsFilterComponent } from './table-view-settings-filter.component';\nimport { FiltersDialogData, SettingsGroupDialogData, SettingsSortDialogData } from './table-view-settings.model';\n\nexport const dialogConfig: DialogConfig = {\n responsivePadding: false,\n verticalPadding: false,\n width: '340px'\n};\n\nexport interface CombinedTableDialogData {\n sortingData: SettingsSortDialogData | null;\n filteringData: FiltersDialogData | null;\n groupingData: SettingsGroupDialogData | null;\n}\n\n/**\n * View settings dialog component.\n *\n * Used to link view settings filters options to the grid table.\n *\n * ```html\n * \n * ...\n * \n * \n * \n * \n * ```\n * */\n@Component({\n selector: 'fdp-table-view-settings-dialog',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: true\n})\nexport class TableViewSettingsDialogComponent implements AfterViewInit {\n /** Reference to table component. */\n @Input()\n set table(table: Table) {\n this._setTable(table);\n }\n\n get table(): Table {\n return this._table;\n }\n\n /** Whether to allow selecting '(Not sorted)' option in sorting dialog. */\n @Input()\n allowDisablingSorting = true;\n\n /** Heading level of the dialog. */\n @Input()\n headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 2;\n\n /** @hidden */\n @ContentChildren(forwardRef(() => TableViewSettingsFilterComponent))\n filters: QueryList;\n\n /** @hidden */\n _table: Table;\n\n /** @hidden */\n _dialogRef: DialogRef;\n\n private readonly destroyRef = inject(DestroyRef);\n\n /** @hidden */\n constructor(private readonly _dialogService: DialogService) {}\n\n /** @hidden */\n ngAfterViewInit(): void {\n this._listenToFilters();\n }\n\n /** Open Sort Settings Dialog */\n showViewSettingsDialog(): void {\n const state = this._getTableState();\n const columns = this._getTableColumns();\n\n const sortData: SettingsSortDialogData = {\n columns: columns.filter(({ sortable }) => sortable),\n direction: state.sortBy?.[0]?.direction,\n field: state.sortBy?.[0]?.field,\n allowDisablingSorting: this.allowDisablingSorting\n };\n\n const filterData: FiltersDialogData = {\n columns,\n viewSettingsFilters: this.filters.toArray(),\n filterBy: state?.filterBy\n };\n\n const groupData: SettingsGroupDialogData = {\n columns: columns.filter(({ groupable }) => groupable),\n direction: state.groupBy?.[0]?.direction,\n field: state.groupBy?.[0]?.field\n };\n\n if (this._dialogRef) {\n this._dialogRef.dismiss();\n }\n\n this._dialogRef = this._dialogService.open(\n SettingsDialogComponent,\n {\n ...dialogConfig,\n data: {\n sortingData: sortData.columns.length > 0 ? sortData : null,\n filteringData: filterData.viewSettingsFilters.length > 0 ? filterData : null,\n groupingData: groupData.columns.length > 0 ? groupData : null,\n headingLevel: this.headingLevel\n }\n },\n this.table.injector\n );\n\n this._dialogRef.afterClosed\n .pipe(\n filter((result) => !!result),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe(({ sortingData, filteringData, groupingData }) => {\n if (sortingData) {\n this._applySorting(sortingData.field, sortingData.direction);\n }\n if (filteringData) {\n this._applyFiltering(filteringData.filterBy);\n }\n if (groupingData) {\n this._applyGrouping(groupingData.field, groupingData.direction);\n }\n });\n }\n\n /** @hidden */\n private _listenToFilters(): void {\n this.filters.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n if (this.filters.toArray().length > 0) {\n this._table?.showSettingsInToolbar(true);\n }\n });\n }\n\n /** @hidden */\n private _setTable(table: Table): void {\n this._table = table;\n this._subscribeToTable();\n }\n\n /** @hidden */\n private _subscribeToTable(): void {\n if (!this._table) {\n return;\n }\n\n this._table.openTableSortSettings\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.showViewSettingsDialog());\n\n this._table.openTableFilterSettings\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.showViewSettingsDialog());\n\n this._table.openTableGroupSettings\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.showViewSettingsDialog());\n\n this._table.tableColumnsStream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((columns: TableColumn[]) => {\n const show = columns.some(({ sortable }) => sortable) || columns.some(({ groupable }) => groupable);\n this._table?.showSettingsInToolbar(show);\n });\n }\n\n /** @hidden */\n private _getTableState(): TableState {\n return this._table?.getTableState();\n }\n\n /** @hidden */\n private _getTableColumns(): TableColumn[] {\n return this._table?.getTableColumns() || [];\n }\n\n /** @hidden */\n private _applySorting(field: string | null, direction: SortDirection): void {\n this._table?.sort(field ? [{ field, direction }] : []);\n }\n\n /** @hidden */\n private _applyFiltering(filters: CollectionFilter[]): void {\n this._table?.filter(filters);\n }\n\n /** @hidden */\n private _applyGrouping(field: string | null, direction: SortDirection): void {\n this._table?.group(field ? [{ field, direction, showAsColumn: true }] : []);\n }\n}\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';\nimport { ListComponent, ListItemComponent, ListLinkDirective, ListTitleDirective } from '@fundamental-ngx/core/list';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { Table, TableDataSourceDirective, TableService } from '@fundamental-ngx/platform/table-helpers';\n\n@Component({\n selector: 'fdp-table-growing-button',\n imports: [ListComponent, ListItemComponent, ListTitleDirective, ListLinkDirective, FdTranslatePipe],\n templateUrl: './table-growing-button.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TableGrowingButtonComponent {\n /** Whether to show items count. */\n @Input()\n showItemsCount = false;\n\n /** @hidden */\n readonly _tableService = inject(TableService);\n\n /** @hidden */\n readonly _dataSourceDirective = inject(TableDataSourceDirective);\n\n /** @hidden */\n readonly _table = inject(Table);\n\n /** @hidden */\n _loadMore(): void {\n (this._table as any)._onSpyIntersect(true);\n }\n}\n","\n \n \n } @else if (_table.loadedRows$() === _dataSourceDirective.totalItems$() && showItemsCount) {\n \n \n {{\n (\n 'platformTable.showingBlankOfBlank'\n | fdTranslate: { totalGrowingItemsCount: _table.loadedRows$() }\n )()\n }}\n \n \n }\n\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { TableCellDirective, TableRowDirective } from '@fundamental-ngx/core/table';\nimport { TableService } from '@fundamental-ngx/platform/table-helpers';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[fdp-table-footer-row]',\n templateUrl: './table-footer-row.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TableCellDirective, NgTemplateOutlet]\n})\nexport class TableFooterRowComponent extends TableRowDirective {\n /** @hidden */\n readonly _fdpTableService = inject(TableService);\n}\n","@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n \n @if (column?.footerLabel) {\n \n {{ column.footerLabel }}\n \n } @else if (column?.footerCellTemplate && column.footerCellTemplate !== undefined) {\n \n }\n | \n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n QueryList,\n SimpleChanges,\n ViewChildren,\n ViewEncapsulation,\n inject\n} from '@angular/core';\nimport {\n FDK_FOCUSABLE_ITEM_DIRECTIVE,\n FDK_FOCUSABLE_LIST_DIRECTIVE,\n FocusableItemDirective,\n Nullable\n} from '@fundamental-ngx/cdk/utils';\nimport { TableCellDirective, TableRowDirective } from '@fundamental-ngx/core/table';\nimport { TableColumn, TableRow, TableService } from '@fundamental-ngx/platform/table-helpers';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[fdp-table-group-row]',\n templateUrl: './table-group-row.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: FDK_FOCUSABLE_LIST_DIRECTIVE,\n useExisting: TableGroupRowComponent\n }\n ],\n host: {\n role: 'row',\n '[attr.aria-expanded]': 'row.expanded'\n },\n imports: [TableCellDirective, NgTemplateOutlet]\n})\nexport class TableGroupRowComponent extends TableRowDirective implements OnChanges {\n /** Table ID. */\n @Input()\n rowId: string;\n /** Row index. */\n @HostBinding('attr.aria-rowindex')\n @Input()\n index: number;\n\n /** Row height. */\n @HostBinding('style.height.px')\n @Input()\n height: number;\n\n /** Whether the row is draggable. */\n @HostBinding('class.fd-table__row--draggable')\n @Input()\n draggable = false;\n\n /** Table Row. */\n @Input()\n row: TableRow;\n\n /** Key to column mapping. */\n @Input()\n keyToColumnMap: Map;\n\n /** Event emitted when group row expansion state needs to be toggled. */\n @Output()\n toggleGroupRow = new EventEmitter>();\n\n /** @hidden */\n _column: Nullable;\n\n /** @hidden */\n @ViewChildren(FDK_FOCUSABLE_ITEM_DIRECTIVE)\n private set _focusableViewCellItems(items: QueryList) {\n this.setItems(items.toArray());\n }\n\n /** @hidden */\n readonly _fdpTableService = inject(TableService);\n\n /** @hidden */\n ngOnChanges(changes: SimpleChanges): void {\n if ('row' in changes || 'keyToColumnMap' in changes) {\n this._column = this.keyToColumnMap.get(this.row.value?.['field']);\n }\n }\n}\n","\n \n\n\n\n \n
\n @if (_fdpTableService.groupRules$(); as groupRules) {\n \n @if (groupRules.size === 1) {\n
\n {{ row.value?.['value'] }} - {{ row.value?.['count'] }}\n
\n }\n \n @if (groupRules.size !== 1) {\n
\n :\n {{ row.value?.['value'] }}\n
\n }\n }\n
| \n}\n\n\n @for (poppingColumn of _fdpTableService.poppingColumns$(); track poppingColumn.name) {\n \n @if (poppingColumn?.label?.length) {\n \n }\n\n @if (poppingColumn?.columnCellTemplate) {\n \n } @else {\n {{ row.value | valueByPath: poppingColumn.key }}\n }\n
\n }\n\n","import { ChangeDetectionStrategy, Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { FormsModule, NgForm } from '@angular/forms';\nimport { set } from '@fundamental-ngx/cdk/utils';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { InputComponent, PlatformDatePickerComponent, SwitchComponent } from '@fundamental-ngx/platform/form';\nimport { EditableTableCell, TableColumn, TableRow } from '@fundamental-ngx/platform/table-helpers';\n\nlet controlUniqId = 0;\n\n@Component({\n selector: 'fdp-table-editable-cell',\n templateUrl: './table-editable-cell.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: EditableTableCell, useExisting: TableEditableCellComponent }],\n imports: [FormsModule, InputComponent, PlatformDatePickerComponent, SwitchComponent, FdTranslatePipe]\n})\nexport class TableEditableCellComponent implements EditableTableCell {\n /** Table row definition. */\n @Input()\n row: TableRow;\n\n /** Table cell definition. */\n @Input()\n column: TableColumn;\n\n /** Column value. */\n @Input()\n set columnValue(value: any) {\n this._columnValue = value;\n set(this.row.value, this.column.key, value);\n }\n\n get columnValue(): any {\n return this._columnValue;\n }\n\n /** Editable cell form. */\n @ViewChild(NgForm)\n form: NgForm;\n\n /** @hidden */\n _controlUniqName = `input-${controlUniqId++}`;\n\n /** @hidden */\n private _columnValue: any;\n}\n","\n","import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';\nimport { AsyncPipe, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n SimpleChanges,\n ViewChildren,\n ViewEncapsulation,\n computed,\n inject,\n signal\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport {\n DisabledBehaviorDirective,\n FDK_FOCUSABLE_ITEM_DIRECTIVE,\n FDK_FOCUSABLE_LIST_DIRECTIVE,\n FocusableItemDirective,\n FocusableItemPosition,\n KeyUtil,\n RtlService,\n ValueByPathPipe,\n destroyObservable,\n get,\n uuidv4\n} from '@fundamental-ngx/cdk/utils';\nimport { CheckboxComponent } from '@fundamental-ngx/core/checkbox';\nimport { ContentDensityObserver } from '@fundamental-ngx/core/content-density';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport {\n TableCellDirective,\n TableIconDirective,\n TableRowDirective,\n TableStatusIndicatorDirective\n} from '@fundamental-ngx/core/table';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport {\n ColumnResizableSidePipe,\n EditableTableCell,\n PlatformTableCellResizableDirective,\n SelectionCellStylesPipe,\n SelectionMode,\n SelectionModeValue,\n TableCellStylesPipe,\n TableColumn,\n TableColumnResizeService,\n TableDraggableDirective,\n TableRow,\n TableRowKeyboardDrag,\n TableRowService,\n TableService,\n isTreeRow,\n isTreeRowFirstCell\n} from '@fundamental-ngx/platform/table-helpers';\nimport { Subject, fromEvent, merge } from 'rxjs';\nimport { filter, startWith, switchMap, takeUntil } from 'rxjs/operators';\nimport { TableEditableCellComponent } from '../table-editable-cell/table-editable-cell.component';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[fdp-table-row]',\n templateUrl: './table-row.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: FDK_FOCUSABLE_LIST_DIRECTIVE,\n useExisting: TableRowComponent\n }\n ],\n host: {\n role: 'row',\n '[attr.aria-expanded]': '_isTreeRow(row) ? row.expanded : null'\n },\n imports: [\n TableCellDirective,\n TableStatusIndicatorDirective,\n DisabledBehaviorDirective,\n NgStyle,\n NgTemplateOutlet,\n CheckboxComponent,\n FormsModule,\n PlatformTableCellResizableDirective,\n NgClass,\n TableEditableCellComponent,\n TableIconDirective,\n AsyncPipe,\n ValueByPathPipe,\n FdTranslatePipe,\n SelectionCellStylesPipe,\n TableCellStylesPipe,\n ColumnResizableSidePipe,\n IconComponent\n ]\n})\nexport class TableRowComponent extends TableRowDirective implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n /** Row ID. */\n @Input()\n rowId: string;\n\n /** Table Row. */\n @Input()\n row: TableRow;\n\n /** Row index. */\n @Input()\n index: number;\n\n /** Selection mode. */\n @Input()\n selectionMode: SelectionModeValue;\n\n /** Selectable flag key. */\n @Input()\n selectableKey: string;\n\n /** Whether to enable checkbox tristate mode. */\n @Input()\n enableTristateMode: boolean;\n\n /**\n * Whether to fix the table header and footer. Default is true.\n * Note that if the table contains freezable columns, the header and\n * footer will be fixed automatically, regardless of this input value.\n * */\n @Input()\n fixed: boolean;\n\n /** Selection column width. */\n @Input()\n selectionColumnWidth: number;\n\n /** The column `name` to freeze columns up to and including. */\n @Input()\n freezeColumnsTo: string;\n\n /** The column `name` to freeze columns after and including. */\n @Input()\n freezeEndColumnsTo: string;\n\n /**\n * Event emitted when keyboard drag performed.\n */\n @Output()\n keyboardDrag = new EventEmitter();\n\n /** @hidden */\n @ViewChildren(FDK_FOCUSABLE_ITEM_DIRECTIVE)\n private set _focusableViewCellItems(items: QueryList) {\n this.setItems(items.toArray());\n }\n\n /** @hidden */\n @ViewChildren(EditableTableCell)\n private readonly _editableCells: QueryList;\n\n /** @hidden */\n @HostBinding('attr.aria-selected')\n protected get _ariaSelected(): boolean {\n return !!this.row.checked;\n }\n\n /** @hidden */\n _hasRowHeaderColumn$ = computed(() => this._fdpTableService.visibleColumns$().some((c) => c.role === 'rowheader'));\n\n /** @hidden */\n _rowSelectionHelperTextId = `rowSelectionHelper-${uuidv4()}`;\n\n /** @hidden */\n readonly _announceEmptyCell = signal(false);\n\n /** @hidden */\n readonly _isTreeRowFirstCell = isTreeRowFirstCell;\n\n /** @hidden */\n readonly SELECTION_MODE = SelectionMode;\n\n /** @hidden */\n readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n /** @hidden */\n readonly _tableColumnResizeService = inject(TableColumnResizeService);\n\n /** @hidden */\n readonly _fdpTableService = inject(TableService);\n\n /** @hidden */\n readonly _tableRowService = inject(TableRowService);\n\n /** @hidden */\n readonly _isTreeRow = isTreeRow;\n\n /** @hidden */\n protected readonly isRtl = computed(() => this._rtlService?.rtl() ?? false);\n\n /** @hidden */\n protected readonly navigationIcon = computed(() => (this.isRtl() ? 'slim-arrow-left' : 'slim-arrow-right'));\n\n /** @hidden */\n protected readonly _destroyRef = inject(DestroyRef);\n\n /** @hidden */\n private readonly _refreshChildRows$ = new Subject();\n\n /** @hidden */\n private readonly _rtlService = inject(RtlService, {\n optional: true\n });\n\n /** @hidden */\n private readonly _cdr = inject(ChangeDetectorRef);\n\n /** @hidden */\n private readonly _zone = inject(NgZone);\n\n /** @hidden */\n private readonly _elmRef = inject(ElementRef);\n\n /** @hidden */\n private readonly _dndTableDirective = inject(TableDraggableDirective, {\n optional: true\n });\n\n /** @hidden */\n constructor() {\n super();\n this._tableColumnResizeService.resizeInProgress$\n .pipe(\n switchMap(() => this._tableColumnResizeService.markForCheck),\n takeUntilDestroyed(this._destroyRef)\n )\n .subscribe(() => {\n this._cdr.markForCheck();\n });\n\n this._zone.runOutsideAngular(() => {\n fromEvent(this._elmRef.nativeElement, 'keydown')\n .pipe(\n filter(() => !!this._dndTableDirective),\n takeUntilDestroyed(this._destroyRef)\n )\n .subscribe((event) => {\n this._onKeyDown(event);\n });\n });\n }\n\n /** @hidden */\n ngOnInit(): void {\n super.ngOnInit();\n }\n\n /** @hidden */\n ngAfterViewInit(): void {\n super.ngAfterViewInit();\n this._editableCells.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {\n const cells = this._editableCells.toArray();\n if (cells.length > 0) {\n this._tableRowService.updateEditableCells(this.row, cells);\n } else {\n this._tableRowService.removeEditableCells(this.row);\n }\n });\n }\n\n /** @hidden */\n ngOnChanges(changes: SimpleChanges): void {\n if ('row' in changes) {\n this._listenToRowExpansion();\n }\n }\n\n /** @hidden */\n ngOnDestroy(): void {\n super.ngOnDestroy();\n this._refreshChildRows$.next();\n this._refreshChildRows$.complete();\n this._tableRowService.removeEditableCells(this.row);\n }\n\n /** @hidden */\n _toggleGroupRow(): void {\n this._tableRowService.toggleRow({ type: 'toggleRow', row: this.row });\n }\n\n /** @hidden */\n _toggleSingleSelectableRow(event?: Event): void {\n event?.preventDefault();\n this._tableRowService.toggleRow({ type: 'toggleSingleSelectableRow', row: this.row });\n }\n\n /** @hidden */\n _toggleMultiSelectRow(row: TableRow, event?: Event): void {\n event?.preventDefault();\n this._tableRowService.toggleRow({ ...{ row, event }, ...{ type: 'toggleMultiSelectRow' } });\n }\n\n /** @hidden */\n _columnTrackBy(index: number, column: TableColumn): string {\n return column.name;\n }\n\n /** @hidden */\n _itemFocusedEventAnnouncer = (position: FocusableItemPosition): string => {\n let retVal = `Column ${position.colIndex + 1} of ${position.totalCols}, `;\n let column;\n if (this._fdpTableService?.visibleColumns$) {\n let colIndex = position.colIndex;\n if (this.selectionMode === 'single' || this.selectionMode === 'multiple') {\n colIndex--;\n }\n column = this._fdpTableService.visibleColumns$()[colIndex];\n }\n if (column && (column._freezed || column._endFreezed)) {\n retVal = retVal + 'fixed, ';\n }\n retVal = retVal + `row: ${position.rowIndex + 1} of ${position.totalRows}`;\n if (this._isTreeRow(this.row) || this.row.level > 0) {\n retVal = retVal + ', level ' + (this.row.level + 1);\n }\n return retVal;\n };\n\n /** @hidden */\n _handleCellFocused(\n event: FocusableItemPosition,\n index: number,\n row: TableRow,\n column: TableColumn,\n tableTextContainer: HTMLElement\n ): void {\n this._setAnnounceEmptyCell(row, column, tableTextContainer);\n this._tableRowService.cellFocused(event);\n this._tableRowService.cellActivate(index, row);\n }\n\n /** @hidden */\n protected _handleCellSpaceKey(colIdx: number, tableCellElement: HTMLTableCellElement, $event: Event): void {\n if ($event.target === tableCellElement && isTreeRowFirstCell(colIdx, this.row, $event)) {\n $event.preventDefault();\n this._toggleGroupRow();\n }\n }\n\n /** @hidden */\n private _listenToRowExpansion(): void {\n this._refreshChildRows$.next();\n const refresh = merge(this._refreshChildRows$, destroyObservable(this._destroyRef));\n // Load items only once. Further loading will be covered by the lazy loading functionality.\n this.row?.expanded$\n ?.pipe(\n filter((expanded) => expanded && this.row.children.length === 0),\n takeUntil(refresh)\n )\n .subscribe(() => {\n this._tableRowService.loadChildRows(this.row);\n });\n }\n\n /** @hidden */\n private _onKeyDown(event: KeyboardEvent): void {\n const isArrowDown = KeyUtil.isKeyCode(event, DOWN_ARROW);\n const isArrowUp = KeyUtil.isKeyCode(event, UP_ARROW);\n\n if (!event.altKey) {\n return;\n }\n\n if (!isArrowDown && !isArrowUp) {\n return;\n }\n\n this._dndTableDirective?.dragRowFromKeyboard(\n isArrowDown ? 'down' : 'up',\n event,\n this.index,\n event.shiftKey ? 'group' : 'shift'\n );\n }\n\n /** @hidden */\n private _setAnnounceEmptyCell(row: TableRow, column: TableColumn, tableTextContainer: HTMLElement): void {\n if (row.state !== 'readonly') {\n this._announceEmptyCell.set(false);\n return;\n }\n\n // If cell contains elements with explicit accessible names, don't announce as empty\n if (this._hasAccessibleContent(tableTextContainer)) {\n this._announceEmptyCell.set(false);\n return;\n }\n\n let value: string;\n // For non-column templates (data-driven), always check for empty content.\n const isCellEmptyInNonColumnTemplate =\n !column.columnCellTemplate &&\n (!(value = get(row.value, column.key)) || (typeof value === 'string' && value.trim() === ''));\n\n // For column templates (consumer-provided), check text content by default.\n // Otherwise, determined by consumer by disabling default checking.\n const isCellEmptyInColumnTemplate =\n column.columnCellTemplate && column.announceEmptyCell() && tableTextContainer?.innerText?.trim() === '';\n\n this._announceEmptyCell.set(isCellEmptyInColumnTemplate || isCellEmptyInNonColumnTemplate);\n }\n\n /** @hidden Checks if container has elements with explicit accessible names (aria-label, aria-labelledby) */\n private _hasAccessibleContent(container: HTMLElement): boolean {\n return !!container?.querySelector('[aria-label], [aria-labelledby]');\n }\n}\n","@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n \n}\n\n\n \n {{ ((row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate)() }}\n \n\n\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n \n \n \n } @else {\n \n }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n @if (row.value[selectableKey] !== false) {\n \n \n \n \n } @else {\n \n }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n \n \n @if (_isTreeRowFirstCell($index, row)) {\n \n }\n @if (row.state === 'readonly') {\n @if (_announceEmptyCell()) {\n \n {{ ('platformTable.emptyCell' | fdTranslate)() }}\n \n }\n @if (column?.columnCellTemplate) {\n \n } @else {\n {{ row.value | valueByPath: column.key }}\n }\n } @else {\n @if (column?.editableColumnCellTemplate) {\n \n } @else {\n \n }\n }\n \n \n}\n\n@if (_fdpTableService._isShownNavigationColumn$()) {\n \n @if (row.navigatable) {\n \n }\n | \n}\n\n","/* eslint-disable @typescript-eslint/member-ordering */\nimport { SPACE } from '@angular/cdk/keycodes';\nimport {\n AfterViewChecked,\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ContentChild,\n ContentChildren,\n effect,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n inject,\n Injector,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n signal,\n SimpleChanges,\n TrackByFunction,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\n\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport {\n DndListDirective,\n DragAndDropModule,\n FDK_FOCUSABLE_GRID_DIRECTIVE,\n FocusableCellPosition,\n FocusableGridDirective,\n IntersectionSpyDirective,\n KeyUtil,\n Nullable,\n range,\n RangeSelector,\n resizeObservable,\n RtlService,\n TabbableElementService,\n uniq\n} from '@fundamental-ngx/cdk/utils';\nimport { BusyIndicatorComponent } from '@fundamental-ngx/core/busy-indicator';\nimport {\n ContentDensityMode,\n ContentDensityObserver,\n contentDensityObserverProviders\n} from '@fundamental-ngx/core/content-density';\nimport { SkeletonComponent } from '@fundamental-ngx/core/skeleton';\nimport {\n TableComponent as CoreTableComponent,\n TableService as CoreTableService,\n TableComponent as FdTableComponent,\n TableBodyDirective,\n TableCellDirective,\n TableFooterDirective,\n TableHeaderDirective,\n TableRowDirective\n} from '@fundamental-ngx/core/table';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { SearchInput } from '@fundamental-ngx/platform/search-field';\nimport { FDP_PRESET_MANAGED_COMPONENT, isJsObject } from '@fundamental-ngx/platform/shared';\nimport {\n applySelectionToChildren,\n buildNewRowSkeleton,\n CollectionFilter,\n CollectionGroup,\n CollectionSort,\n convertObjectsToTableRows,\n convertTreeObjectsToTableRows,\n convertTreeTableRowToFlatList,\n DEFAULT_HIGHLIGHTING_KEY,\n EDITABLE_ROW_SEMANTIC_STATE,\n EditableTableCell,\n FDP_TABLE_DRAGGABLE_DIRECTIVE,\n FDP_TABLE_STATE_DIRECTIVE,\n FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE,\n findRowChildren,\n getFreezableColumns,\n getFreezableEndColumns,\n getRowParents,\n getSelectableRows,\n isRowNavigatable,\n isTableRow,\n isTreeRowFirstCell,\n PlatformTableManagedPreset,\n ROW_HEIGHT,\n RowClassesPipe,\n RowComparator,\n SaveRowsEvent,\n SELECTION_COLUMN_WIDTH,\n SelectionMode,\n SelectionModeValue,\n SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH,\n Table,\n TABLE_COLUMN_MIN_WIDTH,\n TableCellActivateEvent,\n TableColumn,\n TableColumnFreezeEvent,\n TableColumnResizeService,\n TableColumnsChangeEvent,\n TableDataSource,\n TableDataSourceDirective,\n TableDraggable,\n TableFilterChangeEvent,\n TableGroupChangeEvent,\n TableHeaderResizerDirective,\n TableInitialState,\n TablePageChangeEvent,\n TableResponsiveService,\n TableRow,\n TableRowActivateEvent,\n TableRowClass,\n TableRowSelectionChangeEvent,\n TableRowService,\n TableRowToggleOpenStateEvent,\n TableRowType,\n TableScrollable,\n TableScrollableDirective,\n TableScrollDispatcherService,\n TableService,\n TableSortChangeEvent,\n TableState,\n TableVirtualScroll\n} from '@fundamental-ngx/platform/table-helpers';\nimport { shallowEqual } from 'fast-equals';\nimport { fromEvent, Observable, of, Subject, Subscription } from 'rxjs';\nimport {\n debounceTime,\n distinctUntilChanged,\n filter,\n map,\n startWith,\n switchMap,\n take,\n takeUntil,\n tap\n} from 'rxjs/operators';\nimport {\n NoDataWrapperComponent,\n PlatformTableColumnResizerComponent,\n TABLE_TOOLBAR,\n TableAppliedFilter,\n TableToolbarInterface,\n ToolbarContext\n} from './components';\nimport { TableGrowingButtonComponent } from './components/growing-button/table-growing-button.component';\nimport { TableFooterRowComponent } from './components/table-footer-row/table-footer-row.component';\nimport { TableGroupRowComponent } from './components/table-group-row/table-group-row.component';\nimport { TableHeaderRowComponent } from './components/table-header-row/table-header-row.component';\nimport { TablePoppingRowComponent } from './components/table-popping-row/table-popping-row.component';\nimport { TableRowComponent } from './components/table-row/table-row.component';\n\nlet tableUniqueId = 0;\n\n/**\n * The component that represents a table.\n * A table is a set of tabular data. Line items can support data, images and actions.\n * ```html\n * \n *\n * \n * \n *\n * \n * \n *\n * \n * \n * \n * ```\n */\n@Component({\n selector: 'fdp-table',\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n { provide: Table, useExisting: forwardRef(() => TableComponent) },\n TableRowService,\n TableService,\n CoreTableService,\n TableScrollDispatcherService,\n TableColumnResizeService,\n TableResponsiveService,\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY, ContentDensityMode.CONDENSED]\n }),\n {\n provide: FDP_PRESET_MANAGED_COMPONENT,\n useExisting: TableComponent\n }\n ],\n hostDirectives: [\n {\n directive: TableDataSourceDirective,\n inputs: ['dataSource', 'childDataSource'],\n\n outputs: [\n 'childDataSourceChanged',\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n 'onDataRequested',\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n 'onDataReceived',\n 'dataSourceChanged',\n 'dataChanged',\n 'isLoading'\n ]\n },\n TableHeaderResizerDirective\n ],\n host: {\n class: 'fdp-table',\n '[class.fdp-table--outer-scroll]': 'outerScroll',\n '[class.fd-table--no-horizontal-borders]': 'noHorizontalBorders || noBorders',\n '[class.fd-table--no-vertical-borders]': 'noVerticalBorders',\n '[class.fd-table--group]': '_isGroupTable$()'\n },\n imports: [\n NgTemplateOutlet,\n BusyIndicatorComponent,\n PlatformTableColumnResizerComponent,\n TableScrollableDirective,\n FocusableGridDirective,\n CoreTableComponent,\n TableHeaderDirective,\n TableHeaderRowComponent,\n TableBodyDirective,\n DragAndDropModule,\n TableGroupRowComponent,\n TableRowComponent,\n TablePoppingRowComponent,\n TableRowDirective,\n TableCellDirective,\n SkeletonComponent,\n IntersectionSpyDirective,\n AsyncPipe,\n FdTranslatePipe,\n RowClassesPipe,\n TableGrowingButtonComponent,\n TableFooterDirective,\n TableFooterRowComponent\n ]\n})\nexport class TableComponent\n extends Table\n implements AfterViewInit, OnDestroy, OnChanges, OnInit, AfterViewChecked\n{\n /** Component name used in a Preset-managed component. */\n @Input()\n name = 'platformTable';\n\n /** ID for the Table. */\n @Input()\n @HostBinding('attr.id')\n id = `fdp-table-${tableUniqueId++}`;\n\n /** Whether to allow resizing columns by dragging the column edge with mouse. */\n @Input()\n enableDragResize = true;\n\n /**\n * Whether to fix the table header and footer. Default is true.\n * Note that if the table contains freezable columns, the header and\n * footer will be fixed automatically, regardless of this input value.\n * */\n @Input()\n fixed = true;\n\n /** The column `name` to freeze columns up to and including. */\n @Input()\n freezeColumnsTo: string;\n\n /** The column `name` to freeze columns after and including. */\n @Input()\n freezeEndColumnsTo: string;\n /** Toggle for page scrolling feature. */\n @Input()\n pageScrolling = false;\n /** Whether the table should render growing button at the bottom. */\n @Input()\n showGrowingButton = false;\n /**\n * Whether to show total items amount in growing button text content.\n */\n @Input()\n showItemsCount = false;\n /** Number of items per page. */\n @Input()\n pageSize: Nullable;\n /** Page scrolling threshold in px. */\n @Input()\n pageScrollingThreshold = 80;\n /** Table body height. */\n @Input()\n bodyHeight: string;\n /** Text displayed when table has no items. */\n @Input()\n emptyTableMessage: string;\n /** Text displayed when table has no visible columns. */\n @Input()\n noVisibleColumnsMessage: string;\n /** Table without horizontal borders. */\n @Input()\n noHorizontalBorders = false;\n /** If the table scrolling should happen outside and stick the toolbar and thead */\n @Input({ transform: booleanAttribute })\n outerScroll = false;\n /** Table without vertical borders. */\n @Input()\n set noVerticalBorders(value: boolean) {\n this._noVerticalBorders = value;\n }\n\n get noVerticalBorders(): boolean {\n return this._noVerticalBorders || this.noBorders || this._tableService.poppingColumns$().length > 0;\n }\n\n /** @hidden */\n private _noVerticalBorders = false;\n\n /** Table without borders. */\n @Input()\n noBorders = false;\n /** Table body without any borders, but header with borders. */\n @Input()\n noBodyBorders = false;\n /** Table without outer borders */\n @HostBinding('class.fdp-table--no-outer-border')\n @Input()\n noOuterBorders = false;\n /** Table body without horizontal borders. */\n @Input()\n noBorderX = false;\n /** Table body without vertical borders. */\n @Input()\n noBorderY = false;\n /** Accessor to a children nodes of tree. */\n @Input()\n relationKey: string;\n /** Table row expanded state key. Used to set the initial state of tree row. */\n @Input()\n expandedStateKey: string;\n /** Property key indicating that the row has children accessible via [childDataSource]. */\n @Input()\n hasChildrenKey: string;\n /**\n * Whether row is navigatable.\n * Pass boolean value to set state for the all rows.\n * Pass string value with the key of the row item's field to compute state for every single row.\n */\n @Input()\n rowNavigatable: string | boolean = false;\n /**\n * Whether to highlight navigated row.\n */\n @Input()\n highlightNavigatedRow = false;\n /** Whether table row can be clicked */\n @Input()\n rowsActivable = false;\n /** Value with the key of the row item's field to enable selecting. */\n @Input()\n selectedKey: string;\n /** Value with the key of the row item's field to enable selecting. */\n @Input()\n selectableKey: string;\n /**\n * Tracking function that will be used to check the differences in data changes.\n * Used similarly to `ngFor` `trackBy` function.\n * Accepts a function that takes two parameters, index and item.\n */\n @Input()\n trackBy: TrackByFunction;\n /**\n * An optional function that identifies uniqueness of a particular row.\n * Table component uses it to be able to preserve selection when a data list is changed.\n */\n @Input()\n rowComparator: RowComparator;\n /** String or function to calculate additional rows' CSS classes. */\n @Input()\n rowsClass: TableRowClass;\n /** Used to construct empty row object for editing. */\n @Input()\n editableRowSkeleton: T;\n /** Whether all rows should be collapsed by default after the table is loaded. */\n @Input()\n expandOnInit = false;\n /**\n * Minimum height of the row, required for the virtualScroll,\n * default is 44px in cozy, 32px in compact and 24px in condensed (set automatically)\n */\n @Input()\n rowHeight = ROW_HEIGHT.get(ContentDensityMode.COZY)!;\n /**\n * Minimum height of the popping column when displayed in pop-in mode. Required when using popping columns and virtual scroll.\n */\n @Input()\n secondaryRowHeight: number | undefined;\n /** Event emitted when the current preset configuration has been changed. */\n /**\n * Whether to load previous pages.\n * This option works only when `pageScrolling` is true, and the initial page > 1\n */\n @Input()\n loadPagesBefore = false;\n\n /**\n * Whether or not the header cells should be interactive\n * (have hover and active states)\n * default: false\n */\n @Input()\n nonInteractiveHeader = false;\n\n /** @hidden */\n _selectionMode: SelectionModeValue = SelectionMode.NONE;\n\n /** @hidden */\n @ViewChild(TableHeaderRowComponent)\n _header: TableHeaderRowComponent;\n\n /** Sets selection mode for the table. 'single' | 'multiple' | 'none' */\n @Input()\n set selectionMode(value: SelectionModeValue) {\n this._selectionMode = value;\n this._isSelectionColumnShown = this.selectionMode !== SelectionMode.NONE;\n this._setSelectionColumnWidth();\n }\n\n get selectionMode(): SelectionModeValue {\n return this._selectionMode;\n }\n\n /** @hidden */\n private _enableTristateMode = false;\n\n /**\n * When True, the checked state of each tree item depends on the checked\n * state of its parent or direct child.\n */\n @Input()\n set enableTristateMode(value: boolean) {\n this._enableTristateMode = value;\n }\n\n get enableTristateMode(): boolean {\n return this.isTreeTable && this._enableTristateMode;\n }\n\n /** Value with the key of the row item's field to compute semantic state of the row. */\n @Input()\n set semanticHighlighting(value: string) {\n this._semanticHighlightingKey = value;\n this._setSemanticHighlighting();\n }\n\n get semanticHighlighting(): string {\n if (!this._semanticHighlightingKey && this._forceSemanticHighlighting) {\n return DEFAULT_HIGHLIGHTING_KEY;\n }\n\n return this._semanticHighlightingKey;\n }\n\n /**\n * Whether to force rows to follow 'checked all' state of the table.\n * If true, all new rows that are coming from the dataSource will follow 'checked all' state.\n * If false, row will respect `checkedKey` property to define checked state of itself.\n * Default is false.\n */\n @Input()\n forceCheckedAllState = false;\n\n /**\n * aria-labelledby attribute value for the table.\n */\n @Input()\n ariaLabelledBy: string;\n\n /** The minimum width at which the user can resize a column, in pixels. Default is 50. */\n @Input()\n minimumColumnWidth = TABLE_COLUMN_MIN_WIDTH;\n\n /** Whether to display the table footer. */\n @Input({ transform: booleanAttribute })\n showTableFooter = false;\n\n /**\n * Specifies minimal width of the non-frozen columns.\n * Useful when table has large amount of freezable columns and table still should have some free space available.\n */\n @Input()\n set nonFrozenColumnsMinWidth(value: number) {\n this._listenToFixedColumnsWidth();\n this._nonFrozenColumnsMinWidth = value;\n }\n\n get nonFrozenColumnsMinWidth(): number {\n return this._nonFrozenColumnsMinWidth;\n }\n\n /** @hidden */\n private _nonFrozenColumnsMinWidth = 0;\n\n /** @hidden */\n private _shouldCheckNewRows = false;\n\n /** @hidden */\n private _calculateFrozenColumnRefresh$ = new Subject();\n\n /** @hidden */\n private _defaultBodyHeight = '100%';\n\n /** Event emitted when current preset configuration has been changed. */\n @Output()\n presetChanged = new EventEmitter();\n /** Event fired when table selection has changed. */\n @Output()\n readonly rowSelectionChange: EventEmitter> = new EventEmitter<\n TableRowSelectionChangeEvent\n >();\n /** Event fired when table sort order has changed. */\n @Output()\n readonly sortChange: EventEmitter = new EventEmitter();\n /** Event fired when the table filter has changed. */\n @Output()\n readonly filterChange: EventEmitter = new EventEmitter();\n /** Event fired when table grouping has changed. */\n @Output()\n readonly groupChange: EventEmitter = new EventEmitter();\n /** Event fired when visible columns list has been changed. */\n @Output()\n readonly columnsChange: EventEmitter = new EventEmitter();\n /** Event emitted when pagination state has been changed. */\n @Output()\n readonly pageChange = new EventEmitter();\n /** Event fired when there is a change in the frozen column. */\n @Output()\n readonly columnFreeze: EventEmitter = new EventEmitter();\n /** Event fired when group/tree row collapsed/expanded. */\n @Output()\n readonly rowToggleOpenState = new EventEmitter>();\n /** Event fired when a cell is clicked or focused. */\n @Output()\n readonly cellActivate = new EventEmitter>();\n /** Event fired when row navigated. */\n @Output()\n readonly rowActivate = new EventEmitter>();\n /** Event fired when row navigated. */\n @Output()\n readonly rowNavigate = new EventEmitter>();\n /** Event fired when empty row added. */\n @Output()\n readonly emptyRowAdded = new EventEmitter();\n /** Event fired when save button pressed. */\n @Output()\n readonly save = new EventEmitter>();\n /** Event fired when cancel button pressed. */\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n readonly cancel = new EventEmitter();\n /** Event emitted when table body being scrolled. */\n @Output()\n readonly tableScrolled = new EventEmitter();\n /** Event emitted when new rows has been set and rendered. */\n @Output()\n readonly tableRowsSet = new EventEmitter();\n /** Event emitted when all rows being expanded. */\n @Output()\n allRowsExpanded = new EventEmitter();\n /** Event emitted when all rows being collapsed. */\n @Output()\n allRowsCollapsed = new EventEmitter();\n /** Event emitted when a cell is focused. */\n @Output()\n readonly cellFocused = new EventEmitter();\n /** @hidden */\n @ViewChild('tableScrollable')\n readonly tableScrollable: TableScrollable;\n /** @hidden */\n @ViewChild('tableContainer')\n readonly tableContainer: ElementRef;\n /** @hidden */\n @ViewChild(FdTableComponent, { read: ElementRef })\n readonly table: ElementRef;\n /** @hidden */\n @ViewChild(FDK_FOCUSABLE_GRID_DIRECTIVE)\n readonly _focusableGrid: FocusableGridDirective;\n /** @hidden */\n @ViewChild('tableBody', { read: ElementRef })\n private readonly _tableBody: ElementRef;\n /** @hidden */\n @ViewChild(DndListDirective)\n private readonly _dndDirective: Nullable>;\n /** @hidden */\n @ViewChild('tableScrollMockContainer')\n readonly tableScrollMockContainer: ElementRef;\n /** @hidden */\n @ViewChild('tableBody', { read: ElementRef })\n readonly tableBody: ElementRef;\n /** @hidden */\n @ContentChildren(TableColumn)\n readonly columns: QueryList;\n /** @hidden */\n @ContentChildren(EditableTableCell, { descendants: true })\n readonly customEditableCells: QueryList;\n /** @hidden */\n @ContentChild(TABLE_TOOLBAR)\n readonly tableToolbar: TableToolbarInterface;\n /** @hidden */\n @ContentChild(NoDataWrapperComponent)\n readonly _noDataWrapper: Nullable;\n\n /** Total loaded items. */\n loadedRows$ = signal(0);\n\n /** @hidden */\n hoveredRowIndex$ = signal>(null);\n\n /** @hidden */\n get initialSortBy(): CollectionSort[] {\n return this.initialState?.initialSortBy ?? [];\n }\n\n /**\n * @hidden\n * verify if the bodyheight provided is valid in percentage or pixels\n */\n get isBodyHeightValid(): boolean {\n const height = this.bodyHeight;\n\n if (height) {\n return (\n (height.endsWith('px') && this._isValidInteger(height.split('px')[0])) ||\n (height.endsWith('%') && this._isValidInteger(height.split('%')[0]))\n );\n } else {\n return false;\n }\n }\n\n /**\n * @hidden\n * if the bodyHeight is valid, then set that as value as body height for table\n * else set default body height for table as 100%\n */\n get tableBodyHeight(): string {\n return this.isBodyHeightValid ? this.bodyHeight : this._defaultBodyHeight;\n }\n\n /**\n * @hidden\n * Columns to be rendered in the template\n */\n get _visibleColumns(): TableColumn[] {\n return this._tableService.visibleColumns$();\n }\n\n /** @hidden */\n get isTreeTable(): boolean {\n return !!this._dndTableDirective?.isTreeTable;\n }\n\n /** @hidden */\n get enableRowReordering(): boolean {\n return !!this._dndTableDirective?.enableRowReordering;\n }\n\n /** Whether the table rows are draggable. */\n get isDraggable(): boolean {\n return !!this._dndTableDirective?.isTreeTable && !!this._dndTableDirective?.enableRowReordering;\n }\n\n /** @hidden */\n get _semanticHighlightingColumnWidth(): number {\n return this.semanticHighlighting ? SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH : 0;\n }\n\n /** @hidden Sum of widths of fixed columns (semantic highlighting, selection) */\n get _fixedColumnsPadding(): number {\n return this._semanticHighlightingColumnWidth + this._selectionColumnWidth;\n }\n\n /** @hidden */\n get _tableWidthPx(): number {\n return this.tableContainer.nativeElement.getBoundingClientRect().width;\n }\n\n /** @hidden */\n get loadingState(): boolean {\n return (\n this.loading ??\n (this._dataSourceDirective._internalLoadingState ||\n this._dataSourceDirective._internalChildrenLoadingState ||\n this._dndLoadingState)\n );\n }\n\n /**\n * Whether the selection column should be shown,\n * If there are no visible rows or visible columns\n * or selection mode is none, then selection column should not be shown.\n **/\n get isSelectionColumnShown(): boolean {\n return (\n this._isSelectionColumnShown &&\n !!this._tableRowsVisible.length &&\n this._tableService.visibleColumnsLength() > 0\n );\n }\n\n /** @hidden */\n get _ariaLabelledBy(): string | null {\n if (this.ariaLabelledBy) {\n return this.ariaLabelledBy;\n }\n return this.tableToolbar?.tableToolbarTitleId || null;\n }\n\n /**\n * @hidden\n * Representation of combined table rows.\n * Contains all rows including group rows.\n */\n _tableRows: TableRow[] = [];\n /**\n * @hidden\n * Representation of table rows that came from dataSource.\n * Contains all rows including group rows.\n */\n _dataSourceTableRows: TableRow[] = [];\n /**\n * @hidden\n * Representation of added table rows.\n */\n _newTableRows: TableRow[] = [];\n /**\n * @hidden\n * Visible table rows.\n * Rows list that is used to be rendered in the ui.\n * Based on _tableRows and excludes hidden rows.\n */\n _tableRowsVisible: TableRow[] = [];\n /**\n * @hidden\n * Table Column Map. Where key is column key and value is column\n */\n _keyToColumnMap: Map = new Map();\n /**\n * @hidden\n * Freezable column names and their respective indexes\n */\n _freezableColumns: Map = new Map();\n /**\n * @hidden\n * Freezable column names and their respective indexes for columns that will be frozen to the end of the table\n */\n _freezableEndColumns: Map = new Map();\n /** @hidden */\n _tableColumnsLength = 0;\n /** @hidden */\n readonly loadingRowRange = range(3);\n /** @hidden */\n get loadingColumnsRange(): number[] {\n return range(this._tableColumnsLength);\n }\n /** @hidden */\n _checkedState: boolean | null = false;\n /** @hidden */\n _isGroupTable$ = computed(() => {\n const groupRules = this._tableService.groupRules$();\n\n return groupRules ? groupRules.size > 0 : (this.initialState?.initialGroupBy?.length ?? 0) > 0;\n });\n /**\n * @hidden\n * Used to create a row component placeholder and set data in it rather than re-create the row component when data changes.\n * Optimizes performance due to skipping initial setup of the component.\n */\n _tableCurrentlyRenderedRowsPlaceholder: number[] = [];\n /** @hidden */\n _dndTableRowsPlaceholder: TableRow[] = [];\n /** @hidden */\n _isSelectionColumnShown = false;\n /** @hidden */\n readonly _toolbarContext: ToolbarContext;\n /** @hidden */\n _navigatedRowIndex: number;\n /** @hidden */\n _selectionColumnWidth = 0;\n /** @hidden */\n readonly tableColumnsStream: Observable