@c8y/ngx-components/fesm2022/c8y-ngx-components-static-assets-modal.mjs.map

Angular modules for Cumulocity IoT applications

{"version":3,"file":"c8y-ngx-components-static-assets-modal.mjs","sources":["../../static-assets/modal/static-assets-modal.component.ts","../../static-assets/modal/static-assets-modal.component.html","../../static-assets/modal/c8y-ngx-components-static-assets-modal.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport type { StaticAsset, StaticAssetType } from '@c8y/ngx-components/static-assets/data';\nimport { BsModalRef } from 'ngx-bootstrap/modal';\nimport { Observable, Subject, from, merge } from 'rxjs';\nimport { StaticAssetsService } from '@c8y/ngx-components/static-assets/data';\nimport { first, shareReplay, map, tap } from 'rxjs/operators';\nimport { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';\nimport { CoreModule, DroppedFile, gettext } from '@c8y/ngx-components';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\n\n@Component({\n  selector: 'c8y-static-assets-modal',\n  templateUrl: './static-assets-modal.component.html',\n  imports: [NgFor, NgIf, AsyncPipe, DatePipe, CoreModule, PopoverModule, CollapseModule],\n  standalone: true\n})\nexport class StaticAssetsModalComponent implements OnInit {\n  @Input() assetType: StaticAssetType = 'branding';\n  @Input() supportedFileExtensions: string[] = [];\n  @Input() modalTitle: string = gettext('Select asset');\n  @Input() layout: 'list' | 'grid' = 'grid';\n  result: Promise<StaticAsset>;\n  files$: Observable<StaticAsset[]>;\n  accept = '';\n  isExpanded = false;\n  private _unfilteredFiles$: Observable<StaticAsset[]>;\n  private _filesUpdate$ = new Subject<StaticAsset[]>();\n  private resolve: (res: StaticAsset) => void;\n  private reject: (err?: unknown) => void;\n\n  constructor(\n    private modalRef: BsModalRef,\n    private staticAssets: StaticAssetsService\n  ) {\n    this.result = new Promise<StaticAsset>((resolve, reject) => {\n      this.resolve = resolve;\n      this.reject = reject;\n    });\n  }\n\n  ngOnInit() {\n    this._unfilteredFiles$ = merge(\n      this._filesUpdate$,\n      from(this.staticAssets.listFiles(this.assetType))\n    ).pipe(shareReplay(1));\n    this.files$ = this._unfilteredFiles$.pipe(\n      map(files =>\n        this.supportedFileExtensions\n          ? files.filter(tmp => this.supportedFileExtensions.includes(tmp.extension.toLowerCase()))\n          : files\n      ),\n      map(files =>\n        files.sort((a, b) => (a.addedAt < b.addedAt ? 1 : a.addedAt > b.addedAt ? -1 : 0))\n      ),\n      tap(files => {\n        if (!files.length) {\n          this.isExpanded = true;\n        }\n      })\n    );\n    if (this.supportedFileExtensions) {\n      this.accept = this.supportedFileExtensions.join(',');\n    }\n  }\n\n  async addFiles(files: DroppedFile[]) {\n    if (!files?.length) {\n      return;\n    }\n    const existingFiles = await this._unfilteredFiles$.pipe(first()).toPromise();\n    const newFiles = await this.staticAssets.addFilesToStaticAssets(\n      this.assetType,\n      files,\n      existingFiles\n    );\n    this._filesUpdate$.next(newFiles);\n  }\n\n  select(asset: StaticAsset) {\n    this.modalRef.hide();\n    this.resolve(asset);\n  }\n\n  cancel() {\n    this.modalRef.hide();\n    this.reject();\n  }\n}\n","<c8y-modal\n  [title]=\"modalTitle\"\n  (onDismiss)=\"cancel()\"\n  [headerClasses]=\"'dialog-header'\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'select-all'\"></span>\n  </ng-container>\n  <ng-container *ngIf=\"files$ | async as assets; else loading\">\n    <div class=\"text-center sticky-top separator-bottom bg-component\" style=\"z-index: 1001;\">\n      <p *ngIf=\"assets.length\" class=\"m-0 p-16\">\n        {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n        <button\n          class=\"btn-link\"\n          aria-controls=\"collapseUpload\"\n          [attr.aria-expanded]=\"isExpanded\"\n          (click)=\"isExpanded = !isExpanded\"\n        >\n          {{ 'upload a new asset' | translate }}\n        </button>\n      </p>\n      <div\n        class=\"collapse\"\n        id=\"collapseUpload\"\n        [isAnimated]=\"true\"\n        [collapse]=\"!isExpanded\"\n      >\n        <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n          <c8y-drop-area\n            class=\"drop-area-sm m-b-8\"\n            [icon]=\"'upload'\"\n            [accept]=\"accept\"\n            (dropped)=\"addFiles($event)\"\n          ></c8y-drop-area>\n          <c8y-messages\n            [helpMessage]=\"\n              'After uploading, the asset will be visible in the list below.' | translate\n            \"\n          ></c8y-messages>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"assets.length\">\n      <c8y-list-group\n        class=\"m-b-0\"\n        *ngIf=\"layout != 'grid'\"\n      >\n        <c8y-list-item *ngFor=\"let asset of assets\">\n          <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n          <c8y-list-item-body>\n            <div class=\"row\">\n              <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{ asset.fileName }}\"\n                >\n                  {{ asset.fileName }}\n                </div>\n                <button\n                  class=\"btn-dot m-l-4\"\n                  [title]=\"'Preview' | translate\"\n                  [popover]=\"preview\"\n                  placement=\"end\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                >\n                  <i c8yIcon=\"eye\"></i>\n                </button>\n                <ng-template #preview>\n                  <div class=\"bg-checkered\">\n                    <img\n                      class=\"fit-w\"\n                      [alt]=\"asset.fileName\"\n                      [src]=\"asset.path\"\n                    />\n                  </div>\n                </ng-template>\n              </div>\n              <div class=\"col-md-3 col-xs-12 text-muted\">\n                <code class=\"text-10\">{{ asset.type }}</code>\n              </div>\n              <div class=\"col-md-2 col-xs-12 text-muted\">\n                <span class=\"small\">{{ asset.size | bytes }}</span>\n              </div>\n              <div\n                class=\"col-md-2 col-xs-12 text-muted\"\n                [title]=\"asset.addedAt | date\"\n              >\n                <div class=\"icon-flex small\">\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"calendar\"\n                  ></i>\n                  <span>{{ asset.addedAt | date }}</span>\n                </div>\n              </div>\n              <div class=\"col-md-2 col-xs-12 d-flex\">\n                <button\n                  class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n                  (click)=\"select(asset)\"\n                  translate\n                >\n                  Select\n                </button>\n              </div>\n            </div>\n          </c8y-list-item-body>\n        </c8y-list-item>\n      </c8y-list-group>\n      <div\n        class=\"card-group-block interact-grid\"\n        *ngIf=\"layout === 'grid'\"\n      >\n        <button\n          class=\"col-md-3 col-sm-4 col-xs-12 card btn-clean interact pointer\"\n          *ngFor=\"let asset of assets\"\n          (click)=\"select(asset)\"\n        >\n          <div class=\"card-block\">\n            <div class=\"bg-checkered\">\n              <img\n                class=\"img-responsive m-auto img-square\"\n                [alt]=\"asset.fileName\"\n                [src]=\"asset.path\"\n              />\n            </div>\n            <p\n              class=\"text-medium text-truncate-wrap m-t-8\"\n              title=\"{{ asset.fileName }}\"\n            >\n              {{ asset.fileName }}\n            </p>\n            <p class=\"m-b-4\">\n              <code class=\"text-10\">{{ asset.type }}</code>\n            </p>\n            <p class=\"small text-muted d-flex a-i-center\">\n              {{ asset.size | bytes }}\n              <span class=\"m-l-auto\">\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"calendar\"\n                ></i>\n                <span>{{ asset.addedAt | date }}</span>\n              </span>\n            </p>\n          </div>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"p-24\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\n</c8y-modal>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}