@fundamental-ngx/platform 0.64.2-rc.2 → 0.64.2-rc.20

package/fesm2022/fundamental-ngx-platform-table.mjs

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/cdk/a11y';
 import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, input, ContentChild, Optional, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, ChangeDetectorRef, afterEveryRender, output, linkedSignal, ContentChildren, HostBinding, NgZone, ElementRef, effect, booleanAttribute, NgModule } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, input, ContentChild, Optional, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, ChangeDetectorRef, afterEveryRender, output, linkedSignal, untracked, viewChildren, effect, ContentChildren, HostBinding, NgZone, ElementRef, booleanAttribute, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgStyle, AsyncPipe, NgClass } from '@angular/common';
 import * as i3 from '@fundamental-ngx/cdk/utils';
 import { TemplateDirective, RtlService, InitialFocusDirective, DisabledBehaviorDirective, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, ValueByPathPipe, set, uuidv4, destroyObservable, KeyUtil, get, range, RangeSelector, resizeObservable, uniq, DragAndDropModule, IntersectionSpyDirective, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, FocusableGridDirective } from '@fundamental-ngx/cdk/utils';
@@ -20,8 +20,8 @@ import { fromEvent, BehaviorSubject, Subscription, combineLatest, distinctUntilC
 import { startWith, take, debounceTime, skip, filter, switchMap, takeUntil, map, distinctUntilChanged as distinctUntilChanged$1, tap } from 'rxjs/operators';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
 import { takeUntilDestroyed, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
-import { FormItemComponent, FormLabelComponent, FormControlComponent } from '@fundamental-ngx/core/form';
-import { ListLinkDirective, ListIconDirective, ListTitleDirective, ListComponent as ListComponent$1, ListItemComponent, ListGroupHeaderDirective } from '@fundamental-ngx/core/list';
+import { FormItemComponent, FormLabelComponent, FormControlComponent, FormGroupComponent } from '@fundamental-ngx/core/form';
+import { ListLinkDirective, ListIconDirective, ListTitleDirective, ListComponent as ListComponent$1, ListItemComponent, ListGroupHeaderDirective, ListSecondaryDirective } from '@fundamental-ngx/core/list';
 import { PopoverComponent, PopoverTriggerDirective } from '@fundamental-ngx/core/popover';
 import { PopoverPlacement } from '@fundamental-ngx/core/shared';
 import { ListComponent, FreeContentListItemComponent } from '@fundamental-ngx/platform/list';
@@ -42,6 +42,8 @@ import { LayoutGridRowDirective, LayoutGridColDirective, LayoutGridComponent } f
 import { SelectComponent, OptionComponent } from '@fundamental-ngx/core/select';
 import { PanelComponent, PanelTitleDirective, PanelContentDirective } from '@fundamental-ngx/core/panel';
 import { RadioButtonComponent } from '@fundamental-ngx/core/radio';
+import { ComboboxComponent } from '@fundamental-ngx/core/combobox';
+import { SegmentedButtonComponent } from '@fundamental-ngx/core/segmented-button';
 import { IconTabBarComponent, IconTabBarTabComponent } from '@fundamental-ngx/platform/icon-tab-bar';
 import { InputComponent, PlatformDatePickerComponent, SwitchComponent } from '@fundamental-ngx/platform/form';
 
@@ -2309,11 +2311,11 @@ class FilterMultiSelectComponent {
         this._value = this._selectableOptions.filter(({ selected }) => selected).map(({ value }) => value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterMultiSelectComponent, isStandalone: true, selector: "fdp-filter-multi-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li fd-list-item [selected]=\"option.selected\">\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterMultiSelectComponent, isStandalone: true, selector: "fdp-filter-multi-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.selected\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-filter-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ListComponent$1, ListItemComponent, CheckboxComponent, FormsModule, ListTitleDirective], template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li fd-list-item [selected]=\"option.selected\">\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n" }]
+            args: [{ selector: 'fdp-filter-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ListComponent$1, ListItemComponent, CheckboxComponent, FormsModule, ListTitleDirective, FdTranslatePipe], template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.selected\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], filterBy: [{
@@ -2354,11 +2356,11 @@ class FilterSingleSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterSingleSelectComponent, isStandalone: true, selector: "fdp-filter-single-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li fd-list-item [selected]=\"option.value === _value\">\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterSingleSelectComponent, isStandalone: true, selector: "fdp-filter-single-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.value === _value\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterSingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-filter-single-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ListComponent$1, ListItemComponent, RadioButtonComponent, FormsModule, ListTitleDirective, FdTranslatePipe], template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li fd-list-item [selected]=\"option.value === _value\">\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n" }]
+            args: [{ selector: 'fdp-filter-single-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ListComponent$1, ListItemComponent, RadioButtonComponent, FormsModule, ListTitleDirective, FdTranslatePipe], template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.value === _value\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], filterBy: [{
@@ -2447,7 +2449,7 @@ class FiltersListStepComponent {
         this.selectFilter = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FiltersListStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FiltersListStepComponent, isStandalone: true, selector: "fdp-filters-list-step", inputs: { filters: "filters", headingLevel: "headingLevel" }, outputs: { selectFilter: "selectFilter" }, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FiltersListStepComponent) }], viewQueries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "bodyTemplateRef", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #titleTemplate>\n    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n        ('platformTable.filterDialogFilterTitle' | fdTranslate)()\n    }}</span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <div fd-list-group-header>\n        <span fd-list-title id=\"platformTableInternalFilterListGroupHeader\">\n            {{ ('platformTable.filterDialogFilterBy' | fdTranslate)() }}\n        </span>\n    </div>\n    <ul fd-list aria-labelledby=\"platformTableInternalFilterListGroupHeader\" [navigationIndicator]=\"true\">\n        @for (filter of filters; track filter) {\n            <li\n                fd-list-item\n                [interactive]=\"true\"\n                (click)=\"selectFilter.emit(filter)\"\n                (keydown.space)=\"selectFilter.emit(filter)\"\n                (keydown.enter)=\"selectFilter.emit(filter)\"\n            >\n                <a fd-list-link [navigationIndicator]=\"true\">\n                    <span fd-list-title>{{ filter.label }}</span>\n                </a>\n            </li>\n        }\n    </ul>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FiltersListStepComponent, isStandalone: true, selector: "fdp-filters-list-step", inputs: { filters: "filters", headingLevel: "headingLevel" }, outputs: { selectFilter: "selectFilter" }, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FiltersListStepComponent) }], viewQueries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "bodyTemplateRef", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #titleTemplate>\n    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n        ('platformTable.filterDialogFilterTitle' | fdTranslate)()\n    }}</span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <div fd-list-group-header>\n        <span fd-list-title id=\"platformTableInternalFilterListGroupHeader\">\n            {{ ('platformTable.filterDialogFilterBy' | fdTranslate)() }}\n        </span>\n    </div>\n    <ul fd-list aria-labelledby=\"platformTableInternalFilterListGroupHeader\" [navigationIndicator]=\"true\">\n        @for (filter of filters; track filter) {\n            <li\n                fd-list-item\n                [interactive]=\"true\"\n                (click)=\"selectFilter.emit(filter)\"\n                (keydown.space)=\"selectFilter.emit(filter)\"\n                (keydown.enter)=\"selectFilter.emit(filter)\"\n                aria-expanded=\"false\"\n            >\n                <a fd-list-link [navigationIndicator]=\"true\">\n                    <span fd-list-title>{{ filter.label }}</span>\n                </a>\n            </li>\n        }\n    </ul>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FiltersListStepComponent, decorators: [{
             type: Component,
@@ -2459,7 +2461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ListLinkDirective,
                         ListTitleDirective,
                         FdTranslatePipe
-                    ], template: "<ng-template #titleTemplate>\n    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n        ('platformTable.filterDialogFilterTitle' | fdTranslate)()\n    }}</span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <div fd-list-group-header>\n        <span fd-list-title id=\"platformTableInternalFilterListGroupHeader\">\n            {{ ('platformTable.filterDialogFilterBy' | fdTranslate)() }}\n        </span>\n    </div>\n    <ul fd-list aria-labelledby=\"platformTableInternalFilterListGroupHeader\" [navigationIndicator]=\"true\">\n        @for (filter of filters; track filter) {\n            <li\n                fd-list-item\n                [interactive]=\"true\"\n                (click)=\"selectFilter.emit(filter)\"\n                (keydown.space)=\"selectFilter.emit(filter)\"\n                (keydown.enter)=\"selectFilter.emit(filter)\"\n            >\n                <a fd-list-link [navigationIndicator]=\"true\">\n                    <span fd-list-title>{{ filter.label }}</span>\n                </a>\n            </li>\n        }\n    </ul>\n</ng-template>\n" }]
+                    ], template: "<ng-template #titleTemplate>\n    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n        ('platformTable.filterDialogFilterTitle' | fdTranslate)()\n    }}</span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <div fd-list-group-header>\n        <span fd-list-title id=\"platformTableInternalFilterListGroupHeader\">\n            {{ ('platformTable.filterDialogFilterBy' | fdTranslate)() }}\n        </span>\n    </div>\n    <ul fd-list aria-labelledby=\"platformTableInternalFilterListGroupHeader\" [navigationIndicator]=\"true\">\n        @for (filter of filters; track filter) {\n            <li\n                fd-list-item\n                [interactive]=\"true\"\n                (click)=\"selectFilter.emit(filter)\"\n                (keydown.space)=\"selectFilter.emit(filter)\"\n                (keydown.enter)=\"selectFilter.emit(filter)\"\n                aria-expanded=\"false\"\n            >\n                <a fd-list-link [navigationIndicator]=\"true\">\n                    <span fd-list-title>{{ filter.label }}</span>\n                </a>\n            </li>\n        }\n    </ul>\n</ng-template>\n" }]
         }], propDecorators: { filters: [{
                 type: Input
             }], headingLevel: [{
@@ -2706,6 +2708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 let sortOrderHeaderUniqueId = 0;
 let sortDialogSortByHeaderUniqueId = 0;
 class SortingComponent {
+    /** @hidden */
     constructor() {
         /** Input data for sorting */
         this.sortingData = input(/* @ts-ignore */
@@ -2715,12 +2718,42 @@ class SortingComponent {
         ...(ngDevMode ? [undefined, { debugName: "initialSorting" }] : /* istanbul ignore next */ []));
         /** Event emitter for sort changes */
         this.sortChange = output();
-        /** Current selected sorting direction - resets when sortingData changes */
-        this.direction = linkedSignal(() => this.sortingData()?.direction ?? INITIAL_DIRECTION, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
-        /** Current selected sorting field - resets when sortingData changes */
-        this.field = linkedSignal(() => this.sortingData()?.field ?? NOT_SORTED_OPTION_VALUE, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        /** Event emitter for reset availability changes */
+        this.resetAvailabilityChange = outputFromObservable(toObservable(computed(() => {
+            const initial = this.initialSorting();
+            if (!initial) {
+                return false;
+            }
+            // Get current sort criteria (only those with fields selected)
+            const currentCriteria = this.sortCriteriaList().filter((c) => c.field !== null);
+            // Build initial criteria array for comparison
+            const initialCriteria = initial.field !== null ? [{ field: initial.field, direction: initial.direction }] : [];
+            // Reset is available if:
+            // 1. Number of sort criteria changed
+            // 2. Any criteria field/direction differs from initial
+            // 3. Combobox has invalid text
+            if (currentCriteria.length !== initialCriteria.length) {
+                return true;
+            }
+            for (let i = 0; i < currentCriteria.length; i++) {
+                if (currentCriteria[i].field !== initialCriteria[i]?.field ||
+                    currentCriteria[i].direction !== initialCriteria[i]?.direction) {
+                    return true;
+                }
+            }
+            return this._hasInvalidComboboxText();
+        })).pipe(distinctUntilChanged()));
+        /** Event emitter for validity changes */
+        this.validityChange = outputFromObservable(toObservable(computed(() => {
+            const invalidMap = this._invalidInputPerRow();
+            // Valid if no rows have invalid input
+            for (const isInvalid of invalidMap.values()) {
+                if (isInvalid) {
+                    return false;
+                }
+            }
+            return true;
+        })).pipe(distinctUntilChanged()));
         /** @hidden */
         this.sortOrderHeaderId = `fdp-table-sort-order-header-${sortOrderHeaderUniqueId++}`;
         /** @hidden */
@@ -2735,40 +2768,450 @@ class SortingComponent {
         /** Available table columns for sorting */
         this.columns = computed(() => this.sortingData()?.columns ?? [], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-        /** Event emitter for reset availability changes */
-        this.resetAvailabilityChange = outputFromObservable(toObservable(computed(() => {
-            const initial = this.initialSorting();
-            if (!initial) {
-                return false;
+        /** @hidden Computed signal that checks if any row has invalid input */
+        this.isValid = computed(() => {
+            const invalidMap = this._invalidInputPerRow();
+            // Valid if no rows have invalid input
+            for (const isInvalid of invalidMap.values()) {
+                if (isInvalid) {
+                    return false;
+                }
             }
-            return this.direction() !== initial.direction || this.field() !== initial.field;
-        })).pipe(distinctUntilChanged()));
+            return true;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        /** @hidden Computed signal that returns the currently selected column object */
+        this.selectedColumn = computed(() => {
+            const currentField = this.firstSortingField();
+            return this.columns().find((col) => col.key === currentField) ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColumn" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns available columns for each row.
+         * Columns selected in other rows are filtered out.
+         */
+        this.availableColumnsPerRow = computed(() => {
+            const allColumns = this.columns();
+            const criteriaList = this.sortCriteriaList();
+            return criteriaList.map((_, rowIndex) => {
+                // Collect fields selected in OTHER rows
+                const selectedFieldsInOtherRows = new Set(criteriaList.filter((c, index) => index !== rowIndex && c.field !== null).map((c) => c.field));
+                // Return columns not selected in other rows
+                return allColumns.filter((col) => !selectedFieldsInOtherRows.has(col.key));
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "availableColumnsPerRow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns the selected column object for each row.
+         */
+        this.selectedColumnsPerRow = computed(() => {
+            const allColumns = this.columns();
+            const criteriaList = this.sortCriteriaList();
+            return criteriaList.map((criteria) => {
+                if (!criteria.field) {
+                    return null;
+                }
+                return allColumns.find((col) => col.key === criteria.field) ?? null;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColumnsPerRow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns the direction for each row.
+         */
+        this.directionsPerRow = computed(() => this.sortCriteriaList().map((criteria) => criteria.direction ?? INITIAL_DIRECTION), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "directionsPerRow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns the form state ('error' or undefined) for each row.
+         */
+        this.rowStates = computed(() => {
+            const invalidMap = this._invalidInputPerRow();
+            return this.sortCriteriaList().map((_, index) => (invalidMap.get(index) ? 'error' : undefined));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowStates" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns visibility for each row.
+         * First row is always visible, subsequent rows visible only if previous has selection.
+         */
+        this.rowVisibility = computed(() => {
+            const criteriaList = this.sortCriteriaList();
+            return criteriaList.map((_, index) => {
+                if (index === 0) {
+                    return true;
+                }
+                return criteriaList[index - 1]?.field !== null;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowVisibility" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns whether each row can be moved up.
+         */
+        this.canMoveUpPerRow = computed(() => {
+            const criteriaList = this.sortCriteriaList();
+            return criteriaList.map((criteria, index) => {
+                if (index === 0) {
+                    return false;
+                }
+                return criteria.field !== null;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canMoveUpPerRow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns whether each row can be moved down.
+         */
+        this.canMoveDownPerRow = computed(() => {
+            const criteriaList = this.sortCriteriaList();
+            return criteriaList.map((criteria, index) => {
+                const nextRow = criteriaList[index + 1];
+                // Can't move down if current row has no selection
+                if (criteria.field === null) {
+                    return false;
+                }
+                // Can't move down if next row doesn't exist or has no selection
+                return nextRow !== undefined && nextRow.field !== null;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canMoveDownPerRow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that returns whether each row can be deleted.
+         */
+        this.canDeletePerRow = computed(() => this.sortCriteriaList().map((criteria) => criteria.field !== null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canDeletePerRow" }] : /* istanbul ignore next */ []));
+        /** Current selected sorting direction - derived from first sortBy entry */
+        this.direction = linkedSignal(() => this.sortingData()?.sortBy?.[0]?.direction ?? INITIAL_DIRECTION, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        /** Current selected sorting field - derived from first sortBy entry */
+        this.firstSortingField = linkedSignal(() => this.sortingData()?.sortBy?.[0]?.field ?? NOT_SORTED_OPTION_VALUE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstSortingField" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Array of sort criteria rows. Each row has a field and direction.
+         * linkedSignal resets when sortBy reference changes (e.g., on reset),
+         * but allows local modifications via .set()/.update().
+         */
+        this.sortCriteriaList = linkedSignal(() => {
+            // Only track sortBy reference changes, not all sortingData changes
+            const sortBy = this._sortByRef() ?? [];
+            // Use untracked for columns since we don't want column changes to reset the list
+            const columns = untracked(() => this.sortingData()?.columns ?? []);
+            return columns.map((_, index) => {
+                const existingCriteria = sortBy[index];
+                if (existingCriteria) {
+                    return {
+                        field: existingCriteria.field,
+                        direction: existingCriteria.direction
+                    };
+                }
+                return { field: null, direction: INITIAL_DIRECTION };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortCriteriaList" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Extracts the sortBy array reference from sortingData.
+         * Used as the source for linkedSignal to track only sortBy reference changes.
+         */
+        this._sortByRef = computed(() => this.sortingData()?.sortBy, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_sortByRef" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Tracks invalid input text per row (non-empty text that doesn't match any column).
+         * Resets to empty Map when sortBy reference changes.
+         */
+        this._invalidInputPerRow = linkedSignal(() => {
+            // Only track sortBy reference changes
+            this._sortByRef();
+            return new Map();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_invalidInputPerRow" }] : /* istanbul ignore next */ []));
+        /**
+         * @hidden
+         * Computed signal that checks if any row has invalid combobox text.
+         * Used by resetAvailabilityChange to determine if reset should be available.
+         */
+        this._hasInvalidComboboxText = computed(() => {
+            const invalidMap = this._invalidInputPerRow();
+            for (const isInvalid of invalidMap.values()) {
+                if (isInvalid) {
+                    return true;
+                }
+            }
+            return false;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_hasInvalidComboboxText" }] : /* istanbul ignore next */ []));
+        /** @hidden Reference to the comboboxes for programmatic reset */
+        this._comboboxes = viewChildren('sortCombobox', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_comboboxes" }] : /* istanbul ignore next */ []));
+        // DOM side effect: sync combobox display text when sortBy reference changes.
+        // This is needed because when user types invalid text and reset happens,
+        // the model value might not change but the display text needs to update.
+        effect(() => {
+            const sortBy = this._sortByRef();
+            // Only sync when reference changes (not on every sortingData update)
+            if (sortBy !== this._previousSortByRef) {
+                this._previousSortByRef = sortBy;
+                // Use untracked to avoid creating additional dependencies
+                untracked(() => this._syncComboboxDisplayText());
+            }
+        });
     }
     /**
-     * Handle sort direction changes.
-     * @param direction New sorting direction.
+     * Get available columns for a specific sort criteria row.
+     * Excludes columns that are already selected in other rows.
+     * @param rowIndex Index of the current row.
+     * @returns Array of columns available for selection.
      */
-    _sortDirectionChange(direction) {
-        this.direction.set(direction);
+    getAvailableColumns(rowIndex) {
+        return this.availableColumnsPerRow()[rowIndex] ?? [];
+    }
+    /**
+     * Get the selected column object for a specific row.
+     * @param rowIndex Index of the row.
+     * @returns The selected column object or null.
+     */
+    getSelectedColumnForRow(rowIndex) {
+        return this.selectedColumnsPerRow()[rowIndex] ?? null;
+    }
+    /**
+     * Get the direction for a specific row.
+     * @param rowIndex Index of the row.
+     * @returns The sort direction.
+     */
+    getDirectionForRow(rowIndex) {
+        return this.directionsPerRow()[rowIndex] ?? INITIAL_DIRECTION;
+    }
+    /**
+     * Get the form state for a specific row's combobox.
+     * Returns 'error' if the row has invalid input, undefined otherwise.
+     * @param rowIndex Index of the row.
+     * @returns The form state or undefined.
+     */
+    getRowState(rowIndex) {
+        return this.rowStates()[rowIndex];
+    }
+    /**
+     * Determine if a row should be visible.
+     * The first row is always visible. Subsequent rows are only visible
+     * if the previous row has a column selected.
+     * @param rowIndex Index of the row.
+     * @returns True if the row should be visible.
+     */
+    isRowVisible(rowIndex) {
+        return this.rowVisibility()[rowIndex] ?? false;
+    }
+    /**
+     * Check if a row can be moved up.
+     * A row can move up if it's not the first row and has a field selected.
+     * @param rowIndex Index of the row.
+     * @returns True if the row can be moved up.
+     */
+    canMoveUp(rowIndex) {
+        return this.canMoveUpPerRow()[rowIndex] ?? false;
+    }
+    /**
+     * Check if a row can be moved down.
+     * A row can move down if there's a visible row below it with a field selected.
+     * @param rowIndex Index of the row.
+     * @returns True if the row can be moved down.
+     */
+    canMoveDown(rowIndex) {
+        return this.canMoveDownPerRow()[rowIndex] ?? false;
+    }
+    /**
+     * Check if a row can be deleted (cleared).
+     * A row can be deleted if it has a field selected.
+     * @param rowIndex Index of the row.
+     * @returns True if the row can be deleted.
+     */
+    canDelete(rowIndex) {
+        return this.canDeletePerRow()[rowIndex] ?? false;
+    }
+    /**
+     * Move a sort criteria row up (swap with the row above).
+     * @param rowIndex Index of the row to move up.
+     */
+    moveUp(rowIndex) {
+        if (!this.canMoveUpPerRow()[rowIndex]) {
+            return;
+        }
+        this.sortCriteriaList.update((list) => {
+            const newList = [...list];
+            // Swap with the row above
+            [newList[rowIndex - 1], newList[rowIndex]] = [newList[rowIndex], newList[rowIndex - 1]];
+            return newList;
+        });
+        this._syncMainFieldAndDirection();
         this._onModelChange();
     }
     /**
-     * Handle sort field changes.
-     * @param field New sorting field.
+     * Move a sort criteria row down (swap with the row below).
+     * @param rowIndex Index of the row to move down.
      */
-    _sortFieldChange(field) {
-        this.field.set(field);
+    moveDown(rowIndex) {
+        if (!this.canMoveDownPerRow()[rowIndex]) {
+            return;
+        }
+        this.sortCriteriaList.update((list) => {
+            const newList = [...list];
+            // Swap with the row below
+            [newList[rowIndex], newList[rowIndex + 1]] = [newList[rowIndex + 1], newList[rowIndex]];
+            return newList;
+        });
+        this._syncMainFieldAndDirection();
+        this._onModelChange();
+    }
+    /**
+     * Delete (clear) a sort criteria row.
+     * This removes the field selection and shifts remaining criteria up.
+     * @param rowIndex Index of the row to delete.
+     */
+    deleteRow(rowIndex) {
+        if (!this.canDeletePerRow()[rowIndex]) {
+            return;
+        }
+        this.sortCriteriaList.update((list) => {
+            const newList = [...list];
+            // Remove the criteria at this index and add an empty one at the end
+            newList.splice(rowIndex, 1);
+            newList.push({ field: null, direction: INITIAL_DIRECTION });
+            return newList;
+        });
+        this._syncMainFieldAndDirection();
         this._onModelChange();
     }
+    /**
+     * Handle sort direction changes for a specific row.
+     * @param rowIndex Index of the row.
+     * @param direction New sorting direction.
+     */
+    _sortDirectionChangeForRow(rowIndex, direction) {
+        this.sortCriteriaList.update((list) => {
+            const newList = [...list];
+            newList[rowIndex] = { ...newList[rowIndex], direction };
+            return newList;
+        });
+        // Update the main direction if this is the first row (for backward compatibility)
+        if (rowIndex === 0) {
+            this.direction.set(direction);
+        }
+        // Always emit changes for multi-column sorting
+        this._onModelChange();
+    }
+    /**
+     * Handle sort field changes for a specific row.
+     * @param rowIndex Index of the row.
+     * @param column Selected column object or string.
+     */
+    _sortFieldChangeForRow(rowIndex, column) {
+        let fieldKey = null;
+        let shouldUpdate = true;
+        let isInvalid = false;
+        if (typeof column === 'string') {
+            if (column === '') {
+                // Empty string - clear any error state and don't update selection
+                // This can happen when combobox re-renders and emits empty value
+                shouldUpdate = false;
+                isInvalid = false;
+            }
+            else {
+                const matchingColumn = this.columns().find((col) => col.label === column);
+                fieldKey = matchingColumn?.key ?? null;
+                // Check if any column label starts with the typed text (case-insensitive)
+                // This handles the case where user is still typing and autocomplete is showing suggestions
+                const hasPartialMatch = this.columns().some((col) => col.label.toLowerCase().startsWith(column.toLowerCase()));
+                // Mark as invalid only if text doesn't match any column AND no partial matches exist
+                isInvalid = matchingColumn === undefined && !hasPartialMatch;
+                // Only update if we found a matching column
+                shouldUpdate = matchingColumn !== undefined;
+            }
+        }
+        else if (column) {
+            fieldKey = column.key;
+            isInvalid = false;
+        }
+        else {
+            // null/undefined column - don't clear existing selection
+            // This can happen when combobox re-renders
+            shouldUpdate = false;
+            isInvalid = false;
+        }
+        // Update invalid state for this row
+        this._invalidInputPerRow.update((map) => {
+            const newMap = new Map(map);
+            if (isInvalid) {
+                newMap.set(rowIndex, true);
+            }
+            else {
+                newMap.delete(rowIndex);
+            }
+            return newMap;
+        });
+        if (shouldUpdate) {
+            this.sortCriteriaList.update((list) => {
+                const newList = [...list];
+                newList[rowIndex] = { ...newList[rowIndex], field: fieldKey };
+                return newList;
+            });
+            // Update the main field if this is the first row (for backward compatibility)
+            if (rowIndex === 0 && fieldKey !== null) {
+                this.firstSortingField.set(fieldKey);
+            }
+            // Always emit changes for multi-column sorting
+            this._onModelChange();
+        }
+    }
+    /** @hidden */
+    displayColumn(column) {
+        return column?.label ?? '';
+    }
+    /**
+     * Sync the main field and direction signals with the first row's values.
+     * Used after move/delete operations to keep backward compatibility.
+     * @hidden
+     */
+    _syncMainFieldAndDirection() {
+        const firstCriteria = this.sortCriteriaList()[0];
+        if (firstCriteria) {
+            this.firstSortingField.set(firstCriteria.field);
+            this.direction.set(firstCriteria.direction);
+        }
+    }
     /**
      * Emit changes to the model.
      * @hidden
      */
     _onModelChange() {
-        this.sortChange.emit({ direction: this.direction(), field: this.field() });
+        // Build array of all sort criteria that have a field selected
+        const sortBy = this.sortCriteriaList()
+            .filter((criteria) => criteria.field !== null)
+            .map((criteria) => ({
+            field: criteria.field,
+            direction: criteria.direction
+        }));
+        this.sortChange.emit({ sortBy });
+    }
+    /**
+     * Sync combobox display text with the current selected column.
+     * This is a DOM side effect needed when reset happens and the combobox has invalid text,
+     * because ngModel won't call writeValue if the underlying model value hasn't changed.
+     * @hidden
+     */
+    _syncComboboxDisplayText() {
+        const comboboxes = this._comboboxes();
+        if (comboboxes.length > 0) {
+            const column = this.selectedColumn();
+            comboboxes[0].writeValue(column);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SortingComponent, isStandalone: true, selector: "fdp-sorting", inputs: { sortingData: { classPropertyName: "sortingData", publicName: "sortingData", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", resetAvailabilityChange: "resetAvailabilityChange" }, ngImport: i0, template: "<fieldset>\n    <legend fd-list-group-header>\n        <span fd-list-title [attr.id]=\"sortOrderHeaderId\">\n            {{ ('platformTable.sortDialogSortOrderHeader' | fdTranslate)() }}\n        </span>\n    </legend>\n    <ul fd-list [selection]=\"true\" [attr.aria-labelledby]=\"sortOrderHeaderId\">\n        <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.ASC\">\n            <fd-radio-button\n                name=\"sort-order\"\n                value=\"asc\"\n                state=\"default\"\n                [ngModel]=\"direction()\"\n                (ngModelChange)=\"_sortDirectionChange($event)\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ ('platformTable.sortDialogSortOrderAsc' | fdTranslate)() }}</span>\n        </li>\n        <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.DESC\">\n            <fd-radio-button\n                name=\"sort-order\"\n                value=\"desc\"\n                state=\"default\"\n                [ngModel]=\"direction()\"\n                (ngModelChange)=\"_sortDirectionChange($event)\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ ('platformTable.sortDialogSortOrderDesc' | fdTranslate)() }}</span>\n        </li>\n    </ul>\n</fieldset>\n\n<fieldset>\n    <legend fd-list-group-header>\n        <span fd-list-title [attr.id]=\"sortDialogSortByHeaderId\">\n            {{ ('platformTable.sortDialogSortByHeader' | fdTranslate)() }}\n        </span>\n    </legend>\n    <ul fd-list [selection]=\"true\" [attr.aria-labelledby]=\"sortDialogSortByHeaderId\">\n        @if (allowDisablingSorting()) {\n            <li fd-list-item [selected]=\"field() === NOT_SORTED_OPTION_VALUE\">\n                <fd-radio-button\n                    name=\"sort-by\"\n                    [value]=\"NOT_SORTED_OPTION_VALUE\"\n                    state=\"default\"\n                    [ngModel]=\"field()\"\n                    (ngModelChange)=\"_sortFieldChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ ('platformTable.sortDialogNotSortedLabel' | fdTranslate)() }}</span>\n            </li>\n        }\n        @for (column of columns(); track column) {\n            <li fd-list-item [selected]=\"column.key === field()\">\n                <fd-radio-button\n                    name=\"sort-by\"\n                    [value]=\"column.key\"\n                    state=\"default\"\n                    [ngModel]=\"field()\"\n                    (ngModelChange)=\"_sortFieldChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ column.label }}</span>\n            </li>\n        }\n    </ul>\n</fieldset>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SortingComponent, isStandalone: true, selector: "fdp-sorting", inputs: { sortingData: { classPropertyName: "sortingData", publicName: "sortingData", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", resetAvailabilityChange: "resetAvailabilityChange", validityChange: "validityChange" }, viewQueries: [{ propertyName: "_comboboxes", predicate: ["sortCombobox"], descendants: true, isSignal: true }], ngImport: i0, template: "<fieldset>\n    <ul fd-list>\n        @for (criteria of sortCriteriaList(); track $index; let rowIndex = $index) {\n            @if (rowVisibility()[rowIndex]) {\n                <li fd-list-item class=\"fdp-sorting__row\">\n                    <div class=\"fd-margin-end--sm\">\n                        <fd-combobox\n                            #sortCombobox\n                            [dropdownValues]=\"availableColumnsPerRow()[rowIndex]\"\n                            [displayFn]=\"displayColumn\"\n                            [placeholder]=\"('platformTable.sortDialogSortByHeader' | fdTranslate)()\"\n                            [state]=\"rowStates()[rowIndex]\"\n                            [ngModel]=\"selectedColumnsPerRow()[rowIndex]\"\n                            (ngModelChange)=\"_sortFieldChangeForRow(rowIndex, $event)\"\n                        >\n                        </fd-combobox>\n                    </div>\n\n                    <div class=\"fd-margin-end--sm\">\n                        <fd-segmented-button\n                            [name]=\"'sort-order-' + rowIndex\"\n                            [ngModel]=\"directionsPerRow()[rowIndex]\"\n                            (ngModelChange)=\"_sortDirectionChangeForRow(rowIndex, $event)\"\n                        >\n                            <button\n                                fd-button\n                                glyph=\"sort-ascending\"\n                                [attr.title]=\"('platformTable.sortDialogSortOrderAsc' | fdTranslate)()\"\n                                value=\"asc\"\n                            ></button>\n                            <button\n                                fd-button\n                                glyph=\"sort-descending\"\n                                [attr.title]=\"('platformTable.sortDialogSortOrderDesc' | fdTranslate)()\"\n                                value=\"desc\"\n                            ></button>\n                        </fd-segmented-button>\n                    </div>\n\n                    @if (directionsPerRow()[rowIndex] === 'asc') {\n                        <span fd-list-title>{{ ('platformTable.sortDialogSortOrderAsc' | fdTranslate)() }}</span>\n                    }\n\n                    @if (directionsPerRow()[rowIndex] === 'desc') {\n                        <span fd-list-title>{{ ('platformTable.sortDialogSortOrderDesc' | fdTranslate)() }}</span>\n                    }\n\n                    <span fd-list-secondary class=\"fdp-sorting__actions\">\n                        <button\n                            fd-button\n                            glyph=\"slim-arrow-up\"\n                            [attr.title]=\"('platformTable.sortDialogMoveUp' | fdTranslate)()\"\n                            [disabled]=\"!canMoveUpPerRow()[rowIndex]\"\n                            (click)=\"moveUp(rowIndex)\"\n                        ></button>\n                        <button\n                            fd-button\n                            glyph=\"slim-arrow-down\"\n                            [attr.title]=\"('platformTable.sortDialogMoveDown' | fdTranslate)()\"\n                            [disabled]=\"!canMoveDownPerRow()[rowIndex]\"\n                            (click)=\"moveDown(rowIndex)\"\n                        ></button>\n                        <button\n                            fd-button\n                            glyph=\"decline\"\n                            [attr.title]=\"('platformTable.sortDialogDelete' | fdTranslate)()\"\n                            [disabled]=\"!canDeletePerRow()[rowIndex]\"\n                            (click)=\"deleteRow(rowIndex)\"\n                        ></button>\n                    </span>\n                </li>\n            }\n        }\n    </ul>\n</fieldset>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.fdp-sorting__actions{visibility:hidden}.fdp-sorting__row:hover .fdp-sorting__actions,.fdp-sorting__row:focus-within .fdp-sorting__actions{visibility:visible}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n  (*!\n   * Fundamental Library Styles v0.41.8\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: ComboboxComponent, selector: "fd-combobox", inputs: ["comboboxId", "inputId", "ariaLabel", "ariaLabelledBy", "required", "dropdownValues", "filterFn", "disabled", "placeholder", "isSearch", "glyph", "glyphFont", "showClearButton", "triggers", "closeOnOutsideClick", "openOnKeyboardEvent", "state", "itemTemplate", "groupFn", "maxHeight", "dropDownMaxWidthPx", "noDropDownMaxWidth", "width", "searchFn", "highlighting", "closeOnSelect", "fillOnSelect", "autoComplete", "fillControlMode", "communicateByObject", "displayFn", "buttonFocusable", "clearButtonFocusable", "readOnly", "mobile", "mobileConfig", "showDropdownButton", "includes", "title", "byline", "tabOutStrategy", "valueProperty"], outputs: ["itemClicked", "openChange", "inputTextChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SortingComponent, decorators: [{
             type: Component,
@@ -2777,11 +3220,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ListGroupHeaderDirective,
                         ListTitleDirective,
                         ListItemComponent,
+                        ListSecondaryDirective,
                         RadioButtonComponent,
                         FormsModule,
-                        FdTranslatePipe
-                    ], template: "<fieldset>\n    <legend fd-list-group-header>\n        <span fd-list-title [attr.id]=\"sortOrderHeaderId\">\n            {{ ('platformTable.sortDialogSortOrderHeader' | fdTranslate)() }}\n        </span>\n    </legend>\n    <ul fd-list [selection]=\"true\" [attr.aria-labelledby]=\"sortOrderHeaderId\">\n        <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.ASC\">\n            <fd-radio-button\n                name=\"sort-order\"\n                value=\"asc\"\n                state=\"default\"\n                [ngModel]=\"direction()\"\n                (ngModelChange)=\"_sortDirectionChange($event)\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ ('platformTable.sortDialogSortOrderAsc' | fdTranslate)() }}</span>\n        </li>\n        <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.DESC\">\n            <fd-radio-button\n                name=\"sort-order\"\n                value=\"desc\"\n                state=\"default\"\n                [ngModel]=\"direction()\"\n                (ngModelChange)=\"_sortDirectionChange($event)\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ ('platformTable.sortDialogSortOrderDesc' | fdTranslate)() }}</span>\n        </li>\n    </ul>\n</fieldset>\n\n<fieldset>\n    <legend fd-list-group-header>\n        <span fd-list-title [attr.id]=\"sortDialogSortByHeaderId\">\n            {{ ('platformTable.sortDialogSortByHeader' | fdTranslate)() }}\n        </span>\n    </legend>\n    <ul fd-list [selection]=\"true\" [attr.aria-labelledby]=\"sortDialogSortByHeaderId\">\n        @if (allowDisablingSorting()) {\n            <li fd-list-item [selected]=\"field() === NOT_SORTED_OPTION_VALUE\">\n                <fd-radio-button\n                    name=\"sort-by\"\n                    [value]=\"NOT_SORTED_OPTION_VALUE\"\n                    state=\"default\"\n                    [ngModel]=\"field()\"\n                    (ngModelChange)=\"_sortFieldChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ ('platformTable.sortDialogNotSortedLabel' | fdTranslate)() }}</span>\n            </li>\n        }\n        @for (column of columns(); track column) {\n            <li fd-list-item [selected]=\"column.key === field()\">\n                <fd-radio-button\n                    name=\"sort-by\"\n                    [value]=\"column.key\"\n                    state=\"default\"\n                    [ngModel]=\"field()\"\n                    (ngModelChange)=\"_sortFieldChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ column.label }}</span>\n            </li>\n        }\n    </ul>\n</fieldset>\n" }]
-        }], propDecorators: { sortingData: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingData", required: false }] }], initialSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSorting", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], resetAvailabilityChange: [{ type: i0.Output, args: ["resetAvailabilityChange"] }] } });
+                        FdTranslatePipe,
+                        SegmentedButtonComponent,
+                        ButtonComponent,
+                        ComboboxComponent,
+                        FormGroupComponent
+                    ], template: "<fieldset>\n    <ul fd-list>\n        @for (criteria of sortCriteriaList(); track $index; let rowIndex = $index) {\n            @if (rowVisibility()[rowIndex]) {\n                <li fd-list-item class=\"fdp-sorting__row\">\n                    <div class=\"fd-margin-end--sm\">\n                        <fd-combobox\n                            #sortCombobox\n                            [dropdownValues]=\"availableColumnsPerRow()[rowIndex]\"\n                            [displayFn]=\"displayColumn\"\n                            [placeholder]=\"('platformTable.sortDialogSortByHeader' | fdTranslate)()\"\n                            [state]=\"rowStates()[rowIndex]\"\n                            [ngModel]=\"selectedColumnsPerRow()[rowIndex]\"\n                            (ngModelChange)=\"_sortFieldChangeForRow(rowIndex, $event)\"\n                        >\n                        </fd-combobox>\n                    </div>\n\n                    <div class=\"fd-margin-end--sm\">\n                        <fd-segmented-button\n                            [name]=\"'sort-order-' + rowIndex\"\n                            [ngModel]=\"directionsPerRow()[rowIndex]\"\n                            (ngModelChange)=\"_sortDirectionChangeForRow(rowIndex, $event)\"\n                        >\n                            <button\n                                fd-button\n                                glyph=\"sort-ascending\"\n                                [attr.title]=\"('platformTable.sortDialogSortOrderAsc' | fdTranslate)()\"\n                                value=\"asc\"\n                            ></button>\n                            <button\n                                fd-button\n                                glyph=\"sort-descending\"\n                                [attr.title]=\"('platformTable.sortDialogSortOrderDesc' | fdTranslate)()\"\n                                value=\"desc\"\n                            ></button>\n                        </fd-segmented-button>\n                    </div>\n\n                    @if (directionsPerRow()[rowIndex] === 'asc') {\n                        <span fd-list-title>{{ ('platformTable.sortDialogSortOrderAsc' | fdTranslate)() }}</span>\n                    }\n\n                    @if (directionsPerRow()[rowIndex] === 'desc') {\n                        <span fd-list-title>{{ ('platformTable.sortDialogSortOrderDesc' | fdTranslate)() }}</span>\n                    }\n\n                    <span fd-list-secondary class=\"fdp-sorting__actions\">\n                        <button\n                            fd-button\n                            glyph=\"slim-arrow-up\"\n                            [attr.title]=\"('platformTable.sortDialogMoveUp' | fdTranslate)()\"\n                            [disabled]=\"!canMoveUpPerRow()[rowIndex]\"\n                            (click)=\"moveUp(rowIndex)\"\n                        ></button>\n                        <button\n                            fd-button\n                            glyph=\"slim-arrow-down\"\n                            [attr.title]=\"('platformTable.sortDialogMoveDown' | fdTranslate)()\"\n                            [disabled]=\"!canMoveDownPerRow()[rowIndex]\"\n                            (click)=\"moveDown(rowIndex)\"\n                        ></button>\n                        <button\n                            fd-button\n                            glyph=\"decline\"\n                            [attr.title]=\"('platformTable.sortDialogDelete' | fdTranslate)()\"\n                            [disabled]=\"!canDeletePerRow()[rowIndex]\"\n                            (click)=\"deleteRow(rowIndex)\"\n                        ></button>\n                    </span>\n                </li>\n            }\n        }\n    </ul>\n</fieldset>\n", styles: [".fd-margin--tiny{margin-block:.5rem;margin-inline:.5rem}.fd-margin--sm{margin-block:1rem;margin-inline:1rem}.fd-margin--md{margin-block:2rem;margin-inline:2rem}.fd-margin--lg{margin-block:3rem;margin-inline:3rem}.fd-margin--none{margin-block:0;margin-inline:0}.fd-margin-top--tiny{-webkit-margin-before:.5rem;margin-block-start:.5rem}.fd-margin-top--sm{-webkit-margin-before:1rem;margin-block-start:1rem}.fd-margin-top--md{-webkit-margin-before:2rem;margin-block-start:2rem}.fd-margin-top--lg{-webkit-margin-before:3rem;margin-block-start:3rem}.fd-margin-top--none{-webkit-margin-before:0;margin-block-start:0}.fd-margin-end--tiny{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-margin-end--sm{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-margin-end--md{-webkit-margin-end:2rem;margin-inline-end:2rem}.fd-margin-end--lg{-webkit-margin-end:3rem;margin-inline-end:3rem}.fd-margin-end--none{-webkit-margin-end:0;margin-inline-end:0}.fd-margin-bottom--tiny{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-margin-bottom--sm{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-margin-bottom--md{-webkit-margin-after:2rem;margin-block-end:2rem}.fd-margin-bottom--lg{-webkit-margin-after:3rem;margin-block-end:3rem}.fd-margin-bottom--none{-webkit-margin-after:0;margin-block-end:0}.fd-margin-begin--tiny{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-margin-begin--sm{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-margin-begin--md{-webkit-margin-start:2rem;margin-inline-start:2rem}.fd-margin-begin--lg{-webkit-margin-start:3rem;margin-inline-start:3rem}.fd-margin-begin--none{-webkit-margin-start:0;margin-inline-start:0}.fd-margin-top-bottom--tiny{margin-block:.5rem}.fd-margin-top-bottom--sm{margin-block:1rem}.fd-margin-top-bottom--md{margin-block:2rem}.fd-margin-top-bottom--lg{margin-block:3rem}.fd-margin-begin-end--tiny{margin-inline:.5rem}.fd-margin-begin-end--sm{margin-inline:1rem}.fd-margin-begin-end--md{margin-inline:2rem}.fd-margin-begin-end--lg{margin-inline:3rem}.fd-margin-responsive--sm{margin-block:0 1rem;margin-inline:0}.fd-margin-responsive--md{margin-block:1rem;margin-inline:1rem}.fd-margin-responsive--lg{margin-block:1rem;margin-inline:2rem}.fd-margin-responsive--xl{margin-block:1rem;margin-inline:3rem}.fd-margin-negative-begin-end--tiny{margin-block:0;margin-inline:-.5rem}.fd-margin-negative-begin-end--sm{margin-block:0;margin-inline:-1rem}.fd-margin-negative-begin-end--md{margin-block:0;margin-inline:-2rem}.fd-margin-negative-begin-end--lg{margin-block:0;margin-inline:-3rem}.fdp-sorting__actions{visibility:hidden}.fdp-sorting__row:hover .fdp-sorting__actions,.fdp-sorting__row:focus-within .fdp-sorting__actions{visibility:visible}\n/*! Bundled license information:\n\nfundamental-styles/dist/margins.css:\n  (*!\n   * Fundamental Library Styles v0.41.8\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sortingData: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingData", required: false }] }], initialSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSorting", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], resetAvailabilityChange: [{ type: i0.Output, args: ["resetAvailabilityChange"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], _comboboxes: [{ type: i0.ViewChildren, args: ['sortCombobox', { isSignal: true }] }] } });
 
 const INITIAL_SEARCH_TEXT = '';
 const INITIAL_SHOW_ALL_ITEMS = true;
@@ -3045,6 +3493,9 @@ class SettingsDialogComponent {
         /** Signal to track reset availability */
         this.isResetAvailable$ = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isResetAvailable$" }] : /* istanbul ignore next */ []));
+        /** Signal to track if the dialog is valid (OK button can be clicked) */
+        this.isDialogValid = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDialogValid" }] : /* istanbul ignore next */ []));
         /** @hidden Initial sorting configuration */
         this._initialSorting = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_initialSorting" }] : /* istanbul ignore next */ []));
@@ -3089,8 +3540,11 @@ class SettingsDialogComponent {
         const columnsData = this._pendingColumnsChanges
             ? { columns: this._pendingColumnsChanges.columns }
             : this.columnsData();
+        // Build sorting result directly from sortingData signal
+        const sortingData = this.sortingData();
+        const sortingResult = sortingData ? { sortBy: sortingData.sortBy ?? [] } : null;
         this.dialogRef.close({
-            sortingData: this.sortingData(),
+            sortingData: sortingResult,
             filteringData: this.filteringData(),
             groupingData: this.groupingData(),
             columnsData
@@ -3107,10 +3561,16 @@ class SettingsDialogComponent {
      */
     reset() {
         if (this.activeTab() === ActiveTab.SORT && this.sortingData()) {
+            const current = this.sortingData();
+            const initial = this._initialSorting();
+            // Reset sortBy to initial sorting (if any)
+            const initialSortBy = initial.field !== NOT_SORTED_OPTION_VALUE
+                ? [{ field: initial.field, direction: initial.direction }]
+                : [];
             this.sortingData.set({
-                ...this.sortingData(),
-                field: this._initialSorting().field,
-                direction: this._initialSorting().direction
+                columns: current.columns,
+                allowDisablingSorting: current.allowDisablingSorting,
+                sortBy: initialSortBy
             });
         }
         if (this.activeTab() === ActiveTab.FILTER && this.filteringData()) {
@@ -3144,12 +3604,19 @@ class SettingsDialogComponent {
      * @param event Updated sorting data.
      */
     onSortChange(event) {
+        // Update sortingData with new sortBy
         this.sortingData.set({
             ...this.sortingData(),
-            field: event.field,
-            direction: event.direction
+            sortBy: event.sortBy ?? []
         });
     }
+    /**
+     * Handle sort validity change event.
+     * @param isValid Whether the sorting configuration is valid.
+     */
+    onSortValidityChange(isValid) {
+        this.isDialogValid.set(isValid);
+    }
     /**
      * Handle filter change event and update filtering data.
      * @param event Updated filtering data.
@@ -3271,7 +3738,9 @@ class SettingsDialogComponent {
      * Set initial sorting configuration from the table's state.
      */
     _setInitialSorting() {
-        const initialSorting = (this._table.initialState?.initialSortBy || [])[0];
+        // Use snapshot which preserves the original initial state
+        // even if initialSortBy input is dynamically updated
+        const initialSorting = (this._table.initialState?.getInitialSortBySnapshot() || [])[0];
         this._initialSorting.set({
             field: initialSorting?.field ?? NOT_SORTED_OPTION_VALUE,
             direction: initialSorting?.direction ?? INITIAL_DIRECTION
@@ -3281,13 +3750,15 @@ class SettingsDialogComponent {
      * Set initial filter configuration from the table's state.
      */
     _setInitialFilters() {
-        this._initialFilters.set(this._table.initialState?.initialFilterBy ?? []);
+        // Use snapshot which preserves the original initial state
+        this._initialFilters.set(this._table.initialState?.getInitialFilterBySnapshot() ?? []);
     }
     /**
      * Set initial grouping configuration from the table's state.
      */
     _setInitialGrouping() {
-        const initialGrouping = (this._table.initialState?.initialGroupBy || [])[0];
+        // Use snapshot which preserves the original initial state
+        const initialGrouping = (this._table.initialState?.getInitialGroupBySnapshot() || [])[0];
         this._initialGrouping.set({
             field: initialGrouping?.field ?? NOT_GROUPED_OPTION_VALUE,
             direction: initialGrouping?.direction ?? INITIAL_DIRECTION
@@ -3314,7 +3785,7 @@ class SettingsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "component", type: ColumnsComponent, selector: "fdp-columns", inputs: ["columnsData", "initialColumns"], outputs: ["columnsChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (validityChange)=\"onSortValidityChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (validityChange)=\"onSortValidityChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            [disabled]=\"!isDialogValid()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange", "validityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "component", type: ColumnsComponent, selector: "fdp-columns", inputs: ["columnsData", "initialColumns"], outputs: ["columnsChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsDialogComponent, decorators: [{
             type: Component,
@@ -3340,13 +3811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         InitialFocusDirective,
                         IconTabBarComponent,
                         IconTabBarTabComponent
-                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n" }]
+                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (validityChange)=\"onSortValidityChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (validityChange)=\"onSortValidityChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            [disabled]=\"!isDialogValid()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n" }]
         }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: i1.Table }] });
 
 const dialogConfig = {
     responsivePadding: false,
     verticalPadding: false,
-    width: 'auto'
+    width: '40rem',
+    height: '80%'
 };
 /**
  * View settings dialog component.
@@ -3397,9 +3869,9 @@ class TableViewSettingsDialogComponent {
         const columns = this._getTableColumns();
         const sortData = {
             columns: columns.filter(({ sortable }) => sortable),
-            direction: state.sortBy?.[0]?.direction,
-            field: state.sortBy?.[0]?.field,
-            allowDisablingSorting: this.allowDisablingSorting
+            allowDisablingSorting: this.allowDisablingSorting,
+            // Filter out any criteria with null fields
+            sortBy: (state.sortBy ?? []).filter((s) => s.field !== null)
         };
         const filterData = {
             columns,
@@ -3481,7 +3953,7 @@ class TableViewSettingsDialogComponent {
             .pipe(filter((result) => !!result), takeUntilDestroyed(this.destroyRef))
             .subscribe(({ sortingData, filteringData, groupingData, columnsData }) => {
             if (sortingData) {
-                this._applySorting(sortingData.field, sortingData.direction);
+                this._applySorting(sortingData);
             }
             if (filteringData) {
                 this._applyFiltering(filteringData.filterBy);
@@ -3537,8 +4009,9 @@ class TableViewSettingsDialogComponent {
         return this._table?.getTableColumns() || [];
     }
     /** @hidden */
-    _applySorting(field, direction) {
-        this._table?.sort(field ? [{ field, direction }] : []);
+    _applySorting(sortingData) {
+        const sortRules = sortingData.sortBy ?? [];
+        this._table?.sort(sortRules);
     }
     /** @hidden */
     _applyFiltering(filters) {