@fundamental-ngx/platform 0.43.37 → 0.43.39

package/fesm2020/fundamental-ngx-platform-approval-flow.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, ViewChildren, Directive, Optional, HostBinding, ContentChild, Injectable, Inject, NgModule } from '@angular/core';
+import { EventEmitter, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, ViewChildren, Directive, Optional, HostBinding, ContentChild, Injectable, Inject, NgModule } from '@angular/core';
 import { UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
-import { Subscription, combineLatest, Subject, merge, fromEvent } from 'rxjs';
+import { takeUntil, Subscription, combineLatest, Subject, merge, fromEvent } from 'rxjs';
 import { throttleTime, startWith, switchMap, mapTo, map, distinctUntilChanged } from 'rxjs/operators';
 import * as i6 from '@fundamental-ngx/cdk/utils';
-import { KeyUtil } from '@fundamental-ngx/cdk/utils';
+import { DestroyedService, KeyUtil } from '@fundamental-ngx/cdk/utils';
 import * as i10$2 from '@fundamental-ngx/core/grid-list';
 import { GridListItemComponent, GridListModule } from '@fundamental-ngx/core/grid-list';
 import * as i1$1 from '@fundamental-ngx/core/dialog';
@@ -149,17 +149,22 @@ class ApprovalFlowUserListComponent {
         this._trackByFn = trackByFn;
         /** @hidden */
         this._displayUsers = [];
+        /** @hidden */
+        this._allSelectedUsers = [];
+        /** @hidden */
+        this._destroyed$ = inject(DestroyedService);
+        /** @hidden */
+        this._dontCallSelection = false;
     }
     /** @hidden */
     ngAfterViewInit() {
         if (this.selectedUsers.length) {
-            const selectedApproversNames = this.selectedUsers.map((approver) => approver.name);
-            this._selectedItems = this.listItems.filter((item) => !!item.avatar?.ariaLabel && selectedApproversNames.includes(item.avatar.ariaLabel));
-            this._selectedItems.forEach((item) => {
-                item._selected = true;
-                this.list._selectItem(item);
-            });
-            this._cdr.detectChanges();
+            this._selectItems(this.selectedUsers);
+            this._allSelectedUsers = [...this.selectedUsers];
+            this._cdr.markForCheck();
+        }
+        if (this.isSelectable) {
+            this._listenToListItemChange();
         }
     }
     /** @hidden */
@@ -174,13 +179,22 @@ class ApprovalFlowUserListComponent {
     }
     /** @hidden */
     _onSelect(event) {
-        this._selectedItems = event.selectedItems;
-        this.onSelectionChange.emit(this._getUsersFromSelectedItems(event.selectedItems));
+        if (!this._dontCallSelection) {
+            this._selectedItems = event.selectedItems;
+            if (event.removed) {
+                this._allSelectedUsers = this._allSelectedUsers.filter((user) => `${this._idPrefix + user.id}` !== event.removed.id);
+            }
+            if (event.added) {
+                this._allSelectedUsers.push(...this._getUsersFromSelectedItems([event.added]));
+            }
+            this.onSelectionChange.emit(this._allSelectedUsers);
+            this._cdr.detectChanges();
+        }
     }
     /** @hidden */
     _getUsersFromSelectedItems(items) {
         return items
-            .map((item) => this.users.find((user) => `${this._idPrefix + user.id}` === item.itemEl.nativeElement.id))
+            .map((item) => this.users.find((user) => `${this._idPrefix + user.id}` === item.id))
             .filter((u) => !!u);
     }
     /** @hidden */
@@ -215,14 +229,34 @@ class ApprovalFlowUserListComponent {
             clearInterval(this._intervalID);
         }
     }
+    /** @hidden */
+    _listenToListItemChange() {
+        this.listItems.changes.pipe(takeUntil(this._destroyed$)).subscribe(() => {
+            this._selectItems(this._allSelectedUsers);
+            this._cdr.detectChanges();
+        });
+    }
+    /** @hidden */
+    _selectItems(users) {
+        this._dontCallSelection = true;
+        const allSelectedUserNames = users.map((user) => this._idPrefix + user.id);
+        const currentSelectedList = this.listItems.filter((item) => allSelectedUserNames.includes(item.id));
+        this.list._clearSelection();
+        this._selectedItems = [...currentSelectedList];
+        this._selectedItems.forEach((item) => {
+            item._selected = true;
+            this.list._selectItem(item);
+        });
+        this._dontCallSelection = false;
+    }
 }
 ApprovalFlowUserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ApprovalFlowUserListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ApprovalFlowUserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: { users: "users", selectedUsers: "selectedUsers", isSelectable: "isSelectable" }, outputs: { onUserClick: "onUserClick", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "fdp-approval-flow-user-list" }, viewQueries: [{ propertyName: "list", first: true, predicate: ListComponent, descendants: true }, { propertyName: "listItems", predicate: StandardListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fdp-approval-flow-user-list__selected-count\" *ngIf=\"_selectedItems.length\">\n    <ng-container *ngIf=\"_selectedItems.length === 1; else multipleItems\">\n        {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n    </ng-container>\n\n    <ng-template #multipleItems>\n        {{ 'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate: { count: _selectedItems.length } }}\n    </ng-template>\n</div>\n\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    <fdp-standard-list-item\n        *ngFor=\"let _user of _displayUsers; trackBy: _trackByFn\"\n        [attr.id]=\"_idPrefix + _user.id\"\n        [avatarSrc]=\"_user.imgUrl\"\n        [avatarTitle]=\"_user.name\"\n        [description]=\"_user.description\"\n        [ariaLabel]=\"_user.name\"\n        [title]=\"_user.name\"\n        (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n    ></fdp-standard-list-item>\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i3.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ApprovalFlowUserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: { users: "users", selectedUsers: "selectedUsers", isSelectable: "isSelectable" }, outputs: { onUserClick: "onUserClick", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "fdp-approval-flow-user-list" }, providers: [DestroyedService], viewQueries: [{ propertyName: "list", first: true, predicate: ListComponent, descendants: true }, { propertyName: "listItems", predicate: StandardListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fdp-approval-flow-user-list__selected-count\" *ngIf=\"_allSelectedUsers.length\">\n    <ng-container *ngIf=\"_allSelectedUsers.length === 1; else multipleItems\">\n        {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n    </ng-container>\n\n    <ng-template #multipleItems>\n        {{\n            'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate : { count: _allSelectedUsers.length }\n        }}\n    </ng-template>\n</div>\n\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    <fdp-standard-list-item\n        *ngFor=\"let _user of _displayUsers; trackBy: _trackByFn\"\n        [attr.id]=\"_idPrefix + _user.id\"\n        [id]=\"_idPrefix + _user.id\"\n        [avatarSrc]=\"_user.imgUrl\"\n        [avatarTitle]=\"_user.name\"\n        [description]=\"_user.description\"\n        [ariaLabel]=\"_user.name\"\n        [title]=\"_user.name\"\n        (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n    ></fdp-standard-list-item>\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i3.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ApprovalFlowUserListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-approval-flow-user-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'fdp-approval-flow-user-list'
-                    }, template: "<div class=\"fdp-approval-flow-user-list__selected-count\" *ngIf=\"_selectedItems.length\">\n    <ng-container *ngIf=\"_selectedItems.length === 1; else multipleItems\">\n        {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n    </ng-container>\n\n    <ng-template #multipleItems>\n        {{ 'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate: { count: _selectedItems.length } }}\n    </ng-template>\n</div>\n\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    <fdp-standard-list-item\n        *ngFor=\"let _user of _displayUsers; trackBy: _trackByFn\"\n        [attr.id]=\"_idPrefix + _user.id\"\n        [avatarSrc]=\"_user.imgUrl\"\n        [avatarTitle]=\"_user.name\"\n        [description]=\"_user.description\"\n        [ariaLabel]=\"_user.name\"\n        [title]=\"_user.name\"\n        (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n    ></fdp-standard-list-item>\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"] }]
+                    }, providers: [DestroyedService], template: "<div class=\"fdp-approval-flow-user-list__selected-count\" *ngIf=\"_allSelectedUsers.length\">\n    <ng-container *ngIf=\"_allSelectedUsers.length === 1; else multipleItems\">\n        {{ 'platformApprovalFlow.userListSelectedItemsCountSingular' | fdTranslate }}\n    </ng-container>\n\n    <ng-template #multipleItems>\n        {{\n            'platformApprovalFlow.userListSelectedItemsCountPlural' | fdTranslate : { count: _allSelectedUsers.length }\n        }}\n    </ng-template>\n</div>\n\n<fdp-list\n    [selectionMode]=\"isSelectable ? 'multi' : 'none'\"\n    [selection]=\"isSelectable\"\n    [navigationIndicator]=\"true\"\n    [hasByLine]=\"true\"\n    [(ngModel)]=\"_selectedItems\"\n    [selectedItems]=\"_selectedItems\"\n    (selectedItemChange)=\"_onSelect($event)\"\n>\n    <fdp-standard-list-item\n        *ngFor=\"let _user of _displayUsers; trackBy: _trackByFn\"\n        [attr.id]=\"_idPrefix + _user.id\"\n        [id]=\"_idPrefix + _user.id\"\n        [avatarSrc]=\"_user.imgUrl\"\n        [avatarTitle]=\"_user.name\"\n        [description]=\"_user.description\"\n        [ariaLabel]=\"_user.name\"\n        [title]=\"_user.name\"\n        (click)=\"$event.stopPropagation(); onUserClick.emit(_user)\"\n    ></fdp-standard-list-item>\n</fdp-list>\n", styles: [".fdp-approval-flow-user-list{display:block;margin-top:-1rem}.fdp-approval-flow-user-list__selected-count{line-height:2rem;margin:0 -1rem;padding:0 1rem;background:#f2f2f2;background:var(--sapList_HeaderBackground, #f2f2f2)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { users: [{
                 type: Input
             }], selectedUsers: [{
@@ -937,9 +971,7 @@ class ApprovalFlowAddNodeComponent {
     }
     /** @hidden */
     _exitSelectMode() {
-        if (this._selectedApprovers.length && !this._data.node?.approvers.length) {
-            this._selectedApprovers = [];
-        }
+        this._selectedApprovers = this._data.node?.approvers?.length ? [...this._data.node.approvers] : [];
         if (!this._data.isEdit && !this._data.node?.approvalTeamId) {
             this.viewService.resetTeam();
         }