@vendure/admin-ui 2.0.7 → 2.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/catalog/components/product-variant-list/product-variant-list-bulk-actions.d.ts +1 -2
- package/core/common/version.d.ts +1 -1
- package/core/shared/components/asset-gallery/asset-gallery.component.d.ts +2 -1
- package/core/shared/components/asset-preview/asset-preview.component.d.ts +9 -1
- package/core/shared/components/asset-preview-dialog/asset-preview-dialog.component.d.ts +2 -0
- package/esm2022/catalog/components/asset-detail/asset-detail.component.mjs +1 -1
- package/esm2022/catalog/components/asset-list/asset-list.component.mjs +1 -1
- package/esm2022/catalog/components/assets/assets.component.mjs +2 -2
- package/esm2022/catalog/components/product-variant-list/product-variant-list-bulk-actions.mjs +1 -1
- package/esm2022/core/common/utilities/custom-field-default-value.mjs +3 -3
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/components/base-nav/base-nav.component.mjs +1 -1
- package/esm2022/core/shared/components/action-bar-items/action-bar-items.component.mjs +1 -1
- package/esm2022/core/shared/components/asset-gallery/asset-gallery.component.mjs +8 -5
- package/esm2022/core/shared/components/asset-picker-dialog/asset-picker-dialog.component.mjs +3 -3
- package/esm2022/core/shared/components/asset-preview/asset-preview.component.mjs +36 -3
- package/esm2022/core/shared/components/asset-preview-dialog/asset-preview-dialog.component.mjs +4 -3
- package/esm2022/settings/components/tax-category-list/tax-category-list-bulk-actions.mjs +1 -1
- package/esm2022/settings/settings.module.mjs +1 -1
- package/esm2022/system/components/job-state-label/job-state-label.component.mjs +1 -1
- package/fesm2022/vendure-admin-ui-catalog.mjs +3 -3
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +49 -12
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-settings.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-system.mjs.map +1 -1
- package/package.json +14 -14
|
@@ -13808,6 +13808,10 @@ class AssetPreviewComponent {
|
|
|
13808
13808
|
this.height = 0;
|
|
13809
13809
|
this.centered = true;
|
|
13810
13810
|
this.settingFocalPoint = false;
|
|
13811
|
+
this.previewAssetIndex = 0;
|
|
13812
|
+
this.disableNextButton = false;
|
|
13813
|
+
this.disablePreviousButton = false;
|
|
13814
|
+
this.showSlideButtons = false;
|
|
13811
13815
|
}
|
|
13812
13816
|
get fpx() {
|
|
13813
13817
|
return this.asset.focalPoint ? this.asset.focalPoint.x : null;
|
|
@@ -13817,6 +13821,15 @@ class AssetPreviewComponent {
|
|
|
13817
13821
|
}
|
|
13818
13822
|
ngOnInit() {
|
|
13819
13823
|
const { focalPoint } = this.asset;
|
|
13824
|
+
if (this.assets?.length) {
|
|
13825
|
+
this.showSlideButtons = true;
|
|
13826
|
+
this.previewAssetIndex = this.assets.findIndex(asset => asset.id === this.asset.id) || 0;
|
|
13827
|
+
}
|
|
13828
|
+
else {
|
|
13829
|
+
this.showSlideButtons = false;
|
|
13830
|
+
this.updateButtonAccessibility();
|
|
13831
|
+
}
|
|
13832
|
+
this.updateButtonAccessibility();
|
|
13820
13833
|
this.form.get('name')?.setValue(this.asset.name);
|
|
13821
13834
|
this.form.get('tags')?.setValue(this.asset.tags?.map(t => t.value));
|
|
13822
13835
|
this.subscription = this.form.valueChanges.subscribe(value => {
|
|
@@ -13929,14 +13942,34 @@ class AssetPreviewComponent {
|
|
|
13929
13942
|
}
|
|
13930
13943
|
});
|
|
13931
13944
|
}
|
|
13945
|
+
nextImage() {
|
|
13946
|
+
this.previewAssetIndex = this.previewAssetIndex + 1;
|
|
13947
|
+
if (Array.isArray(this.assets)) {
|
|
13948
|
+
this.asset = this.assets[this.previewAssetIndex];
|
|
13949
|
+
this.updateButtonAccessibility();
|
|
13950
|
+
}
|
|
13951
|
+
}
|
|
13952
|
+
previousImage() {
|
|
13953
|
+
this.previewAssetIndex = this.previewAssetIndex - 1;
|
|
13954
|
+
if (Array.isArray(this.assets)) {
|
|
13955
|
+
this.asset = this.assets[this.previewAssetIndex];
|
|
13956
|
+
this.updateButtonAccessibility();
|
|
13957
|
+
}
|
|
13958
|
+
}
|
|
13959
|
+
updateButtonAccessibility() {
|
|
13960
|
+
this.disableNextButton = this.assets?.[this.previewAssetIndex + 1]?.id ? false : true;
|
|
13961
|
+
this.disablePreviousButton = this.assets?.[this.previewAssetIndex - 1]?.id ? false : true;
|
|
13962
|
+
}
|
|
13932
13963
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1$5.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", 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>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;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-left: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-right:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.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$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", 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>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"carousel-container\">\r\n <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n ></button>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n ></button>\r\n </div>\r\n</vdr-page-detail-layout>\r\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-left: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-right:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.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$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13934
13965
|
}
|
|
13935
13966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewComponent, decorators: [{
|
|
13936
13967
|
type: Component,
|
|
13937
|
-
args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:
|
|
13968
|
+
args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"carousel-container\">\r\n <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n ></button>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n ></button>\r\n </div>\r\n</vdr-page-detail-layout>\r\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-left: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-right:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"] }]
|
|
13938
13969
|
}], ctorParameters: function () { return [{ type: i1$5.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
|
|
13939
13970
|
type: Input
|
|
13971
|
+
}], assets: [{
|
|
13972
|
+
type: Input
|
|
13940
13973
|
}], editable: [{
|
|
13941
13974
|
type: Input
|
|
13942
13975
|
}], customFields: [{
|
|
@@ -13981,16 +14014,17 @@ class AssetPreviewDialogComponent {
|
|
|
13981
14014
|
return this.dataService.product.getAsset(asset.id).mapSingle(data => data.asset);
|
|
13982
14015
|
}
|
|
13983
14016
|
}));
|
|
14017
|
+
this.assetsWithTags$ = of(this.assets ?? []);
|
|
13984
14018
|
}
|
|
13985
14019
|
hasTags(asset) {
|
|
13986
14020
|
return asset.hasOwnProperty('tags');
|
|
13987
14021
|
}
|
|
13988
14022
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewDialogComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13989
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewDialogComponent, selector: "vdr-asset-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n {{ asset.name }}\r\n </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n [asset]=\"assetWithTags\"\r\n (assetChange)=\"assetChanges = $event\"\r\n (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewDialogComponent, selector: "vdr-asset-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n {{ asset.name }}\r\n </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n [asset]=\"assetWithTags\"\r\n (assetChange)=\"assetChanges = $event\"\r\n (editClick)=\"resolveWith()\"\r\n [assets]=\"assetsWithTags$ | async\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "assets", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13990
14024
|
}
|
|
13991
14025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewDialogComponent, decorators: [{
|
|
13992
14026
|
type: Component,
|
|
13993
|
-
args: [{ selector: 'vdr-asset-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n {{ asset.name }}\r\n </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n [asset]=\"assetWithTags\"\r\n (assetChange)=\"assetChanges = $event\"\r\n (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"] }]
|
|
14027
|
+
args: [{ selector: 'vdr-asset-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n {{ asset.name }}\r\n </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n [asset]=\"assetWithTags\"\r\n (assetChange)=\"assetChanges = $event\"\r\n (editClick)=\"resolveWith()\"\r\n [assets]=\"assetsWithTags$ | async\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"] }]
|
|
13994
14028
|
}], ctorParameters: function () { return [{ type: DataService }]; } });
|
|
13995
14029
|
|
|
13996
14030
|
class EntityInfoComponent {
|
|
@@ -14019,6 +14053,7 @@ class AssetGalleryComponent {
|
|
|
14019
14053
|
this.canDelete = false;
|
|
14020
14054
|
this.selectionChange = new EventEmitter();
|
|
14021
14055
|
this.deleteAssets = new EventEmitter();
|
|
14056
|
+
this.editAssetClick = new EventEmitter();
|
|
14022
14057
|
this.selectionManager = new SelectionManager({
|
|
14023
14058
|
multiSelect: this.multiSelect,
|
|
14024
14059
|
itemsAreEqual: (a, b) => a.id === b.id,
|
|
@@ -14061,7 +14096,7 @@ class AssetGalleryComponent {
|
|
|
14061
14096
|
.fromComponent(AssetPreviewDialogComponent, {
|
|
14062
14097
|
size: 'xl',
|
|
14063
14098
|
closable: true,
|
|
14064
|
-
locals: { asset },
|
|
14099
|
+
locals: { asset, assets: this.assets },
|
|
14065
14100
|
})
|
|
14066
14101
|
.subscribe();
|
|
14067
14102
|
}
|
|
@@ -14070,11 +14105,11 @@ class AssetGalleryComponent {
|
|
|
14070
14105
|
event.stopPropagation();
|
|
14071
14106
|
}
|
|
14072
14107
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14073
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n <div\r\n class=\"card\"\r\n *ngFor=\"let asset of assets\"\r\n (click)=\"toggleSelection(asset, $event)\"\r\n [class.selected]=\"isSelected(asset)\"\r\n >\r\n <div class=\"card-img\">\r\n <vdr-select-toggle\r\n [selected]=\"isSelected(asset)\"\r\n [disabled]=\"true\"\r\n [hiddenWhenOff]=\"true\"\r\n ></vdr-select-toggle>\r\n <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n </div>\r\n <div class=\"detail\">\r\n <vdr-entity-info\r\n [entity]=\"asset\"\r\n [small]=\"true\"\r\n (click)=\"entityInfoClick($event)\"\r\n ></vdr-entity-info>\r\n <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n <div>{{ 'catalog.no-selection' | translate }}</div>\r\n </div>\r\n <img\r\n class=\"preview\"\r\n *ngIf=\"selectionManager.selection.length >= 1\"\r\n [src]=\"lastSelected().preview + '?preset=medium'\"\r\n />\r\n </div>\r\n <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n <div class=\"name\">{{ lastSelected().name }}</div>\r\n <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n >\r\n </ng-container>\r\n <div *ngIf=\"selectionManager.selection.length === 1\">\r\n <a [routerLink]=\"['
|
|
14108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", 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\">\r\n <div\r\n class=\"card\"\r\n *ngFor=\"let asset of assets\"\r\n (click)=\"toggleSelection(asset, $event)\"\r\n [class.selected]=\"isSelected(asset)\"\r\n >\r\n <div class=\"card-img\">\r\n <vdr-select-toggle\r\n [selected]=\"isSelected(asset)\"\r\n [disabled]=\"true\"\r\n [hiddenWhenOff]=\"true\"\r\n ></vdr-select-toggle>\r\n <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n </div>\r\n <div class=\"detail\">\r\n <vdr-entity-info\r\n [entity]=\"asset\"\r\n [small]=\"true\"\r\n (click)=\"entityInfoClick($event)\"\r\n ></vdr-entity-info>\r\n <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n <div>{{ 'catalog.no-selection' | translate }}</div>\r\n </div>\r\n <img\r\n class=\"preview\"\r\n *ngIf=\"selectionManager.selection.length >= 1\"\r\n [src]=\"lastSelected().preview + '?preset=medium'\"\r\n />\r\n </div>\r\n <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n <div class=\"name\">{{ lastSelected().name }}</div>\r\n <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n >\r\n </ng-container>\r\n <div *ngIf=\"selectionManager.selection.length === 1\">\r\n <a [routerLink]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" class=\"button-ghost\">\r\n <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <div *ngIf=\"selectionManager.selection.length === 1\">\r\n <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"canDelete\">\r\n <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n {{ 'common.delete' | translate }}\r\n </button>\r\n </div>\r\n <div class=\"mt-1\" *ngIf=\"selectionManager.selection.length === 1\">\r\n <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n <ul>\r\n <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n </ul>\r\n </div>\r\n</div>\r\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:left;list-style-type:none;margin-left: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: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14074
14109
|
}
|
|
14075
14110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, decorators: [{
|
|
14076
14111
|
type: Component,
|
|
14077
|
-
args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n <div\r\n class=\"card\"\r\n *ngFor=\"let asset of assets\"\r\n (click)=\"toggleSelection(asset, $event)\"\r\n [class.selected]=\"isSelected(asset)\"\r\n >\r\n <div class=\"card-img\">\r\n <vdr-select-toggle\r\n [selected]=\"isSelected(asset)\"\r\n [disabled]=\"true\"\r\n [hiddenWhenOff]=\"true\"\r\n ></vdr-select-toggle>\r\n <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n </div>\r\n <div class=\"detail\">\r\n <vdr-entity-info\r\n [entity]=\"asset\"\r\n [small]=\"true\"\r\n (click)=\"entityInfoClick($event)\"\r\n ></vdr-entity-info>\r\n <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n <div>{{ 'catalog.no-selection' | translate }}</div>\r\n </div>\r\n <img\r\n class=\"preview\"\r\n *ngIf=\"selectionManager.selection.length >= 1\"\r\n [src]=\"lastSelected().preview + '?preset=medium'\"\r\n />\r\n </div>\r\n <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n <div class=\"name\">{{ lastSelected().name }}</div>\r\n <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n >\r\n </ng-container>\r\n <div *ngIf=\"selectionManager.selection.length === 1\">\r\n <a [routerLink]=\"['
|
|
14112
|
+
args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n <div\r\n class=\"card\"\r\n *ngFor=\"let asset of assets\"\r\n (click)=\"toggleSelection(asset, $event)\"\r\n [class.selected]=\"isSelected(asset)\"\r\n >\r\n <div class=\"card-img\">\r\n <vdr-select-toggle\r\n [selected]=\"isSelected(asset)\"\r\n [disabled]=\"true\"\r\n [hiddenWhenOff]=\"true\"\r\n ></vdr-select-toggle>\r\n <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n </div>\r\n <div class=\"detail\">\r\n <vdr-entity-info\r\n [entity]=\"asset\"\r\n [small]=\"true\"\r\n (click)=\"entityInfoClick($event)\"\r\n ></vdr-entity-info>\r\n <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n <div>{{ 'catalog.no-selection' | translate }}</div>\r\n </div>\r\n <img\r\n class=\"preview\"\r\n *ngIf=\"selectionManager.selection.length >= 1\"\r\n [src]=\"lastSelected().preview + '?preset=medium'\"\r\n />\r\n </div>\r\n <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n <div class=\"name\">{{ lastSelected().name }}</div>\r\n <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n >\r\n </ng-container>\r\n <div *ngIf=\"selectionManager.selection.length === 1\">\r\n <a [routerLink]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" class=\"button-ghost\">\r\n <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <div *ngIf=\"selectionManager.selection.length === 1\">\r\n <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"canDelete\">\r\n <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n {{ 'common.delete' | translate }}\r\n </button>\r\n </div>\r\n <div class=\"mt-1\" *ngIf=\"selectionManager.selection.length === 1\">\r\n <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n <ul>\r\n <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n </ul>\r\n </div>\r\n</div>\r\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:left;list-style-type:none;margin-left: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"] }]
|
|
14078
14113
|
}], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { assets: [{
|
|
14079
14114
|
type: Input
|
|
14080
14115
|
}], multiSelect: [{
|
|
@@ -14085,6 +14120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
|
|
|
14085
14120
|
type: Output
|
|
14086
14121
|
}], deleteAssets: [{
|
|
14087
14122
|
type: Output
|
|
14123
|
+
}], editAssetClick: [{
|
|
14124
|
+
type: Output
|
|
14088
14125
|
}] } });
|
|
14089
14126
|
|
|
14090
14127
|
/**
|
|
@@ -14200,11 +14237,11 @@ class AssetPickerDialogComponent {
|
|
|
14200
14237
|
});
|
|
14201
14238
|
}
|
|
14202
14239
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPickerDialogComponent, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n <span>{{ 'asset.select-assets' | translate }}</span>\r\n <div class=\"flex-spacer\"></div>\r\n <vdr-asset-file-input\r\n class=\"ml3\"\r\n (selectFiles)=\"createAssets($event)\"\r\n [uploading]=\"uploading\"\r\n dropZoneTarget=\".modal-content\"\r\n ></vdr-asset-file-input>\r\n </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n class=\"mb-2\"\r\n [tags]=\"allTags$ | async\"\r\n (searchTermChange)=\"searchTerm$.next($event)\"\r\n (tagsChange)=\"filterByTags$.next($event)\"\r\n #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n [multiSelect]=\"multiSelect\"\r\n (selectionChange)=\"selection = $event\"\r\n #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n <vdr-items-per-page-controls\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n ></vdr-items-per-page-controls>\r\n\r\n <vdr-pagination-controls\r\n [currentPage]=\"paginationConfig.currentPage\"\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n [totalItems]=\"paginationConfig.totalItems\"\r\n (pageChange)=\"pageChange($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14240
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n <span>{{ 'asset.select-assets' | translate }}</span>\r\n <div class=\"flex-spacer\"></div>\r\n <vdr-asset-file-input\r\n class=\"ml3\"\r\n (selectFiles)=\"createAssets($event)\"\r\n [uploading]=\"uploading\"\r\n dropZoneTarget=\".modal-content\"\r\n ></vdr-asset-file-input>\r\n </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n class=\"mb-2\"\r\n [tags]=\"allTags$ | async\"\r\n (searchTermChange)=\"searchTerm$.next($event)\"\r\n (tagsChange)=\"filterByTags$.next($event)\"\r\n #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n [multiSelect]=\"multiSelect\"\r\n (selectionChange)=\"selection = $event\"\r\n (editAssetClick)=\"cancel()\"\r\n #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n <vdr-items-per-page-controls\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n ></vdr-items-per-page-controls>\r\n\r\n <vdr-pagination-controls\r\n [currentPage]=\"paginationConfig.currentPage\"\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n [totalItems]=\"paginationConfig.totalItems\"\r\n (pageChange)=\"pageChange($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets", "editAssetClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14204
14241
|
}
|
|
14205
14242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPickerDialogComponent, decorators: [{
|
|
14206
14243
|
type: Component,
|
|
14207
|
-
args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n <span>{{ 'asset.select-assets' | translate }}</span>\r\n <div class=\"flex-spacer\"></div>\r\n <vdr-asset-file-input\r\n class=\"ml3\"\r\n (selectFiles)=\"createAssets($event)\"\r\n [uploading]=\"uploading\"\r\n dropZoneTarget=\".modal-content\"\r\n ></vdr-asset-file-input>\r\n </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n class=\"mb-2\"\r\n [tags]=\"allTags$ | async\"\r\n (searchTermChange)=\"searchTerm$.next($event)\"\r\n (tagsChange)=\"filterByTags$.next($event)\"\r\n #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n [multiSelect]=\"multiSelect\"\r\n (selectionChange)=\"selection = $event\"\r\n #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n <vdr-items-per-page-controls\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n ></vdr-items-per-page-controls>\r\n\r\n <vdr-pagination-controls\r\n [currentPage]=\"paginationConfig.currentPage\"\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n [totalItems]=\"paginationConfig.totalItems\"\r\n (pageChange)=\"pageChange($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
|
|
14244
|
+
args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n <div class=\"title-row\">\r\n <span>{{ 'asset.select-assets' | translate }}</span>\r\n <div class=\"flex-spacer\"></div>\r\n <vdr-asset-file-input\r\n class=\"ml3\"\r\n (selectFiles)=\"createAssets($event)\"\r\n [uploading]=\"uploading\"\r\n dropZoneTarget=\".modal-content\"\r\n ></vdr-asset-file-input>\r\n </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n class=\"mb-2\"\r\n [tags]=\"allTags$ | async\"\r\n (searchTermChange)=\"searchTerm$.next($event)\"\r\n (tagsChange)=\"filterByTags$.next($event)\"\r\n #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n [multiSelect]=\"multiSelect\"\r\n (selectionChange)=\"selection = $event\"\r\n (editAssetClick)=\"cancel()\"\r\n #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n <vdr-items-per-page-controls\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n ></vdr-items-per-page-controls>\r\n\r\n <vdr-pagination-controls\r\n [currentPage]=\"paginationConfig.currentPage\"\r\n [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n [totalItems]=\"paginationConfig.totalItems\"\r\n (pageChange)=\"pageChange($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
|
|
14208
14245
|
}], ctorParameters: function () { return [{ type: DataService }, { type: NotificationService }]; }, propDecorators: { assetSearchInputComponent: [{
|
|
14209
14246
|
type: ViewChild,
|
|
14210
14247
|
args: ['assetSearchInputComponent']
|
|
@@ -21172,9 +21209,9 @@ function getDefaultValue(type, isNullable) {
|
|
|
21172
21209
|
case 'string':
|
|
21173
21210
|
case 'text':
|
|
21174
21211
|
case 'localeText':
|
|
21175
|
-
return '';
|
|
21212
|
+
return isNullable ? null : '';
|
|
21176
21213
|
case 'boolean':
|
|
21177
|
-
return false;
|
|
21214
|
+
return isNullable ? null : false;
|
|
21178
21215
|
case 'float':
|
|
21179
21216
|
case 'int':
|
|
21180
21217
|
return isNullable ? null : 0;
|
|
@@ -21244,7 +21281,7 @@ function patchObject(obj, patch) {
|
|
|
21244
21281
|
}
|
|
21245
21282
|
|
|
21246
21283
|
// Auto-generated by the set-version.js script.
|
|
21247
|
-
const ADMIN_UI_VERSION = '2.0.
|
|
21284
|
+
const ADMIN_UI_VERSION = '2.0.9';
|
|
21248
21285
|
|
|
21249
21286
|
/**
|
|
21250
21287
|
* @description
|