import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ManageTagsDialogComponent } from '../manage-tags-dialog/manage-tags-dialog.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../../data/providers/data.service";
import * as i3 from "../../../providers/notification/notification.service";
import * as i4 from "../../../providers/modal/modal.service";
import * as i5 from "@clr/angular";
import * as i6 from "@angular/common";
import * as i7 from "@angular/router";
import * as i8 from "../chip/chip.component";
import * as i9 from "../form-field/form-field.component";
import * as i10 from "../form-field/form-field-control.directive";
import * as i11 from "../labeled-data/labeled-data.component";
import * as i12 from "../focal-point-control/focal-point-control.component";
import * as i13 from "../tag-selector/tag-selector.component";
import * as i14 from "../tabbed-custom-fields/tabbed-custom-fields.component";
import * as i15 from "../asset-preview-links/asset-preview-links.component";
import * as i16 from "../page-entity-info/page-entity-info.component";
import * as i17 from "../page-detail-layout/page-detail-layout.component";
import * as i18 from "../page-detail-layout/page-detail-sidebar.component";
import * as i19 from "../card/card.component";
import * as i20 from "@ngx-translate/core";
import * as i21 from "../../pipes/file-size.pipe";
import * as i22 from "../../pipes/has-permission.pipe";
import * as i23 from "../../pipes/asset-preview.pipe";
export class AssetPreviewComponent {
    constructor(formBuilder, dataService, notificationService, changeDetector, modalService) {
        this.formBuilder = formBuilder;
        this.dataService = dataService;
        this.notificationService = notificationService;
        this.changeDetector = changeDetector;
        this.modalService = modalService;
        this.editable = false;
        this.customFields = [];
        this.assetChange = new EventEmitter();
        this.editClick = new EventEmitter();
        this.form = this.formBuilder.group({
            name: '',
            tags: [[]],
        });
        this.size = 'medium';
        this.width = 0;
        this.height = 0;
        this.centered = true;
        this.settingFocalPoint = false;
        this.previewAssetIndex = 0;
        this.disableNextButton = false;
        this.disablePreviousButton = false;
        this.showSlideButtons = false;
    }
    get fpx() {
        return this.asset.focalPoint ? this.asset.focalPoint.x : null;
    }
    get fpy() {
        return this.asset.focalPoint ? this.asset.focalPoint.y : null;
    }
    ngOnInit() {
        const { focalPoint } = this.asset;
        if (this.assets?.length) {
            this.showSlideButtons = true;
            this.previewAssetIndex = this.assets.findIndex(asset => asset.id === this.asset.id) || 0;
        }
        else {
            this.showSlideButtons = false;
            this.updateButtonAccessibility();
        }
        this.updateButtonAccessibility();
        this.form.get('name')?.setValue(this.asset.name);
        this.form.get('tags')?.setValue(this.asset.tags?.map(t => t.value));
        this.subscription = this.form.valueChanges.subscribe(value => {
            this.assetChange.emit({
                id: this.asset.id,
                name: value.name,
                tags: value.tags,
            });
        });
        this.subscription.add(fromEvent(window, 'resize')
            .pipe(debounceTime(50))
            .subscribe(() => {
            this.updateDimensions();
            this.changeDetector.markForCheck();
        }));
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    getSourceFileName() {
        const parts = this.asset.source.split(/[\\\/]/g);
        return parts[parts.length - 1];
    }
    onImageLoad() {
        this.updateDimensions();
        this.changeDetector.markForCheck();
    }
    updateDimensions() {
        const img = this.imageElementRef.nativeElement;
        const container = this.previewDivRef.nativeElement;
        const imgWidth = img.naturalWidth;
        const imgHeight = img.naturalHeight;
        const containerWidth = container.offsetWidth;
        const containerHeight = container.offsetHeight;
        const constrainToContainer = this.settingFocalPoint;
        if (constrainToContainer) {
            const controlsMarginPx = 48 * 2;
            const availableHeight = containerHeight - controlsMarginPx;
            const availableWidth = containerWidth;
            const hRatio = imgHeight / availableHeight;
            const wRatio = imgWidth / availableWidth;
            const imageExceedsAvailableDimensions = 1 < hRatio || 1 < wRatio;
            if (imageExceedsAvailableDimensions) {
                const factor = hRatio < wRatio ? wRatio : hRatio;
                this.width = Math.round(imgWidth / factor);
                this.height = Math.round(imgHeight / factor);
                this.centered = true;
                return;
            }
        }
        this.width = imgWidth;
        this.height = imgHeight;
        this.centered = imgWidth <= containerWidth && imgHeight <= containerHeight;
    }
    setFocalPointStart() {
        this.sizePriorToSettingFocalPoint = this.size;
        this.size = 'medium';
        this.settingFocalPoint = true;
        this.lastFocalPoint = this.asset.focalPoint || { x: 0.5, y: 0.5 };
        this.updateDimensions();
    }
    removeFocalPoint() {
        this.dataService.product
            .updateAsset({
            id: this.asset.id,
            focalPoint: null,
        })
            .subscribe(() => {
            this.notificationService.success(_('asset.update-focal-point-success'));
            this.asset = { ...this.asset, focalPoint: null };
            this.changeDetector.markForCheck();
        }, () => this.notificationService.error(_('asset.update-focal-point-error')));
    }
    onFocalPointChange(point) {
        this.lastFocalPoint = point;
    }
    setFocalPointCancel() {
        this.settingFocalPoint = false;
        this.lastFocalPoint = undefined;
        this.size = this.sizePriorToSettingFocalPoint;
    }
    setFocalPointEnd() {
        this.settingFocalPoint = false;
        this.size = this.sizePriorToSettingFocalPoint;
        if (this.lastFocalPoint) {
            const { x, y } = this.lastFocalPoint;
            this.lastFocalPoint = undefined;
            this.dataService.product
                .updateAsset({
                id: this.asset.id,
                focalPoint: { x, y },
            })
                .subscribe(() => {
                this.notificationService.success(_('asset.update-focal-point-success'));
                this.asset = { ...this.asset, focalPoint: { x, y } };
                this.changeDetector.markForCheck();
            }, () => this.notificationService.error(_('asset.update-focal-point-error')));
        }
    }
    manageTags() {
        this.modalService
            .fromComponent(ManageTagsDialogComponent, {
            size: 'sm',
        })
            .subscribe(result => {
            if (result) {
                this.notificationService.success(_('common.notify-updated-tags-success'));
            }
        });
    }
    nextImage() {
        this.previewAssetIndex = this.previewAssetIndex + 1;
        if (Array.isArray(this.assets)) {
            this.asset = this.assets[this.previewAssetIndex];
            this.updateButtonAccessibility();
        }
    }
    previousImage() {
        this.previewAssetIndex = this.previewAssetIndex - 1;
        if (Array.isArray(this.assets)) {
            this.asset = this.assets[this.previewAssetIndex];
            this.updateButtonAccessibility();
        }
    }
    updateButtonAccessibility() {
        this.disableNextButton = this.assets?.[this.previewAssetIndex + 1]?.id ? false : true;
        this.disablePreviousButton = this.assets?.[this.previewAssetIndex - 1]?.id ? false : true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1.FormBuilder }, { token: i2.DataService }, { token: i3.NotificationService }, { token: i0.ChangeDetectorRef }, { token: i4.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\n    <vdr-page-detail-sidebar>\n        <vdr-card>\n            <div *ngIf=\"!editable\" class=\"mb-2\">\n                <a\n                    class=\"button-ghost\"\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\n                    (click)=\"editClick.emit()\"\n                >\n                    <clr-icon shape=\"edit\"></clr-icon>\n                    {{ 'common.edit' | translate }}\n                    <clr-icon shape=\"arrow right\"></clr-icon>\n                </a>\n            </div>\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\n                <input\n                    type=\"text\"\n                    [formControl]=\"form.get('name')\"\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\n                />\n            </vdr-form-field>\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\n                <span class=\"elide\">\n                    {{ asset.name }}\n                </span>\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\n                    getSourceFileName()\n                }}</a>\n            </vdr-labeled-data>\n\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\n                {{ asset.fileSize | filesize }}\n            </vdr-labeled-data>\n\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\n                {{ asset.width }} x {{ asset.height }}\n            </vdr-labeled-data>\n\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\n                <span *ngIf=\"fpx\"\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\n                    {{ fpy | number : '1.2-2' }}</span\n                >\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\n                <div class=\"flex mt-1\">\n                    <button\n                        class=\"button-small mr-1\"\n                        [disabled]=\"settingFocalPoint\"\n                        (click)=\"setFocalPointStart()\"\n                    >\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\n                    </button>\n                    <button\n                        class=\"button-small\"\n                        [disabled]=\"settingFocalPoint\"\n                        *ngIf=\"!!fpx\"\n                        (click)=\"removeFocalPoint()\"\n                    >\n                        {{ 'asset.unset-focal-point' | translate }}\n                    </button>\n                </div>\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\n                <ng-container *ngIf=\"editable\">\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\n                        <clr-icon shape=\"tags\"></clr-icon>\n                        {{ 'common.manage-tags' | translate }}\n                    </button>\n                </ng-container>\n                <div *ngIf=\"!editable\">\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\n                        {{ tag.value }}</vdr-chip\n                    >\n                </div>\n            </vdr-labeled-data>\n        </vdr-card>\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\n            <vdr-tabbed-custom-fields\n                entityName=\"Asset\"\n                [compact]=\"true\"\n                [customFields]=\"customFields\"\n                [customFieldsFormGroup]=\"customFieldsForm\"\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\n            ></vdr-tabbed-custom-fields>\n        </vdr-card>\n        <vdr-card [title]=\"'asset.preview' | translate\">\n            <vdr-form-field>\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\n                    <option value=\"tiny\">tiny</option>\n                    <option value=\"thumb\">thumb</option>\n                    <option value=\"small\">small</option>\n                    <option value=\"medium\">medium</option>\n                    <option value=\"large\">large</option>\n                    <option value=\"\">full size</option>\n                </select>\n            </vdr-form-field>\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\n        </vdr-card>\n        <vdr-card>\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n    <div class=\"carousel-container\">\n        <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\n            <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\n        </button>\n        <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\n            <div class=\"image-wrapper\">\n                <vdr-focal-point-control\n                    [width]=\"width\"\n                    [height]=\"height\"\n                    [fpx]=\"fpx\"\n                    [fpy]=\"fpy\"\n                    [editable]=\"settingFocalPoint\"\n                    (focalPointChange)=\"onFocalPointChange($event)\"\n                >\n                    <img\n                        class=\"asset-image\"\n                        [src]=\"asset | assetPreview : size\"\n                        [ngClass]=\"size\"\n                        #imageElement\n                        (load)=\"onImageLoad()\"\n                    />\n                </vdr-focal-point-control>\n                <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\n                    <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\n                        <clr-icon shape=\"times\"></clr-icon>\n                    </button>\n                    <button\n                        class=\"btn btn-primary btn-sm\"\n                        (click)=\"setFocalPointEnd()\"\n                        [disabled]=\"!lastFocalPoint\"\n                    >\n                        <clr-icon shape=\"crosshairs\"></clr-icon>\n                        {{ 'asset.set-focal-point' | translate }}\n                    </button>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\n            <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\n        </button>\n    </div>\n</vdr-page-detail-layout>\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i5.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i9.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i10.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i11.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i12.FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: i13.TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: i14.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i15.AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: i16.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i17.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i18.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i19.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i20.TranslatePipe, name: "translate" }, { kind: "pipe", type: i21.FileSizePipe, name: "filesize" }, { kind: "pipe", type: i22.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i23.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPreviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\n    <vdr-page-detail-sidebar>\n        <vdr-card>\n            <div *ngIf=\"!editable\" class=\"mb-2\">\n                <a\n                    class=\"button-ghost\"\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\n                    (click)=\"editClick.emit()\"\n                >\n                    <clr-icon shape=\"edit\"></clr-icon>\n                    {{ 'common.edit' | translate }}\n                    <clr-icon shape=\"arrow right\"></clr-icon>\n                </a>\n            </div>\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\n                <input\n                    type=\"text\"\n                    [formControl]=\"form.get('name')\"\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\n                />\n            </vdr-form-field>\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\n                <span class=\"elide\">\n                    {{ asset.name }}\n                </span>\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\n                    getSourceFileName()\n                }}</a>\n            </vdr-labeled-data>\n\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\n                {{ asset.fileSize | filesize }}\n            </vdr-labeled-data>\n\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\n                {{ asset.width }} x {{ asset.height }}\n            </vdr-labeled-data>\n\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\n                <span *ngIf=\"fpx\"\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\n                    {{ fpy | number : '1.2-2' }}</span\n                >\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\n                <div class=\"flex mt-1\">\n                    <button\n                        class=\"button-small mr-1\"\n                        [disabled]=\"settingFocalPoint\"\n                        (click)=\"setFocalPointStart()\"\n                    >\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\n                    </button>\n                    <button\n                        class=\"button-small\"\n                        [disabled]=\"settingFocalPoint\"\n                        *ngIf=\"!!fpx\"\n                        (click)=\"removeFocalPoint()\"\n                    >\n                        {{ 'asset.unset-focal-point' | translate }}\n                    </button>\n                </div>\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\n                <ng-container *ngIf=\"editable\">\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\n                        <clr-icon shape=\"tags\"></clr-icon>\n                        {{ 'common.manage-tags' | translate }}\n                    </button>\n                </ng-container>\n                <div *ngIf=\"!editable\">\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\n                        {{ tag.value }}</vdr-chip\n                    >\n                </div>\n            </vdr-labeled-data>\n        </vdr-card>\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\n            <vdr-tabbed-custom-fields\n                entityName=\"Asset\"\n                [compact]=\"true\"\n                [customFields]=\"customFields\"\n                [customFieldsFormGroup]=\"customFieldsForm\"\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\n            ></vdr-tabbed-custom-fields>\n        </vdr-card>\n        <vdr-card [title]=\"'asset.preview' | translate\">\n            <vdr-form-field>\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\n                    <option value=\"tiny\">tiny</option>\n                    <option value=\"thumb\">thumb</option>\n                    <option value=\"small\">small</option>\n                    <option value=\"medium\">medium</option>\n                    <option value=\"large\">large</option>\n                    <option value=\"\">full size</option>\n                </select>\n            </vdr-form-field>\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\n        </vdr-card>\n        <vdr-card>\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n    <div class=\"carousel-container\">\n        <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\n            <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\n        </button>\n        <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\n            <div class=\"image-wrapper\">\n                <vdr-focal-point-control\n                    [width]=\"width\"\n                    [height]=\"height\"\n                    [fpx]=\"fpx\"\n                    [fpy]=\"fpy\"\n                    [editable]=\"settingFocalPoint\"\n                    (focalPointChange)=\"onFocalPointChange($event)\"\n                >\n                    <img\n                        class=\"asset-image\"\n                        [src]=\"asset | assetPreview : size\"\n                        [ngClass]=\"size\"\n                        #imageElement\n                        (load)=\"onImageLoad()\"\n                    />\n                </vdr-focal-point-control>\n                <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\n                    <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\n                        <clr-icon shape=\"times\"></clr-icon>\n                    </button>\n                    <button\n                        class=\"btn btn-primary btn-sm\"\n                        (click)=\"setFocalPointEnd()\"\n                        [disabled]=\"!lastFocalPoint\"\n                    >\n                        <clr-icon shape=\"crosshairs\"></clr-icon>\n                        {{ 'asset.set-focal-point' | translate }}\n                    </button>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\n            <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\n        </button>\n    </div>\n</vdr-page-detail-layout>\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.DataService }, { type: i3.NotificationService }, { type: i0.ChangeDetectorRef }, { type: i4.ModalService }]; }, propDecorators: { asset: [{
                type: Input
            }], assets: [{
                type: Input
            }], editable: [{
                type: Input
            }], customFields: [{
                type: Input
            }], customFieldsForm: [{
                type: Input
            }], assetChange: [{
                type: Output
            }], editClick: [{
                type: Output
            }], imageElementRef: [{
                type: ViewChild,
                args: ['imageElement', { static: true }]
            }], previewDivRef: [{
                type: ViewChild,
                args: ['previewDiv', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 