@vendure/admin-ui 2.2.4 → 2.2.6
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-detail/product-detail.component.d.ts +1 -4
- package/catalog/components/product-variant-list/product-variant-list.component.d.ts +1 -1
- package/catalog/providers/product-detail/product-detail.service.d.ts +1 -3
- package/core/common/version.d.ts +1 -1
- package/core/extension/register-data-table-component.d.ts +1 -1
- package/core/shared/components/dropdown/dropdown-menu.component.d.ts +5 -2
- package/core/shared/components/facet-value-selector/facet-value-selector.component.d.ts +1 -9
- package/core/shared/components/order-state-label/order-state-label.component.d.ts +1 -1
- package/core/shared/components/timeline-entry/timeline-entry.component.d.ts +2 -1
- package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
- package/esm2022/catalog/catalog.module.mjs +7 -7
- package/esm2022/catalog/components/facet-detail/facet-detail.component.mjs +11 -8
- package/esm2022/catalog/components/generate-product-variants/generate-product-variants.component.mjs +2 -1
- package/esm2022/catalog/components/product-detail/product-detail.component.mjs +1 -14
- package/esm2022/catalog/components/product-options-editor/product-options-editor.component.mjs +6 -2
- package/esm2022/catalog/providers/product-detail/product-detail.service.mjs +43 -27
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/extension/register-data-table-component.mjs +2 -2
- package/esm2022/core/shared/components/asset-file-input/asset-file-input.component.mjs +1 -1
- package/esm2022/core/shared/components/asset-gallery/asset-gallery.component.mjs +2 -2
- package/esm2022/core/shared/components/asset-picker-dialog/asset-picker-dialog.component.mjs +2 -2
- package/esm2022/core/shared/components/dropdown/dropdown-menu.component.mjs +29 -6
- package/esm2022/core/shared/components/facet-value-selector/facet-value-selector.component.mjs +2 -10
- package/esm2022/core/shared/components/timeline-entry/timeline-entry.component.mjs +5 -3
- package/esm2022/core/shared/components/zone-selector/zone-selector.component.mjs +2 -2
- package/esm2022/core/shared/shared.module.mjs +1 -1
- package/esm2022/customer/components/customer-history/customer-history-entry-host.component.mjs +1 -1
- package/esm2022/customer/components/customer-history/customer-history.component.mjs +3 -3
- package/esm2022/customer/customer.routes.mjs +2 -2
- package/esm2022/marketing/marketing.module.mjs +2 -2
- package/esm2022/order/components/order-history/order-history-entry-host.component.mjs +1 -1
- package/esm2022/order/components/order-history/order-history.component.mjs +3 -3
- package/esm2022/settings/components/channel-detail/channel-detail.component.mjs +22 -3
- package/fesm2022/vendure-admin-ui-catalog.mjs +64 -53
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +40 -23
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-customer.mjs +4 -4
- package/fesm2022/vendure-admin-ui-customer.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-marketing.mjs +1 -1
- package/fesm2022/vendure-admin-ui-marketing.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +3 -3
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-settings.mjs +20 -1
- package/fesm2022/vendure-admin-ui-settings.mjs.map +1 -1
- package/package.json +14 -14
|
@@ -7393,21 +7393,44 @@ class DropdownMenuComponent {
|
|
|
7393
7393
|
}
|
|
7394
7394
|
}
|
|
7395
7395
|
}
|
|
7396
|
-
constructor(overlay, viewContainerRef, dropdown, localizationService) {
|
|
7396
|
+
constructor(overlay, viewContainerRef, dropdown, localizationService, changeDetector) {
|
|
7397
7397
|
this.overlay = overlay;
|
|
7398
7398
|
this.viewContainerRef = viewContainerRef;
|
|
7399
7399
|
this.dropdown = dropdown;
|
|
7400
7400
|
this.localizationService = localizationService;
|
|
7401
|
+
this.changeDetector = changeDetector;
|
|
7401
7402
|
this.position = 'bottom-left';
|
|
7403
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
7404
|
+
const margin = 12;
|
|
7405
|
+
for (const entry of entries) {
|
|
7406
|
+
const contentWrapper = entry.target.querySelector('.dropdown-content-wrapper');
|
|
7407
|
+
if (contentWrapper) {
|
|
7408
|
+
const { bottom, top } = contentWrapper?.getBoundingClientRect();
|
|
7409
|
+
if (bottom > window.innerHeight - margin) {
|
|
7410
|
+
// dropdown is going off the bottom of the screen
|
|
7411
|
+
this.maxHeight = window.innerHeight - top - margin;
|
|
7412
|
+
this.changeDetector.markForCheck();
|
|
7413
|
+
}
|
|
7414
|
+
if (top < margin) {
|
|
7415
|
+
// dropdown is going off the top of the screen
|
|
7416
|
+
this.maxHeight = bottom - margin;
|
|
7417
|
+
this.changeDetector.markForCheck();
|
|
7418
|
+
}
|
|
7419
|
+
}
|
|
7420
|
+
}
|
|
7421
|
+
});
|
|
7402
7422
|
}
|
|
7403
7423
|
ngOnInit() {
|
|
7404
7424
|
this.direction$ = this.localizationService.direction$;
|
|
7405
7425
|
this.dropdown.onOpenChange(isOpen => {
|
|
7406
7426
|
if (isOpen) {
|
|
7407
7427
|
this.overlayRef.attach(this.menuPortal);
|
|
7428
|
+
this.resizeObserver.observe(this.overlayRef.overlayElement);
|
|
7408
7429
|
}
|
|
7409
7430
|
else {
|
|
7410
7431
|
this.overlayRef.detach();
|
|
7432
|
+
this.resizeObserver.unobserve(this.overlayRef.overlayElement);
|
|
7433
|
+
this.maxHeight = undefined;
|
|
7411
7434
|
}
|
|
7412
7435
|
});
|
|
7413
7436
|
}
|
|
@@ -7473,12 +7496,12 @@ class DropdownMenuComponent {
|
|
|
7473
7496
|
inverted.overlayY = pos.overlayY === 'top' ? 'bottom' : 'top';
|
|
7474
7497
|
return inverted;
|
|
7475
7498
|
}
|
|
7476
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7499
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7477
7500
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, host: { listeners: { "window:keydown.escape": "onEscapeKeydown($event)", "window:keydown": "onArrowKey($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
|
|
7478
7501
|
<ng-template #menu>
|
|
7479
7502
|
<div [dir]="direction$ | async">
|
|
7480
7503
|
<div class="dropdown open">
|
|
7481
|
-
<div class="dropdown-menu" [ngClass]="customClasses">
|
|
7504
|
+
<div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
|
|
7482
7505
|
<div
|
|
7483
7506
|
class="dropdown-content-wrapper"
|
|
7484
7507
|
[cdkTrapFocus]="true"
|
|
@@ -7498,7 +7521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
7498
7521
|
<ng-template #menu>
|
|
7499
7522
|
<div [dir]="direction$ | async">
|
|
7500
7523
|
<div class="dropdown open">
|
|
7501
|
-
<div class="dropdown-menu" [ngClass]="customClasses">
|
|
7524
|
+
<div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
|
|
7502
7525
|
<div
|
|
7503
7526
|
class="dropdown-content-wrapper"
|
|
7504
7527
|
[cdkTrapFocus]="true"
|
|
@@ -7511,7 +7534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
7511
7534
|
</div>
|
|
7512
7535
|
</ng-template>
|
|
7513
7536
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center;padding:3px 24px}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"] }]
|
|
7514
|
-
}], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }], propDecorators: { position: [{
|
|
7537
|
+
}], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
|
|
7515
7538
|
type: Input,
|
|
7516
7539
|
args: ['vdrPosition']
|
|
7517
7540
|
}], customClasses: [{
|
|
@@ -7603,7 +7626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
7603
7626
|
}], ctorParameters: () => [{ type: AlertsService }] });
|
|
7604
7627
|
|
|
7605
7628
|
// Auto-generated by the set-version.js script.
|
|
7606
|
-
const ADMIN_UI_VERSION = '2.2.
|
|
7629
|
+
const ADMIN_UI_VERSION = '2.2.6';
|
|
7607
7630
|
|
|
7608
7631
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
7609
7632
|
class FormFieldControlDirective {
|
|
@@ -12172,19 +12195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
12172
12195
|
* @example
|
|
12173
12196
|
* ```HTML
|
|
12174
12197
|
* <vdr-facet-value-selector
|
|
12175
|
-
* [facets]="facets"
|
|
12176
12198
|
* (selectedValuesChange)="selectedValues = $event"
|
|
12177
12199
|
* ></vdr-facet-value-selector>
|
|
12178
12200
|
* ```
|
|
12179
|
-
* The `
|
|
12180
|
-
* like this:
|
|
12201
|
+
* The `selectedValuesChange` event will emit an array of `FacetValue` objects.
|
|
12181
12202
|
*
|
|
12182
|
-
* @example
|
|
12183
|
-
* ```ts
|
|
12184
|
-
* this.facets = this.dataService
|
|
12185
|
-
* .facet.getAllFacets()
|
|
12186
|
-
* .mapSingle(data => data.facets.items);
|
|
12187
|
-
* ```
|
|
12188
12203
|
* @docsCategory components
|
|
12189
12204
|
*/
|
|
12190
12205
|
class FacetValueSelectorComponent {
|
|
@@ -14093,11 +14108,11 @@ class AssetGalleryComponent {
|
|
|
14093
14108
|
event.stopPropagation();
|
|
14094
14109
|
}
|
|
14095
14110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14096
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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-
|
|
14111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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-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:normal;gap:4px;min-height:24px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$2.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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 }); }
|
|
14097
14112
|
}
|
|
14098
14113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetGalleryComponent, decorators: [{
|
|
14099
14114
|
type: Component,
|
|
14100
|
-
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-
|
|
14115
|
+
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-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:normal;gap:4px;min-height:24px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
|
|
14101
14116
|
}], ctorParameters: () => [{ type: ModalService }], propDecorators: { assets: [{
|
|
14102
14117
|
type: Input
|
|
14103
14118
|
}], multiSelect: [{
|
|
@@ -14225,11 +14240,11 @@ class AssetPickerDialogComponent {
|
|
|
14225
14240
|
});
|
|
14226
14241
|
}
|
|
14227
14242
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPickerDialogComponent, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14228
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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;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: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;margin-top:12px;margin-bottom:12px;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: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14229
14244
|
}
|
|
14230
14245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPickerDialogComponent, decorators: [{
|
|
14231
14246
|
type: Component,
|
|
14232
|
-
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;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"] }]
|
|
14247
|
+
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;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;margin-top:12px;margin-bottom:12px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
|
|
14233
14248
|
}], ctorParameters: () => [{ type: DataService }, { type: NotificationService }], propDecorators: { assetSearchInputComponent: [{
|
|
14234
14249
|
type: ViewChild,
|
|
14235
14250
|
args: ['assetSearchInputComponent']
|
|
@@ -18798,11 +18813,11 @@ class TimelineEntryComponent {
|
|
|
18798
18813
|
}
|
|
18799
18814
|
}
|
|
18800
18815
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimelineEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\r\n [ngClass]=\"displayType\"\r\n [class.has-custom-icon]=\"!!iconShape\"\r\n class=\"entry\"\r\n [class.last]=\"isLast === true\"\r\n [class.collapsed]=\"collapsed\"\r\n>\r\n <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n <div class=\"custom-icon\">\r\n <clr-icon\r\n *ngIf=\"iconShape && !collapsed\"\r\n [attr.shape]=\"getIconShape()\"\r\n [ngClass]=\"getIconClass()\"\r\n size=\"24\"\r\n ></clr-icon>\r\n </div>\r\n </div>\r\n <div class=\"entry-body\">\r\n <div class=\"detail\">\r\n <div class=\"time\">\r\n {{ createdAt | localeDate: 'short' }}\r\n </div>\r\n <div class=\"name\">\r\n {{ name || '' }}\r\n </div>\r\n </div>\r\n <div [class.featured-entry]=\"featured\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}
|
|
18816
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isFirst: "isFirst", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\r\n [ngClass]=\"displayType\"\r\n [class.has-custom-icon]=\"!!iconShape\"\r\n class=\"entry\"\r\n [class.last]=\"isLast === true\"\r\n [class.first]=\"isFirst === true\"\r\n [class.collapsed]=\"collapsed\"\r\n>\r\n <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n <div class=\"custom-icon\">\r\n <clr-icon\r\n *ngIf=\"iconShape && !collapsed\"\r\n [attr.shape]=\"getIconShape()\"\r\n [ngClass]=\"getIconClass()\"\r\n size=\"24\"\r\n ></clr-icon>\r\n </div>\r\n </div>\r\n <div class=\"entry-body\">\r\n <div class=\"detail\">\r\n <div class=\"time\">\r\n {{ createdAt | localeDate: 'short' }}\r\n </div>\r\n <div class=\"name\">\r\n {{ name || '' }}\r\n </div>\r\n </div>\r\n <div [class.featured-entry]=\"featured\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.first .timeline:before{border-left-color:var(--color-weight-200)}.first .entry-body{max-height:initial}@media screen and (min-width: 768px){.first .entry-body{flex-direction:column}}.first .featured-entry{width:100%}.entry{display:flex}.entry:not(.collapsed):hover{background-color:var(--color-table-row-hover-bg)}.timeline{border-inline-start:2px solid var(--color-weight-200);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-inline-start:2px solid var(--color-weight-200)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-weight-100);border:1px solid var(--color-weight-300);position:absolute;left:-5px;top:42%;transition:top .2s;cursor:pointer;outline:2px solid var(--color-card-bg)}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:30%;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-700);background-color:var(--color-weight-100);border:1px solid var(--color-weight-200);outline:7px solid var(--color-card-bg);padding:6px;display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{font-size:var(--font-size-xs);flex:1;padding:16px 0;padding-inline-start:12px;line-height:16px;margin-inline-start:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}@media screen and (min-width: 768px){.entry-body{display:flex;gap:var(--space-unit);flex-direction:row-reverse;justify-content:space-between;align-items:center;padding-inline-end:var(--space-unit)}}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:var(--font-size-sm);line-height:26px;display:flex;align-items:center;gap:var(--space-unit)}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;gap:12px;color:var(--color-text-300);font-size:var(--font-size-xs)}@media screen and (min-width: 768px){.detail{flex-direction:row-reverse}}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-700)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-700)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-700)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-600)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18802
18817
|
}
|
|
18803
18818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimelineEntryComponent, decorators: [{
|
|
18804
18819
|
type: Component,
|
|
18805
|
-
args: [{ selector: 'vdr-timeline-entry', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n [ngClass]=\"displayType\"\r\n [class.has-custom-icon]=\"!!iconShape\"\r\n class=\"entry\"\r\n [class.last]=\"isLast === true\"\r\n [class.collapsed]=\"collapsed\"\r\n>\r\n <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n <div class=\"custom-icon\">\r\n <clr-icon\r\n *ngIf=\"iconShape && !collapsed\"\r\n [attr.shape]=\"getIconShape()\"\r\n [ngClass]=\"getIconClass()\"\r\n size=\"24\"\r\n ></clr-icon>\r\n </div>\r\n </div>\r\n <div class=\"entry-body\">\r\n <div class=\"detail\">\r\n <div class=\"time\">\r\n {{ createdAt | localeDate: 'short' }}\r\n </div>\r\n <div class=\"name\">\r\n {{ name || '' }}\r\n </div>\r\n </div>\r\n <div [class.featured-entry]=\"featured\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}
|
|
18820
|
+
args: [{ selector: 'vdr-timeline-entry', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n [ngClass]=\"displayType\"\r\n [class.has-custom-icon]=\"!!iconShape\"\r\n class=\"entry\"\r\n [class.last]=\"isLast === true\"\r\n [class.first]=\"isFirst === true\"\r\n [class.collapsed]=\"collapsed\"\r\n>\r\n <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n <div class=\"custom-icon\">\r\n <clr-icon\r\n *ngIf=\"iconShape && !collapsed\"\r\n [attr.shape]=\"getIconShape()\"\r\n [ngClass]=\"getIconClass()\"\r\n size=\"24\"\r\n ></clr-icon>\r\n </div>\r\n </div>\r\n <div class=\"entry-body\">\r\n <div class=\"detail\">\r\n <div class=\"time\">\r\n {{ createdAt | localeDate: 'short' }}\r\n </div>\r\n <div class=\"name\">\r\n {{ name || '' }}\r\n </div>\r\n </div>\r\n <div [class.featured-entry]=\"featured\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.first .timeline:before{border-left-color:var(--color-weight-200)}.first .entry-body{max-height:initial}@media screen and (min-width: 768px){.first .entry-body{flex-direction:column}}.first .featured-entry{width:100%}.entry{display:flex}.entry:not(.collapsed):hover{background-color:var(--color-table-row-hover-bg)}.timeline{border-inline-start:2px solid var(--color-weight-200);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-inline-start:2px solid var(--color-weight-200)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-weight-100);border:1px solid var(--color-weight-300);position:absolute;left:-5px;top:42%;transition:top .2s;cursor:pointer;outline:2px solid var(--color-card-bg)}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:30%;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-700);background-color:var(--color-weight-100);border:1px solid var(--color-weight-200);outline:7px solid var(--color-card-bg);padding:6px;display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{font-size:var(--font-size-xs);flex:1;padding:16px 0;padding-inline-start:12px;line-height:16px;margin-inline-start:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}@media screen and (min-width: 768px){.entry-body{display:flex;gap:var(--space-unit);flex-direction:row-reverse;justify-content:space-between;align-items:center;padding-inline-end:var(--space-unit)}}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:var(--font-size-sm);line-height:26px;display:flex;align-items:center;gap:var(--space-unit)}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;gap:12px;color:var(--color-text-300);font-size:var(--font-size-xs)}@media screen and (min-width: 768px){.detail{flex-direction:row-reverse}}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-700)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-700)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-700)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-600)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"] }]
|
|
18806
18821
|
}], propDecorators: { displayType: [{
|
|
18807
18822
|
type: Input
|
|
18808
18823
|
}], createdAt: [{
|
|
@@ -18813,6 +18828,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
18813
18828
|
type: Input
|
|
18814
18829
|
}], iconShape: [{
|
|
18815
18830
|
type: Input
|
|
18831
|
+
}], isFirst: [{
|
|
18832
|
+
type: Input
|
|
18816
18833
|
}], isLast: [{
|
|
18817
18834
|
type: Input
|
|
18818
18835
|
}], collapsed: [{
|
|
@@ -18993,7 +19010,7 @@ class ZoneSelectorComponent {
|
|
|
18993
19010
|
this.selectedId$ = new Subject();
|
|
18994
19011
|
this.disabled = false;
|
|
18995
19012
|
this.zones$ = this.dataService
|
|
18996
|
-
.query(GetZoneSelectorListDocument, { options: { take: 999 } }
|
|
19013
|
+
.query(GetZoneSelectorListDocument, { options: { take: 999 } })
|
|
18997
19014
|
.mapSingle(result => result.zones.items);
|
|
18998
19015
|
}
|
|
18999
19016
|
onChange(selected) {
|
|
@@ -22078,7 +22095,7 @@ function setDashboardWidgetLayout(layoutDef) {
|
|
|
22078
22095
|
/**
|
|
22079
22096
|
* @description
|
|
22080
22097
|
* Allows you to override the default component used to render the data of a particular column in a DataTable.
|
|
22081
|
-
* The component should implement the {@link
|
|
22098
|
+
* The component should implement the {@link CustomColumnComponent} interface. The tableId and columnId can
|
|
22082
22099
|
* be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
|
|
22083
22100
|
*
|
|
22084
22101
|
* @example
|