@fundamental-ngx/platform 0.47.4 → 0.48.0-rc.1

package/fesm2022/fundamental-ngx-platform-upload-collection.mjs

@@ -1,1893 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ViewChild, Injectable, EventEmitter, Directive, Input, Output, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
-import { ContentDensityModule } from '@fundamental-ngx/core/content-density';
-import { take, tap, delay, map } from 'rxjs/operators';
-import * as i1 from '@fundamental-ngx/core/dialog';
-import { DialogComponent, DialogHeaderComponent, DialogTitleDirective, DialogBodyComponent, DialogFooterComponent } from '@fundamental-ngx/core/dialog';
-import { isObject, isDataSource, ConvertBytesPipe, DataProvider } from '@fundamental-ngx/platform/shared';
-import { CdkScrollable } from '@angular/cdk/overlay';
-import { NgIf, NgFor, NgTemplateOutlet, NgSwitch, NgSwitchCase, DatePipe } from '@angular/common';
-import { TemplateDirective, parserFileSize, uuidv4 as uuidv4$1 } from '@fundamental-ngx/cdk/utils';
-import { ButtonBarComponent, BarLeftDirective, BarElementDirective, BarRightDirective } from '@fundamental-ngx/core/bar';
-import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { IconComponent } from '@fundamental-ngx/core/icon';
-import { ListComponent, ListItemComponent, ListTitleDirective, ListLinkDirective, ListIconDirective } from '@fundamental-ngx/core/list';
-import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
-import { TitleComponent } from '@fundamental-ngx/core/title';
-import { FdTranslatePipe } from '@fundamental-ngx/i18n';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { FormControlComponent, FormItemComponent, FormLabelComponent, FormInputMessageGroupComponent, FormMessageComponent } from '@fundamental-ngx/core/form';
-import { ObjectStatusComponent } from '@fundamental-ngx/core/object-status';
-import { BehaviorSubject, Subject, of } from 'rxjs';
-import { BreadcrumbComponent, BreadcrumbItemComponent } from '@fundamental-ngx/core/breadcrumb';
-import { BusyIndicatorComponent } from '@fundamental-ngx/core/busy-indicator';
-import { FileUploaderSelectDirective } from '@fundamental-ngx/core/file-uploader';
-import { InputGroupComponent } from '@fundamental-ngx/core/input-group';
-import { LinkComponent } from '@fundamental-ngx/core/link';
-import { MessageStripComponent } from '@fundamental-ngx/core/message-strip';
-import { PaginationComponent } from '@fundamental-ngx/core/pagination';
-import { ToolbarComponent, ToolbarSpacerDirective, ToolbarItemDirective } from '@fundamental-ngx/core/toolbar';
-import { warnOnce, uuidv4 } from '@fundamental-ngx/core/utils';
-import { MenuTriggerDirective, MenuComponent, MenuItemComponent } from '@fundamental-ngx/platform/menu';
-import { MenuButtonComponent } from '@fundamental-ngx/platform/menu-button';
-import { ColumnAlign, SelectionMode, TableComponent, TableColumnComponent } from '@fundamental-ngx/platform/table';
-import { TableInitialStateDirective, FdpCellDef, FdpTableCell, FdpHeaderCellDef, FdpTableHeader, TableDataSourceDirective, TableHeaderResizerDirective } from '@fundamental-ngx/platform/table-helpers';
-
-class NewFolderComponent {
-    /** @hidden */
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-        /**
-         * @hidden
-         * The current folder in what need to create a new one
-         */
-        this._currentFolder = this.dialogRef.data.currentFolder;
-        /** @hidden */
-        this._maxFilenameLength = this.dialogRef.data.maxFilenameLength;
-        /** @hidden */
-        this._newFolderName = 'New Folder';
-    }
-    /** @hidden */
-    ngAfterViewInit() {
-        const el = this.formControl.elementRef.nativeElement;
-        if (el) {
-            el.focus();
-            this._setSelectionRange(el, 0, this._newFolderName.length);
-        }
-    }
-    /** @hidden */
-    _setSelectionRange(el, selectionStart, selectionEnd) {
-        const direction = el.selectionDirection;
-        el.setSelectionRange(selectionStart, selectionEnd, direction || undefined);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NewFolderComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: NewFolderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "formControl", first: true, predicate: FormControlComponent, descendants: true }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 class=\"fd-title--bold\" fd-dialog-title id=\"fdp-upload-collection-new-folder-title\" fd-title>\n            {{ 'platformUploadCollection.newFolderTitle' | fdTranslate }}\n        </h1>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <div fd-form-item>\n            <label fd-form-label for=\"fdp-upload-collection-new-folder-input\">\n                {{\n                    (_currentFolder\n                        ? 'platformUploadCollection.newFolderAtFolderInputLabel'\n                        : 'platformUploadCollection.newFolderAtRootInputLabel'\n                    ) | fdTranslate : { folderName: _currentFolder?.name || '' }\n                }}:\n            </label>\n            <input\n                #formControl\n                fd-form-control\n                fdkInitialFocus\n                id=\"fdp-upload-collection-new-folder-input\"\n                type=\"text\"\n                [(ngModel)]=\"_newFolderName\"\n                [placeholder]=\"'platformUploadCollection.newFolderInputPlaceholder' | fdTranslate\"\n            />\n            <span\n                *ngIf=\"_newFolderName.length > _maxFilenameLength\"\n                fd-object-status\n                status=\"negative\"\n                [label]=\"'platformUploadCollection.newFolderInputErrorLabel' | fdTranslate\"\n                [attr.title]=\"'platformUploadCollection.newFolderInputErrorLabel' | fdTranslate\"\n                [attr.aria-label]=\"'platformUploadCollection.newFolderInputErrorLabel' | fdTranslate\"\n            ></span>\n        </div>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformUploadCollection.newFolderDialogCreateBtnLabel' | fdTranslate\"\n            [disabled]=\"_newFolderName.length > _maxFilenameLength\"\n            (click)=\"dialogRef.close(_newFolderName)\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformUploadCollection.newFolderDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"dialogRef.dismiss()\"\n        >\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fd-title--bold{font-weight:700}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: DialogTitleDirective, selector: "[fd-dialog-title]", inputs: ["id"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: NewFolderComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        DialogComponent,
-                        DialogHeaderComponent,
-                        TitleComponent,
-                        DialogTitleDirective,
-                        CdkScrollable,
-                        ScrollbarDirective,
-                        DialogBodyComponent,
-                        FormItemComponent,
-                        FormLabelComponent,
-                        FormsModule,
-                        FormControlComponent,
-                        NgIf,
-                        ObjectStatusComponent,
-                        DialogFooterComponent,
-                        ButtonBarComponent,
-                        FdTranslatePipe
-                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 class=\"fd-title--bold\" fd-dialog-title id=\"fdp-upload-collection-new-folder-title\" fd-title>\n            {{ 'platformUploadCollection.newFolderTitle' | fdTranslate }}\n        </h1>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <div fd-form-item>\n            <label fd-form-label for=\"fdp-upload-collection-new-folder-input\">\n                {{\n                    (_currentFolder\n                        ? 'platformUploadCollection.newFolderAtFolderInputLabel'\n                        : 'platformUploadCollection.newFolderAtRootInputLabel'\n                    ) | fdTranslate : { folderName: _currentFolder?.name || '' }\n                }}:\n            </label>\n            <input\n                #formControl\n                fd-form-control\n                fdkInitialFocus\n                id=\"fdp-upload-collection-new-folder-input\"\n                type=\"text\"\n                [(ngModel)]=\"_newFolderName\"\n                [placeholder]=\"'platformUploadCollection.newFolderInputPlaceholder' | fdTranslate\"\n            />\n            <span\n                *ngIf=\"_newFolderName.length > _maxFilenameLength\"\n                fd-object-status\n                status=\"negative\"\n                [label]=\"'platformUploadCollection.newFolderInputErrorLabel' | fdTranslate\"\n                [attr.title]=\"'platformUploadCollection.newFolderInputErrorLabel' | fdTranslate\"\n                [attr.aria-label]=\"'platformUploadCollection.newFolderInputErrorLabel' | fdTranslate\"\n            ></span>\n        </div>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformUploadCollection.newFolderDialogCreateBtnLabel' | fdTranslate\"\n            [disabled]=\"_newFolderName.length > _maxFilenameLength\"\n            (click)=\"dialogRef.close(_newFolderName)\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformUploadCollection.newFolderDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"dialogRef.dismiss()\"\n        >\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fd-title--bold{font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DialogRef }]; }, propDecorators: { formControl: [{
-                type: ViewChild,
-                args: [FormControlComponent]
-            }] } });
-
-class MoveToComponent {
-    /** @hidden */
-    constructor(dialogRef, _dialogService, _cd) {
-        this.dialogRef = dialogRef;
-        this._dialogService = _dialogService;
-        this._cd = _cd;
-        /**
-         * List of upload collection items
-         */
-        this.items = this.dialogRef.data.items;
-        /**
-         * The current folder in what need to create a new one
-         */
-        this.originalFolder = this.dialogRef.data.currentFolder;
-        /** @hidden */
-        this.movableFolders = this.dialogRef.data.movableFolders;
-        /** @hidden */
-        this._maxFilenameLength = this.dialogRef.data.maxFilenameLength;
-        /** @hidden */
-        this._currentFolder = this.originalFolder && { ...this.originalFolder };
-        /** @hidden */
-        this._foldersList = [];
-    }
-    /** @hidden */
-    ngOnInit() {
-        this._init(this._currentFolder ? this._currentFolder.files : this.items);
-    }
-    /** @hidden */
-    _goToParentFolder() {
-        this.selectedFolder = null;
-        this._currentFolder = this._getParentFolderByCurrentFolderId(this._currentFolder?.documentId);
-        this._init(this._currentFolder ? this._currentFolder.files : this.items);
-        this._cd.detectChanges();
-    }
-    /** @hidden */
-    _close() {
-        this.dialogRef.dismiss();
-    }
-    /** @hidden */
-    _confirm() {
-        this.dialogRef.close({
-            selectedFolder: this.selectedFolder || this._currentFolder
-        });
-    }
-    /** @hidden */
-    _openFolder(folder) {
-        this.selectedFolder = null;
-        this._currentFolder = folder;
-        this._init(folder.files);
-        this._cd.detectChanges();
-    }
-    /** @hidden */
-    _selectFolder(folder) {
-        this.selectedFolder = folder;
-    }
-    /** @hidden */
-    _hasFolders(items) {
-        return items.some((item) => item.type === 'folder');
-    }
-    /** @hidden */
-    _newFolder() {
-        const dialogRef = this._dialogService.open(NewFolderComponent, {
-            responsivePadding: true,
-            backdropClickCloseable: false,
-            height: '350px',
-            backdropClass: 'fdp-upload-collection-dialig-no-bg',
-            data: {
-                currentFolder: this._currentFolder,
-                maxFilenameLength: this._maxFilenameLength
-            }
-        });
-        dialogRef.afterClosed.pipe(take(1)).subscribe((folderName) => {
-            this.dialogRef.close({
-                parentFolderId: this._currentFolder?.documentId,
-                selectedFolder: null,
-                folderName
-            });
-        });
-    }
-    /** @hidden */
-    _init(items) {
-        this._foldersList = items.filter((item) => item.type === 'folder' && !this.movableFolders?.some((folder) => folder.documentId === item.documentId));
-    }
-    /** @hidden */
-    _getParentFolderByCurrentFolderId(documentId) {
-        let foundObj;
-        if (documentId) {
-            JSON.stringify(this.items, (_, nestedValue) => {
-                if (!isObject(nestedValue) || nestedValue.type === 'file' || !nestedValue.files) {
-                    return nestedValue;
-                }
-                if (nestedValue.files.some((item) => item.documentId === documentId)) {
-                    foundObj = nestedValue;
-                }
-                return nestedValue;
-            });
-        }
-        return foundObj;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MoveToComponent, deps: [{ token: i1.DialogRef }, { token: i1.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MoveToComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h1 class=\"fd-title--bold\" *ngIf=\"!_currentFolder\" fd-title>\n                        {{ 'platformUploadCollection.moveToTitle' | fdTranslate }}\n                    </h1>\n                    <ng-container *ngIf=\"_currentFolder\">\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"navigation-left-arrow\"\n                            (click)=\"_goToParentFolder()\"\n                        ></button>\n                        <h1 fd-title>\n                            <span>{{ 'platformUploadCollection.moveToTitleFolder' | fdTranslate }}</span>\n                            {{ _currentFolder.name }}\n                        </h1>\n                    </ng-container>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"'platformUploadCollection.moveToNewFolderBtnLabel' | fdTranslate\"\n                        (click)=\"_newFolder()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body class=\"fd-dialog__body--no-horizontal-padding\">\n        <ul fd-list>\n            <li *ngIf=\"!_currentFolder\" fd-list-item class=\"fd-list__item--title-background\">\n                <span fd-list-title>{{ 'platformUploadCollection.moveToAllFilesSubHeaderLabel' | fdTranslate }}</span>\n            </li>\n            <li\n                fd-list-item\n                *ngFor=\"let folder of _foldersList\"\n                [selected]=\"selectedFolder?.documentId === folder.documentId\"\n            >\n                <a fd-list-link (click)=\"_hasFolders(folder.files) ? _openFolder(folder) : _selectFolder(folder)\">\n                    <fd-icon class=\"fdp-upload-collection__fd-icon\" glyph=\"folder-blank\"></fd-icon>\n                    <span fd-list-title>{{ folder.name }}</span>\n                    <i *ngIf=\"_hasFolders(folder.files)\" fd-list-icon glyph=\"slim-arrow-right\"></i>\n                </a>\n            </li>\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            type=\"submit\"\n            [disabled]=\"\n                !(\n                    (selectedFolder && originalFolder?.documentId !== selectedFolder.documentId) ||\n                    (!selectedFolder && originalFolder?.documentId !== _currentFolder?.documentId)\n                )\n            \"\n            (click)=\"_confirm()\"\n        >\n            {{ 'platformUploadCollection.moveToConfirmBtn' | fdTranslate }}\n        </fd-button-bar>\n        <fd-button-bar (click)=\"_close()\">\n            {{ 'platformUploadCollection.moveToCloseBtn' | fdTranslate }}\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fd-list__item--title-background{background-color:var(--sapList_HeaderBackground)}.fd-dialog__body--no-horizontal-padding{padding-left:0!important;padding-right:0!important}.fd-title--bold{font-weight:700}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MoveToComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        DialogComponent,
-                        DialogHeaderComponent,
-                        TemplateDirective,
-                        BarLeftDirective,
-                        BarElementDirective,
-                        NgIf,
-                        TitleComponent,
-                        ButtonComponent,
-                        BarRightDirective,
-                        CdkScrollable,
-                        ScrollbarDirective,
-                        DialogBodyComponent,
-                        ListComponent,
-                        ListItemComponent,
-                        ListTitleDirective,
-                        NgFor,
-                        ListLinkDirective,
-                        IconComponent,
-                        ListIconDirective,
-                        DialogFooterComponent,
-                        ButtonBarComponent,
-                        FdTranslatePipe
-                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h1 class=\"fd-title--bold\" *ngIf=\"!_currentFolder\" fd-title>\n                        {{ 'platformUploadCollection.moveToTitle' | fdTranslate }}\n                    </h1>\n                    <ng-container *ngIf=\"_currentFolder\">\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"navigation-left-arrow\"\n                            (click)=\"_goToParentFolder()\"\n                        ></button>\n                        <h1 fd-title>\n                            <span>{{ 'platformUploadCollection.moveToTitleFolder' | fdTranslate }}</span>\n                            {{ _currentFolder.name }}\n                        </h1>\n                    </ng-container>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button\n                        fd-button\n                        [label]=\"'platformUploadCollection.moveToNewFolderBtnLabel' | fdTranslate\"\n                        (click)=\"_newFolder()\"\n                    ></button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body class=\"fd-dialog__body--no-horizontal-padding\">\n        <ul fd-list>\n            <li *ngIf=\"!_currentFolder\" fd-list-item class=\"fd-list__item--title-background\">\n                <span fd-list-title>{{ 'platformUploadCollection.moveToAllFilesSubHeaderLabel' | fdTranslate }}</span>\n            </li>\n            <li\n                fd-list-item\n                *ngFor=\"let folder of _foldersList\"\n                [selected]=\"selectedFolder?.documentId === folder.documentId\"\n            >\n                <a fd-list-link (click)=\"_hasFolders(folder.files) ? _openFolder(folder) : _selectFolder(folder)\">\n                    <fd-icon class=\"fdp-upload-collection__fd-icon\" glyph=\"folder-blank\"></fd-icon>\n                    <span fd-list-title>{{ folder.name }}</span>\n                    <i *ngIf=\"_hasFolders(folder.files)\" fd-list-icon glyph=\"slim-arrow-right\"></i>\n                </a>\n            </li>\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            type=\"submit\"\n            [disabled]=\"\n                !(\n                    (selectedFolder && originalFolder?.documentId !== selectedFolder.documentId) ||\n                    (!selectedFolder && originalFolder?.documentId !== _currentFolder?.documentId)\n                )\n            \"\n            (click)=\"_confirm()\"\n        >\n            {{ 'platformUploadCollection.moveToConfirmBtn' | fdTranslate }}\n        </fd-button-bar>\n        <fd-button-bar (click)=\"_close()\">\n            {{ 'platformUploadCollection.moveToCloseBtn' | fdTranslate }}\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fd-list__item--title-background{background-color:var(--sapList_HeaderBackground)}.fd-dialog__body--no-horizontal-padding{padding-left:0!important;padding-right:0!important}.fd-title--bold{font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i1.DialogService }, { type: i0.ChangeDetectorRef }]; } });
-
-class FilesValidatorService {
-    /**
-     * Method that validates files passed. It is based on
-     * @param files File[]
-     * @param params ValidateFilesParams
-     */
-    validation(files, { maxFileNameLength, fileTypes, maxFileSize, mimeTypes }) {
-        return files.reduce((res, file) => {
-            if ((fileTypes && fileTypes.length > 0 && this._checkByFileExtension(file, fileTypes)) ||
-                (mimeTypes && mimeTypes.length > 0 && this._checkByMimeType(file, mimeTypes))) {
-                if (!res.typeMismatch) {
-                    res.typeMismatch = [];
-                }
-                res.typeMismatch.push(file);
-                return res;
-            }
-            if (maxFileSize) {
-                const maxSize = parserFileSize(maxFileSize);
-                if (file.size > maxSize) {
-                    if (!res.fileSizeExceed) {
-                        res.fileSizeExceed = [];
-                    }
-                    res.fileSizeExceed.push(file);
-                    return res;
-                }
-            }
-            if (typeof maxFileNameLength === 'number' && this._checkByFileNameLength(file, maxFileNameLength)) {
-                if (!res.filenameLengthExceed) {
-                    res.filenameLengthExceed = [];
-                }
-                res.filenameLengthExceed.push(file);
-                return res;
-            }
-            if (!res.validFiles) {
-                res.validFiles = [];
-            }
-            res.validFiles.push(file);
-            return res;
-        }, {});
-    }
-    /** @hidden */
-    _checkByFileExtension(file, fileTypes) {
-        const fileNameSplit = file.name.split('.');
-        const extension = fileNameSplit[fileNameSplit.length - 1].toLocaleLowerCase();
-        return !fileTypes.some((type) => type.replace('.', '').toLowerCase() === extension);
-    }
-    /** @hidden */
-    _checkByMimeType(file, mimeTypes) {
-        return !mimeTypes.some((type) => type.toLowerCase() === file.type);
-    }
-    /** @hidden */
-    _checkByFileNameLength(file, maxFileNameLength) {
-        const fileNameSplit = file.name.split('.');
-        fileNameSplit.pop();
-        const fileName = fileNameSplit.join('.');
-        return fileName.length > maxFileNameLength;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FilesValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FilesValidatorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FilesValidatorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * Directive that handles the drag and drop feature of the file input.
- */
-class UploadCollectionDragnDropDirective {
-    /** @hidden */
-    constructor(_elementRef, _filesValidatorService) {
-        this._elementRef = _elementRef;
-        this._filesValidatorService = _filesValidatorService;
-        /** Whether multiple files can be dropped at once. */
-        this.multiple = true;
-        /**
-         * Defines the allowed file types for the upload.
-         * The chosen files will be checked against an array of file types.
-         * If at least one file does not fit the file type requirements,
-         * the upload is prevented. Example: ["jpg", "png", "bmp"].
-         */
-        this.fileTypes = [];
-        /**
-         * Defines the allowed MIME types of files to be uploaded.
-         * The chosen files will be checked against an array of MIME types.
-         * If at least one file does not fit the MIME type requirements, the upload is prevented.
-         * Example: mimeTypes ["image/png", "image/jpeg"].
-         */
-        this.mimeTypes = [];
-        /** Whether selecting of new files is disabled. */
-        this.disabled = false;
-        /** Whether drag and drop is enabled. Disables this directive. */
-        this.dragndrop = true;
-        /** Event emitted when files are dropped. Passes back an array of files. */
-        this.fileChanged = new EventEmitter();
-        /** Event emitted when the dragged file enters the dropzone or exits from it. */
-        this.cancel = new EventEmitter();
-        /** Event emitted when the dragged file enters the dropzone. */
-        this.onDropzone = new EventEmitter();
-        /** @hidden */
-        this.dropzonePreviousState = null;
-        const element = this._elementRef.nativeElement;
-        this.elementSelector = element.id ? `#${element.id}` : '';
-        this.elementSelector += element.className ? `.${element.className.split(' ').join('.')}` : '';
-        if (!this.elementSelector) {
-            this.elementSelector = `${element.localName}[fdpUploadCollectionDragnDrop]`;
-        }
-    }
-    /** @hidden */
-    onWindowDragover(event) {
-        if (!this.dragndrop || this.disabled) {
-            return;
-        }
-        this._muteEvent(event);
-        const isDragDropArea = !!(event.target instanceof HTMLElement && event.target.closest(this.elementSelector));
-        if (this.dropzonePreviousState !== isDragDropArea) {
-            this.dropzonePreviousState = isDragDropArea;
-            this.onDropzone.emit(isDragDropArea);
-        }
-    }
-    /** @hidden */
-    onDragLeave(event) {
-        if (!this.dragndrop || this.disabled) {
-            return;
-        }
-        const leavePositions = [event.screenX, event.screenY, event.clientX, event.clientY, event.pageX, event.pageY];
-        if (!leavePositions.some((item) => item > 0)) {
-            this._muteEvent(event);
-            this.dropzonePreviousState = null;
-            this.cancel.emit();
-        }
-    }
-    /** @hidden */
-    onDrop(event) {
-        if (!this.dragndrop || this.disabled) {
-            return;
-        }
-        this.dropzonePreviousState = null;
-        this.cancel.emit();
-        const isDragDropArea = !!(event.target instanceof HTMLElement && event.target.closest(this.elementSelector));
-        if (!isDragDropArea) {
-            return;
-        }
-        this._muteEvent(event);
-        const rawFiles = event.dataTransfer?.files ?? [];
-        const files = Array.from(rawFiles);
-        const output = this._filesValidatorService.validation(files, {
-            maxFileSize: this.maxFileSize,
-            maxFileNameLength: this.maxFilenameLength,
-            fileTypes: this.fileTypes,
-            mimeTypes: this.mimeTypes
-        });
-        this.fileChanged.emit(output);
-    }
-    /** @hidden */
-    _muteEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UploadCollectionDragnDropDirective, deps: [{ token: i0.ElementRef }, { token: FilesValidatorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: UploadCollectionDragnDropDirective, isStandalone: true, selector: "[fdpUploadCollectionDragnDrop]", inputs: { multiple: "multiple", fileTypes: "fileTypes", maxFileSize: "maxFileSize", maxFilenameLength: "maxFilenameLength", mimeTypes: "mimeTypes", disabled: "disabled", dragndrop: "dragndrop" }, outputs: { fileChanged: "fileChanged", cancel: "cancel", onDropzone: "onDropzone" }, host: { listeners: { "window:dragover": "onWindowDragover($event)", "window:dragleave": "onDragLeave($event)", "window:drop": "onDrop($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UploadCollectionDragnDropDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fdpUploadCollectionDragnDrop]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FilesValidatorService }]; }, propDecorators: { multiple: [{
-                type: Input
-            }], fileTypes: [{
-                type: Input
-            }], maxFileSize: [{
-                type: Input
-            }], maxFilenameLength: [{
-                type: Input
-            }], mimeTypes: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], dragndrop: [{
-                type: Input
-            }], fileChanged: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], onDropzone: [{
-                type: Output
-            }], onWindowDragover: [{
-                type: HostListener,
-                args: ['window:dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['window:dragleave', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['window:drop', ['$event']]
-            }] } });
-
-function _groupByTypeAndCount(items) {
-    return items.reduce((res, item) => {
-        res[item.type] += 1;
-        return res;
-    }, { file: 0, folder: 0 });
-}
-/** @hidden */
-function generateMessageStripeData(type, options) {
-    const newMessage = {
-        messageType: type,
-        messageStripType: options.type,
-        payload: options.payload
-    };
-    const items = options.payload.items;
-    if (items && items.length > 0) {
-        newMessage.count = _groupByTypeAndCount(items);
-    }
-    return newMessage;
-}
-
-var UploadCollectionItemStatus;
-(function (UploadCollectionItemStatus) {
-    UploadCollectionItemStatus["LOADING"] = "loading";
-    UploadCollectionItemStatus["SUCCESSFUL"] = "successful";
-    UploadCollectionItemStatus["UNSUCCESSFUL"] = "unsuccessful";
-})(UploadCollectionItemStatus || (UploadCollectionItemStatus = {}));
-var MessageStripType;
-(function (MessageStripType) {
-    MessageStripType["WARNING"] = "warning";
-    MessageStripType["SUCCESS"] = "success";
-    MessageStripType["INFORMATION"] = "information";
-    MessageStripType["ERROR"] = "error";
-})(MessageStripType || (MessageStripType = {}));
-var MessageType;
-(function (MessageType) {
-    MessageType[MessageType["CREATE"] = 0] = "CREATE";
-    MessageType[MessageType["REMOVE"] = 1] = "REMOVE";
-    MessageType[MessageType["MOVE"] = 2] = "MOVE";
-    MessageType[MessageType["UPDATE_VERSION"] = 3] = "UPDATE_VERSION";
-    MessageType[MessageType["FILE_RENAME"] = 4] = "FILE_RENAME";
-    MessageType[MessageType["TYPE_MISMATCH"] = 5] = "TYPE_MISMATCH";
-    MessageType[MessageType["FILE_NAME_LENGTH"] = 6] = "FILE_NAME_LENGTH";
-    MessageType[MessageType["FILE_SIZE"] = 7] = "FILE_SIZE";
-})(MessageType || (MessageType = {}));
-class FilenameLengthExceedEvent {
-    /**
-     * Filename length exceed event payload
-     * @param source Upload Collection component
-     * @param payload Files
-     */
-    constructor(source, payload) {
-        this.source = source;
-        this.payload = payload;
-    }
-}
-class TypeMismatchEvent {
-    /**
-     * Type mismatch event
-     * @param source Upload Collection component
-     * @param payload Files
-     */
-    constructor(source, payload) {
-        this.source = source;
-        this.payload = payload;
-    }
-}
-class FileSizeExceedEvent {
-    /**
-     * Filesize exceed event
-     * @param source Upload Collection component
-     * @param payload Files
-     */
-    constructor(source, payload) {
-        this.source = source;
-        this.payload = payload;
-    }
-}
-
-let randomId = 0;
-/**
- * @deprecated
- * UploadCollection component is deprecated since version 0.40.0
- */
-class UploadCollectionComponent {
-    /** Defines the number of items on the page */
-    set itemsPerPage(value) {
-        if (typeof value === 'number') {
-            this._itemsPerPage = value;
-            this._match();
-            return;
-        }
-        const defaultValue = value.find((item) => item.default);
-        this._itemsPerPageOptions = value;
-        if (defaultValue) {
-            this._itemsPerPage = defaultValue.label;
-            this._match();
-            return;
-        }
-        this._itemsPerPage = value[Math.round(value.length / 2)].label;
-        this._match();
-    }
-    get itemsPerPage() {
-        return this._itemsPerPage;
-    }
-    /** List of items */
-    set dataSource(value) {
-        if (value) {
-            this._initializeDS(value);
-        }
-    }
-    get dataSource() {
-        return this._dataSource;
-    }
-    /** @hidden */
-    constructor(_dialogService, _filesValidatorService, _cdr, _injector) {
-        this._dialogService = _dialogService;
-        this._filesValidatorService = _filesValidatorService;
-        this._cdr = _cdr;
-        this._injector = _injector;
-        /** ID of the upload collection element. If none is provided, one will be generated. */
-        this.id = `fdp-upload-collection-id-${randomId++}`;
-        /**
-         * Defines the allowed file types for the upload.
-         * The chosen files will be checked against an array of file types.
-         * If at least one file does not fit the file type requirements,
-         * the upload is prevented. Example: ["jpg", "png", "bmp"].
-         */
-        this.fileTypes = [];
-        /**
-         * Defines the allowed MIME types of files to be uploaded.
-         * The chosen files will be checked against an array of MIME types.
-         * If at least one file does not fit the MIME type requirements, the upload is prevented.
-         * Example: mimeTypes ["image/png", "image/jpeg"].
-         */
-        this.mimeTypes = [];
-        /** All action buttons will be disabled */
-        this.disabled = false;
-        /** All action buttons will be invisible */
-        this.readonly = false;
-        /** Allows to support hierarchy */
-        this.hierarchy = true;
-        /** Allows to show/hide pagination */
-        this.enablePagination = true;
-        /**
-         * If true, the button that is used to terminate the instant file upload gets visible.
-         * The button normally appears when a file is being uploaded.
-         */
-        this.terminationEnabled = true;
-        /** Gives to select multiple files from the same folder and then upload them. */
-        this.multiple = true;
-        /** Allows to show/hide search */
-        this.showSearch = true;
-        /**
-         * Allows to use the same name for a file when editing the file name.
-         * 'Same name' refers to an already existing file name in the list.
-         * */
-        this.sameFileNameAllowed = false;
-        /**
-         * The event is triggered when the file type or the MIME type don't match the permitted types
-         * (only if the fileTypes property or the mimeTypes property are provided by the application).
-         */
-        this.typeMismatch = new EventEmitter();
-        /**
-         * The event is triggered when the name of a chosen file is longer than the value specified
-         * with the maxFilenameLength property (only if provided by the application).
-         */
-        this.filenameLengthExceed = new EventEmitter();
-        /**
-         * The event is triggered when the file size of an uploaded file is exceeded
-         * (only if the maxFileSize property was provided by the application).
-         */
-        this.fileSizeExceed = new EventEmitter();
-        /** @hidden */
-        this._uploadCollectionItemStatus = UploadCollectionItemStatus;
-        /** @hidden */
-        this._breadcrumbList = [];
-        /** @hidden */
-        this._currentPage = 1;
-        /** @hidden */
-        this._itemsPerPage = 10;
-        /** @hidden */
-        this._itemsPerPageOptions = [];
-        /** @hidden */
-        this._totalItems = 0;
-        /** @hidden */
-        this._countShowedItems = 0;
-        /** @hidden */
-        this._countNotShowedItems = 0;
-        /** @hidden
-         * List of currently displayed items
-         */
-        this._visibleList$ = new BehaviorSubject([]);
-        /** @hidden */
-        this.selectedItems = [];
-        /** @hidden */
-        this._searchText = '';
-        /** @hidden */
-        this._showDragDropArea = false;
-        /** @hidden */
-        this._onDragDropArea = false;
-        /** @hidden */
-        this._messageType = MessageType;
-        /** @hidden */
-        this._messageStripType = MessageStripType;
-        /** @hidden */
-        this._columnAlign = ColumnAlign;
-        /** @hidden */
-        this._selectionMode = SelectionMode;
-        /** @hidden */
-        /** @hidden */
-        this._contentDensityManuallySet = false;
-        /** @hidden */
-        this._imageExtensions = [
-            '.apng',
-            '.bmp',
-            '.gif',
-            '.ico',
-            '.cur',
-            '.jpg',
-            '.jpeg',
-            '.jfif',
-            '.pjpeg',
-            '.pjp',
-            '.png',
-            '.svg',
-            '.tif',
-            '.tiff',
-            '.webp',
-            '.flif',
-            '.cr2',
-            '.jxr',
-            '.psd',
-            '.bpg',
-            '.jp2',
-            '.jpm',
-            '.jpx',
-            '.heic',
-            '.dcm'
-        ];
-        /** @hidden */
-        this._onDestroy$ = new Subject();
-        warnOnce('The Upload Collection component is deprecated and will be removed in next release.');
-    }
-    /** @hidden */
-    ngOnChanges(changes) {
-        if (changes.contentDensity) {
-            this._contentDensityManuallySet = true;
-        }
-    }
-    /** @hidden */
-    ngOnDestroy() {
-        this._onDestroy$.next();
-        this._onDestroy$.complete();
-        this._dsSubscription?.unsubscribe();
-        this.dataSource.close();
-    }
-    /** Show meessage for types NEW FOLDER CREATE, REMOVE, MOVE TO, UPDATE_VERSION, FILE_RENAMED */
-    showMessage(type, options) {
-        this._message = generateMessageStripeData(type, options);
-    }
-    /**
-     * @hidden
-     * Opens the file selector.
-     */
-    _fileNameChange(e, currentItem) {
-        const input = e.target;
-        const itemName = input.value.trim();
-        const newName = currentItem.type === 'file' ? `${itemName}.${currentItem.name.split('.').pop()}` : itemName;
-        if (currentItem.name === newName) {
-            return;
-        }
-        if (this.maxFilenameLength && itemName.length > this.maxFilenameLength) {
-            const renamedItem = {
-                ...currentItem,
-                name: newName
-            };
-            const payload = {
-                items: [renamedItem]
-            };
-            const filenameLengthEvent = new FilenameLengthExceedEvent(this, payload);
-            this.showMessage(MessageType.FILE_NAME_LENGTH, { payload, type: MessageStripType.ERROR });
-            this.filenameLengthExceed.emit(filenameLengthEvent);
-            return;
-        }
-        if (currentItem.sameFilenameState) {
-            return;
-        }
-        const data = {
-            parentFolderId: this._getCurrentFolderId(),
-            fileName: newName,
-            item: { ...currentItem }
-        };
-        this.dataSource
-            .fileRenamed(data)
-            .pipe(tap(() => {
-            this.selectedItems = [];
-            this._match();
-        }))
-            .subscribe({
-            next: () => {
-                this.showMessage(MessageType.FILE_RENAME, {
-                    payload: data,
-                    type: MessageStripType.SUCCESS
-                });
-            },
-            error: () => {
-                this.showMessage(MessageType.FILE_RENAME, {
-                    payload: data,
-                    type: MessageStripType.ERROR
-                });
-            }
-        });
-    }
-    /** @hidden */
-    _checkName(e, currentItem) {
-        const input = e.target;
-        const itemName = input.value.trim();
-        const newName = currentItem.type === 'file' ? `${itemName}.${currentItem.name.split('.').pop()}` : itemName;
-        const nameAlreadyExists = this._getList().some((item) => currentItem.documentId !== item.documentId && item.name === newName);
-        if (!this.sameFileNameAllowed && nameAlreadyExists) {
-            currentItem.sameFilenameState = 'error';
-            return;
-        }
-        delete currentItem.sameFilenameState;
-    }
-    /** @hidden
-     * Opens the file selector.
-     */
-    _openUploadFiles() {
-        const input = this._uploadFilesRef.nativeElement;
-        if (input) {
-            input.click();
-        }
-    }
-    /** @hidden
-     * Opens the update file version selector.
-     */
-    _openUpdateFileVersion() {
-        if (this.disabled) {
-            return;
-        }
-        const input = this._updateVersionRef.nativeElement;
-        if (input) {
-            this._currentUpdateFileVersion = this._activeItem;
-            input.click();
-        }
-    }
-    /** @hidden */
-    _selectHandler(files) {
-        this._validateFiles(files);
-        this._propagateFiles();
-    }
-    /** @hidden */
-    _handleDrop(output) {
-        this._validatedFiles = output;
-        this._propagateFiles();
-    }
-    /** @hidden */
-    _openNewFolderDialog() {
-        const dialogRef = this._dialogService.open(NewFolderComponent, {
-            responsivePadding: true,
-            backdropClickCloseable: false,
-            height: '320px',
-            data: {
-                currentFolder: this._getCurrentFolder(),
-                maxFilenameLength: this.maxFilenameLength
-            }
-        });
-        dialogRef.afterClosed.pipe(take(1)).subscribe((folderName) => {
-            const folder = this._generateTemporaryNewFolder(folderName);
-            const parentFolderId = this._getCurrentFolderId();
-            const data = {
-                parentFolderId,
-                folder: { ...folder }
-            };
-            this._findParentFolderAndAddTemporaryFiles(parentFolderId, [folder]);
-            this.dataSource
-                .newFolder(data)
-                .pipe(tap(() => this._match()))
-                .subscribe({
-                next: () => {
-                    this.showMessage(MessageType.CREATE, {
-                        payload: data,
-                        type: MessageStripType.SUCCESS
-                    });
-                },
-                error: () => {
-                    this.showMessage(MessageType.CREATE, {
-                        payload: data,
-                        type: MessageStripType.ERROR
-                    });
-                }
-            });
-        });
-    }
-    /** @hidden */
-    _moveToClicked(multiple) {
-        if (this.disabled) {
-            return;
-        }
-        const _activeItem = this._activeItem;
-        const currentFolder = this._getCurrentFolder();
-        const movableItems = multiple ? this.selectedItems : _activeItem ? [_activeItem] : [];
-        const dialogRef = this._dialogService.open(MoveToComponent, {
-            responsivePadding: true,
-            verticalPadding: false,
-            backdropClickCloseable: false,
-            height: '350px',
-            data: {
-                items: this.dataSource.dataProvider.items,
-                currentFolder,
-                movableFolders: movableItems.filter((item) => item?.type === 'folder'),
-                maxFilenameLength: this.maxFilenameLength
-            }
-        }, this._injector);
-        dialogRef.afterClosed.pipe(take(1)).subscribe(({ selectedFolder, parentFolderId, folderName }) => {
-            const payload = {
-                from: currentFolder,
-                to: selectedFolder,
-                items: movableItems
-            };
-            if (folderName) {
-                payload.newFolder = {
-                    parentFolderId,
-                    folderName
-                };
-            }
-            this.dataSource
-                .moveTo(payload)
-                .pipe(tap(() => {
-                this.selectedItems = [];
-                this._match();
-            }))
-                .subscribe({
-                next: () => {
-                    this.showMessage(MessageType.MOVE, {
-                        payload,
-                        type: MessageStripType.SUCCESS
-                    });
-                },
-                error: () => {
-                    this.showMessage(MessageType.MOVE, {
-                        payload,
-                        type: MessageStripType.ERROR
-                    });
-                }
-            });
-        }, (error) => {
-            console.error(error);
-        });
-    }
-    /** @hidden */
-    _downloadClicked(multiple) {
-        if (this.disabled) {
-            return;
-        }
-        const _activeItem = { ...this._activeItem };
-        const items = (multiple ? this.selectedItems : [_activeItem]);
-        this.dataSource.download({ items }).subscribe();
-    }
-    /** @hidden */
-    _remove(multiple) {
-        if (this.disabled) {
-            return;
-        }
-        const _activeItem = { ...this._activeItem };
-        const items = multiple ? this.selectedItems : [_activeItem];
-        const data = { parentFolderId: this._getCurrentFolderId(), items };
-        this.dataSource
-            .delete(data)
-            .pipe(tap(() => {
-            this.selectedItems = [];
-            this._match();
-        }))
-            .subscribe({
-            next: () => {
-                this.showMessage(MessageType.REMOVE, {
-                    payload: data,
-                    type: MessageStripType.SUCCESS
-                });
-            },
-            error: () => {
-                this.showMessage(MessageType.REMOVE, {
-                    payload: data,
-                    type: MessageStripType.ERROR
-                });
-            }
-        });
-    }
-    /** @hidden */
-    _runUploadNewFileAfterFail(item) {
-        this.dataSource
-            .runAfterFail({ parentFolderId: this._getCurrentFolderId(), items: [item] })
-            .pipe(tap(() => this._match()))
-            .subscribe();
-    }
-    /** @hidden */
-    _cancelUploadNewFile(file) {
-        this.dataSource
-            .cancelUploadNewFile({ parentFolderId: this._getCurrentFolderId(), item: file })
-            .pipe(tap(() => this._match()))
-            .subscribe();
-    }
-    /** @hidden */
-    _messageStripDismiss() {
-        this._message = undefined;
-    }
-    /** @hidden */
-    _openFolder(item) {
-        if (item.type === 'file' || !item.documentId) {
-            return;
-        }
-        if (this._breadcrumbList.length > 0) {
-            this._breadcrumbList[this._breadcrumbList.length - 1].clikable = true;
-        }
-        this._breadcrumbList.push({
-            clikable: false,
-            folderId: item.documentId,
-            folderName: item.name
-        });
-        this._match();
-    }
-    /** @hidden */
-    _actionButton(item) {
-        this._activeItem = item;
-    }
-    /** @hidden */
-    _onDropzone(event) {
-        this._showDragDropArea = true;
-        this._onDragDropArea = event;
-    }
-    /** @hidden */
-    _dragDropCancel() {
-        this._showDragDropArea = false;
-    }
-    /** @hidden */
-    _breadcrumbGoTo(event, index) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!Number.isInteger(index)) {
-            this._breadcrumbList = [];
-            this._match();
-            return;
-        }
-        this._breadcrumbList = this._breadcrumbList.slice(0, index + 1);
-        this._breadcrumbList[this._breadcrumbList.length - 1].clikable = false;
-        this._match();
-    }
-    /** @hidden */
-    _pageChanged(pageNumber) {
-        if (!this.enablePagination || this._currentPage === pageNumber) {
-            return;
-        }
-        this.selectedItems = [];
-        this._currentPage = pageNumber;
-        this._match();
-    }
-    /** @hidden */
-    _itemsPerPageChange(value) {
-        if (value === this._itemsPerPage) {
-            return;
-        }
-        this._itemsPerPage = value;
-        if (this._currentPage * this._itemsPerPage > this._totalItems) {
-            this._currentPage = Math.ceil(this._totalItems / this._itemsPerPage);
-        }
-        this._match();
-    }
-    /** @hidden */
-    _searchInputChanged() {
-        this._match();
-    }
-    /** @hidden */
-    _onRowSelectionChange(data) {
-        if (!this.sameFileNameAllowed) {
-            const removedItem = data.removed[0];
-            this._clearItemSameFilenameState(removedItem);
-        }
-        this.selectedItems = data.selection;
-    }
-    /** @hidden */
-    _getItemName(item) {
-        if (item.type === 'folder') {
-            return item.name;
-        }
-        return item.name.split('.').slice(0, -1).join('.');
-    }
-    /** @hidden */
-    _getItemExtension(item) {
-        if (item.type === 'folder') {
-            return '';
-        }
-        return `.${item.name.split('.').pop()}`;
-    }
-    /** @hidden */
-    _getIconByType(file) {
-        const type = `.${file.name.split('.').pop()}`;
-        return this._imageExtensions.includes(type) ? 'background' : 'document';
-    }
-    /** @hidden */
-    _showIfSelectedOnlyFiles() {
-        return !this.selectedItems.some((item) => item.type === 'folder');
-    }
-    /** @hidden */
-    _isSelectedItem(item) {
-        return this.selectedItems.some((selectedItem) => selectedItem.documentId === item.documentId);
-    }
-    /** @hidden */
-    _getList() {
-        return this.dataSource.dataProvider.list;
-    }
-    /** @hidden */
-    _trackByDocumentId(index, item) {
-        return item.documentId;
-    }
-    /** @hidden */
-    _getAllowedTypes() {
-        return `${this.fileTypes?.join(', ')}${this.fileTypes?.length && this.mimeTypes?.length ? ', ' : ''}${this.mimeTypes?.join(', ')}`;
-    }
-    /** @hidden */
-    _validateFiles(files) {
-        this._validatedFiles = this._filesValidatorService.validation(files, {
-            maxFileSize: this.maxFileSize,
-            maxFileNameLength: this.maxFilenameLength,
-            fileTypes: this.fileTypes,
-            mimeTypes: this.mimeTypes
-        });
-    }
-    /** @hidden */
-    _propagateFiles() {
-        const { validFiles, typeMismatch, filenameLengthExceed, fileSizeExceed } = this._validatedFiles;
-        if (validFiles) {
-            if (this._currentUpdateFileVersion) {
-                this._updateFileVersion(validFiles[0]);
-            }
-            else {
-                this._uploadNewFiles(validFiles);
-            }
-        }
-        if (typeMismatch) {
-            const payload = { items: typeMismatch };
-            const event = new TypeMismatchEvent(this, payload);
-            this.showMessage(MessageType.TYPE_MISMATCH, { payload, type: MessageStripType.ERROR });
-            this.typeMismatch.emit(event);
-        }
-        if (filenameLengthExceed) {
-            const payload = { items: filenameLengthExceed };
-            const event = new FilenameLengthExceedEvent(this, payload);
-            this.showMessage(MessageType.FILE_NAME_LENGTH, { payload, type: MessageStripType.ERROR });
-            this.filenameLengthExceed.emit(event);
-        }
-        if (fileSizeExceed) {
-            const payload = { items: fileSizeExceed };
-            const event = new FileSizeExceedEvent(this, payload);
-            this.showMessage(MessageType.FILE_SIZE, { payload, type: MessageStripType.ERROR });
-            this.fileSizeExceed.emit(event);
-        }
-    }
-    /** @hidden */
-    _updateFileVersion(newItem) {
-        const currentFolderId = this._getCurrentFolderId();
-        const currentItem = {
-            ...this._currentUpdateFileVersion,
-            status: UploadCollectionItemStatus.LOADING
-        };
-        const data = {
-            parentFolderId: this._getCurrentFolderId(),
-            item: this._currentUpdateFileVersion,
-            newItem
-        };
-        this._findParentFolderAndUpdateItem(currentFolderId, currentItem);
-        this.dataSource
-            .updateVersion(data)
-            .pipe(tap(() => this._match()))
-            .subscribe({
-            next: () => {
-                this.showMessage(MessageType.UPDATE_VERSION, {
-                    payload: data,
-                    type: MessageStripType.SUCCESS
-                });
-                this._currentUpdateFileVersion = undefined;
-            },
-            error: () => {
-                this.showMessage(MessageType.UPDATE_VERSION, {
-                    payload: data,
-                    type: MessageStripType.ERROR
-                });
-            }
-        });
-    }
-    /** @hidden */
-    _uploadNewFiles(files) {
-        const currentFolderId = this._getCurrentFolderId();
-        const newItems = this._generateTemporaryNewFiles(files);
-        this._findParentFolderAndAddTemporaryFiles(currentFolderId, newItems);
-        this.dataSource
-            .upload({
-            parentFolderId: currentFolderId,
-            items: newItems.map((item) => ({ ...item }))
-        })
-            .pipe(tap(() => this._match()))
-            .subscribe();
-    }
-    /** @hidden */
-    _getCurrentFolder() {
-        const currentFolderId = this._getCurrentFolderId();
-        return !currentFolderId ? undefined : this._findFolderById(currentFolderId);
-    }
-    /** @hidden */
-    _getCurrentFolderId() {
-        return this._breadcrumbList.length === 0
-            ? undefined
-            : this._breadcrumbList[this._breadcrumbList.length - 1].folderId;
-    }
-    /** @hidden */
-    _findFolderById(folderId, items = this.dataSource.dataProvider.items) {
-        let foundObj;
-        JSON.stringify(items, (_, nestedValue) => {
-            if (nestedValue && nestedValue.documentId === folderId) {
-                foundObj = nestedValue;
-            }
-            return nestedValue;
-        });
-        return foundObj;
-    }
-    /** @hidden */
-    _findParentFolderAndUpdateItem(parentFolderId, updatedItem, items = this.dataSource.dataProvider.items) {
-        if (!parentFolderId) {
-            const index = items.findIndex((item) => item.documentId === updatedItem.documentId);
-            if (index !== -1) {
-                items[index] = updatedItem;
-            }
-            this._match();
-            return;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const currentItem = items[i];
-            if (currentItem.type !== 'folder') {
-                continue;
-            }
-            if (currentItem.documentId === parentFolderId) {
-                const index = currentItem.files.findIndex((item) => item.documentId === updatedItem.documentId);
-                if (index !== -1) {
-                    currentItem.files[i] = updatedItem;
-                    this._match();
-                    break;
-                }
-            }
-            else {
-                this._findParentFolderAndUpdateItem(parentFolderId, updatedItem, currentItem.files);
-            }
-        }
-    }
-    /** @hidden */
-    _findParentFolderAndAddTemporaryFiles(parentFolderId, newItems, items = this.dataSource.dataProvider.items) {
-        if (!parentFolderId) {
-            items.push(...newItems);
-            this._match();
-            return;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const currentItem = items[i];
-            if (currentItem.type !== 'folder') {
-                continue;
-            }
-            if (currentItem.documentId === parentFolderId) {
-                currentItem.files.push(...newItems);
-                this._match();
-                break;
-            }
-            else {
-                this._findParentFolderAndAddTemporaryFiles(parentFolderId, newItems, currentItem.files);
-            }
-        }
-    }
-    /** @hidden */
-    _generateTemporaryNewFiles(files) {
-        return files.map((file) => ({
-            documentId: uuidv4(),
-            type: 'file',
-            name: file.name,
-            uploadedBy: {
-                id: uuidv4(),
-                name: `You`
-            },
-            uploadedOn: new Date(),
-            fileSize: file.size,
-            version: 1,
-            url: '',
-            status: UploadCollectionItemStatus.LOADING,
-            file
-        }));
-    }
-    /** @hidden */
-    _generateTemporaryNewFolder(folderName) {
-        return {
-            documentId: uuidv4(),
-            type: 'folder',
-            name: folderName,
-            uploadedBy: {
-                id: Date.now(),
-                name: 'You'
-            },
-            uploadedOn: new Date(),
-            files: [],
-            status: UploadCollectionItemStatus.LOADING
-        };
-    }
-    /** @hidden */
-    _initializeDS(ds) {
-        this._visibleList$.next([]);
-        if (isDataSource(this.dataSource)) {
-            this.dataSource.close();
-            if (this._dsSubscription) {
-                this._dsSubscription.unsubscribe();
-                this._dsSubscription = undefined;
-            }
-        }
-        this._dataSource = this._openDataStream(ds);
-        // initial data fetch
-        this._match();
-    }
-    /** @hidden */
-    _openDataStream(ds) {
-        const initDataSource = this._toDataStream(ds);
-        if (initDataSource === undefined) {
-            throw new Error(`[dataSource] source did not match an array, Observable, or DataSource`);
-        }
-        /**
-         * This is single point of data entry to the component. We dont want to set data on different
-         * places. If any new data comes in either you do a search and you want to pass initial data
-         * its here.
-         */
-        this._dsSubscription = initDataSource.open().subscribe((data) => {
-            this._visibleList$.next(data);
-            this._totalItems = initDataSource.dataProvider.totalItems;
-            this._countUnvisibleItems();
-            this._cdr.detectChanges();
-        });
-        return initDataSource;
-    }
-    /** @hidden */
-    _toDataStream(ds) {
-        if (isDataSource(ds)) {
-            return ds;
-        }
-        return undefined;
-    }
-    /** @hidden */
-    _match() {
-        const query = new Map();
-        query.set('folderId', this._getCurrentFolderId());
-        query.set('page', this._currentPage);
-        query.set('searchText', this._searchText || '*');
-        if (this.enablePagination) {
-            query.set('limit', this._itemsPerPage);
-        }
-        this.dataSource.match(query);
-    }
-    /** @hidden */
-    _countUnvisibleItems() {
-        const itemsPerPage = this._itemsPerPage;
-        this._countShowedItems = this._currentPage * itemsPerPage - itemsPerPage + 1;
-        this._countNotShowedItems = this._countShowedItems + this._visibleList$.value.length - 1;
-    }
-    /** @hidden */
-    _clearItemSameFilenameState(currentItem) {
-        if (!currentItem) {
-            return;
-        }
-        for (const item of this._getList()) {
-            if (item.documentId === currentItem.documentId) {
-                delete item.sameFilenameState;
-                break;
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UploadCollectionComponent, deps: [{ token: i1.DialogService }, { token: FilesValidatorService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: UploadCollectionComponent, isStandalone: true, selector: "fdp-upload-collection", inputs: { id: "id", itemsPerPage: "itemsPerPage", dataSource: "dataSource", fileTypes: "fileTypes", maxFileSize: "maxFileSize", maxFilenameLength: "maxFilenameLength", mimeTypes: "mimeTypes", disabled: "disabled", readonly: "readonly", hierarchy: "hierarchy", enablePagination: "enablePagination", terminationEnabled: "terminationEnabled", multiple: "multiple", showSearch: "showSearch", sameFileNameAllowed: "sameFileNameAllowed" }, outputs: { typeMismatch: "typeMismatch", filenameLengthExceed: "filenameLengthExceed", fileSizeExceed: "fileSizeExceed" }, viewQueries: [{ propertyName: "_uploadFilesRef", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "_updateVersionRef", first: true, predicate: ["updateVersionInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [id]=\"id\" class=\"fdp-upload-collection\">\n    <!-- Message strip -->\n    <fd-message-strip *ngIf=\"_message\" [type]=\"_message.messageStripType\" (onDismiss)=\"_messageStripDismiss()\">\n        <ng-container\n            [ngTemplateOutlet]=\"message\"\n            [ngTemplateOutletContext]=\"{\n                messageType: _message.messageType,\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n    </fd-message-strip>\n\n    <!-- Toolbar -->\n    <fd-toolbar class=\"fdp-upload-collection__toolbar\">\n        <div [style.flex]=\"'1 auto'\">\n            <fd-breadcrumb [id]=\"id + '-breadcrumb'\">\n                <fd-breadcrumb-item>\n                    <ng-template #multipleBreadcrumbs>\n                        <a href=\"#\" fd-link (click)=\"_breadcrumbGoTo($event)\">\n                            {{ 'platformUploadCollection.breadcrumbLabelAllFiles' | fdTranslate }}\n                        </a>\n                    </ng-template>\n                    <ng-template #singleBreadcrumb>\n                        <span>\n                            {{\n                                'platformUploadCollection.breadcrumbLabelAllFilesWithTotal'\n                                    | fdTranslate : { total: _totalItems }\n                            }}\n                        </span>\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"_breadcrumbList.length > 0 ? multipleBreadcrumbs : singleBreadcrumb\"\n                    ></ng-container>\n                </fd-breadcrumb-item>\n                <fd-breadcrumb-item *ngFor=\"let item of _breadcrumbList; let i = index\">\n                    <ng-template #clickableBreadcrumb>\n                        <a href=\"#\" fd-link (click)=\"_breadcrumbGoTo($event, i)\">{{ item.folderName }}</a>\n                    </ng-template>\n                    <ng-template #textBreadcrumb>\n                        <span>{{ item.folderName }} ({{ _totalItems }})</span>\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"item.clikable ? clickableBreadcrumb : textBreadcrumb\"\n                    ></ng-container>\n                </fd-breadcrumb-item>\n            </fd-breadcrumb>\n        </div>\n\n        <fd-toolbar-spacer [style.max-width.rem]=\"3\"></fd-toolbar-spacer>\n        <ng-container *ngIf=\"readonly || selectedItems.length === 0\">\n            <fd-input-group\n                *ngIf=\"showSearch\"\n                [(ngModel)]=\"_searchText\"\n                (ngModelChange)=\"_searchInputChanged()\"\n                glyph=\"search\"\n                [ariaLabelledBy]=\"id + '-breadcrumb'\"\n                [placeholder]=\"'platformUploadCollection.searchPlaceholder' | fdTranslate\"\n            ></fd-input-group>\n\n            <ng-container *ngIf=\"!readonly\">\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    (click)=\"_openUploadFiles()\"\n                    fdType=\"ghost\"\n                    [disabled]=\"disabled\"\n                    [label]=\"'platformUploadCollection.addBtnLabel' | fdTranslate\"\n                    [title]=\"'platformUploadCollection.addBtnLabel' | fdTranslate\"\n                ></button>\n\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    (click)=\"_openNewFolderDialog()\"\n                    *ngIf=\"hierarchy\"\n                    [disabled]=\"disabled\"\n                    fdType=\"transparent\"\n                    [label]=\"'platformUploadCollection.newFolderBtnLabel' | fdTranslate\"\n                    [title]=\"'platformUploadCollection.newFolderBtnLabel' | fdTranslate\"\n                ></button>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!readonly && selectedItems.length > 0\">\n            <button\n                fd-toolbar-item\n                fd-button\n                (click)=\"_moveToClicked(true)\"\n                fdType=\"ghost\"\n                [disabled]=\"disabled\"\n                [label]=\"'platformUploadCollection.moveToBtnLabel' | fdTranslate\"\n                [title]=\"'platformUploadCollection.moveToBtnLabel' | fdTranslate\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                (click)=\"_downloadClicked(true)\"\n                fdType=\"ghost\"\n                [disabled]=\"disabled\"\n                *ngIf=\"_showIfSelectedOnlyFiles()\"\n                [label]=\"'platformUploadCollection.downloadBtnLabel' | fdTranslate\"\n                [title]=\"'platformUploadCollection.downloadBtnLabel' | fdTranslate\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                (click)=\"_remove(true)\"\n                fdType=\"ghost\"\n                [disabled]=\"disabled\"\n                [label]=\"'platformUploadCollection.removeBtnLabel' | fdTranslate\"\n                [title]=\"'platformUploadCollection.removeBtnLabel' | fdTranslate\"\n            ></button>\n        </ng-container>\n    </fd-toolbar>\n\n    <div class=\"fdp-upload-collection__table--wrapper\">\n        <div\n            class=\"fdp-upload-collection__table\"\n            fdpUploadCollectionDragnDrop\n            [fileTypes]=\"fileTypes\"\n            [maxFilenameLength]=\"maxFilenameLength\"\n            [maxFileSize]=\"maxFileSize\"\n            [mimeTypes]=\"mimeTypes\"\n            [dragndrop]=\"!readonly\"\n            [disabled]=\"disabled\"\n            [multiple]=\"multiple\"\n            (fileChanged)=\"_handleDrop($event)\"\n            (cancel)=\"_dragDropCancel()\"\n            (onDropzone)=\"_onDropzone($event)\"\n        >\n            <!-- Table -->\n            <fdp-table\n                *ngIf=\"_visibleList$.value.length > 0\"\n                [dataSource]=\"_visibleList$\"\n                [loading]=\"dataSource.isDataLoading\"\n                selectionMode=\"multiple\"\n                emptyTableMessage=\"\"\n                [noHorizontalBorders]=\"true\"\n                [trackBy]=\"_trackByDocumentId\"\n                (rowSelectionChange)=\"_onRowSelectionChange($event)\"\n            >\n                <fdp-column name=\"name\" label=\"Name\" width=\"8rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">\n                        <div class=\"fdp-upload-collection__vertical-align-center\">\n                            <fd-icon\n                                class=\"fdp-upload-collection__fd-icon\"\n                                *ngIf=\"item.type === 'folder'\"\n                                glyph=\"folder-blank\"\n                                [title]=\"'platformUploadCollection.folderIconTitle' | fdTranslate\"\n                            ></fd-icon>\n                            <fd-icon\n                                class=\"fdp-upload-collection__fd-icon\"\n                                *ngIf=\"item.type === 'file'\"\n                                [glyph]=\"_getIconByType(item)\"\n                                [title]=\"'platformUploadCollection.fileIconTitle' | fdTranslate\"\n                            ></fd-icon>\n\n                            <ng-container *ngIf=\"disabled || readonly || !_isSelectedItem(item); else editMode\">\n                                <span\n                                    [class.fdp-upload-collection__cursor]=\"item.type === 'folder'\"\n                                    (click)=\"_openFolder(item)\"\n                                    >{{ item.name }}</span\n                                >\n                            </ng-container>\n                        </div>\n\n                        <ng-template #editMode>\n                            <div fd-form-item>\n                                <fd-form-input-message-group [triggers]=\"[]\" [isOpen]=\"!!item.sameFilenameState\">\n                                    <div class=\"fdp-upload-collection__vertical-align-center\">\n                                        <input\n                                            fd-form-control\n                                            [value]=\"_getItemName(item)\"\n                                            (blur)=\"_fileNameChange($event, item)\"\n                                            (input)=\"_checkName($event, item)\"\n                                            type=\"text\"\n                                            [placeholder]=\"\n                                                'platformUploadCollection.editFileNameInputPlaceholder' | fdTranslate\n                                            \"\n                                            [state]=\"item.sameFilenameState\"\n                                        />\n                                        <span class=\"fdp-upload-collection__item_extension\">{{\n                                            _getItemExtension(item)\n                                        }}</span>\n                                    </div>\n\n                                    <fd-form-message [type]=\"item.sameFilenameState\">\n                                        {{\n                                            (item.type === 'file'\n                                                ? 'platformUploadCollection.editFileNameFileAlreadyExistsError'\n                                                : 'platformUploadCollection.editFileNameFolderAlreadyExistsError'\n                                            ) | fdTranslate\n                                        }}\n                                    </fd-form-message>\n                                </fd-form-input-message-group>\n                            </div>\n                        </ng-template>\n                    </fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"uploadedBy\" label=\"Uploaded by\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.uploadedBy.name }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"uploadedOn\" label=\"Uploaded on\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.uploadedOn | date : 'shortDate' }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"size\" label=\"File size\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.fileSize | convertBytes }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"version\" label=\"Version\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.version || '' }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"status\" label=\"Status\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">\n                        <fd-busy-indicator\n                            *ngIf=\"item.status === _uploadCollectionItemStatus.LOADING\"\n                            [loading]=\"true\"\n                            ariaLabel=\"Status: Loading\"\n                            ariaLive=\"polite\"\n                            size=\"s\"\n                        ></fd-busy-indicator>\n                        <span\n                            *ngIf=\"item.status === _uploadCollectionItemStatus.SUCCESSFUL\"\n                            fd-object-status\n                            status=\"positive\"\n                        >\n                            {{ 'platformUploadCollection.itemStatusSuccessful' | fdTranslate }}\n                        </span>\n                        <span\n                            *ngIf=\"item.status === _uploadCollectionItemStatus.UNSUCCESSFUL\"\n                            fd-object-status\n                            status=\"negative\"\n                        >\n                            {{ 'platformUploadCollection.itemStatusUnsuccessful' | fdTranslate }}\n                        </span>\n                    </fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"action\" *ngIf=\"!readonly\" width=\"5rem\" align=\"end\">\n                    <fdp-table-header *fdpHeaderCellDef>Action</fdp-table-header>\n                    <fdp-table-cell *fdpCellDef=\"let item\">\n                        <div class=\"fdp-upload-collection__actions\">\n                            <div class=\"fdp-upload-collection__actions--status\">\n                                <button\n                                    fd-button\n                                    [label]=\"'platformUploadCollection.uploadNewFileAfterFailAction' | fdTranslate\"\n                                    [title]=\"'platformUploadCollection.uploadNewFileAfterFailAction' | fdTranslate\"\n                                    (click)=\"_runUploadNewFileAfterFail(item)\"\n                                    fdType=\"ghost\"\n                                    [disabled]=\"disabled\"\n                                    *ngIf=\"item.status === _uploadCollectionItemStatus.UNSUCCESSFUL\"\n                                ></button>\n\n                                <button\n                                    fd-button\n                                    [label]=\"'platformUploadCollection.cancelUploadNewFileAction' | fdTranslate\"\n                                    [title]=\"'platformUploadCollection.cancelUploadNewFileAction' | fdTranslate\"\n                                    fdType=\"ghost\"\n                                    [disabled]=\"disabled\"\n                                    (click)=\"_cancelUploadNewFile(item)\"\n                                    *ngIf=\"terminationEnabled && item.status === _uploadCollectionItemStatus.LOADING\"\n                                ></button>\n                            </div>\n\n                            <fdp-menu-button\n                                icon=\"overflow\"\n                                [disabled]=\"disabled\"\n                                type=\"transparent\"\n                                [title]=\"'platformUploadCollection.itemMenuBtnTitle' | fdTranslate\"\n                                [fdpMenuTriggerFor]=\"menuActions\"\n                                (buttonClicked)=\"_actionButton(item)\"\n                            >\n                            </fdp-menu-button>\n                        </div>\n                    </fdp-table-cell>\n                </fdp-column>\n            </fdp-table>\n\n            <!-- Dragdrop area -->\n            <div\n                class=\"fdp-upload-collection__dragdrop-area\"\n                *ngIf=\"_showDragDropArea\"\n                [class.active]=\"_onDragDropArea\"\n            >\n                <fd-icon class=\"fdp-upload-collection__dragdrop-area--icon\" glyph=\"upload-to-cloud\"></fd-icon>\n                <p class=\"fdp-upload-collection__dragdrop-area--text\">\n                    {{ 'platformUploadCollection.dragDropAreaText' | fdTranslate }}\n                </p>\n            </div>\n\n            <!-- No data -->\n            <div\n                class=\"fdp-upload-collection__no-data\"\n                *ngIf=\"_visibleList$.value.length === 0\"\n                [class.invisible]=\"_showDragDropArea\"\n            >\n                <fd-icon glyph=\"document\"></fd-icon>\n                <h3>{{ 'platformUploadCollection.noDataText' | fdTranslate }}</h3>\n                <p>{{ 'platformUploadCollection.noDataDescription' | fdTranslate }}</p>\n            </div>\n        </div>\n\n        <!-- Table footer -->\n        <div class=\"fdp-upload-collection__table-footer\" *ngIf=\"enablePagination && _totalItems\">\n            <!-- Pagination -->\n            <div class=\"fdp-upload-collection__pagination\">\n                <span [id]=\"id + '-pagination'\" class=\"fdp-upload-collection__pagination--total\">\n                    {{\n                        'platformUploadCollection.paginationTotal'\n                            | fdTranslate : { from: _countShowedItems, to: _countNotShowedItems, total: _totalItems }\n                    }}\n                </span>\n                <fd-pagination\n                    [totalItems]=\"_totalItems\"\n                    [displayTotalItems]=\"false\"\n                    (pageChangeStart)=\"_pageChanged($event)\"\n                    [itemsPerPage]=\"_itemsPerPage\"\n                    [currentPage]=\"_currentPage\"\n                    [attr.aria-labelledby]=\"id + '-pagination'\"\n                ></fd-pagination>\n            </div>\n\n            <!-- Results per page -->\n            <div class=\"fdp-upload-collection__results\">\n                <span class=\"fdp-upload-collection__results--title\">\n                    <span [id]=\"id + '-results'\">\n                        {{ 'platformUploadCollection.resultsPerPage' | fdTranslate }}\n                    </span>\n                    <span *ngIf=\"_itemsPerPageOptions.length === 0\">{{ _itemsPerPage }}</span>\n                </span>\n                <fdp-menu-button\n                    *ngIf=\"_itemsPerPageOptions.length > 0\"\n                    type=\"ghost\"\n                    [ariaLabelledBy]=\"id + '-results'\"\n                    [fdpMenuTriggerFor]=\"itemsPerPageMenu\"\n                    [label]=\"_itemsPerPage + ''\"\n                >\n                </fdp-menu-button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<fdp-menu #itemsPerPageMenu xPosition=\"before\">\n    <fdp-menu-item\n        *ngFor=\"let value of _itemsPerPageOptions\"\n        (itemSelect)=\"_itemsPerPageChange(value.label)\"\n        [attr.title]=\"'Results per page: ' + value.label\"\n    >\n        <span>{{ value.label }}</span>\n    </fdp-menu-item>\n</fdp-menu>\n\n<fdp-menu #menuActions xPosition=\"before\">\n    <fdp-menu-item (itemSelect)=\"_moveToClicked()\">\n        <fd-icon\n            class=\"fdp-upload-collection__fd-icon\"\n            glyph=\"folder-blank\"\n            [title]=\"'platformUploadCollection.moveToBtnLabel' | fdTranslate\"\n        ></fd-icon>\n        <span>\n            {{ 'platformUploadCollection.moveToBtnLabel' | fdTranslate }}\n        </span>\n    </fdp-menu-item>\n    <ng-container *ngIf=\"_activeItem?.type === 'file'\">\n        <fdp-menu-item (itemSelect)=\"_downloadClicked()\">\n            <fd-icon\n                class=\"fdp-upload-collection__fd-icon\"\n                glyph=\"download\"\n                [title]=\"'platformUploadCollection.downloadBtnLabel' | fdTranslate\"\n            ></fd-icon>\n            <span>\n                {{ 'platformUploadCollection.downloadBtnLabel' | fdTranslate }}\n            </span>\n        </fdp-menu-item>\n        <fdp-menu-item (itemSelect)=\"_openUpdateFileVersion()\">\n            <fd-icon\n                class=\"fdp-upload-collection__fd-icon\"\n                glyph=\"drill-up\"\n                [title]=\"'platformUploadCollection.updateVersionBtnLabel' | fdTranslate\"\n            ></fd-icon>\n            <span>\n                {{ 'platformUploadCollection.updateVersionBtnLabel' | fdTranslate }}\n            </span>\n        </fdp-menu-item>\n    </ng-container>\n    <fdp-menu-item (itemSelect)=\"_remove()\">\n        <fd-icon\n            class=\"fdp-upload-collection__fd-icon\"\n            glyph=\"delete\"\n            [title]=\"'platformUploadCollection.removeBtnLabel' | fdTranslate\"\n        ></fd-icon>\n        <span>\n            {{ 'platformUploadCollection.removeBtnLabel' | fdTranslate }}\n        </span>\n    </fdp-menu-item>\n</fdp-menu>\n\n<input\n    #fileInput\n    class=\"fdp-upload-collection__hidden\"\n    type=\"file\"\n    (fileSelected)=\"_selectHandler($event)\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    fdFileSelect\n/>\n\n<input\n    #updateVersionInput\n    class=\"fdp-upload-collection__hidden\"\n    type=\"file\"\n    (fileSelected)=\"_selectHandler($event)\"\n    [disabled]=\"disabled\"\n    [multiple]=\"false\"\n    fdFileSelect\n/>\n\n<ng-template\n    let-messageType=\"messageType\"\n    let-payload=\"payload\"\n    let-messageStripType=\"messageStripType\"\n    let-count=\"count\"\n    #message\n>\n    <ng-container *ngIf=\"_message\" [ngSwitch]=\"messageType\">\n        <ng-container\n            *ngSwitchCase=\"_messageType.CREATE\"\n            [ngTemplateOutlet]=\"messageNewFolder\"\n            [ngTemplateOutletContext]=\"{\n                messageStripType: _message.messageStripType,\n                payload: _message.payload\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.UPDATE_VERSION\"\n            [ngTemplateOutlet]=\"messageUpdateVersion\"\n            [ngTemplateOutletContext]=\"{\n                messageStripType: _message.messageStripType,\n                payload: _message.payload\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.FILE_RENAME\"\n            [ngTemplateOutlet]=\"messageFileRename\"\n            [ngTemplateOutletContext]=\"{\n                messageStripType: _message.messageStripType,\n                payload: _message.payload\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.REMOVE\"\n            [ngTemplateOutlet]=\"messageRemove\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.MOVE\"\n            [ngTemplateOutlet]=\"messageMove\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.TYPE_MISMATCH\"\n            [ngTemplateOutlet]=\"messageTypeMismatch\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.FILE_SIZE\"\n            [ngTemplateOutlet]=\"messageFileSize\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.FILE_NAME_LENGTH\"\n            [ngTemplateOutlet]=\"messageFilenameLength\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #messageNewFolder let-payload=\"payload\" let-messageStripType=\"messageStripType\">\n    <ng-container *ngIf=\"messageStripType === 'error'; else foldersCreated\">\n        {{ 'platformUploadCollection.messageCreateFailed' | fdTranslate : { folderName: payload.folder.name } }}\n    </ng-container>\n    <ng-template #foldersCreated>\n        {{ 'platformUploadCollection.messageCreateSuccess' | fdTranslate : { folderName: payload.folder.name } }}\n    </ng-template>\n</ng-template>\n\n<ng-template #messageUpdateVersion let-payload=\"payload\" let-messageStripType=\"messageStripType\">\n    <ng-container *ngIf=\"messageStripType === 'error'; else versionUpdated\">\n        {{ 'platformUploadCollection.messageUpdateVersionFailed' | fdTranslate : { folderName: payload.item.name } }}\n    </ng-container>\n    <ng-template #versionUpdated>\n        {{ 'platformUploadCollection.messageUpdateVersionSuccess' | fdTranslate : { folderName: payload.item.name } }}\n    </ng-template>\n</ng-template>\n\n<ng-template #messageFileRename let-payload=\"payload\" let-messageStripType=\"messageStripType\">\n    <ng-container *ngIf=\"messageStripType === 'error'; else fileRenamed\">\n        {{\n            'platformUploadCollection.messageFileRenameFailed'\n                | fdTranslate : { from: payload.item.name, to: payload.fileName }\n        }}\n    </ng-container>\n    <ng-template #fileRenamed>\n        {{\n            'platformUploadCollection.messageFileRenameSuccess'\n                | fdTranslate : { from: payload.item.name, to: payload.fileName }\n        }}\n    </ng-template>\n</ng-template>\n\n<ng-template #messageRemove let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else foldersAndFilesRemoved\">\n            {{\n                'platformUploadCollection.messageRemoveFoldersAndFilesFailed'\n                    | fdTranslate : { foldersCount: count.folder, filesCount: count.file }\n            }}\n        </ng-container>\n        <ng-template #foldersAndFilesRemoved>\n            {{\n                'platformUploadCollection.messageRemoveFoldersAndFilesSuccess'\n                    | fdTranslate : { foldersCount: count.folder, filesCount: count.file }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && !count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else foldersRemoved\">\n            {{ 'platformUploadCollection.messageRemoveFoldersFailed' | fdTranslate : { foldersCount: count.folder } }}\n        </ng-container>\n        <ng-template #foldersRemoved>\n            {{ 'platformUploadCollection.messageRemoveFoldersSuccess' | fdTranslate : { foldersCount: count.folder } }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.file && !count.folder\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else filesRemoved\">\n            {{ 'platformUploadCollection.messageRemoveFilesFailed' | fdTranslate : { filesCount: count.file } }}\n        </ng-container>\n        <ng-template #filesRemoved>\n            {{ 'platformUploadCollection.messageRemoveFilesSuccess' | fdTranslate : { filesCount: count.file } }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else oneItemRemoved\">\n            {{\n                'platformUploadCollection.messageRemoveFileOrFolderFailed'\n                    | fdTranslate : { name: payload.items[0].name }\n            }}\n        </ng-container>\n        <ng-template #oneItemRemoved>\n            {{\n                'platformUploadCollection.messageRemoveFileOrFolderSuccess'\n                    | fdTranslate : { name: payload.items[0].name }\n            }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #messageMove let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else filesAndFoldersMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersAndFilesFailed'\n                    : 'platformUploadCollection.messageMoveRootFoldersAndFilesFailed'\n                ) | fdTranslate : { foldersCount: count.folder, filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #filesAndFoldersMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersAndFilesSuccess'\n                    : 'platformUploadCollection.messageMoveRootFoldersAndFilesSuccess'\n                ) | fdTranslate : { foldersCount: count.folder, filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && !count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else foldersMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersFailed'\n                    : 'platformUploadCollection.messageMoveRootFoldersFailed'\n                ) | fdTranslate : { foldersCount: count.folder, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #foldersMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersSuccess'\n                    : 'platformUploadCollection.messageMoveRootFoldersSuccess'\n                ) | fdTranslate : { foldersCount: count.folder, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.file && !count.folder\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else filesMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFilesFailed'\n                    : 'platformUploadCollection.messageMoveRootFilesFailed'\n                ) | fdTranslate : { filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #filesMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFilesSuccess'\n                    : 'platformUploadCollection.messageMoveRootFilesSuccess'\n                ) | fdTranslate : { filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else oneItemMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFileOrFolderFailed'\n                    : 'platformUploadCollection.messageMoveRootFileOrFolderFailed'\n                ) | fdTranslate : { name: payload.items[0].name, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #oneItemMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFileOrFolderSuccess'\n                    : 'platformUploadCollection.messageMoveRootFileOrFolderSuccess'\n                ) | fdTranslate : { name: payload.items[0].name, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #messageTypeMismatch let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1\">\n        {{\n            'platformUploadCollection.messageFileTypeMismatchPlural'\n                | fdTranslate : { filesCount: payload.items.length, allowedTypes: _getAllowedTypes() }\n        }}\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        {{\n            'platformUploadCollection.messageFileTypeMismatchSingular'\n                | fdTranslate : { fileName: payload.items[0].name, allowedTypes: _getAllowedTypes() }\n        }}\n    </ng-container>\n</ng-template>\n\n<ng-template #messageFileSize let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1\">\n        {{\n            'platformUploadCollection.messageFileSizeExceededPlural'\n                | fdTranslate : { filesCount: payload.items.length, maxFileSize: maxFileSize || 0 }\n        }}\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        {{\n            'platformUploadCollection.messageFileSizeExceededSingular'\n                | fdTranslate : { fileName: payload.items[0].name, maxFileSize: maxFileSize || 0 }\n        }}\n    </ng-container>\n</ng-template>\n\n<ng-template #messageFilenameLength let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1\">\n        {{\n            'platformUploadCollection.messageFileNameLengthExceededPlural'\n                | fdTranslate : { filesCount: payload.items.length, maxFilenameLength: maxFilenameLength || 0 }\n        }}\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        {{\n            'platformUploadCollection.messageFileNameLengthExceededSingular'\n                | fdTranslate : { fileName: payload.items[0].name, maxFilenameLength: maxFilenameLength || 0 }\n        }}\n    </ng-container>\n</ng-template>\n", styles: [".fdp-upload-collection__fd-icon{color:#0854a0!important;color:var(--sapHighlightColor)!important;margin-right:.625rem!important;font-size:1rem!important}.fdp-upload-collection fd-message-strip{margin-bottom:.625rem}.fdp-upload-collection__toolbar .fd-toolbar{margin-bottom:.625rem;border:0}.fdp-upload-collection__toolbar .fd-toolbar fd-input-group .sap-icon--search{color:#0854a0;color:var(--sapHighlightColor)}.fdp-upload-collection__no-data{text-align:center;min-height:230px;display:flex;align-items:center;flex-direction:column;justify-content:center}.fdp-upload-collection__no-data fd-icon{font-size:3rem;line-height:3rem;margin:0;color:#6a6d70;color:var(--sapContent_LabelColor)}.fdp-upload-collection__no-data h3{font-size:1.125rem;font-size:var(--sapFontHeader4Size);line-height:1rem;margin:8px 0}.fdp-upload-collection__no-data p{font-size:.875rem;font-size:var(--sapFontSize);line-height:1rem;color:#6a6d70;color:var(--sapContent_LabelColor);margin:0}.fdp-upload-collection__no-data.invisible{opacity:0}.fdp-upload-collection__table{position:relative}.fdp-upload-collection__table-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.625rem}.fdp-upload-collection__table-footer .fdp-upload-collection__results--title,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total{line-height:1.4;line-height:var(--sapContent_LineHeight);color:#32363a;color:var(--sapTextColor);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily);font-weight:400;-webkit-font-smoothing:antialiased;box-sizing:border-box;padding:0;margin:0;border:0;font-size:.875rem;font-size:var(--sapFontSize);color:#6a6d70;color:var(--sapContent_LabelColor);margin-right:.5rem}.fdp-upload-collection__table-footer .fdp-upload-collection__results--title:before,.fdp-upload-collection__table-footer .fdp-upload-collection__results--title:after,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total:before,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fdp-upload-collection__table-footer .fdp-upload-collection__results--title,.fdp-upload-collection__table-footer .fdp-upload-collection__results--title[dir=rtl],[dir=rtl] .fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total[dir=rtl]{margin-right:0;margin-left:.5rem}.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total{width:100%;align-self:center}.fdp-upload-collection__table-footer .fdp-upload-collection__pagination{font-size:.875rem;font-size:var(--sapFontSize);line-height:1.4;line-height:var(--sapContent_LineHeight);color:#32363a;color:var(--sapTextColor);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily);font-weight:400;-webkit-font-smoothing:antialiased;box-sizing:border-box;padding:0;margin:0;border:0;display:flex}.fdp-upload-collection__table-footer .fdp-upload-collection__pagination:before,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination:after{box-sizing:inherit;font-size:inherit}.fdp-upload-collection__hidden{display:none}.fdp-upload-collection__vertical-align-center{display:flex;align-items:center}.fdp-upload-collection__cursor{cursor:pointer}.fdp-upload-collection__item_extension{white-space:nowrap}.fdp-upload-collection__actions{display:flex;justify-content:space-between;align-items:center}.fdp-upload-collection__actions .sap-icon--slim-arrow-down{display:none}.fdp-upload-collection__dragdrop-area{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(255,255,255,.5);outline:2px dashed transparent;outline-color:#89919a;outline-color:var(--sapField_BorderColor);outline-offset:-4px;box-sizing:border-box}.fdp-upload-collection__dragdrop-area fd-icon{font-size:3rem;line-height:3rem;margin-bottom:1rem;color:#6a6d70;color:var(--sapContent_LabelColor)}.fdp-upload-collection__dragdrop-area p{font-size:1rem;line-height:1.125rem;color:#6a6d70;color:var(--sapContent_LabelColor)}.fdp-upload-collection__dragdrop-area.active{outline-color:#0854a0;outline-color:var(--sapContent_DragAndDropActiveColor);background:rgba(8,84,160,.08)}.fdp-upload-collection__dragdrop-area.active fd-icon,.fdp-upload-collection__dragdrop-area.active p{color:#0854a0;color:var(--sapContent_DragAndDropActiveColor)}.fdp-upload-collection .fd-form-item{align-items:center;flex-direction:row}.fdp-upload-collection-dialig-no-bg{background-color:transparent!important}[dir=rtl] .fdp-upload-collection fd-icon{margin-right:0;margin-left:.625rem}.fd-menu__list .disabled{background-color:#fff!important;background-color:var(--sapList_Background)!important;cursor:not-allowed}.fd-menu__list .disabled .fd-menu__title{color:#32363a!important;color:var(--sapList_TextColor)!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: ["reverse", "tabIndex"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "fd-breadcrumb-item" }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "ngmodule", type: FormsModule }, { 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: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: UploadCollectionDragnDropDirective, selector: "[fdpUploadCollectionDragnDrop]", inputs: ["multiple", "fileTypes", "maxFileSize", "maxFilenameLength", "mimeTypes", "disabled", "dragndrop"], outputs: ["fileChanged", "cancel", "onDropzone"] }, { kind: "component", type: TableComponent, selector: "fdp-table", inputs: ["name", "id", "enableDragResize", "fixed", "freezeColumnsTo", "freezeEndColumnsTo", "pageScrolling", "pageSize", "pageScrollingThreshold", "bodyHeight", "emptyTableMessage", "noVisibleColumnsMessage", "noHorizontalBorders", "noVerticalBorders", "noBorders", "noBodyBorders", "noOuterBorders", "noBorderX", "noBorderY", "relationKey", "expandedStateKey", "hasChildrenKey", "rowNavigatable", "highlightNavigatedRow", "rowsActivable", "selectedKey", "selectableKey", "trackBy", "rowComparator", "rowsClass", "editableRowSkeleton", "expandOnInit", "rowHeight", "loadPagesBefore", "selectionMode", "enableTristateMode", "semanticHighlighting", "forceCheckedAllState", "ariaLabelledBy", "loading"], outputs: ["presetChanged", "rowSelectionChange", "sortChange", "filterChange", "groupChange", "columnsChange", "pageChange", "columnFreeze", "rowToggleOpenState", "rowActivate", "rowNavigate", "emptyRowAdded", "save", "cancel", "tableScrolled", "tableRowsSet", "allRowsExpanded", "allRowsCollapsed", "cellFocused"] }, { kind: "directive", type: TableInitialStateDirective, selector: "[fdpTableInitialState],    fdp-table", inputs: ["initialVisibleColumns", "initialSortBy", "initialFilterBy", "initialGroupBy", "initialPage", "state"] }, { kind: "component", type: TableColumnComponent, selector: "fdp-column", inputs: ["name", "key", "label", "align", "sortable", "filterable", "visible", "dataType", "groupable", "freezable", "endFreezable", "width", "noWrap", "applyText", "role"] }, { kind: "directive", type: FdpCellDef, selector: "[fdpCellDef]", inputs: ["fdpCellDefAs"] }, { kind: "directive", type: FdpTableCell, selector: "fdp-table-cell" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "directive", type: FdpHeaderCellDef, selector: "[fdpHeaderCellDef]" }, { kind: "directive", type: FdpTableHeader, selector: "fdp-table-header" }, { kind: "component", type: MenuButtonComponent, selector: "fdp-menu-button", inputs: ["label", "title", "icon", "type"], outputs: ["buttonClicked"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdpMenuTriggerFor]", inputs: ["fdpMenuTriggerFor"] }, { kind: "component", type: PaginationComponent, selector: "fd-pagination", inputs: ["id", "mobile", "totalItems", "currentPage", "itemsPerPage", "itemsPerPageTemplate", "itemsPerPageOptions", "displayTotalItems", "displayTextTemplate"], outputs: ["pageChangeStart", "itemsPerPageChange"] }, { kind: "component", type: MenuComponent, selector: "fdp-menu", inputs: ["id", "openByArrowKeys", "xPosition"], outputs: ["close"] }, { kind: "component", type: MenuItemComponent, selector: "fdp-menu-item", inputs: ["disabled", "cascadeDirection"], outputs: ["itemSelect"] }, { kind: "directive", type: FileUploaderSelectDirective, selector: "[fdFileSelect]", inputs: ["multiple"], outputs: ["fileSelected"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ConvertBytesPipe, name: "convertBytes" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: UploadCollectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-upload-collection', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
-                        NgIf,
-                        MessageStripComponent,
-                        NgTemplateOutlet,
-                        ToolbarComponent,
-                        BreadcrumbComponent,
-                        BreadcrumbItemComponent,
-                        LinkComponent,
-                        NgFor,
-                        ToolbarSpacerDirective,
-                        InputGroupComponent,
-                        FormsModule,
-                        ButtonComponent,
-                        ToolbarItemDirective,
-                        UploadCollectionDragnDropDirective,
-                        TableDataSourceDirective,
-                        TableHeaderResizerDirective,
-                        TableComponent,
-                        TableInitialStateDirective,
-                        TableColumnComponent,
-                        FdpCellDef,
-                        FdpTableCell,
-                        IconComponent,
-                        FormItemComponent,
-                        FormInputMessageGroupComponent,
-                        FormControlComponent,
-                        FormMessageComponent,
-                        BusyIndicatorComponent,
-                        ObjectStatusComponent,
-                        FdpHeaderCellDef,
-                        FdpTableHeader,
-                        MenuButtonComponent,
-                        MenuTriggerDirective,
-                        PaginationComponent,
-                        MenuComponent,
-                        MenuItemComponent,
-                        FileUploaderSelectDirective,
-                        NgSwitch,
-                        NgSwitchCase,
-                        DatePipe,
-                        FdTranslatePipe,
-                        ConvertBytesPipe
-                    ], template: "<div [id]=\"id\" class=\"fdp-upload-collection\">\n    <!-- Message strip -->\n    <fd-message-strip *ngIf=\"_message\" [type]=\"_message.messageStripType\" (onDismiss)=\"_messageStripDismiss()\">\n        <ng-container\n            [ngTemplateOutlet]=\"message\"\n            [ngTemplateOutletContext]=\"{\n                messageType: _message.messageType,\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n    </fd-message-strip>\n\n    <!-- Toolbar -->\n    <fd-toolbar class=\"fdp-upload-collection__toolbar\">\n        <div [style.flex]=\"'1 auto'\">\n            <fd-breadcrumb [id]=\"id + '-breadcrumb'\">\n                <fd-breadcrumb-item>\n                    <ng-template #multipleBreadcrumbs>\n                        <a href=\"#\" fd-link (click)=\"_breadcrumbGoTo($event)\">\n                            {{ 'platformUploadCollection.breadcrumbLabelAllFiles' | fdTranslate }}\n                        </a>\n                    </ng-template>\n                    <ng-template #singleBreadcrumb>\n                        <span>\n                            {{\n                                'platformUploadCollection.breadcrumbLabelAllFilesWithTotal'\n                                    | fdTranslate : { total: _totalItems }\n                            }}\n                        </span>\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"_breadcrumbList.length > 0 ? multipleBreadcrumbs : singleBreadcrumb\"\n                    ></ng-container>\n                </fd-breadcrumb-item>\n                <fd-breadcrumb-item *ngFor=\"let item of _breadcrumbList; let i = index\">\n                    <ng-template #clickableBreadcrumb>\n                        <a href=\"#\" fd-link (click)=\"_breadcrumbGoTo($event, i)\">{{ item.folderName }}</a>\n                    </ng-template>\n                    <ng-template #textBreadcrumb>\n                        <span>{{ item.folderName }} ({{ _totalItems }})</span>\n                    </ng-template>\n                    <ng-container\n                        *ngTemplateOutlet=\"item.clikable ? clickableBreadcrumb : textBreadcrumb\"\n                    ></ng-container>\n                </fd-breadcrumb-item>\n            </fd-breadcrumb>\n        </div>\n\n        <fd-toolbar-spacer [style.max-width.rem]=\"3\"></fd-toolbar-spacer>\n        <ng-container *ngIf=\"readonly || selectedItems.length === 0\">\n            <fd-input-group\n                *ngIf=\"showSearch\"\n                [(ngModel)]=\"_searchText\"\n                (ngModelChange)=\"_searchInputChanged()\"\n                glyph=\"search\"\n                [ariaLabelledBy]=\"id + '-breadcrumb'\"\n                [placeholder]=\"'platformUploadCollection.searchPlaceholder' | fdTranslate\"\n            ></fd-input-group>\n\n            <ng-container *ngIf=\"!readonly\">\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    (click)=\"_openUploadFiles()\"\n                    fdType=\"ghost\"\n                    [disabled]=\"disabled\"\n                    [label]=\"'platformUploadCollection.addBtnLabel' | fdTranslate\"\n                    [title]=\"'platformUploadCollection.addBtnLabel' | fdTranslate\"\n                ></button>\n\n                <button\n                    fd-toolbar-item\n                    fd-button\n                    (click)=\"_openNewFolderDialog()\"\n                    *ngIf=\"hierarchy\"\n                    [disabled]=\"disabled\"\n                    fdType=\"transparent\"\n                    [label]=\"'platformUploadCollection.newFolderBtnLabel' | fdTranslate\"\n                    [title]=\"'platformUploadCollection.newFolderBtnLabel' | fdTranslate\"\n                ></button>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!readonly && selectedItems.length > 0\">\n            <button\n                fd-toolbar-item\n                fd-button\n                (click)=\"_moveToClicked(true)\"\n                fdType=\"ghost\"\n                [disabled]=\"disabled\"\n                [label]=\"'platformUploadCollection.moveToBtnLabel' | fdTranslate\"\n                [title]=\"'platformUploadCollection.moveToBtnLabel' | fdTranslate\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                (click)=\"_downloadClicked(true)\"\n                fdType=\"ghost\"\n                [disabled]=\"disabled\"\n                *ngIf=\"_showIfSelectedOnlyFiles()\"\n                [label]=\"'platformUploadCollection.downloadBtnLabel' | fdTranslate\"\n                [title]=\"'platformUploadCollection.downloadBtnLabel' | fdTranslate\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                (click)=\"_remove(true)\"\n                fdType=\"ghost\"\n                [disabled]=\"disabled\"\n                [label]=\"'platformUploadCollection.removeBtnLabel' | fdTranslate\"\n                [title]=\"'platformUploadCollection.removeBtnLabel' | fdTranslate\"\n            ></button>\n        </ng-container>\n    </fd-toolbar>\n\n    <div class=\"fdp-upload-collection__table--wrapper\">\n        <div\n            class=\"fdp-upload-collection__table\"\n            fdpUploadCollectionDragnDrop\n            [fileTypes]=\"fileTypes\"\n            [maxFilenameLength]=\"maxFilenameLength\"\n            [maxFileSize]=\"maxFileSize\"\n            [mimeTypes]=\"mimeTypes\"\n            [dragndrop]=\"!readonly\"\n            [disabled]=\"disabled\"\n            [multiple]=\"multiple\"\n            (fileChanged)=\"_handleDrop($event)\"\n            (cancel)=\"_dragDropCancel()\"\n            (onDropzone)=\"_onDropzone($event)\"\n        >\n            <!-- Table -->\n            <fdp-table\n                *ngIf=\"_visibleList$.value.length > 0\"\n                [dataSource]=\"_visibleList$\"\n                [loading]=\"dataSource.isDataLoading\"\n                selectionMode=\"multiple\"\n                emptyTableMessage=\"\"\n                [noHorizontalBorders]=\"true\"\n                [trackBy]=\"_trackByDocumentId\"\n                (rowSelectionChange)=\"_onRowSelectionChange($event)\"\n            >\n                <fdp-column name=\"name\" label=\"Name\" width=\"8rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">\n                        <div class=\"fdp-upload-collection__vertical-align-center\">\n                            <fd-icon\n                                class=\"fdp-upload-collection__fd-icon\"\n                                *ngIf=\"item.type === 'folder'\"\n                                glyph=\"folder-blank\"\n                                [title]=\"'platformUploadCollection.folderIconTitle' | fdTranslate\"\n                            ></fd-icon>\n                            <fd-icon\n                                class=\"fdp-upload-collection__fd-icon\"\n                                *ngIf=\"item.type === 'file'\"\n                                [glyph]=\"_getIconByType(item)\"\n                                [title]=\"'platformUploadCollection.fileIconTitle' | fdTranslate\"\n                            ></fd-icon>\n\n                            <ng-container *ngIf=\"disabled || readonly || !_isSelectedItem(item); else editMode\">\n                                <span\n                                    [class.fdp-upload-collection__cursor]=\"item.type === 'folder'\"\n                                    (click)=\"_openFolder(item)\"\n                                    >{{ item.name }}</span\n                                >\n                            </ng-container>\n                        </div>\n\n                        <ng-template #editMode>\n                            <div fd-form-item>\n                                <fd-form-input-message-group [triggers]=\"[]\" [isOpen]=\"!!item.sameFilenameState\">\n                                    <div class=\"fdp-upload-collection__vertical-align-center\">\n                                        <input\n                                            fd-form-control\n                                            [value]=\"_getItemName(item)\"\n                                            (blur)=\"_fileNameChange($event, item)\"\n                                            (input)=\"_checkName($event, item)\"\n                                            type=\"text\"\n                                            [placeholder]=\"\n                                                'platformUploadCollection.editFileNameInputPlaceholder' | fdTranslate\n                                            \"\n                                            [state]=\"item.sameFilenameState\"\n                                        />\n                                        <span class=\"fdp-upload-collection__item_extension\">{{\n                                            _getItemExtension(item)\n                                        }}</span>\n                                    </div>\n\n                                    <fd-form-message [type]=\"item.sameFilenameState\">\n                                        {{\n                                            (item.type === 'file'\n                                                ? 'platformUploadCollection.editFileNameFileAlreadyExistsError'\n                                                : 'platformUploadCollection.editFileNameFolderAlreadyExistsError'\n                                            ) | fdTranslate\n                                        }}\n                                    </fd-form-message>\n                                </fd-form-input-message-group>\n                            </div>\n                        </ng-template>\n                    </fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"uploadedBy\" label=\"Uploaded by\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.uploadedBy.name }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"uploadedOn\" label=\"Uploaded on\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.uploadedOn | date : 'shortDate' }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"size\" label=\"File size\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.fileSize | convertBytes }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"version\" label=\"Version\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">{{ item.version || '' }}</fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"status\" label=\"Status\" width=\"5rem\">\n                    <fdp-table-cell *fdpCellDef=\"let item\">\n                        <fd-busy-indicator\n                            *ngIf=\"item.status === _uploadCollectionItemStatus.LOADING\"\n                            [loading]=\"true\"\n                            ariaLabel=\"Status: Loading\"\n                            ariaLive=\"polite\"\n                            size=\"s\"\n                        ></fd-busy-indicator>\n                        <span\n                            *ngIf=\"item.status === _uploadCollectionItemStatus.SUCCESSFUL\"\n                            fd-object-status\n                            status=\"positive\"\n                        >\n                            {{ 'platformUploadCollection.itemStatusSuccessful' | fdTranslate }}\n                        </span>\n                        <span\n                            *ngIf=\"item.status === _uploadCollectionItemStatus.UNSUCCESSFUL\"\n                            fd-object-status\n                            status=\"negative\"\n                        >\n                            {{ 'platformUploadCollection.itemStatusUnsuccessful' | fdTranslate }}\n                        </span>\n                    </fdp-table-cell>\n                </fdp-column>\n\n                <fdp-column name=\"action\" *ngIf=\"!readonly\" width=\"5rem\" align=\"end\">\n                    <fdp-table-header *fdpHeaderCellDef>Action</fdp-table-header>\n                    <fdp-table-cell *fdpCellDef=\"let item\">\n                        <div class=\"fdp-upload-collection__actions\">\n                            <div class=\"fdp-upload-collection__actions--status\">\n                                <button\n                                    fd-button\n                                    [label]=\"'platformUploadCollection.uploadNewFileAfterFailAction' | fdTranslate\"\n                                    [title]=\"'platformUploadCollection.uploadNewFileAfterFailAction' | fdTranslate\"\n                                    (click)=\"_runUploadNewFileAfterFail(item)\"\n                                    fdType=\"ghost\"\n                                    [disabled]=\"disabled\"\n                                    *ngIf=\"item.status === _uploadCollectionItemStatus.UNSUCCESSFUL\"\n                                ></button>\n\n                                <button\n                                    fd-button\n                                    [label]=\"'platformUploadCollection.cancelUploadNewFileAction' | fdTranslate\"\n                                    [title]=\"'platformUploadCollection.cancelUploadNewFileAction' | fdTranslate\"\n                                    fdType=\"ghost\"\n                                    [disabled]=\"disabled\"\n                                    (click)=\"_cancelUploadNewFile(item)\"\n                                    *ngIf=\"terminationEnabled && item.status === _uploadCollectionItemStatus.LOADING\"\n                                ></button>\n                            </div>\n\n                            <fdp-menu-button\n                                icon=\"overflow\"\n                                [disabled]=\"disabled\"\n                                type=\"transparent\"\n                                [title]=\"'platformUploadCollection.itemMenuBtnTitle' | fdTranslate\"\n                                [fdpMenuTriggerFor]=\"menuActions\"\n                                (buttonClicked)=\"_actionButton(item)\"\n                            >\n                            </fdp-menu-button>\n                        </div>\n                    </fdp-table-cell>\n                </fdp-column>\n            </fdp-table>\n\n            <!-- Dragdrop area -->\n            <div\n                class=\"fdp-upload-collection__dragdrop-area\"\n                *ngIf=\"_showDragDropArea\"\n                [class.active]=\"_onDragDropArea\"\n            >\n                <fd-icon class=\"fdp-upload-collection__dragdrop-area--icon\" glyph=\"upload-to-cloud\"></fd-icon>\n                <p class=\"fdp-upload-collection__dragdrop-area--text\">\n                    {{ 'platformUploadCollection.dragDropAreaText' | fdTranslate }}\n                </p>\n            </div>\n\n            <!-- No data -->\n            <div\n                class=\"fdp-upload-collection__no-data\"\n                *ngIf=\"_visibleList$.value.length === 0\"\n                [class.invisible]=\"_showDragDropArea\"\n            >\n                <fd-icon glyph=\"document\"></fd-icon>\n                <h3>{{ 'platformUploadCollection.noDataText' | fdTranslate }}</h3>\n                <p>{{ 'platformUploadCollection.noDataDescription' | fdTranslate }}</p>\n            </div>\n        </div>\n\n        <!-- Table footer -->\n        <div class=\"fdp-upload-collection__table-footer\" *ngIf=\"enablePagination && _totalItems\">\n            <!-- Pagination -->\n            <div class=\"fdp-upload-collection__pagination\">\n                <span [id]=\"id + '-pagination'\" class=\"fdp-upload-collection__pagination--total\">\n                    {{\n                        'platformUploadCollection.paginationTotal'\n                            | fdTranslate : { from: _countShowedItems, to: _countNotShowedItems, total: _totalItems }\n                    }}\n                </span>\n                <fd-pagination\n                    [totalItems]=\"_totalItems\"\n                    [displayTotalItems]=\"false\"\n                    (pageChangeStart)=\"_pageChanged($event)\"\n                    [itemsPerPage]=\"_itemsPerPage\"\n                    [currentPage]=\"_currentPage\"\n                    [attr.aria-labelledby]=\"id + '-pagination'\"\n                ></fd-pagination>\n            </div>\n\n            <!-- Results per page -->\n            <div class=\"fdp-upload-collection__results\">\n                <span class=\"fdp-upload-collection__results--title\">\n                    <span [id]=\"id + '-results'\">\n                        {{ 'platformUploadCollection.resultsPerPage' | fdTranslate }}\n                    </span>\n                    <span *ngIf=\"_itemsPerPageOptions.length === 0\">{{ _itemsPerPage }}</span>\n                </span>\n                <fdp-menu-button\n                    *ngIf=\"_itemsPerPageOptions.length > 0\"\n                    type=\"ghost\"\n                    [ariaLabelledBy]=\"id + '-results'\"\n                    [fdpMenuTriggerFor]=\"itemsPerPageMenu\"\n                    [label]=\"_itemsPerPage + ''\"\n                >\n                </fdp-menu-button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<fdp-menu #itemsPerPageMenu xPosition=\"before\">\n    <fdp-menu-item\n        *ngFor=\"let value of _itemsPerPageOptions\"\n        (itemSelect)=\"_itemsPerPageChange(value.label)\"\n        [attr.title]=\"'Results per page: ' + value.label\"\n    >\n        <span>{{ value.label }}</span>\n    </fdp-menu-item>\n</fdp-menu>\n\n<fdp-menu #menuActions xPosition=\"before\">\n    <fdp-menu-item (itemSelect)=\"_moveToClicked()\">\n        <fd-icon\n            class=\"fdp-upload-collection__fd-icon\"\n            glyph=\"folder-blank\"\n            [title]=\"'platformUploadCollection.moveToBtnLabel' | fdTranslate\"\n        ></fd-icon>\n        <span>\n            {{ 'platformUploadCollection.moveToBtnLabel' | fdTranslate }}\n        </span>\n    </fdp-menu-item>\n    <ng-container *ngIf=\"_activeItem?.type === 'file'\">\n        <fdp-menu-item (itemSelect)=\"_downloadClicked()\">\n            <fd-icon\n                class=\"fdp-upload-collection__fd-icon\"\n                glyph=\"download\"\n                [title]=\"'platformUploadCollection.downloadBtnLabel' | fdTranslate\"\n            ></fd-icon>\n            <span>\n                {{ 'platformUploadCollection.downloadBtnLabel' | fdTranslate }}\n            </span>\n        </fdp-menu-item>\n        <fdp-menu-item (itemSelect)=\"_openUpdateFileVersion()\">\n            <fd-icon\n                class=\"fdp-upload-collection__fd-icon\"\n                glyph=\"drill-up\"\n                [title]=\"'platformUploadCollection.updateVersionBtnLabel' | fdTranslate\"\n            ></fd-icon>\n            <span>\n                {{ 'platformUploadCollection.updateVersionBtnLabel' | fdTranslate }}\n            </span>\n        </fdp-menu-item>\n    </ng-container>\n    <fdp-menu-item (itemSelect)=\"_remove()\">\n        <fd-icon\n            class=\"fdp-upload-collection__fd-icon\"\n            glyph=\"delete\"\n            [title]=\"'platformUploadCollection.removeBtnLabel' | fdTranslate\"\n        ></fd-icon>\n        <span>\n            {{ 'platformUploadCollection.removeBtnLabel' | fdTranslate }}\n        </span>\n    </fdp-menu-item>\n</fdp-menu>\n\n<input\n    #fileInput\n    class=\"fdp-upload-collection__hidden\"\n    type=\"file\"\n    (fileSelected)=\"_selectHandler($event)\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    fdFileSelect\n/>\n\n<input\n    #updateVersionInput\n    class=\"fdp-upload-collection__hidden\"\n    type=\"file\"\n    (fileSelected)=\"_selectHandler($event)\"\n    [disabled]=\"disabled\"\n    [multiple]=\"false\"\n    fdFileSelect\n/>\n\n<ng-template\n    let-messageType=\"messageType\"\n    let-payload=\"payload\"\n    let-messageStripType=\"messageStripType\"\n    let-count=\"count\"\n    #message\n>\n    <ng-container *ngIf=\"_message\" [ngSwitch]=\"messageType\">\n        <ng-container\n            *ngSwitchCase=\"_messageType.CREATE\"\n            [ngTemplateOutlet]=\"messageNewFolder\"\n            [ngTemplateOutletContext]=\"{\n                messageStripType: _message.messageStripType,\n                payload: _message.payload\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.UPDATE_VERSION\"\n            [ngTemplateOutlet]=\"messageUpdateVersion\"\n            [ngTemplateOutletContext]=\"{\n                messageStripType: _message.messageStripType,\n                payload: _message.payload\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.FILE_RENAME\"\n            [ngTemplateOutlet]=\"messageFileRename\"\n            [ngTemplateOutletContext]=\"{\n                messageStripType: _message.messageStripType,\n                payload: _message.payload\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.REMOVE\"\n            [ngTemplateOutlet]=\"messageRemove\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.MOVE\"\n            [ngTemplateOutlet]=\"messageMove\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.TYPE_MISMATCH\"\n            [ngTemplateOutlet]=\"messageTypeMismatch\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.FILE_SIZE\"\n            [ngTemplateOutlet]=\"messageFileSize\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n\n        <ng-container\n            *ngSwitchCase=\"_messageType.FILE_NAME_LENGTH\"\n            [ngTemplateOutlet]=\"messageFilenameLength\"\n            [ngTemplateOutletContext]=\"{\n                payload: _message.payload,\n                messageStripType: _message.messageStripType,\n                count: _message.count\n            }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #messageNewFolder let-payload=\"payload\" let-messageStripType=\"messageStripType\">\n    <ng-container *ngIf=\"messageStripType === 'error'; else foldersCreated\">\n        {{ 'platformUploadCollection.messageCreateFailed' | fdTranslate : { folderName: payload.folder.name } }}\n    </ng-container>\n    <ng-template #foldersCreated>\n        {{ 'platformUploadCollection.messageCreateSuccess' | fdTranslate : { folderName: payload.folder.name } }}\n    </ng-template>\n</ng-template>\n\n<ng-template #messageUpdateVersion let-payload=\"payload\" let-messageStripType=\"messageStripType\">\n    <ng-container *ngIf=\"messageStripType === 'error'; else versionUpdated\">\n        {{ 'platformUploadCollection.messageUpdateVersionFailed' | fdTranslate : { folderName: payload.item.name } }}\n    </ng-container>\n    <ng-template #versionUpdated>\n        {{ 'platformUploadCollection.messageUpdateVersionSuccess' | fdTranslate : { folderName: payload.item.name } }}\n    </ng-template>\n</ng-template>\n\n<ng-template #messageFileRename let-payload=\"payload\" let-messageStripType=\"messageStripType\">\n    <ng-container *ngIf=\"messageStripType === 'error'; else fileRenamed\">\n        {{\n            'platformUploadCollection.messageFileRenameFailed'\n                | fdTranslate : { from: payload.item.name, to: payload.fileName }\n        }}\n    </ng-container>\n    <ng-template #fileRenamed>\n        {{\n            'platformUploadCollection.messageFileRenameSuccess'\n                | fdTranslate : { from: payload.item.name, to: payload.fileName }\n        }}\n    </ng-template>\n</ng-template>\n\n<ng-template #messageRemove let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else foldersAndFilesRemoved\">\n            {{\n                'platformUploadCollection.messageRemoveFoldersAndFilesFailed'\n                    | fdTranslate : { foldersCount: count.folder, filesCount: count.file }\n            }}\n        </ng-container>\n        <ng-template #foldersAndFilesRemoved>\n            {{\n                'platformUploadCollection.messageRemoveFoldersAndFilesSuccess'\n                    | fdTranslate : { foldersCount: count.folder, filesCount: count.file }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && !count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else foldersRemoved\">\n            {{ 'platformUploadCollection.messageRemoveFoldersFailed' | fdTranslate : { foldersCount: count.folder } }}\n        </ng-container>\n        <ng-template #foldersRemoved>\n            {{ 'platformUploadCollection.messageRemoveFoldersSuccess' | fdTranslate : { foldersCount: count.folder } }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.file && !count.folder\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else filesRemoved\">\n            {{ 'platformUploadCollection.messageRemoveFilesFailed' | fdTranslate : { filesCount: count.file } }}\n        </ng-container>\n        <ng-template #filesRemoved>\n            {{ 'platformUploadCollection.messageRemoveFilesSuccess' | fdTranslate : { filesCount: count.file } }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else oneItemRemoved\">\n            {{\n                'platformUploadCollection.messageRemoveFileOrFolderFailed'\n                    | fdTranslate : { name: payload.items[0].name }\n            }}\n        </ng-container>\n        <ng-template #oneItemRemoved>\n            {{\n                'platformUploadCollection.messageRemoveFileOrFolderSuccess'\n                    | fdTranslate : { name: payload.items[0].name }\n            }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #messageMove let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else filesAndFoldersMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersAndFilesFailed'\n                    : 'platformUploadCollection.messageMoveRootFoldersAndFilesFailed'\n                ) | fdTranslate : { foldersCount: count.folder, filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #filesAndFoldersMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersAndFilesSuccess'\n                    : 'platformUploadCollection.messageMoveRootFoldersAndFilesSuccess'\n                ) | fdTranslate : { foldersCount: count.folder, filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.folder && !count.file\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else foldersMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersFailed'\n                    : 'platformUploadCollection.messageMoveRootFoldersFailed'\n                ) | fdTranslate : { foldersCount: count.folder, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #foldersMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFoldersSuccess'\n                    : 'platformUploadCollection.messageMoveRootFoldersSuccess'\n                ) | fdTranslate : { foldersCount: count.folder, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length > 1 && count.file && !count.folder\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else filesMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFilesFailed'\n                    : 'platformUploadCollection.messageMoveRootFilesFailed'\n                ) | fdTranslate : { filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #filesMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFilesSuccess'\n                    : 'platformUploadCollection.messageMoveRootFilesSuccess'\n                ) | fdTranslate : { filesCount: count.file, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        <ng-container *ngIf=\"messageStripType === 'error'; else oneItemMovedTo\">\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFileOrFolderFailed'\n                    : 'platformUploadCollection.messageMoveRootFileOrFolderFailed'\n                ) | fdTranslate : { name: payload.items[0].name, to: payload.to?.name }\n            }}\n        </ng-container>\n        <ng-template #oneItemMovedTo>\n            {{\n                (payload.to\n                    ? 'platformUploadCollection.messageMoveFileOrFolderSuccess'\n                    : 'platformUploadCollection.messageMoveRootFileOrFolderSuccess'\n                ) | fdTranslate : { name: payload.items[0].name, to: payload.to?.name }\n            }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #messageTypeMismatch let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1\">\n        {{\n            'platformUploadCollection.messageFileTypeMismatchPlural'\n                | fdTranslate : { filesCount: payload.items.length, allowedTypes: _getAllowedTypes() }\n        }}\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        {{\n            'platformUploadCollection.messageFileTypeMismatchSingular'\n                | fdTranslate : { fileName: payload.items[0].name, allowedTypes: _getAllowedTypes() }\n        }}\n    </ng-container>\n</ng-template>\n\n<ng-template #messageFileSize let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1\">\n        {{\n            'platformUploadCollection.messageFileSizeExceededPlural'\n                | fdTranslate : { filesCount: payload.items.length, maxFileSize: maxFileSize || 0 }\n        }}\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        {{\n            'platformUploadCollection.messageFileSizeExceededSingular'\n                | fdTranslate : { fileName: payload.items[0].name, maxFileSize: maxFileSize || 0 }\n        }}\n    </ng-container>\n</ng-template>\n\n<ng-template #messageFilenameLength let-payload=\"payload\" let-messageStripType=\"messageStripType\" let-count=\"count\">\n    <ng-container *ngIf=\"payload.items.length > 1\">\n        {{\n            'platformUploadCollection.messageFileNameLengthExceededPlural'\n                | fdTranslate : { filesCount: payload.items.length, maxFilenameLength: maxFilenameLength || 0 }\n        }}\n    </ng-container>\n\n    <ng-container *ngIf=\"payload.items.length === 1\">\n        {{\n            'platformUploadCollection.messageFileNameLengthExceededSingular'\n                | fdTranslate : { fileName: payload.items[0].name, maxFilenameLength: maxFilenameLength || 0 }\n        }}\n    </ng-container>\n</ng-template>\n", styles: [".fdp-upload-collection__fd-icon{color:#0854a0!important;color:var(--sapHighlightColor)!important;margin-right:.625rem!important;font-size:1rem!important}.fdp-upload-collection fd-message-strip{margin-bottom:.625rem}.fdp-upload-collection__toolbar .fd-toolbar{margin-bottom:.625rem;border:0}.fdp-upload-collection__toolbar .fd-toolbar fd-input-group .sap-icon--search{color:#0854a0;color:var(--sapHighlightColor)}.fdp-upload-collection__no-data{text-align:center;min-height:230px;display:flex;align-items:center;flex-direction:column;justify-content:center}.fdp-upload-collection__no-data fd-icon{font-size:3rem;line-height:3rem;margin:0;color:#6a6d70;color:var(--sapContent_LabelColor)}.fdp-upload-collection__no-data h3{font-size:1.125rem;font-size:var(--sapFontHeader4Size);line-height:1rem;margin:8px 0}.fdp-upload-collection__no-data p{font-size:.875rem;font-size:var(--sapFontSize);line-height:1rem;color:#6a6d70;color:var(--sapContent_LabelColor);margin:0}.fdp-upload-collection__no-data.invisible{opacity:0}.fdp-upload-collection__table{position:relative}.fdp-upload-collection__table-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.625rem}.fdp-upload-collection__table-footer .fdp-upload-collection__results--title,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total{line-height:1.4;line-height:var(--sapContent_LineHeight);color:#32363a;color:var(--sapTextColor);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily);font-weight:400;-webkit-font-smoothing:antialiased;box-sizing:border-box;padding:0;margin:0;border:0;font-size:.875rem;font-size:var(--sapFontSize);color:#6a6d70;color:var(--sapContent_LabelColor);margin-right:.5rem}.fdp-upload-collection__table-footer .fdp-upload-collection__results--title:before,.fdp-upload-collection__table-footer .fdp-upload-collection__results--title:after,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total:before,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fdp-upload-collection__table-footer .fdp-upload-collection__results--title,.fdp-upload-collection__table-footer .fdp-upload-collection__results--title[dir=rtl],[dir=rtl] .fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total[dir=rtl]{margin-right:0;margin-left:.5rem}.fdp-upload-collection__table-footer .fdp-upload-collection__pagination--total{width:100%;align-self:center}.fdp-upload-collection__table-footer .fdp-upload-collection__pagination{font-size:.875rem;font-size:var(--sapFontSize);line-height:1.4;line-height:var(--sapContent_LineHeight);color:#32363a;color:var(--sapTextColor);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily);font-weight:400;-webkit-font-smoothing:antialiased;box-sizing:border-box;padding:0;margin:0;border:0;display:flex}.fdp-upload-collection__table-footer .fdp-upload-collection__pagination:before,.fdp-upload-collection__table-footer .fdp-upload-collection__pagination:after{box-sizing:inherit;font-size:inherit}.fdp-upload-collection__hidden{display:none}.fdp-upload-collection__vertical-align-center{display:flex;align-items:center}.fdp-upload-collection__cursor{cursor:pointer}.fdp-upload-collection__item_extension{white-space:nowrap}.fdp-upload-collection__actions{display:flex;justify-content:space-between;align-items:center}.fdp-upload-collection__actions .sap-icon--slim-arrow-down{display:none}.fdp-upload-collection__dragdrop-area{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(255,255,255,.5);outline:2px dashed transparent;outline-color:#89919a;outline-color:var(--sapField_BorderColor);outline-offset:-4px;box-sizing:border-box}.fdp-upload-collection__dragdrop-area fd-icon{font-size:3rem;line-height:3rem;margin-bottom:1rem;color:#6a6d70;color:var(--sapContent_LabelColor)}.fdp-upload-collection__dragdrop-area p{font-size:1rem;line-height:1.125rem;color:#6a6d70;color:var(--sapContent_LabelColor)}.fdp-upload-collection__dragdrop-area.active{outline-color:#0854a0;outline-color:var(--sapContent_DragAndDropActiveColor);background:rgba(8,84,160,.08)}.fdp-upload-collection__dragdrop-area.active fd-icon,.fdp-upload-collection__dragdrop-area.active p{color:#0854a0;color:var(--sapContent_DragAndDropActiveColor)}.fdp-upload-collection .fd-form-item{align-items:center;flex-direction:row}.fdp-upload-collection-dialig-no-bg{background-color:transparent!important}[dir=rtl] .fdp-upload-collection fd-icon{margin-right:0;margin-left:.625rem}.fd-menu__list .disabled{background-color:#fff!important;background-color:var(--sapList_Background)!important;cursor:not-allowed}.fd-menu__list .disabled .fd-menu__title{color:#32363a!important;color:var(--sapList_TextColor)!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: FilesValidatorService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { id: [{
-                type: Input
-            }], itemsPerPage: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], fileTypes: [{
-                type: Input
-            }], maxFileSize: [{
-                type: Input
-            }], maxFilenameLength: [{
-                type: Input
-            }], mimeTypes: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], hierarchy: [{
-                type: Input
-            }], enablePagination: [{
-                type: Input
-            }], terminationEnabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], showSearch: [{
-                type: Input
-            }], sameFileNameAllowed: [{
-                type: Input
-            }], typeMismatch: [{
-                type: Output
-            }], filenameLengthExceed: [{
-                type: Output
-            }], fileSizeExceed: [{
-                type: Output
-            }], _uploadFilesRef: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }], _updateVersionRef: [{
-                type: ViewChild,
-                args: ['updateVersionInput']
-            }] } });
-
-class PlatformUploadCollectionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformUploadCollectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: PlatformUploadCollectionModule, imports: [ContentDensityModule,
-            UploadCollectionComponent,
-            NewFolderComponent,
-            MoveToComponent,
-            UploadCollectionDragnDropDirective], exports: [UploadCollectionComponent, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformUploadCollectionModule, imports: [ContentDensityModule,
-            UploadCollectionComponent,
-            NewFolderComponent,
-            MoveToComponent, ContentDensityModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PlatformUploadCollectionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        ContentDensityModule,
-                        UploadCollectionComponent,
-                        NewFolderComponent,
-                        MoveToComponent,
-                        UploadCollectionDragnDropDirective
-                    ],
-                    exports: [UploadCollectionComponent, ContentDensityModule]
-                }]
-        }] });
-
-/**
- * Default implementation for Observable Arrays and Arrays.
- */
-/**
- * In Memory implementation of DataProvider that supports fulltext search
- */
-class UploadCollectionDataProvider extends DataProvider {
-    constructor() {
-        super(...arguments);
-        /** @hidden */
-        this.totalItems = 0;
-        /** @hidden */
-        this.list = [];
-    }
-    /** @hidden */
-    fetch(params) {
-        let currentItems = this.items;
-        const folderId = params.get('folderId');
-        if (folderId) {
-            const folder = this._findFolderById(folderId);
-            currentItems = folder ? folder.files : [];
-        }
-        let _list = this._defaultSorting(currentItems);
-        const searchText = params.get('searchText') ?? '';
-        const limit = +(params.get('limit') ?? 100);
-        const page = +(params.get('page') ?? 1);
-        if (!searchText || searchText === '*') {
-            this.list = _list;
-            this.totalItems = _list.length;
-            return of(this._getItemsByPage(_list, page, limit));
-        }
-        const keyword = searchText.toLowerCase();
-        _list = _list.filter((item) => item.name.toLowerCase().indexOf(keyword) > -1);
-        this.list = _list;
-        this.totalItems = _list.length;
-        _list = this._getItemsByPage(_list, page, limit);
-        return of(_list);
-    }
-    /** @hidden */
-    _getItemsByPage(items, page, limit) {
-        const firstDisplayedRow = (page - 1) * limit;
-        const _visibleList = items.slice(firstDisplayedRow, firstDisplayedRow + limit);
-        if (_visibleList.length === 0 && items.length > 0) {
-            this._getItemsByPage(items, page > 1 ? page - 1 : 1, limit);
-        }
-        return _visibleList;
-    }
-    /** @hidden */
-    _defaultSorting(list) {
-        let _list = [];
-        const groupByType = list.reduce((res, item) => {
-            const type = `${item.type}s`;
-            if (!res[type]) {
-                res[type] = [];
-            }
-            if (item.type === 'folder') {
-                item.fileSize = +this._getFileSize(item).toFixed(2);
-            }
-            res[type].push(item);
-            return res;
-        }, {});
-        groupByType.folders = this._sortBy(groupByType.folders, 'name');
-        groupByType.files = this._sortBy(groupByType.files, 'name');
-        if (groupByType.folders) {
-            _list = groupByType.folders;
-        }
-        else {
-            _list = [];
-        }
-        if (groupByType.files) {
-            _list.push(...groupByType.files);
-        }
-        return _list;
-    }
-    /** @hidden */
-    _getFileSize(item) {
-        if (item.type === 'file') {
-            return item.fileSize;
-        }
-        if (item.type === 'folder') {
-            return item.files.reduce((res, folderItem) => {
-                res += this._getFileSize(folderItem);
-                return res;
-            }, 0);
-        }
-        return 0;
-    }
-    /** @hidden */
-    _sortBy(items = [], key) {
-        return items.sort((a, b) => (a[key] > b[key] ? 1 : -1));
-    }
-    /** @hidden */
-    _findFolderById(folderId) {
-        let foundObj;
-        JSON.stringify(this.items, (_, nestedValue) => {
-            if (nestedValue && nestedValue.documentId === folderId) {
-                foundObj = nestedValue;
-            }
-            return nestedValue;
-        });
-        return foundObj;
-    }
-}
-
-class UploadCollectionDataSource {
-    /** Max items for response */
-    static { this.MaxLimit = Number.MAX_SAFE_INTEGER; }
-    /** @hidden */
-    get isDataLoading() {
-        return this._dataLoading;
-    }
-    /** @hidden */
-    constructor(dataProvider) {
-        this.dataProvider = dataProvider;
-        /** @hidden */
-        this._dataChanges = new BehaviorSubject([]);
-        /** @hidden */
-        this._onDataRequested$ = new Subject();
-        /** @hidden */
-        this._onDataReceived$ = new Subject();
-        /** @hidden */
-        this._dataLoading = false;
-    }
-    /** Filtering data */
-    match(searchParam) {
-        this._onDataRequested$.next();
-        this._dataLoading = true;
-        if (!(searchParam instanceof Map)) {
-            throw new Error('DataSource.match() predicate can only accepts string and Map');
-        }
-        if (!searchParam.has('limit')) {
-            searchParam.set('limit', UploadCollectionDataSource.MaxLimit);
-        }
-        this.dataProvider
-            .fetch(searchParam)
-            .pipe(take(1))
-            .subscribe((result) => {
-            this._onDataReceived$.next();
-            this._dataLoading = false;
-            this._dataChanges.next(result);
-        }, () => {
-            this._onDataReceived$.next();
-            this._dataLoading = false;
-        });
-    }
-    /** The method is triggered when valid files are selected in the file uploader dialog. */
-    upload(data) {
-        return this.dataProvider.upload(data).pipe(take(1));
-    }
-    /** The method is triggered when an uploaded attachment is selected and the Download button is pressed. */
-    download(data) {
-        return this.dataProvider.download(data);
-    }
-    /** The method is triggered when Move to button is pressed and folder to move is selected in the dialog modal. */
-    moveTo(data) {
-        return this.dataProvider.moveTo(data).pipe(take(1));
-    }
-    /** The method is triggered when an uploaded attachment is selected and the Delete button is pressed. */
-    delete(data) {
-        return this.dataProvider.delete(data).pipe(take(1));
-    }
-    /** The method is triggered when the file name is changed. */
-    fileRenamed(data) {
-        return this.dataProvider.fileRenamed(data).pipe(take(1));
-    }
-    /** The method is triggered when the new folder added. */
-    newFolder(data) {
-        return this.dataProvider.newFolder(data).pipe(take(1));
-    }
-    /** The method is triggered when Update Version button is pressed and valid file are selected in the file uploader dialog. */
-    updateVersion(data) {
-        return this.dataProvider.updateVersion(data).pipe(take(1));
-    }
-    /** The method is triggered when Run button is pressed */
-    runAfterFail(data) {
-        return this.dataProvider.runAfterFail(data).pipe(take(1));
-    }
-    /** The method is triggered when Cancel button is pressed */
-    cancelUploadNewFile(data) {
-        return this.dataProvider.cancelUploadNewFile(data).pipe(take(1));
-    }
-    /** @hidden */
-    open() {
-        return this._dataChanges.asObservable();
-    }
-    /** @hidden */
-    close() { }
-    /** @hidden */
-    onDataRequested() {
-        return this._onDataRequested$.asObservable();
-    }
-    /** @hidden */
-    onDataReceived() {
-        return this._onDataReceived$.asObservable();
-    }
-}
-
-const dataSource = [
-    {
-        documentId: uuidv4$1(),
-        type: 'folder',
-        name: 'Folder-1',
-        uploadedBy: {
-            id: uuidv4$1(),
-            name: 'Lucas A.'
-        },
-        uploadedOn: new Date(2018, 4, 1),
-        files: [
-            {
-                documentId: uuidv4$1(),
-                type: 'file',
-                name: 'File-2',
-                uploadedBy: {
-                    id: uuidv4$1(),
-                    name: 'Oliver T.'
-                },
-                url: '',
-                uploadedOn: new Date(2018, 0, 1),
-                fileSize: 1024,
-                version: 2
-            }
-        ]
-    },
-    {
-        documentId: uuidv4$1(),
-        type: 'file',
-        name: `File-1`,
-        uploadedBy: {
-            id: uuidv4$1(),
-            name: 'William G.'
-        },
-        url: '',
-        uploadedOn: new Date(2010, 9, 4),
-        fileSize: 2048,
-        version: 1
-    }
-];
-class UploadCollectionDataProviderTest extends UploadCollectionDataProvider {
-    constructor() {
-        super(...arguments);
-        /** @hidden */
-        this.items = dataSource.map((item) => ({ ...item }));
-        /** @hidden */
-        this._cancelUploadNewFileIds = [];
-    }
-    /** The method is triggered when valid files are selected in the file uploader dialog. */
-    upload({ parentFolderId, items }) {
-        console.log('upload', parentFolderId, items);
-        const newFiles = items.map((item) => {
-            delete item.file;
-            item.status = UploadCollectionItemStatus.SUCCESSFUL;
-            return {
-                temporaryDocumentId: item.documentId,
-                item
-            };
-        });
-        this._findParentFolderAndAddNewFiles(parentFolderId, newFiles);
-        return of(this.items).pipe(delay(5000), map((updatedItems) => {
-            const ids = newFiles
-                .filter((file) => {
-                const includes = file.item.documentId && this._cancelUploadNewFileIds.includes(file.item.documentId);
-                if (includes) {
-                    this._cancelUploadNewFileIds = this._cancelUploadNewFileIds.filter((id) => id !== file.item.documentId);
-                    return true;
-                }
-                return false;
-            })
-                .map((file) => file.item.documentId);
-            this._findParentFolderAndRemoveItemsByIds(parentFolderId, ids, updatedItems);
-            return updatedItems;
-        }));
-    }
-    /** The method is triggered when an uploaded attachment is selected and the Download button is pressed. */
-    download(data) {
-        console.log('download', data);
-        return of(undefined);
-    }
-    /**
-     * The method is triggered when Move to button is pressed and folder to move is selected in the dialog modal.
-     * Should return full dataSource
-     * */
-    moveTo(data) {
-        console.log('moveTo', data);
-        return of([]);
-    }
-    /** The method is triggered when an uploaded attachment is selected and the Delete button is pressed. */
-    delete({ parentFolderId, items }) {
-        console.log('delete', parentFolderId, items);
-        const ids = items.map((item) => item.documentId);
-        this._findParentFolderAndRemoveItemsByIds(parentFolderId, ids);
-        return of(this.items);
-    }
-    /** The method is triggered when the file name is changed. */
-    fileRenamed({ parentFolderId, item, fileName }) {
-        console.log('fileRenamed', parentFolderId, item, fileName);
-        let updatedItem = {
-            ...item,
-            name: fileName,
-            status: UploadCollectionItemStatus.SUCCESSFUL
-        };
-        this._findParentFolderAndUpdateItem(parentFolderId, updatedItem);
-        return of(this.items).pipe(delay(5000), map((updatedItems) => {
-            const itemId = item.documentId;
-            const includes = itemId && this._cancelUploadNewFileIds.includes(itemId);
-            if (includes) {
-                updatedItem = { ...updatedItem };
-                updatedItem.name = item.name;
-                updatedItem.status = UploadCollectionItemStatus.SUCCESSFUL;
-                this._findParentFolderAndUpdateItem(parentFolderId, updatedItem, updatedItems);
-                this._cancelUploadNewFileIds = this._cancelUploadNewFileIds.filter((id) => id !== itemId);
-            }
-            return updatedItems;
-        }));
-    }
-    /** The method is triggered when the new folder added. */
-    newFolder({ parentFolderId, folder }) {
-        console.log('newFolder', folder, parentFolderId);
-        folder.status = UploadCollectionItemStatus.SUCCESSFUL;
-        this._findParentFolderAndAddNewFiles(parentFolderId, [
-            {
-                temporaryDocumentId: folder.documentId,
-                item: folder
-            }
-        ]);
-        return of(this.items).pipe(delay(5000), map((updatedItems) => {
-            const folderId = folder.documentId;
-            const includes = !!folderId && this._cancelUploadNewFileIds.includes(folderId);
-            if (includes) {
-                this._cancelUploadNewFileIds = this._cancelUploadNewFileIds.filter((id) => id !== folderId);
-                this._findParentFolderAndRemoveItemsByIds(parentFolderId, [folderId], updatedItems);
-            }
-            return updatedItems;
-        }));
-    }
-    /** The method is triggered when Update Version button is pressed and valid file are selected in the file uploader dialog. */
-    updateVersion({ parentFolderId, item, newItem }) {
-        console.log('updateVersion', parentFolderId, item);
-        let updatedItem = {
-            ...item,
-            status: UploadCollectionItemStatus.SUCCESSFUL,
-            uploadedOn: new Date(),
-            uploadedBy: {
-                id: Date.now(),
-                name: 'You'
-            },
-            version: +item.version,
-            name: newItem.name,
-            fileSize: newItem.size
-        };
-        this._findParentFolderAndUpdateItem(parentFolderId, updatedItem);
-        return of(this.items).pipe(delay(5000), map((updatedItems) => {
-            const itemId = updatedItem.documentId;
-            const includes = this._cancelUploadNewFileIds.includes(itemId);
-            if (includes) {
-                updatedItem = { ...item };
-                this._findParentFolderAndUpdateItem(parentFolderId, updatedItem, updatedItems);
-                this._cancelUploadNewFileIds = this._cancelUploadNewFileIds.filter((id) => id !== itemId);
-            }
-            return updatedItems;
-        }));
-    }
-    /** @hidden */
-    runAfterFail({ parentFolderId, items }) {
-        console.log('runAfterFail', parentFolderId, items);
-        const item = items[0];
-        this._findParentFolderAndAddNewFiles(parentFolderId, [
-            {
-                temporaryDocumentId: item.documentId,
-                item: {
-                    ...item,
-                    status: UploadCollectionItemStatus.SUCCESSFUL
-                }
-            }
-        ]);
-        return of(this.items);
-    }
-    /** The method is triggered when Cancel button is pressed */
-    cancelUploadNewFile({ parentFolderId, item }) {
-        console.log('cancelUploadNewFile', parentFolderId, item);
-        const id = item.documentId;
-        this._cancelUploadNewFileIds.push(id);
-        this._findParentFolderAndRemoveItemsByIds(parentFolderId, [id]);
-        return of([]);
-    }
-    /** @hidden */
-    _findParentFolderAndUpdateItem(parentFolderId, updatedItem, items = this.items) {
-        if (!parentFolderId) {
-            const index = items.findIndex((item) => item.documentId === updatedItem.documentId);
-            if (index !== -1) {
-                items[index] = updatedItem;
-            }
-            return;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const currentItem = items[i];
-            if (currentItem.type !== 'folder') {
-                continue;
-            }
-            if (currentItem.documentId === parentFolderId) {
-                const index = currentItem.files.findIndex((item) => item.documentId === updatedItem.documentId);
-                if (index !== -1) {
-                    currentItem.files[i] = updatedItem;
-                    break;
-                }
-            }
-            else {
-                this._findParentFolderAndUpdateItem(parentFolderId, updatedItem, currentItem.files);
-            }
-        }
-    }
-    /** @hidden */
-    _findParentFolderAndAddNewFiles(parentFolderId, uploadedFiles, items = this.items) {
-        if (uploadedFiles.length === 0) {
-            return;
-        }
-        if (!parentFolderId) {
-            const uploadedFile = uploadedFiles.pop();
-            const index = items.findIndex((item) => item.documentId === uploadedFile?.temporaryDocumentId);
-            if (index !== -1) {
-                items[index] = uploadedFile.item;
-                this._findParentFolderAndAddNewFiles(parentFolderId, uploadedFiles);
-            }
-            return;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const currentItem = items[i];
-            if (currentItem.type !== 'folder') {
-                continue;
-            }
-            if (currentItem.documentId === parentFolderId) {
-                const hash = uploadedFiles.reduce((res, file) => {
-                    res[file.temporaryDocumentId] = file.item;
-                    return res;
-                }, {});
-                currentItem.files = currentItem.files.map((item) => hash[item.documentId] || item);
-                break;
-            }
-            else {
-                this._findParentFolderAndAddNewFiles(parentFolderId, uploadedFiles, currentItem.files);
-            }
-        }
-    }
-    /** @hidden */
-    _findParentFolderAndRemoveItemsByIds(parentFolderId, documentsIds, items = this.items) {
-        if (documentsIds.length === 0) {
-            return;
-        }
-        if (!parentFolderId) {
-            const documentId = documentsIds.pop();
-            const index = items.findIndex((item) => item.documentId === documentId);
-            if (index !== -1) {
-                items.splice(index, 1);
-                this._findParentFolderAndRemoveItemsByIds(parentFolderId, documentsIds);
-            }
-            return;
-        }
-        for (let i = 0; i < items.length; i++) {
-            const currentItem = items[i];
-            if (currentItem.type !== 'folder') {
-                continue;
-            }
-            if (currentItem.documentId === parentFolderId) {
-                currentItem.files = currentItem.files.filter((item) => !documentsIds.some((documentId) => documentId === item.documentId));
-                break;
-            }
-            else {
-                this._findParentFolderAndRemoveItemsByIds(parentFolderId, documentsIds, currentItem.files);
-            }
-        }
-    }
-}
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { FileSizeExceedEvent, FilenameLengthExceedEvent, FilesValidatorService, MessageStripType, MessageType, MoveToComponent, NewFolderComponent, PlatformUploadCollectionModule, TypeMismatchEvent, UploadCollectionComponent, UploadCollectionDataProvider, UploadCollectionDataProviderTest, UploadCollectionDataSource, UploadCollectionDragnDropDirective, UploadCollectionItemStatus, generateMessageStripeData };
-//# sourceMappingURL=fundamental-ngx-platform-upload-collection.mjs.map