@fundamental-ngx/platform 0.43.39 → 0.43.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/table/components/table-p13-dialog/columns/columns.component.mjs +8 -23
- package/esm2020/table/table.component.mjs +8 -6
- package/esm2020/table-helpers/directives/table-virtual-scroll.directive.mjs +4 -1
- package/esm2020/table-helpers/table.mjs +1 -1
- package/fesm2015/fundamental-ngx-platform-table-helpers.mjs +3 -0
- package/fesm2015/fundamental-ngx-platform-table-helpers.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-platform-table.mjs +15 -27
- package/fesm2015/fundamental-ngx-platform-table.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-platform-table-helpers.mjs +3 -0
- package/fesm2020/fundamental-ngx-platform-table-helpers.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-platform-table.mjs +14 -27
- package/fesm2020/fundamental-ngx-platform-table.mjs.map +1 -1
- package/fundamental-ngx-platform-v0.43.41.tgz +0 -0
- package/package.json +4 -4
- package/schematics/ng-add/index.js +1 -1
- package/table/components/table-p13-dialog/columns/columns.component.d.ts +0 -8
- package/table-helpers/table.d.ts +2 -0
- package/fundamental-ngx-platform-v0.43.39.tgz +0 -0
|
@@ -1012,10 +1012,6 @@ class P13ColumnsDialogComponent {
|
|
|
1012
1012
|
this._showAllItemsSubject = new BehaviorSubject(INITIAL_SHOW_ALL_ITEMS);
|
|
1013
1013
|
/** Selected columns count */
|
|
1014
1014
|
this._selectedColumnsCount = 0;
|
|
1015
|
-
/** Flag to track disabled state for move-down move-up buttons */
|
|
1016
|
-
this._moveUpDisabled = true;
|
|
1017
|
-
/** Flag to track disabled state for move-down move-up buttons */
|
|
1018
|
-
this._moveDownDisabled = true;
|
|
1019
1015
|
/** @hidden */
|
|
1020
1016
|
this._subscriptions = new Subscription();
|
|
1021
1017
|
const { availableColumns, visibleColumns } = this.dialogRef.data;
|
|
@@ -1084,10 +1080,11 @@ class P13ColumnsDialogComponent {
|
|
|
1084
1080
|
}
|
|
1085
1081
|
/** @hidden */
|
|
1086
1082
|
_setActiveColumn(column) {
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1083
|
+
if (column !== null) {
|
|
1084
|
+
this._selectableColumns.map((_column) => {
|
|
1085
|
+
_column.active = _column === column;
|
|
1086
|
+
});
|
|
1087
|
+
}
|
|
1091
1088
|
}
|
|
1092
1089
|
/** @hidden */
|
|
1093
1090
|
_moveActiveToTop() {
|
|
@@ -1150,15 +1147,10 @@ class P13ColumnsDialogComponent {
|
|
|
1150
1147
|
this._filteredColumns = this._selectableColumns
|
|
1151
1148
|
.filter((item) => item.column.label.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()))
|
|
1152
1149
|
.filter((item) => showAll || item.selected);
|
|
1153
|
-
this._onChangeFilteredColumnsList();
|
|
1154
1150
|
this.cdr.markForCheck();
|
|
1155
1151
|
}));
|
|
1156
1152
|
}
|
|
1157
1153
|
/** @hidden */
|
|
1158
|
-
_onChangeFilteredColumnsList() {
|
|
1159
|
-
this._calculateMovementButtonsState();
|
|
1160
|
-
}
|
|
1161
|
-
/** @hidden */
|
|
1162
1154
|
_getVisibleColumnsFromSelectedColumns(columns = this._selectableColumns) {
|
|
1163
1155
|
return columns.filter(({ selected }) => selected).map(({ column }) => column.key);
|
|
1164
1156
|
}
|
|
@@ -1174,7 +1166,6 @@ class P13ColumnsDialogComponent {
|
|
|
1174
1166
|
* with respect to the original list order
|
|
1175
1167
|
*/
|
|
1176
1168
|
this._moveColumnInSelectableList(movedItem, replacedItem);
|
|
1177
|
-
this._calculateMovementButtonsState();
|
|
1178
1169
|
this._recalculateResetAvailability();
|
|
1179
1170
|
}
|
|
1180
1171
|
/**
|
|
@@ -1203,18 +1194,12 @@ class P13ColumnsDialogComponent {
|
|
|
1203
1194
|
_countSelectedColumns() {
|
|
1204
1195
|
this._selectedColumnsCount = this._selectableColumns.filter(({ selected }) => selected).length;
|
|
1205
1196
|
}
|
|
1206
|
-
/** @hidden */
|
|
1207
|
-
_calculateMovementButtonsState() {
|
|
1208
|
-
const activeIndex = this._getActiveColumnIndexInFilteredList();
|
|
1209
|
-
this._moveUpDisabled = activeIndex < 1;
|
|
1210
|
-
this._moveDownDisabled = activeIndex < 0 || activeIndex >= this._filteredColumns.length - 1;
|
|
1211
|
-
}
|
|
1212
1197
|
}
|
|
1213
1198
|
P13ColumnsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: P13ColumnsDialogComponent, deps: [{ token: i1$2.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1214
|
-
P13ColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: P13ColumnsDialogComponent, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h4 fd-title [headerSize]=\"4\">\n {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n </h4>\n </fd-bar-element>\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>\n <fd-toolbar>\n <fdp-search-field\n [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n [inputText]=\"(_searchQuerySubject | async) || ''\"\n [suggestions]=\"[]\"\n (inputChange)=\"_searchInputChange($event)\"\n ></fdp-search-field>\n\n <fd-toolbar-spacer></fd-toolbar-spacer>\n\n <!-- Show Selected/All -->\n <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n </ng-container>\n <ng-template #showAll>\n {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n </ng-template>\n </button>\n\n <!-- Active Button Movement -->\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"collapse-group\"\n [disabled]=\"_moveUpDisabled\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n (click)=\"_moveActiveToTop()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"slim-arrow-down\"\n style=\"transform: rotate(180deg)\"\n [disabled]=\"_moveUpDisabled\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n (click)=\"_moveActiveUp()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"slim-arrow-down\"\n [disabled]=\"_moveDownDisabled\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n (click)=\"_moveActiveDown()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"expand-group\"\n [disabled]=\"_moveDownDisabled\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n (click)=\"_moveActiveToBottom()\"\n ></button>\n </fd-toolbar>\n\n <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n <li\n (focus)=\"_setActiveColumn(null)\"\n fd-list-item\n [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n >\n <fd-checkbox\n [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n (ngModelChange)=\"_toggleSelectAll($event)\"\n [disabled]=\"_selectAllDisabled\"\n ></fd-checkbox>\n <span fd-list-title>\n {{\n 'platformTable.P13ColumnsDialogSelectAll'\n | fdTranslate\n : {\n selectedColumnsCount: _selectedColumnsCount,\n selectableColumnsCount: _selectableColumns.length\n }\n }}\n </span>\n </li>\n <li\n fd-list-item\n *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n [class.fd-select-item--selected]=\"item.selected\"\n [class.fd-select-item--active]=\"item.active\"\n [selected]=\"item.selected\"\n (focus)=\"_setActiveColumn(item)\"\n >\n <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n <span fd-list-title>\n {{ item.column.label }}\n </span>\n </li>\n </ul>\n </fd-dialog-body>\n\n <fd-dialog-footer>\n <fd-dialog-footer-button>\n <button\n fd-button\n fdType=\"emphasized\"\n fd-dialog-decisive-button\n [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n (click)=\"confirm()\"\n ></button>\n </fd-dialog-footer-button>\n\n <fd-dialog-footer-button>\n <button\n fd-button\n fdType=\"transparent\"\n fd-dialog-decisive-button\n [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-dialog-footer-button>\n </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:10;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i3$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3$2.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "directive", type: i1$2.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i2.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i11$1.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1199
|
+
P13ColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: P13ColumnsDialogComponent, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h4 fd-title [headerSize]=\"4\">\n {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n </h4>\n </fd-bar-element>\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>\n <fd-toolbar>\n <fdp-search-field\n [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n [inputText]=\"(_searchQuerySubject | async) || ''\"\n [suggestions]=\"[]\"\n (inputChange)=\"_searchInputChange($event)\"\n ></fdp-search-field>\n\n <fd-toolbar-spacer></fd-toolbar-spacer>\n\n <!-- Show Selected/All -->\n <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n </ng-container>\n <ng-template #showAll>\n {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n </ng-template>\n </button>\n\n <!-- Active Button Movement -->\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"collapse-group\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n (click)=\"_moveActiveToTop()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"slim-arrow-down\"\n style=\"transform: rotate(180deg)\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n (click)=\"_moveActiveUp()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"slim-arrow-down\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n (click)=\"_moveActiveDown()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"expand-group\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n (click)=\"_moveActiveToBottom()\"\n ></button>\n </fd-toolbar>\n\n <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n <li\n (focus)=\"_setActiveColumn(null)\"\n fd-list-item\n [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n >\n <fd-checkbox\n [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n (ngModelChange)=\"_toggleSelectAll($event)\"\n [disabled]=\"_selectAllDisabled\"\n ></fd-checkbox>\n <span fd-list-title>\n {{\n 'platformTable.P13ColumnsDialogSelectAll'\n | fdTranslate\n : {\n selectedColumnsCount: _selectedColumnsCount,\n selectableColumnsCount: _selectableColumns.length\n }\n }}\n </span>\n </li>\n <li\n fd-list-item\n *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n [class.fd-select-item--selected]=\"item.selected\"\n [class.fd-select-item--active]=\"item.active\"\n [selected]=\"item.selected\"\n (focus)=\"_setActiveColumn(item)\"\n >\n <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n <span fd-list-title>\n {{ item.column.label }}\n </span>\n </li>\n </ul>\n </fd-dialog-body>\n\n <fd-dialog-footer>\n <fd-dialog-footer-button>\n <button\n fd-button\n fdType=\"emphasized\"\n fd-dialog-decisive-button\n [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n (click)=\"confirm()\"\n ></button>\n </fd-dialog-footer-button>\n\n <fd-dialog-footer-button>\n <button\n fd-button\n fdType=\"transparent\"\n fd-dialog-decisive-button\n [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-dialog-footer-button>\n </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:10;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i3$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3$2.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "directive", type: i1$2.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i2.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i11$1.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1215
1200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: P13ColumnsDialogComponent, decorators: [{
|
|
1216
1201
|
type: Component,
|
|
1217
|
-
args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h4 fd-title [headerSize]=\"4\">\n {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n </h4>\n </fd-bar-element>\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>\n <fd-toolbar>\n <fdp-search-field\n [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n [inputText]=\"(_searchQuerySubject | async) || ''\"\n [suggestions]=\"[]\"\n (inputChange)=\"_searchInputChange($event)\"\n ></fdp-search-field>\n\n <fd-toolbar-spacer></fd-toolbar-spacer>\n\n <!-- Show Selected/All -->\n <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n </ng-container>\n <ng-template #showAll>\n {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n </ng-template>\n </button>\n\n <!-- Active Button Movement -->\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"collapse-group\"\n [
|
|
1202
|
+
args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n <fd-dialog-header>\n <ng-template fdkTemplate=\"header\">\n <div fd-bar-left>\n <fd-bar-element>\n <h4 fd-title [headerSize]=\"4\">\n {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n </h4>\n </fd-bar-element>\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>\n <fd-toolbar>\n <fdp-search-field\n [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n [inputText]=\"(_searchQuerySubject | async) || ''\"\n [suggestions]=\"[]\"\n (inputChange)=\"_searchInputChange($event)\"\n ></fdp-search-field>\n\n <fd-toolbar-spacer></fd-toolbar-spacer>\n\n <!-- Show Selected/All -->\n <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n </ng-container>\n <ng-template #showAll>\n {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n </ng-template>\n </button>\n\n <!-- Active Button Movement -->\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"collapse-group\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n (click)=\"_moveActiveToTop()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"slim-arrow-down\"\n style=\"transform: rotate(180deg)\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n (click)=\"_moveActiveUp()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"slim-arrow-down\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n (click)=\"_moveActiveDown()\"\n ></button>\n\n <button\n fd-toolbar-item\n fd-button\n fdType=\"transparent\"\n glyph=\"expand-group\"\n [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n (click)=\"_moveActiveToBottom()\"\n ></button>\n </fd-toolbar>\n\n <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n <li\n (focus)=\"_setActiveColumn(null)\"\n fd-list-item\n [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n >\n <fd-checkbox\n [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n (ngModelChange)=\"_toggleSelectAll($event)\"\n [disabled]=\"_selectAllDisabled\"\n ></fd-checkbox>\n <span fd-list-title>\n {{\n 'platformTable.P13ColumnsDialogSelectAll'\n | fdTranslate\n : {\n selectedColumnsCount: _selectedColumnsCount,\n selectableColumnsCount: _selectableColumns.length\n }\n }}\n </span>\n </li>\n <li\n fd-list-item\n *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n [class.fd-select-item--selected]=\"item.selected\"\n [class.fd-select-item--active]=\"item.active\"\n [selected]=\"item.selected\"\n (focus)=\"_setActiveColumn(item)\"\n >\n <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n <span fd-list-title>\n {{ item.column.label }}\n </span>\n </li>\n </ul>\n </fd-dialog-body>\n\n <fd-dialog-footer>\n <fd-dialog-footer-button>\n <button\n fd-button\n fdType=\"emphasized\"\n fd-dialog-decisive-button\n [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n (click)=\"confirm()\"\n ></button>\n </fd-dialog-footer-button>\n\n <fd-dialog-footer-button>\n <button\n fd-button\n fdType=\"transparent\"\n fd-dialog-decisive-button\n [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n (click)=\"cancel()\"\n ></button>\n </fd-dialog-footer-button>\n </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:10;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"] }]
|
|
1218
1203
|
}], ctorParameters: function () { return [{ type: i1$2.DialogRef }, { type: i0.ChangeDetectorRef }]; } });
|
|
1219
1204
|
|
|
1220
1205
|
const dialogConfig$1 = {
|
|
@@ -3686,7 +3671,6 @@ class TableComponent extends Table {
|
|
|
3686
3671
|
end ? (this.freezeEndColumnsTo = columnName) : (this.freezeColumnsTo = columnName);
|
|
3687
3672
|
this._tableService.freezeTo(columnName, end);
|
|
3688
3673
|
this.recalculateTableColumnWidth();
|
|
3689
|
-
this._calculateLastFreezableColumn();
|
|
3690
3674
|
}
|
|
3691
3675
|
/** Unfreeze column */
|
|
3692
3676
|
unfreeze(columnName, end) {
|
|
@@ -4491,10 +4475,14 @@ class TableComponent extends Table {
|
|
|
4491
4475
|
.scrolled()
|
|
4492
4476
|
.pipe(filter(() => this.pageScrolling))
|
|
4493
4477
|
.subscribe((scrollable) => {
|
|
4494
|
-
|
|
4495
|
-
this
|
|
4496
|
-
|
|
4497
|
-
|
|
4478
|
+
var _a;
|
|
4479
|
+
// this block is handled in the virtual scroll directive for scrollWholeRows
|
|
4480
|
+
if (!((_a = this._virtualScrollDirective) === null || _a === void 0 ? void 0 : _a.scrollWholeRows)) {
|
|
4481
|
+
const scrollTop = scrollable.getScrollTop();
|
|
4482
|
+
this.tableScrolled.emit(scrollTop);
|
|
4483
|
+
// Instead of having two places to record this position, we could just subscribe once.
|
|
4484
|
+
this.getTableState().scrollTopPosition = scrollTop;
|
|
4485
|
+
}
|
|
4498
4486
|
}));
|
|
4499
4487
|
}
|
|
4500
4488
|
/** @hidden */
|