import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
import { SelectionManager } from '../../../common/utilities/selection-manager';
import { AssetPreviewDialogComponent } from '../asset-preview-dialog/asset-preview-dialog.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../providers/modal/modal.service";
import * as i2 from "@clr/angular";
import * as i3 from "@angular/common";
import * as i4 from "@angular/router";
import * as i5 from "../chip/chip.component";
import * as i6 from "../select-toggle/select-toggle.component";
import * as i7 from "../entity-info/entity-info.component";
import * as i8 from "../asset-preview-links/asset-preview-links.component";
import * as i9 from "@ngx-translate/core";
import * as i10 from "../../pipes/file-size.pipe";
import * as i11 from "../../pipes/asset-preview.pipe";
export class AssetGalleryComponent {
    constructor(modalService) {
        this.modalService = modalService;
        /**
         * If true, allows multiple assets to be selected by ctrl+clicking.
         */
        this.multiSelect = false;
        this.canDelete = false;
        this.selectionChange = new EventEmitter();
        this.deleteAssets = new EventEmitter();
        this.editAssetClick = new EventEmitter();
        this.selectionManager = new SelectionManager({
            multiSelect: this.multiSelect,
            itemsAreEqual: (a, b) => a.id === b.id,
            additiveMode: false,
        });
    }
    ngOnChanges(changes) {
        if (this.assets) {
            for (const asset of this.selectionManager.selection) {
                // Update any selected assets with any changes
                const match = this.assets.find(a => a.id === asset.id);
                if (match) {
                    Object.assign(asset, match);
                }
            }
        }
        if (changes['assets']) {
            this.selectionManager.setCurrentItems(this.assets);
        }
        if (changes['multiSelect']) {
            this.selectionManager.setMultiSelect(this.multiSelect);
        }
    }
    toggleSelection(asset, event) {
        this.selectionManager.toggleSelection(asset, event);
        this.selectionChange.emit(this.selectionManager.selection);
    }
    selectMultiple(assets) {
        this.selectionManager.selectMultiple(assets);
        this.selectionChange.emit(this.selectionManager.selection);
    }
    isSelected(asset) {
        return this.selectionManager.isSelected(asset);
    }
    lastSelected() {
        return this.selectionManager.lastSelected();
    }
    previewAsset(asset) {
        this.modalService
            .fromComponent(AssetPreviewDialogComponent, {
            size: 'xl',
            closable: true,
            locals: { asset, assets: this.assets },
        })
            .subscribe();
    }
    entityInfoClick(event) {
        event.preventDefault();
        event.stopPropagation();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets", editAssetClick: "editAssetClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\n    <div\n        class=\"card\"\n        *ngFor=\"let asset of assets\"\n        (click)=\"toggleSelection(asset, $event)\"\n        [class.selected]=\"isSelected(asset)\"\n    >\n        <div class=\"card-img\">\n            <vdr-select-toggle\n                [selected]=\"isSelected(asset)\"\n                [disabled]=\"true\"\n                [hiddenWhenOff]=\"true\"\n            ></vdr-select-toggle>\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\n        </div>\n        <div class=\"detail\">\n            <vdr-entity-info\n                [entity]=\"asset\"\n                [small]=\"true\"\n                (click)=\"entityInfoClick($event)\"\n            ></vdr-entity-info>\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\n        </div>\n    </div>\n</div>\n<div class=\"info-bar\">\n    <div class=\"card\">\n        <div class=\"card-img\">\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\n                <div>{{ 'catalog.no-selection' | translate }}</div>\n            </div>\n            <img\n                class=\"preview\"\n                *ngIf=\"selectionManager.selection.length >= 1\"\n                [src]=\"lastSelected().preview + '?preset=medium'\"\n            />\n        </div>\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\n            <div class=\"name\">{{ lastSelected().name }}</div>\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\n\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\n                >\n            </ng-container>\n            <div *ngIf=\"selectionManager.selection.length === 1\">\n                <a [routerLink]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" class=\"button-ghost\">\n                    <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\n                    <clr-icon shape=\"arrow right\"></clr-icon>\n                </a>\n            </div>\n            <div *ngIf=\"selectionManager.selection.length === 1\">\n                <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\n                    <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\n                </button>\n            </div>\n            <div *ngIf=\"canDelete\">\n                <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                    {{ 'common.delete' | translate }}\n                </button>\n            </div>\n            <div class=\"mt-1\" *ngIf=\"selectionManager.selection.length === 1\">\n                <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\n            </div>\n        </div>\n    </div>\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\n        <ul>\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\n        </ul>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i6.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i7.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: i8.AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.FileSizePipe, name: "filesize" }, { kind: "pipe", type: i11.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetGalleryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\n    <div\n        class=\"card\"\n        *ngFor=\"let asset of assets\"\n        (click)=\"toggleSelection(asset, $event)\"\n        [class.selected]=\"isSelected(asset)\"\n    >\n        <div class=\"card-img\">\n            <vdr-select-toggle\n                [selected]=\"isSelected(asset)\"\n                [disabled]=\"true\"\n                [hiddenWhenOff]=\"true\"\n            ></vdr-select-toggle>\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\n        </div>\n        <div class=\"detail\">\n            <vdr-entity-info\n                [entity]=\"asset\"\n                [small]=\"true\"\n                (click)=\"entityInfoClick($event)\"\n            ></vdr-entity-info>\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\n        </div>\n    </div>\n</div>\n<div class=\"info-bar\">\n    <div class=\"card\">\n        <div class=\"card-img\">\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\n                <div>{{ 'catalog.no-selection' | translate }}</div>\n            </div>\n            <img\n                class=\"preview\"\n                *ngIf=\"selectionManager.selection.length >= 1\"\n                [src]=\"lastSelected().preview + '?preset=medium'\"\n            />\n        </div>\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\n            <div class=\"name\">{{ lastSelected().name }}</div>\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\n\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\n                >\n            </ng-container>\n            <div *ngIf=\"selectionManager.selection.length === 1\">\n                <a [routerLink]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" class=\"button-ghost\">\n                    <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\n                    <clr-icon shape=\"arrow right\"></clr-icon>\n                </a>\n            </div>\n            <div *ngIf=\"selectionManager.selection.length === 1\">\n                <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\n                    <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\n                </button>\n            </div>\n            <div *ngIf=\"canDelete\">\n                <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                    {{ 'common.delete' | translate }}\n                </button>\n            </div>\n            <div class=\"mt-1\" *ngIf=\"selectionManager.selection.length === 1\">\n                <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\n            </div>\n        </div>\n    </div>\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\n        <ul>\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\n        </ul>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ModalService }]; }, propDecorators: { assets: [{
                type: Input
            }], multiSelect: [{
                type: Input
            }], canDelete: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }], deleteAssets: [{
                type: Output
            }], editAssetClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 