@c8y/ngx-components 1022.9.6 → 1022.13.0

package/fesm2022/c8y-ngx-components-file-preview.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Input, Inject, Component, EventEmitter, NgModule } from '@angular/core';
 import * as i3 from '@c8y/ngx-components';
-import { gettext, CoreModule, CommonModule } from '@c8y/ngx-components';
+import { gettext, IconDirective, ModalComponent, LoadingComponent, C8yTranslatePipe, BytesPipe, CoreModule, CommonModule } from '@c8y/ngx-components';
 import * as i1 from 'ngx-bootstrap/modal';
 import * as i2 from '@angular/platform-browser';
 import { takeUntil, first } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import * as i4 from '@angular/common';
+import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 
 const PRODUCT_EXPERIENCE_FILE_PREVIEW = {
     EVENTS: {
@@ -129,11 +129,21 @@ class FilePreviewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewComponent, deps: [{ token: DOWNLOAD_EMITTER }, { token: i1.BsModalRef }, { token: i1.BsModalService }, { token: i2.DomSanitizer }, { token: i3.FilesService }, { token: i3.AlertService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilePreviewComponent, isStandalone: false, selector: "c8y-file-preview", inputs: { _mo: ["mo", "_mo"] }, ngImport: i0, template: "<div\n  class=\"d-inline-block\"\n  *ngIf=\"contentType !== 'unsupported'\"\n  (click)=\"openModal(modalTemplate)\"\n>\n  <div #customButtonRef>\n    <ng-content select=\"[customButton]\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"!customButtonRef.children.length\">\n    <button [title]=\"'Preview file' | translate\" type=\"button\" class=\"btn btn-default btn-icon\">\n      <i c8yIcon=\"search\"></i>\n    </button>\n  </ng-container>\n</div>\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    [title]=\"mo.name\"\n    [customFooter]=\"false\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n    class=\"text-break-word\"\n  >\n    <div class=\"text-center d-block\" *ngIf=\"!dataUrl\">\n      <c8y-loading layout=\"application\" [progress]=\"progress.percentage\"></c8y-loading>\n      {{\n        BUFFERING_STATUS_TEXT\n          | translate\n            : {\n                totalBytes: progress.totalBytes | bytes,\n                bufferedBytes: progress.bufferedBytes | bytes,\n                percentage: progress.percentage,\n                speed: progress.bytesPerSecond | bytes\n              }\n      }}\n    </div>\n\n    <ng-container *ngIf=\"dataUrl\" [ngSwitch]=\"contentType\" id=\"modal-body\">\n      <ng-container *ngSwitchCase=\"'image'\">\n        <img class=\"fit-w\" alt=\"safeDataUrl\" [src]=\"safeDataUrl\" />\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'video'\">\n        <video controls autoplay class=\"fit-w\">\n          <source [src]=\"safeDataUrl\" />\n          {{ 'Your browser does not support the video tag.' | translate }}\n        </video>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'text'\">\n        <!--        @TODO: Implement text viewer-->\n        text\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'json'\">\n        <!--        @TODO: Implement json viewer-->\n        json\n      </ng-container>\n\n      <ng-container *ngSwitchDefault></ng-container>\n    </ng-container>\n  </c8y-modal>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.BytesPipe, name: "bytes" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilePreviewComponent, isStandalone: true, selector: "c8y-file-preview", inputs: { _mo: ["mo", "_mo"] }, ngImport: i0, template: "<div\n  class=\"d-inline-block\"\n  *ngIf=\"contentType !== 'unsupported'\"\n  (click)=\"openModal(modalTemplate)\"\n>\n  <div #customButtonRef>\n    <ng-content select=\"[customButton]\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"!customButtonRef.children.length\">\n    <button [title]=\"'Preview file' | translate\" type=\"button\" class=\"btn btn-default btn-icon\">\n      <i c8yIcon=\"search\"></i>\n    </button>\n  </ng-container>\n</div>\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    [title]=\"mo.name\"\n    [customFooter]=\"false\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n    class=\"text-break-word\"\n  >\n    <div class=\"text-center d-block\" *ngIf=\"!dataUrl\">\n      <c8y-loading layout=\"application\" [progress]=\"progress.percentage\"></c8y-loading>\n      {{\n        BUFFERING_STATUS_TEXT\n          | translate\n            : {\n                totalBytes: progress.totalBytes | bytes,\n                bufferedBytes: progress.bufferedBytes | bytes,\n                percentage: progress.percentage,\n                speed: progress.bytesPerSecond | bytes\n              }\n      }}\n    </div>\n\n    <ng-container *ngIf=\"dataUrl\" [ngSwitch]=\"contentType\" id=\"modal-body\">\n      <ng-container *ngSwitchCase=\"'image'\">\n        <img class=\"fit-w\" alt=\"safeDataUrl\" [src]=\"safeDataUrl\" />\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'video'\">\n        <video controls autoplay class=\"fit-w\">\n          <source [src]=\"safeDataUrl\" />\n          {{ 'Your browser does not support the video tag.' | translate }}\n        </video>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'text'\">\n        <!--        @TODO: Implement text viewer-->\n        text\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'json'\">\n        <!--        @TODO: Implement json viewer-->\n        json\n      </ng-container>\n\n      <ng-container *ngSwitchDefault></ng-container>\n    </ng-container>\n  </c8y-modal>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: BytesPipe, name: "bytes" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-file-preview', standalone: false, template: "<div\n  class=\"d-inline-block\"\n  *ngIf=\"contentType !== 'unsupported'\"\n  (click)=\"openModal(modalTemplate)\"\n>\n  <div #customButtonRef>\n    <ng-content select=\"[customButton]\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"!customButtonRef.children.length\">\n    <button [title]=\"'Preview file' | translate\" type=\"button\" class=\"btn btn-default btn-icon\">\n      <i c8yIcon=\"search\"></i>\n    </button>\n  </ng-container>\n</div>\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    [title]=\"mo.name\"\n    [customFooter]=\"false\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n    class=\"text-break-word\"\n  >\n    <div class=\"text-center d-block\" *ngIf=\"!dataUrl\">\n      <c8y-loading layout=\"application\" [progress]=\"progress.percentage\"></c8y-loading>\n      {{\n        BUFFERING_STATUS_TEXT\n          | translate\n            : {\n                totalBytes: progress.totalBytes | bytes,\n                bufferedBytes: progress.bufferedBytes | bytes,\n                percentage: progress.percentage,\n                speed: progress.bytesPerSecond | bytes\n              }\n      }}\n    </div>\n\n    <ng-container *ngIf=\"dataUrl\" [ngSwitch]=\"contentType\" id=\"modal-body\">\n      <ng-container *ngSwitchCase=\"'image'\">\n        <img class=\"fit-w\" alt=\"safeDataUrl\" [src]=\"safeDataUrl\" />\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'video'\">\n        <video controls autoplay class=\"fit-w\">\n          <source [src]=\"safeDataUrl\" />\n          {{ 'Your browser does not support the video tag.' | translate }}\n        </video>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'text'\">\n        <!--        @TODO: Implement text viewer-->\n        text\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'json'\">\n        <!--        @TODO: Implement json viewer-->\n        json\n      </ng-container>\n\n      <ng-container *ngSwitchDefault></ng-container>\n    </ng-container>\n  </c8y-modal>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-file-preview', imports: [
+                        NgIf,
+                        IconDirective,
+                        ModalComponent,
+                        LoadingComponent,
+                        NgSwitch,
+                        NgSwitchCase,
+                        NgSwitchDefault,
+                        C8yTranslatePipe,
+                        BytesPipe
+                    ], template: "<div\n  class=\"d-inline-block\"\n  *ngIf=\"contentType !== 'unsupported'\"\n  (click)=\"openModal(modalTemplate)\"\n>\n  <div #customButtonRef>\n    <ng-content select=\"[customButton]\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"!customButtonRef.children.length\">\n    <button [title]=\"'Preview file' | translate\" type=\"button\" class=\"btn btn-default btn-icon\">\n      <i c8yIcon=\"search\"></i>\n    </button>\n  </ng-container>\n</div>\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    [title]=\"mo.name\"\n    [customFooter]=\"false\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n    class=\"text-break-word\"\n  >\n    <div class=\"text-center d-block\" *ngIf=\"!dataUrl\">\n      <c8y-loading layout=\"application\" [progress]=\"progress.percentage\"></c8y-loading>\n      {{\n        BUFFERING_STATUS_TEXT\n          | translate\n            : {\n                totalBytes: progress.totalBytes | bytes,\n                bufferedBytes: progress.bufferedBytes | bytes,\n                percentage: progress.percentage,\n                speed: progress.bytesPerSecond | bytes\n              }\n      }}\n    </div>\n\n    <ng-container *ngIf=\"dataUrl\" [ngSwitch]=\"contentType\" id=\"modal-body\">\n      <ng-container *ngSwitchCase=\"'image'\">\n        <img class=\"fit-w\" alt=\"safeDataUrl\" [src]=\"safeDataUrl\" />\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'video'\">\n        <video controls autoplay class=\"fit-w\">\n          <source [src]=\"safeDataUrl\" />\n          {{ 'Your browser does not support the video tag.' | translate }}\n        </video>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'text'\">\n        <!--        @TODO: Implement text viewer-->\n        text\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'json'\">\n        <!--        @TODO: Implement json viewer-->\n        json\n      </ng-container>\n\n      <ng-container *ngSwitchDefault></ng-container>\n    </ng-container>\n  </c8y-modal>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.EventEmitter, decorators: [{
                     type: Inject,
                     args: [DOWNLOAD_EMITTER]
@@ -145,19 +155,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 const downloadEmitter = new EventEmitter();
 class FilePreviewModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewModule, declarations: [FilePreviewComponent], imports: [CoreModule, CommonModule], exports: [FilePreviewComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewModule, imports: [CoreModule, CommonModule, FilePreviewComponent], exports: [FilePreviewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewModule, providers: [
             {
                 provide: DOWNLOAD_EMITTER,
                 useValue: downloadEmitter
             }
-        ], imports: [CoreModule, CommonModule] }); }
+        ], imports: [CoreModule, CommonModule, FilePreviewComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilePreviewModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FilePreviewComponent],
-                    imports: [CoreModule, CommonModule],
+                    imports: [CoreModule, CommonModule, FilePreviewComponent],
                     exports: [FilePreviewComponent],
                     providers: [
                         {

package/fesm2022/c8y-ngx-components-file-preview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-file-preview.mjs","sources":["../../file-preview/file-preview-product-experience.constants.ts","../../file-preview/download-emitter.token.ts","../../file-preview/file-preview.component.ts","../../file-preview/file-preview.component.html","../../file-preview/file-preview.module.ts","../../file-preview/c8y-ngx-components-file-preview.ts"],"sourcesContent":["export const PRODUCT_EXPERIENCE_FILE_PREVIEW = {\n  EVENTS: {\n    FILE_PREVIEW: 'filePreview'\n  },\n  COMPONENTS: {\n    FILE_PREVIEW_COMPONENT: 'file-preview'\n  },\n  ACTIONS: {\n    OPEN_PREVIEW: 'openPreview'\n  }\n} as const;\n","import { EventEmitter, InjectionToken } from '@angular/core';\n\n/**\n * Provides InjectionToken used in FilePreviewModule. This token is used to inject EventEmitter instance, that is\n * shared among all instances of FilePreviewComponent. These components communicate between each other using this\n * emitter, which enables them to clear downloaded files from memory, if other instance of FilePreviewComponent\n * started downloading different file. Value emitted by this EventEmitter is ID of downloaded file.\n */\nexport const DOWNLOAD_EMITTER = new InjectionToken<EventEmitter<string>>('downloadEmitter');\n","import { Component, EventEmitter, Inject, Input, OnDestroy, TemplateRef } from '@angular/core';\nimport { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';\nimport { IManagedObjectBinary } from '@c8y/client';\nimport { DomSanitizer, SafeUrl } from '@angular/platform-browser';\nimport { first, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\nimport {\n  AlertService,\n  FilesService,\n  gettext,\n  IFetchWithProgress,\n  GainsightService\n} from '@c8y/ngx-components';\nimport { PRODUCT_EXPERIENCE_FILE_PREVIEW } from './file-preview-product-experience.constants';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\n/**\n * A component which shows a button that opens a modal with the preview of a binary managed object.\n * This component requires CSP 'blob:' rule for img-src and media-src to be set.\n *\n * ```html\n * <c8y-file-preview [mo]=\"managedObject\">\n *     <button customButton>Preview</button>\n * </c8y-file-preview>\n * ```\n * If no custom button provided, the component will use the default search icon button instead.\n *\n */\n@Component({\n  selector: 'c8y-file-preview',\n  templateUrl: './file-preview.component.html',\n  standalone: false\n})\nexport class FilePreviewComponent implements OnDestroy {\n  @Input('mo')\n  set _mo(mo: IManagedObjectBinary) {\n    this.mo = mo;\n    this.setContentType();\n  }\n  mo: IManagedObjectBinary;\n\n  contentType: 'image' | 'video' | 'text' | 'json' | 'unsupported' = 'unsupported';\n  progress: IFetchWithProgress;\n\n  dataUrl: string;\n  safeDataUrl: SafeUrl;\n  BUFFERING_STATUS_TEXT = gettext(\n    '{{speed}}/s - {{bufferedBytes}} of {{totalBytes}} buffered ({{percentage}}%)'\n  );\n\n  private destroy$: Subject<any> = new Subject();\n\n  constructor(\n    @Inject(DOWNLOAD_EMITTER) private downloadEmitter: EventEmitter<string>,\n    public modalRef: BsModalRef,\n    private modalService: BsModalService,\n    private sanitizer: DomSanitizer,\n    private filesService: FilesService,\n    private alertService: AlertService,\n    private gainsightService: GainsightService\n  ) {\n    downloadEmitter.pipe(takeUntil(this.destroy$)).subscribe(id => {\n      if (this.dataUrl && this.mo.id !== id) {\n        this.removeDownloadedFile();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.removeDownloadedFile();\n    this.destroy$.next(true);\n    this.destroy$.complete();\n  }\n\n  async openModal(template: TemplateRef<any>) {\n    this.modalRef = this.modalService.show(template, {\n      ariaDescribedby: 'modal-body',\n      ariaLabelledBy: 'modal-title',\n      ignoreBackdropClick: true\n    });\n\n    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_FILE_PREVIEW.EVENTS.FILE_PREVIEW, {\n      component: PRODUCT_EXPERIENCE_FILE_PREVIEW.COMPONENTS.FILE_PREVIEW_COMPONENT,\n      action: PRODUCT_EXPERIENCE_FILE_PREVIEW.ACTIONS.OPEN_PREVIEW\n    });\n\n    if (this.dataUrl) {\n      return;\n    }\n\n    this.downloadEmitter.emit(this.mo.id);\n\n    const subscription = this.filesService\n      .fetchFileWithProgress$(this.mo)\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(\n        progress => {\n          this.progress = progress;\n          if (this.progress.blob) {\n            this.dataUrl = URL.createObjectURL(progress.blob);\n            this.safeDataUrl = this.sanitizer.bypassSecurityTrustUrl(this.dataUrl);\n          }\n        },\n        e => {\n          this.modalRef.hide();\n          this.alertService.addServerFailure(e);\n        }\n      );\n\n    this.modalRef.onHide.pipe(first(), takeUntil(this.destroy$)).subscribe(() => {\n      subscription.unsubscribe();\n    });\n  }\n\n  private removeDownloadedFile(): void {\n    URL.revokeObjectURL(this.dataUrl);\n    delete this.dataUrl;\n    delete this.safeDataUrl;\n  }\n\n  private setContentType(): void {\n    if (!this.mo || !this.mo.hasOwnProperty('c8y_IsBinary')) {\n      // eslint-disable-next-line no-console\n      console.warn('Provided Managed object is not binary');\n      this.contentType = 'unsupported';\n      return;\n    }\n\n    if (this.mo.contentType.startsWith('image/')) {\n      this.contentType = 'image';\n    } else if (this.mo.contentType.startsWith('video/')) {\n      this.contentType = 'video';\n    } else if (this.mo.contentType.startsWith('text/')) {\n      // @TODO: Implement in future\n      this.contentType = 'unsupported';\n    } else if (this.mo.contentType.startsWith('application/json')) {\n      // @TODO: Implement in future\n      this.contentType = 'unsupported';\n    } else {\n      this.contentType = 'unsupported';\n    }\n  }\n}\n","<div\n  class=\"d-inline-block\"\n  *ngIf=\"contentType !== 'unsupported'\"\n  (click)=\"openModal(modalTemplate)\"\n>\n  <div #customButtonRef>\n    <ng-content select=\"[customButton]\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"!customButtonRef.children.length\">\n    <button [title]=\"'Preview file' | translate\" type=\"button\" class=\"btn btn-default btn-icon\">\n      <i c8yIcon=\"search\"></i>\n    </button>\n  </ng-container>\n</div>\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    [title]=\"mo.name\"\n    [customFooter]=\"false\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n    class=\"text-break-word\"\n  >\n    <div class=\"text-center d-block\" *ngIf=\"!dataUrl\">\n      <c8y-loading layout=\"application\" [progress]=\"progress.percentage\"></c8y-loading>\n      {{\n        BUFFERING_STATUS_TEXT\n          | translate\n            : {\n                totalBytes: progress.totalBytes | bytes,\n                bufferedBytes: progress.bufferedBytes | bytes,\n                percentage: progress.percentage,\n                speed: progress.bytesPerSecond | bytes\n              }\n      }}\n    </div>\n\n    <ng-container *ngIf=\"dataUrl\" [ngSwitch]=\"contentType\" id=\"modal-body\">\n      <ng-container *ngSwitchCase=\"'image'\">\n        <img class=\"fit-w\" alt=\"safeDataUrl\" [src]=\"safeDataUrl\" />\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'video'\">\n        <video controls autoplay class=\"fit-w\">\n          <source [src]=\"safeDataUrl\" />\n          {{ 'Your browser does not support the video tag.' | translate }}\n        </video>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'text'\">\n        <!--        @TODO: Implement text viewer-->\n        text\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'json'\">\n        <!--        @TODO: Implement json viewer-->\n        json\n      </ng-container>\n\n      <ng-container *ngSwitchDefault></ng-container>\n    </ng-container>\n  </c8y-modal>\n</ng-template>\n","import { EventEmitter, NgModule } from '@angular/core';\nimport { CoreModule } from '@c8y/ngx-components';\nimport { FilePreviewComponent } from './file-preview.component';\nimport { CommonModule } from '@c8y/ngx-components';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\nconst downloadEmitter = new EventEmitter<string>();\n\n@NgModule({\n  declarations: [FilePreviewComponent],\n  imports: [CoreModule, CommonModule],\n  exports: [FilePreviewComponent],\n  providers: [\n    {\n      provide: DOWNLOAD_EMITTER,\n      useValue: downloadEmitter\n    }\n  ]\n})\nexport class FilePreviewModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-file-preview.mjs","sources":["../../file-preview/file-preview-product-experience.constants.ts","../../file-preview/download-emitter.token.ts","../../file-preview/file-preview.component.ts","../../file-preview/file-preview.component.html","../../file-preview/file-preview.module.ts","../../file-preview/c8y-ngx-components-file-preview.ts"],"sourcesContent":["export const PRODUCT_EXPERIENCE_FILE_PREVIEW = {\n  EVENTS: {\n    FILE_PREVIEW: 'filePreview'\n  },\n  COMPONENTS: {\n    FILE_PREVIEW_COMPONENT: 'file-preview'\n  },\n  ACTIONS: {\n    OPEN_PREVIEW: 'openPreview'\n  }\n} as const;\n","import { EventEmitter, InjectionToken } from '@angular/core';\n\n/**\n * Provides InjectionToken used in FilePreviewModule. This token is used to inject EventEmitter instance, that is\n * shared among all instances of FilePreviewComponent. These components communicate between each other using this\n * emitter, which enables them to clear downloaded files from memory, if other instance of FilePreviewComponent\n * started downloading different file. Value emitted by this EventEmitter is ID of downloaded file.\n */\nexport const DOWNLOAD_EMITTER = new InjectionToken<EventEmitter<string>>('downloadEmitter');\n","import { Component, EventEmitter, Inject, Input, OnDestroy, TemplateRef } from '@angular/core';\nimport { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';\nimport { IManagedObjectBinary } from '@c8y/client';\nimport { DomSanitizer, SafeUrl } from '@angular/platform-browser';\nimport { first, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\nimport {\n  AlertService,\n  FilesService,\n  gettext,\n  IFetchWithProgress,\n  GainsightService,\n  IconDirective,\n  ModalComponent,\n  LoadingComponent,\n  C8yTranslatePipe,\n  BytesPipe\n} from '@c8y/ngx-components';\nimport { PRODUCT_EXPERIENCE_FILE_PREVIEW } from './file-preview-product-experience.constants';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\nimport { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';\n\n/**\n * A component which shows a button that opens a modal with the preview of a binary managed object.\n * This component requires CSP 'blob:' rule for img-src and media-src to be set.\n *\n * ```html\n * <c8y-file-preview [mo]=\"managedObject\">\n *     <button customButton>Preview</button>\n * </c8y-file-preview>\n * ```\n * If no custom button provided, the component will use the default search icon button instead.\n *\n */\n@Component({\n  selector: 'c8y-file-preview',\n  templateUrl: './file-preview.component.html',\n  imports: [\n    NgIf,\n    IconDirective,\n    ModalComponent,\n    LoadingComponent,\n    NgSwitch,\n    NgSwitchCase,\n    NgSwitchDefault,\n    C8yTranslatePipe,\n    BytesPipe\n  ]\n})\nexport class FilePreviewComponent implements OnDestroy {\n  @Input('mo')\n  set _mo(mo: IManagedObjectBinary) {\n    this.mo = mo;\n    this.setContentType();\n  }\n  mo: IManagedObjectBinary;\n\n  contentType: 'image' | 'video' | 'text' | 'json' | 'unsupported' = 'unsupported';\n  progress: IFetchWithProgress;\n\n  dataUrl: string;\n  safeDataUrl: SafeUrl;\n  BUFFERING_STATUS_TEXT = gettext(\n    '{{speed}}/s - {{bufferedBytes}} of {{totalBytes}} buffered ({{percentage}}%)'\n  );\n\n  private destroy$: Subject<any> = new Subject();\n\n  constructor(\n    @Inject(DOWNLOAD_EMITTER) private downloadEmitter: EventEmitter<string>,\n    public modalRef: BsModalRef,\n    private modalService: BsModalService,\n    private sanitizer: DomSanitizer,\n    private filesService: FilesService,\n    private alertService: AlertService,\n    private gainsightService: GainsightService\n  ) {\n    downloadEmitter.pipe(takeUntil(this.destroy$)).subscribe(id => {\n      if (this.dataUrl && this.mo.id !== id) {\n        this.removeDownloadedFile();\n      }\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.removeDownloadedFile();\n    this.destroy$.next(true);\n    this.destroy$.complete();\n  }\n\n  async openModal(template: TemplateRef<any>) {\n    this.modalRef = this.modalService.show(template, {\n      ariaDescribedby: 'modal-body',\n      ariaLabelledBy: 'modal-title',\n      ignoreBackdropClick: true\n    });\n\n    this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_FILE_PREVIEW.EVENTS.FILE_PREVIEW, {\n      component: PRODUCT_EXPERIENCE_FILE_PREVIEW.COMPONENTS.FILE_PREVIEW_COMPONENT,\n      action: PRODUCT_EXPERIENCE_FILE_PREVIEW.ACTIONS.OPEN_PREVIEW\n    });\n\n    if (this.dataUrl) {\n      return;\n    }\n\n    this.downloadEmitter.emit(this.mo.id);\n\n    const subscription = this.filesService\n      .fetchFileWithProgress$(this.mo)\n      .pipe(takeUntil(this.destroy$))\n      .subscribe(\n        progress => {\n          this.progress = progress;\n          if (this.progress.blob) {\n            this.dataUrl = URL.createObjectURL(progress.blob);\n            this.safeDataUrl = this.sanitizer.bypassSecurityTrustUrl(this.dataUrl);\n          }\n        },\n        e => {\n          this.modalRef.hide();\n          this.alertService.addServerFailure(e);\n        }\n      );\n\n    this.modalRef.onHide.pipe(first(), takeUntil(this.destroy$)).subscribe(() => {\n      subscription.unsubscribe();\n    });\n  }\n\n  private removeDownloadedFile(): void {\n    URL.revokeObjectURL(this.dataUrl);\n    delete this.dataUrl;\n    delete this.safeDataUrl;\n  }\n\n  private setContentType(): void {\n    if (!this.mo || !this.mo.hasOwnProperty('c8y_IsBinary')) {\n      // eslint-disable-next-line no-console\n      console.warn('Provided Managed object is not binary');\n      this.contentType = 'unsupported';\n      return;\n    }\n\n    if (this.mo.contentType.startsWith('image/')) {\n      this.contentType = 'image';\n    } else if (this.mo.contentType.startsWith('video/')) {\n      this.contentType = 'video';\n    } else if (this.mo.contentType.startsWith('text/')) {\n      // @TODO: Implement in future\n      this.contentType = 'unsupported';\n    } else if (this.mo.contentType.startsWith('application/json')) {\n      // @TODO: Implement in future\n      this.contentType = 'unsupported';\n    } else {\n      this.contentType = 'unsupported';\n    }\n  }\n}\n","<div\n  class=\"d-inline-block\"\n  *ngIf=\"contentType !== 'unsupported'\"\n  (click)=\"openModal(modalTemplate)\"\n>\n  <div #customButtonRef>\n    <ng-content select=\"[customButton]\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"!customButtonRef.children.length\">\n    <button [title]=\"'Preview file' | translate\" type=\"button\" class=\"btn btn-default btn-icon\">\n      <i c8yIcon=\"search\"></i>\n    </button>\n  </ng-container>\n</div>\n\n<ng-template #modalTemplate>\n  <c8y-modal\n    [title]=\"mo.name\"\n    [customFooter]=\"false\"\n    (onClose)=\"modalRef.hide()\"\n    (onDismiss)=\"modalRef.hide()\"\n    [labels]=\"{ cancel: '', ok: 'Close' | translate }\"\n    class=\"text-break-word\"\n  >\n    <div class=\"text-center d-block\" *ngIf=\"!dataUrl\">\n      <c8y-loading layout=\"application\" [progress]=\"progress.percentage\"></c8y-loading>\n      {{\n        BUFFERING_STATUS_TEXT\n          | translate\n            : {\n                totalBytes: progress.totalBytes | bytes,\n                bufferedBytes: progress.bufferedBytes | bytes,\n                percentage: progress.percentage,\n                speed: progress.bytesPerSecond | bytes\n              }\n      }}\n    </div>\n\n    <ng-container *ngIf=\"dataUrl\" [ngSwitch]=\"contentType\" id=\"modal-body\">\n      <ng-container *ngSwitchCase=\"'image'\">\n        <img class=\"fit-w\" alt=\"safeDataUrl\" [src]=\"safeDataUrl\" />\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'video'\">\n        <video controls autoplay class=\"fit-w\">\n          <source [src]=\"safeDataUrl\" />\n          {{ 'Your browser does not support the video tag.' | translate }}\n        </video>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'text'\">\n        <!--        @TODO: Implement text viewer-->\n        text\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'json'\">\n        <!--        @TODO: Implement json viewer-->\n        json\n      </ng-container>\n\n      <ng-container *ngSwitchDefault></ng-container>\n    </ng-container>\n  </c8y-modal>\n</ng-template>\n","import { EventEmitter, NgModule } from '@angular/core';\nimport { CoreModule, CommonModule } from '@c8y/ngx-components';\nimport { FilePreviewComponent } from './file-preview.component';\nimport { DOWNLOAD_EMITTER } from './download-emitter.token';\n\nconst downloadEmitter = new EventEmitter<string>();\n\n@NgModule({\n  imports: [CoreModule, CommonModule, FilePreviewComponent],\n  exports: [FilePreviewComponent],\n  providers: [\n    {\n      provide: DOWNLOAD_EMITTER,\n      useValue: downloadEmitter\n    }\n  ]\n})\nexport class FilePreviewModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAAO,MAAM,+BAA+B,GAAG;AAC7C,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE;AACf,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,sBAAsB,EAAE;AACzB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,YAAY,EAAE;AACf;CACO;;ACRV;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,IAAI,cAAc,CAAuB,iBAAiB,CAAC;;ACc3F;;;;;;;;;;;AAWG;MAgBU,oBAAoB,CAAA;IAC/B,IACI,GAAG,CAAC,EAAwB,EAAA;AAC9B,QAAA,IAAI,CAAC,EAAE,GAAG,EAAE;QACZ,IAAI,CAAC,cAAc,EAAE;;AAevB,IAAA,WAAA,CACoC,eAAqC,EAChE,QAAoB,EACnB,YAA4B,EAC5B,SAAuB,EACvB,YAA0B,EAC1B,YAA0B,EAC1B,gBAAkC,EAAA;QANR,IAAe,CAAA,eAAA,GAAf,eAAe;QAC1C,IAAQ,CAAA,QAAA,GAAR,QAAQ;QACP,IAAY,CAAA,YAAA,GAAZ,YAAY;QACZ,IAAS,CAAA,SAAA,GAAT,SAAS;QACT,IAAY,CAAA,YAAA,GAAZ,YAAY;QACZ,IAAY,CAAA,YAAA,GAAZ,YAAY;QACZ,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB;QAlB1B,IAAW,CAAA,WAAA,GAAwD,aAAa;AAKhF,QAAA,IAAA,CAAA,qBAAqB,GAAG,OAAO,CAC7B,8EAA8E,CAC/E;AAEO,QAAA,IAAA,CAAA,QAAQ,GAAiB,IAAI,OAAO,EAAE;AAW5C,QAAA,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,IAAG;AAC5D,YAAA,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;gBACrC,IAAI,CAAC,oBAAoB,EAAE;;AAE/B,SAAC,CAAC;;IAGJ,WAAW,GAAA;QACT,IAAI,CAAC,oBAAoB,EAAE;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;;IAG1B,MAAM,SAAS,CAAC,QAA0B,EAAA;QACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/C,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,cAAc,EAAE,aAAa;AAC7B,YAAA,mBAAmB,EAAE;AACtB,SAAA,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,+BAA+B,CAAC,MAAM,CAAC,YAAY,EAAE;AACtF,YAAA,SAAS,EAAE,+BAA+B,CAAC,UAAU,CAAC,sBAAsB;AAC5E,YAAA,MAAM,EAAE,+BAA+B,CAAC,OAAO,CAAC;AACjD,SAAA,CAAC;AAEF,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB;;QAGF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;AAErC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC;AACvB,aAAA,sBAAsB,CAAC,IAAI,CAAC,EAAE;AAC9B,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CACR,QAAQ,IAAG;AACT,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;AACxB,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;gBACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjD,gBAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC;;SAEzE,EACD,CAAC,IAAG;AACF,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,YAAA,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC;AACvC,SAAC,CACF;QAEH,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,MAAK;YAC1E,YAAY,CAAC,WAAW,EAAE;AAC5B,SAAC,CAAC;;IAGI,oBAAoB,GAAA;AAC1B,QAAA,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;QACjC,OAAO,IAAI,CAAC,OAAO;QACnB,OAAO,IAAI,CAAC,WAAW;;IAGjB,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE;;AAEvD,YAAA,OAAO,CAAC,IAAI,CAAC,uCAAuC,CAAC;AACrD,YAAA,IAAI,CAAC,WAAW,GAAG,aAAa;YAChC;;QAGF,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,GAAG,OAAO;;aACrB,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;AACnD,YAAA,IAAI,CAAC,WAAW,GAAG,OAAO;;aACrB,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;;AAElD,YAAA,IAAI,CAAC,WAAW,GAAG,aAAa;;aAC3B,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;;AAE7D,YAAA,IAAI,CAAC,WAAW,GAAG,aAAa;;aAC3B;AACL,YAAA,IAAI,CAAC,WAAW,GAAG,aAAa;;;AA1GzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,kBAoBrB,gBAAgB,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AApBf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,4GCjDjC,0jEAiEA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BI,IAAI,EACJ,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,aAAa,2EACb,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,MAAA,EAAA,cAAA,EAAA,eAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,gBAAgB,EAChB,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAQ,6EACR,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,eAAe,EACf,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,gBAAgB,6CAChB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGA,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAfhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAEnB,OAAA,EAAA;wBACP,IAAI;wBACJ,aAAa;wBACb,cAAc;wBACd,gBAAgB;wBAChB,QAAQ;wBACR,YAAY;wBACZ,eAAe;wBACf,gBAAgB;wBAChB;AACD,qBAAA,EAAA,QAAA,EAAA,0jEAAA,EAAA;;0BAsBE,MAAM;2BAAC,gBAAgB;+MAlBtB,GAAG,EAAA,CAAA;sBADN,KAAK;uBAAC,IAAI;;;AE7Cb,MAAM,eAAe,GAAG,IAAI,YAAY,EAAU;MAYrC,iBAAiB,CAAA;+GAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YATlB,UAAU,EAAE,YAAY,EAAE,oBAAoB,aAC9C,oBAAoB,CAAA,EAAA,CAAA,CAAA;AAQnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,EAPjB,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,gBAAgB;AACzB,gBAAA,QAAQ,EAAE;AACX;AACF,SAAA,EAAA,OAAA,EAAA,CAPS,UAAU,EAAE,YAAY,EAAE,oBAAoB,CAAA,EAAA,CAAA,CAAA;;4FAS7C,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,oBAAoB,CAAC;oBACzD,OAAO,EAAE,CAAC,oBAAoB,CAAC;AAC/B,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,gBAAgB;AACzB,4BAAA,QAAQ,EAAE;AACX;AACF;AACF,iBAAA;;;AChBD;;AAEG;;;;"}

package/fesm2022/c8y-ngx-components-files-repository.mjs

@@ -1,18 +1,17 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Output, Component, ViewChild, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import * as i3 from '@c8y/ngx-components';
-import { Permissions, NavigatorNode, gettext, BuiltInActionType, Status, DataGridComponent, CoreModule, DropAreaModule, hookNavigator, hookRoute } from '@c8y/ngx-components';
-import * as i1 from '@c8y/client';
+import * as i1 from '@c8y/ngx-components';
+import { Permissions, NavigatorNode, gettext, IconDirective, C8yTranslateDirective, FilePickerFormControlComponent, C8yTranslatePipe, BuiltInActionType, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, ActionBarItemComponent, IfAllowedDirective, HelpComponent, DataGridComponent, EmptyStateContextDirective, EmptyStateComponent, ColumnDirective, CellRendererDefDirective, DatePipe, BytesPipe, CoreModule, DropAreaModule, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import * as i1$1 from '@c8y/client';
 import { QueriesUtil } from '@c8y/client';
 import * as i5 from '@ngx-translate/core';
 import * as i4 from 'ngx-bootstrap/modal';
 import { combineLatest, Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { has, transform } from 'lodash-es';
-import * as i6 from '@angular/common';
-import * as i7 from '@c8y/ngx-components/file-preview';
-import { FilePreviewModule } from '@c8y/ngx-components/file-preview';
+import { NgIf } from '@angular/common';
+import { FilePreviewComponent, FilePreviewModule } from '@c8y/ngx-components/file-preview';
 
 class FilesRepositoryGuard {
     constructor(permissions) {
@@ -31,7 +30,7 @@ class FilesRepositoryGuard {
                 Permissions.ROLE_BINARY_READ
             ]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryGuard, deps: [{ token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryGuard, deps: [{ token: i1.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryGuard, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryGuard, decorators: [{
@@ -39,7 +38,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i3.Permissions }] });
+        }], ctorParameters: () => [{ type: i1.Permissions }] });
 
 class FilesRepositoryNavigationFactory {
     constructor(filesRepositoryGuard) {
@@ -120,13 +119,13 @@ class FilesRepositoryUploadComponent {
             this.filesToUpload = event;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryUploadComponent, deps: [{ token: i3.AlertService }, { token: i3.GainsightService }, { token: i3.FilesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilesRepositoryUploadComponent, isStandalone: false, selector: "c8y-files-repository-upload", outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"c8y-viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"upload\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Upload files\n    </h4>\n  </div>\n  <div class=\"modal-inner-scroll\">\n    <div\n      class=\"modal-body\"\n      id=\"modal-body\"\n    >\n      <c8y-file-picker-form-control\n        #filePicker\n        [uploadInProgress]=\"isLoading\"\n        (dropped)=\"onFileDroppedEvent($event)\"\n        [uploadProgress]=\"uploadProgress\"\n      ></c8y-file-picker-form-control>\n    </div>\n  </div>\n  <div class=\"card-footer separator d-flex j-c-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"onClose.emit({ uploaded: false })\"\n      [disabled]=\"isLoading\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Upload' | translate }}\"\n      type=\"button\"\n      (click)=\"upload()\"\n      [disabled]=\"!filePicker.valid || isLoading\"\n      translate\n      data-cy=\"c8y-files-repository-upload--upload\"\n    >\n      Upload\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.FilePickerFormControlComponent, selector: "c8y-file-picker-form-control", inputs: ["accept", "maxAllowedFiles", "minRequiredFiles", "disableValidators", "uploadInProgress", "uploadProgress", "validateExtensionOnDrag"], outputs: ["dropped"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryUploadComponent, deps: [{ token: i1.AlertService }, { token: i1.GainsightService }, { token: i1.FilesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilesRepositoryUploadComponent, isStandalone: true, selector: "c8y-files-repository-upload", outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"c8y-viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"upload\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Upload files\n    </h4>\n  </div>\n  <div class=\"modal-inner-scroll\">\n    <div\n      class=\"modal-body\"\n      id=\"modal-body\"\n    >\n      <c8y-file-picker-form-control\n        #filePicker\n        [uploadInProgress]=\"isLoading\"\n        (dropped)=\"onFileDroppedEvent($event)\"\n        [uploadProgress]=\"uploadProgress\"\n      ></c8y-file-picker-form-control>\n    </div>\n  </div>\n  <div class=\"card-footer separator d-flex j-c-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"onClose.emit({ uploaded: false })\"\n      [disabled]=\"isLoading\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Upload' | translate }}\"\n      type=\"button\"\n      (click)=\"upload()\"\n      [disabled]=\"!filePicker.valid || isLoading\"\n      translate\n      data-cy=\"c8y-files-repository-upload--upload\"\n    >\n      Upload\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FilePickerFormControlComponent, selector: "c8y-file-picker-form-control", inputs: ["accept", "maxAllowedFiles", "minRequiredFiles", "disableValidators", "uploadInProgress", "uploadProgress", "validateExtensionOnDrag"], outputs: ["dropped"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-files-repository-upload', standalone: false, template: "<div class=\"c8y-viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"upload\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Upload files\n    </h4>\n  </div>\n  <div class=\"modal-inner-scroll\">\n    <div\n      class=\"modal-body\"\n      id=\"modal-body\"\n    >\n      <c8y-file-picker-form-control\n        #filePicker\n        [uploadInProgress]=\"isLoading\"\n        (dropped)=\"onFileDroppedEvent($event)\"\n        [uploadProgress]=\"uploadProgress\"\n      ></c8y-file-picker-form-control>\n    </div>\n  </div>\n  <div class=\"card-footer separator d-flex j-c-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"onClose.emit({ uploaded: false })\"\n      [disabled]=\"isLoading\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Upload' | translate }}\"\n      type=\"button\"\n      (click)=\"upload()\"\n      [disabled]=\"!filePicker.valid || isLoading\"\n      translate\n      data-cy=\"c8y-files-repository-upload--upload\"\n    >\n      Upload\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i3.AlertService }, { type: i3.GainsightService }, { type: i3.FilesService }], propDecorators: { onClose: [{
+            args: [{ selector: 'c8y-files-repository-upload', imports: [IconDirective, C8yTranslateDirective, FilePickerFormControlComponent, C8yTranslatePipe], template: "<div class=\"c8y-viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i c8yIcon=\"upload\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n    >\n      Upload files\n    </h4>\n  </div>\n  <div class=\"modal-inner-scroll\">\n    <div\n      class=\"modal-body\"\n      id=\"modal-body\"\n    >\n      <c8y-file-picker-form-control\n        #filePicker\n        [uploadInProgress]=\"isLoading\"\n        (dropped)=\"onFileDroppedEvent($event)\"\n        [uploadProgress]=\"uploadProgress\"\n      ></c8y-file-picker-form-control>\n    </div>\n  </div>\n  <div class=\"card-footer separator d-flex j-c-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"onClose.emit({ uploaded: false })\"\n      [disabled]=\"isLoading\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      title=\"{{ 'Upload' | translate }}\"\n      type=\"button\"\n      (click)=\"upload()\"\n      [disabled]=\"!filePicker.valid || isLoading\"\n      translate\n      data-cy=\"c8y-files-repository-upload--upload\"\n    >\n      Upload\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.AlertService }, { type: i1.GainsightService }, { type: i1.FilesService }], propDecorators: { onClose: [{
                 type: Output
             }] } });
 
@@ -262,7 +261,7 @@ class FilesRepositoryService {
         }
         return query;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryService, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryService, deps: [{ token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryService, decorators: [{
@@ -270,7 +269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.InventoryService }] });
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }] });
 
 class FilesRepositoryComponent {
     constructor(filesRepositoryService, inventoryBinaryService, modalService, alertService, bsModalService, fileService, translateService) {
@@ -405,20 +404,43 @@ class FilesRepositoryComponent {
         const labels = { ok: gettext('Delete'), cancel: gettext('Cancel') };
         await this.modalService.confirm(title, body, status, labels);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryComponent, deps: [{ token: FilesRepositoryService }, { token: i1.InventoryBinaryService }, { token: i3.ModalService }, { token: i3.AlertService }, { token: i4.BsModalService }, { token: i3.FilesService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilesRepositoryComponent, isStandalone: false, selector: "c8y-files-repository", viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    [label]=\"managementTitle | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"title | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Upload files' | translate }}\"\n    *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE']; allowAny: true\"\n    (click)=\"openFileUploadComponent()\"\n    data-cy=\"c8y-files-repository--open-file-upload-component\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ 'Upload files' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/managing-data/#file-repository\"></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [infiniteScroll]=\"infiniteScroll\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [actionControls]=\"actionControls\"\n    [selectable]=\"selectable\"\n    [showSearch]=\"true\"\n    [refresh]=\"refresh\"\n    [bulkActionControls]=\"bulkActionControls\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'c8y-archive'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Upload file' | translate }}\"\n          type=\"button\"\n          (click)=\"openFileUploadComponent()\"\n        >\n          <i c8yIcon=\"plus-circle\"></i>\n          {{ 'Upload file' | translate }}\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n\n    <c8y-column name=\"name\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }}\">\n          <div class=\"d-flex j-c-between a-i-center\">\n            {{ context.value }}\n            <c8y-file-preview\n              class=\"m-l-auto\"\n              [mo]=\"context.item\"\n            >\n              <button\n                class=\"btn btn-emphasis btn-icon\"\n                [title]=\"'Preview file' | translate\"\n                type=\"button\"\n                customButton\n              >\n                <i c8yIcon=\"search\"></i>\n              </button>\n            </c8y-file-preview>\n          </div>\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"length\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }} B\">\n          {{ context.value | bytes }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"lastUpdated\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | c8yDate }}\">\n          {{ context.value | c8yDate }}\n        </span>\n      </ng-container>\n    </c8y-column>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3.CellRendererDefDirective, selector: "[c8yCellRendererDef]" }, { kind: "directive", type: i3.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i3.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i7.FilePreviewComponent, selector: "c8y-file-preview", inputs: ["mo"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.BytesPipe, name: "bytes" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryComponent, deps: [{ token: FilesRepositoryService }, { token: i1$1.InventoryBinaryService }, { token: i1.ModalService }, { token: i1.AlertService }, { token: i4.BsModalService }, { token: i1.FilesService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FilesRepositoryComponent, isStandalone: true, selector: "c8y-files-repository", viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    [label]=\"managementTitle | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"title | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Upload files' | translate }}\"\n    *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE']; allowAny: true\"\n    (click)=\"openFileUploadComponent()\"\n    data-cy=\"c8y-files-repository--open-file-upload-component\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ 'Upload files' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/managing-data/#file-repository\"></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [infiniteScroll]=\"infiniteScroll\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [actionControls]=\"actionControls\"\n    [selectable]=\"selectable\"\n    [showSearch]=\"true\"\n    [refresh]=\"refresh\"\n    [bulkActionControls]=\"bulkActionControls\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'c8y-archive'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Upload file' | translate }}\"\n          type=\"button\"\n          (click)=\"openFileUploadComponent()\"\n        >\n          <i c8yIcon=\"plus-circle\"></i>\n          {{ 'Upload file' | translate }}\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n\n    <c8y-column name=\"name\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }}\">\n          <div class=\"d-flex j-c-between a-i-center\">\n            {{ context.value }}\n            <c8y-file-preview\n              class=\"m-l-auto\"\n              [mo]=\"context.item\"\n            >\n              <button\n                class=\"btn btn-emphasis btn-icon\"\n                [title]=\"'Preview file' | translate\"\n                type=\"button\"\n                customButton\n              >\n                <i c8yIcon=\"search\"></i>\n              </button>\n            </c8y-file-preview>\n          </div>\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"length\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }} B\">\n          {{ context.value | bytes }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"lastUpdated\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | c8yDate }}\">\n          {{ context.value | c8yDate }}\n        </span>\n      </ng-container>\n    </c8y-column>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "directive", type: CellRendererDefDirective, selector: "[c8yCellRendererDef]" }, { kind: "component", type: FilePreviewComponent, selector: "c8y-file-preview", inputs: ["mo"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: BytesPipe, name: "bytes" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-files-repository', standalone: false, template: "<c8y-title>\n  {{ title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    [label]=\"managementTitle | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"title | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Upload files' | translate }}\"\n    *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE']; allowAny: true\"\n    (click)=\"openFileUploadComponent()\"\n    data-cy=\"c8y-files-repository--open-file-upload-component\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ 'Upload files' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/managing-data/#file-repository\"></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [infiniteScroll]=\"infiniteScroll\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [actionControls]=\"actionControls\"\n    [selectable]=\"selectable\"\n    [showSearch]=\"true\"\n    [refresh]=\"refresh\"\n    [bulkActionControls]=\"bulkActionControls\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'c8y-archive'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Upload file' | translate }}\"\n          type=\"button\"\n          (click)=\"openFileUploadComponent()\"\n        >\n          <i c8yIcon=\"plus-circle\"></i>\n          {{ 'Upload file' | translate }}\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n\n    <c8y-column name=\"name\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }}\">\n          <div class=\"d-flex j-c-between a-i-center\">\n            {{ context.value }}\n            <c8y-file-preview\n              class=\"m-l-auto\"\n              [mo]=\"context.item\"\n            >\n              <button\n                class=\"btn btn-emphasis btn-icon\"\n                [title]=\"'Preview file' | translate\"\n                type=\"button\"\n                customButton\n              >\n                <i c8yIcon=\"search\"></i>\n              </button>\n            </c8y-file-preview>\n          </div>\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"length\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }} B\">\n          {{ context.value | bytes }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"lastUpdated\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | c8yDate }}\">\n          {{ context.value | c8yDate }}\n        </span>\n      </ng-container>\n    </c8y-column>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: FilesRepositoryService }, { type: i1.InventoryBinaryService }, { type: i3.ModalService }, { type: i3.AlertService }, { type: i4.BsModalService }, { type: i3.FilesService }, { type: i5.TranslateService }], propDecorators: { dataGrid: [{
+            args: [{ selector: 'c8y-files-repository', imports: [
+                        TitleComponent,
+                        BreadcrumbComponent,
+                        BreadcrumbItemComponent,
+                        ActionBarItemComponent,
+                        IfAllowedDirective,
+                        IconDirective,
+                        HelpComponent,
+                        DataGridComponent,
+                        EmptyStateContextDirective,
+                        EmptyStateComponent,
+                        NgIf,
+                        ColumnDirective,
+                        CellRendererDefDirective,
+                        FilePreviewComponent,
+                        C8yTranslatePipe,
+                        DatePipe,
+                        BytesPipe
+                    ], template: "<c8y-title>\n  {{ title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    [label]=\"managementTitle | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"title | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Upload files' | translate }}\"\n    *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE']; allowAny: true\"\n    (click)=\"openFileUploadComponent()\"\n    data-cy=\"c8y-files-repository--open-file-upload-component\"\n  >\n    <i c8yIcon=\"upload\"></i>\n    {{ 'Upload files' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/standard-tenant/managing-data/#file-repository\"></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [infiniteScroll]=\"infiniteScroll\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [actionControls]=\"actionControls\"\n    [selectable]=\"selectable\"\n    [showSearch]=\"true\"\n    [refresh]=\"refresh\"\n    [bulkActionControls]=\"bulkActionControls\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'c8y-archive'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary\"\n          title=\"{{ 'Upload file' | translate }}\"\n          type=\"button\"\n          (click)=\"openFileUploadComponent()\"\n        >\n          <i c8yIcon=\"plus-circle\"></i>\n          {{ 'Upload file' | translate }}\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n\n    <c8y-column name=\"name\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }}\">\n          <div class=\"d-flex j-c-between a-i-center\">\n            {{ context.value }}\n            <c8y-file-preview\n              class=\"m-l-auto\"\n              [mo]=\"context.item\"\n            >\n              <button\n                class=\"btn btn-emphasis btn-icon\"\n                [title]=\"'Preview file' | translate\"\n                type=\"button\"\n                customButton\n              >\n                <i c8yIcon=\"search\"></i>\n              </button>\n            </c8y-file-preview>\n          </div>\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"length\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value }} B\">\n          {{ context.value | bytes }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"lastUpdated\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | c8yDate }}\">\n          {{ context.value | c8yDate }}\n        </span>\n      </ng-container>\n    </c8y-column>\n  </c8y-data-grid>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: FilesRepositoryService }, { type: i1$1.InventoryBinaryService }, { type: i1.ModalService }, { type: i1.AlertService }, { type: i4.BsModalService }, { type: i1.FilesService }, { type: i5.TranslateService }], propDecorators: { dataGrid: [{
                 type: ViewChild,
                 args: [DataGridComponent, { static: true }]
             }] } });
 
 class FilesRepositoryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryModule, declarations: [FilesRepositoryComponent, FilesRepositoryUploadComponent], imports: [RouterModule, CoreModule, DropAreaModule, FilePreviewModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryModule, imports: [RouterModule,
+            CoreModule,
+            DropAreaModule,
+            FilePreviewModule,
+            FilesRepositoryComponent,
+            FilesRepositoryUploadComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryModule, providers: [
             FilesRepositoryGuard,
             hookNavigator(FilesRepositoryNavigationFactory),
@@ -428,14 +450,25 @@ class FilesRepositoryModule {
                 canActivate: [FilesRepositoryGuard]
             }, { multi: true }),
             FilesRepositoryService
-        ], imports: [RouterModule, CoreModule, DropAreaModule, FilePreviewModule] }); }
+        ], imports: [RouterModule,
+            CoreModule,
+            DropAreaModule,
+            FilePreviewModule,
+            FilesRepositoryComponent,
+            FilesRepositoryUploadComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilesRepositoryModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule, CoreModule, DropAreaModule, FilePreviewModule],
+                    imports: [
+                        RouterModule,
+                        CoreModule,
+                        DropAreaModule,
+                        FilePreviewModule,
+                        FilesRepositoryComponent,
+                        FilesRepositoryUploadComponent
+                    ],
                     exports: [],
-                    declarations: [FilesRepositoryComponent, FilesRepositoryUploadComponent],
                     providers: [
                         FilesRepositoryGuard,
                         hookNavigator(FilesRepositoryNavigationFactory),