import { Component, Input } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { Subject, from, merge } from 'rxjs';
import { StaticAssetsService } from '@c8y/ngx-components/static-assets/data';
import { first, shareReplay, map, tap } from 'rxjs/operators';
import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
import { CoreModule, gettext } from '@c8y/ngx-components';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import * as i0 from "@angular/core";
import * as i1 from "ngx-bootstrap/modal";
import * as i2 from "@c8y/ngx-components/static-assets/data";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "ngx-bootstrap/popover";
import * as i5 from "ngx-bootstrap/collapse";
export class StaticAssetsModalComponent {
    constructor(modalRef, staticAssets) {
        this.modalRef = modalRef;
        this.staticAssets = staticAssets;
        this.assetType = 'branding';
        this.supportedFileExtensions = [];
        this.modalTitle = gettext('Select asset');
        this.layout = 'grid';
        this.accept = '';
        this.isExpanded = false;
        this._filesUpdate$ = new Subject();
        this.result = new Promise((resolve, reject) => {
            this.resolve = resolve;
            this.reject = reject;
        });
    }
    ngOnInit() {
        this._unfilteredFiles$ = merge(this._filesUpdate$, from(this.staticAssets.listFiles(this.assetType))).pipe(shareReplay(1));
        this.files$ = this._unfilteredFiles$.pipe(map(files => this.supportedFileExtensions
            ? files.filter(tmp => this.supportedFileExtensions.includes(tmp.extension.toLowerCase()))
            : files), map(files => files.sort((a, b) => (a.addedAt < b.addedAt ? 1 : a.addedAt > b.addedAt ? -1 : 0))), tap(files => {
            if (!files.length) {
                this.isExpanded = true;
            }
        }));
        if (this.supportedFileExtensions) {
            this.accept = this.supportedFileExtensions.join(',');
        }
    }
    async addFiles(files) {
        if (!files?.length) {
            return;
        }
        const existingFiles = await this._unfilteredFiles$.pipe(first()).toPromise();
        const newFiles = await this.staticAssets.addFilesToStaticAssets(this.assetType, files, existingFiles);
        this._filesUpdate$.next(newFiles);
    }
    select(asset) {
        this.modalRef.hide();
        this.resolve(asset);
    }
    cancel() {
        this.modalRef.hide();
        this.reject();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StaticAssetsModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.StaticAssetsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: StaticAssetsModalComponent, isStandalone: true, selector: "c8y-static-assets-modal", inputs: { assetType: "assetType", supportedFileExtensions: "supportedFileExtensions", modalTitle: "modalTitle", layout: "layout" }, ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: i3.BytesPipe, name: "bytes" }, { kind: "component", type: i3.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i5.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StaticAssetsModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-static-assets-modal', imports: [NgFor, NgIf, AsyncPipe, DatePipe, CoreModule, PopoverModule, CollapseModule], standalone: true, template: "<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" }]
        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.StaticAssetsService }], propDecorators: { assetType: [{
                type: Input
            }], supportedFileExtensions: [{
                type: Input
            }], modalTitle: [{
                type: Input
            }], layout: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 