@vendure/admin-ui 2.2.5 → 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.
Files changed (45) hide show
  1. package/LICENSE +9 -0
  2. package/catalog/components/product-detail/product-detail.component.d.ts +1 -4
  3. package/catalog/components/product-variant-list/product-variant-list.component.d.ts +1 -1
  4. package/catalog/providers/product-detail/product-detail.service.d.ts +1 -3
  5. package/core/common/version.d.ts +1 -1
  6. package/core/extension/register-data-table-component.d.ts +1 -1
  7. package/core/extension/register-route-component.d.ts +1 -1
  8. package/core/shared/components/facet-value-selector/facet-value-selector.component.d.ts +1 -9
  9. package/core/shared/components/timeline-entry/timeline-entry.component.d.ts +2 -1
  10. package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
  11. package/esm2022/catalog/catalog.module.mjs +1 -1
  12. package/esm2022/catalog/components/facet-detail/facet-detail.component.mjs +11 -8
  13. package/esm2022/catalog/components/generate-product-variants/generate-product-variants.component.mjs +2 -1
  14. package/esm2022/catalog/components/product-detail/product-detail.component.mjs +1 -14
  15. package/esm2022/catalog/components/product-options-editor/product-options-editor.component.mjs +6 -2
  16. package/esm2022/catalog/providers/product-detail/product-detail.service.mjs +43 -27
  17. package/esm2022/core/common/version.mjs +2 -2
  18. package/esm2022/core/extension/register-data-table-component.mjs +2 -2
  19. package/esm2022/core/shared/components/asset-file-input/asset-file-input.component.mjs +1 -1
  20. package/esm2022/core/shared/components/asset-gallery/asset-gallery.component.mjs +2 -2
  21. package/esm2022/core/shared/components/asset-picker-dialog/asset-picker-dialog.component.mjs +2 -2
  22. package/esm2022/core/shared/components/dropdown/dropdown-menu.component.mjs +33 -33
  23. package/esm2022/core/shared/components/facet-value-selector/facet-value-selector.component.mjs +2 -10
  24. package/esm2022/core/shared/components/timeline-entry/timeline-entry.component.mjs +5 -3
  25. package/esm2022/core/shared/components/zone-selector/zone-selector.component.mjs +13 -13
  26. package/esm2022/customer/components/customer-history/customer-history-entry-host.component.mjs +1 -1
  27. package/esm2022/customer/components/customer-history/customer-history.component.mjs +3 -3
  28. package/esm2022/customer/customer.routes.mjs +2 -2
  29. package/esm2022/marketing/marketing.module.mjs +1 -1
  30. package/esm2022/order/components/order-history/order-history-entry-host.component.mjs +1 -1
  31. package/esm2022/order/components/order-history/order-history.component.mjs +3 -3
  32. package/esm2022/settings/components/channel-detail/channel-detail.component.mjs +8 -8
  33. package/fesm2022/vendure-admin-ui-catalog.mjs +58 -47
  34. package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
  35. package/fesm2022/vendure-admin-ui-core.mjs +55 -61
  36. package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
  37. package/fesm2022/vendure-admin-ui-customer.mjs +4 -4
  38. package/fesm2022/vendure-admin-ui-customer.mjs.map +1 -1
  39. package/fesm2022/vendure-admin-ui-marketing.mjs.map +1 -1
  40. package/fesm2022/vendure-admin-ui-order.mjs +3 -3
  41. package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
  42. package/fesm2022/vendure-admin-ui-settings.mjs +7 -7
  43. package/fesm2022/vendure-admin-ui-settings.mjs.map +1 -1
  44. package/marketing/components/promotion-list/promotion-list.component.d.ts +1 -1
  45. package/package.json +18 -18
@@ -7497,42 +7497,42 @@ class DropdownMenuComponent {
7497
7497
  return inverted;
7498
7498
  }
7499
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 }); }
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: `
7501
- <ng-template #menu>
7502
- <div [dir]="direction$ | async">
7503
- <div class="dropdown open">
7504
- <div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
7505
- <div
7506
- class="dropdown-content-wrapper"
7507
- [cdkTrapFocus]="true"
7508
- [cdkTrapFocusAutoCapture]="true"
7509
- >
7510
- <ng-content></ng-content>
7511
- </div>
7512
- </div>
7513
- </div>
7514
- </div>
7515
- </ng-template>
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: `
7501
+ <ng-template #menu>
7502
+ <div [dir]="direction$ | async">
7503
+ <div class="dropdown open">
7504
+ <div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
7505
+ <div
7506
+ class="dropdown-content-wrapper"
7507
+ [cdkTrapFocus]="true"
7508
+ [cdkTrapFocusAutoCapture]="true"
7509
+ >
7510
+ <ng-content></ng-content>
7511
+ </div>
7512
+ </div>
7513
+ </div>
7514
+ </div>
7515
+ </ng-template>
7516
7516
  `, isInline: true, 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7517
7517
  }
7518
7518
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, decorators: [{
7519
7519
  type: Component,
7520
- args: [{ selector: 'vdr-dropdown-menu', template: `
7521
- <ng-template #menu>
7522
- <div [dir]="direction$ | async">
7523
- <div class="dropdown open">
7524
- <div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
7525
- <div
7526
- class="dropdown-content-wrapper"
7527
- [cdkTrapFocus]="true"
7528
- [cdkTrapFocusAutoCapture]="true"
7529
- >
7530
- <ng-content></ng-content>
7531
- </div>
7532
- </div>
7533
- </div>
7534
- </div>
7535
- </ng-template>
7520
+ args: [{ selector: 'vdr-dropdown-menu', template: `
7521
+ <ng-template #menu>
7522
+ <div [dir]="direction$ | async">
7523
+ <div class="dropdown open">
7524
+ <div class="dropdown-menu" [ngClass]="customClasses" [style.maxHeight.px]="maxHeight">
7525
+ <div
7526
+ class="dropdown-content-wrapper"
7527
+ [cdkTrapFocus]="true"
7528
+ [cdkTrapFocusAutoCapture]="true"
7529
+ >
7530
+ <ng-content></ng-content>
7531
+ </div>
7532
+ </div>
7533
+ </div>
7534
+ </div>
7535
+ </ng-template>
7536
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"] }]
7537
7537
  }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
7538
7538
  type: Input,
@@ -7626,7 +7626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
7626
7626
  }], ctorParameters: () => [{ type: AlertsService }] });
7627
7627
 
7628
7628
  // Auto-generated by the set-version.js script.
7629
- const ADMIN_UI_VERSION = '2.2.5';
7629
+ const ADMIN_UI_VERSION = '2.2.6';
7630
7630
 
7631
7631
  /* eslint-disable @angular-eslint/directive-selector */
7632
7632
  class FormFieldControlDirective {
@@ -12195,19 +12195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
12195
12195
  * @example
12196
12196
  * ```HTML
12197
12197
  * <vdr-facet-value-selector
12198
- * [facets]="facets"
12199
12198
  * (selectedValuesChange)="selectedValues = $event"
12200
12199
  * ></vdr-facet-value-selector>
12201
12200
  * ```
12202
- * The `facets` input should be provided from the parent component
12203
- * like this:
12201
+ * The `selectedValuesChange` event will emit an array of `FacetValue` objects.
12204
12202
  *
12205
- * @example
12206
- * ```ts
12207
- * this.facets = this.dataService
12208
- * .facet.getAllFacets()
12209
- * .mapSingle(data => data.facets.items);
12210
- * ```
12211
12203
  * @docsCategory components
12212
12204
  */
12213
12205
  class FacetValueSelectorComponent {
@@ -14116,11 +14108,11 @@ class AssetGalleryComponent {
14116
14108
  event.stopPropagation();
14117
14109
  }
14118
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 }); }
14119
- 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-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:start;list-style-type:none;margin-inline-start:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: 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 }); }
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 }); }
14120
14112
  }
14121
14113
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetGalleryComponent, decorators: [{
14122
14114
  type: Component,
14123
- 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: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"] }]
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"] }]
14124
14116
  }], ctorParameters: () => [{ type: ModalService }], propDecorators: { assets: [{
14125
14117
  type: Input
14126
14118
  }], multiSelect: [{
@@ -14248,11 +14240,11 @@ class AssetPickerDialogComponent {
14248
14240
  });
14249
14241
  }
14250
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 }); }
14251
- 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 }); }
14252
14244
  }
14253
14245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPickerDialogComponent, decorators: [{
14254
14246
  type: Component,
14255
- 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"] }]
14256
14248
  }], ctorParameters: () => [{ type: DataService }, { type: NotificationService }], propDecorators: { assetSearchInputComponent: [{
14257
14249
  type: ViewChild,
14258
14250
  args: ['assetSearchInputComponent']
@@ -18821,11 +18813,11 @@ class TimelineEntryComponent {
18821
18813
  }
18822
18814
  }
18823
18815
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimelineEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
18824
- 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}:host:first-of-type .timeline:before{border-left-color:var(--color-weight-200)}:host:first-of-type .entry-body{max-height:initial}@media screen and (min-width: 768px){:host:first-of-type .entry-body{flex-direction:column}}:host:first-of-type .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 }); }
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 }); }
18825
18817
  }
18826
18818
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimelineEntryComponent, decorators: [{
18827
18819
  type: Component,
18828
- 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}:host:first-of-type .timeline:before{border-left-color:var(--color-weight-200)}:host:first-of-type .entry-body{max-height:initial}@media screen and (min-width: 768px){:host:first-of-type .entry-body{flex-direction:column}}:host:first-of-type .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"] }]
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"] }]
18829
18821
  }], propDecorators: { displayType: [{
18830
18822
  type: Input
18831
18823
  }], createdAt: [{
@@ -18836,6 +18828,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
18836
18828
  type: Input
18837
18829
  }], iconShape: [{
18838
18830
  type: Input
18831
+ }], isFirst: [{
18832
+ type: Input
18839
18833
  }], isLast: [{
18840
18834
  type: Input
18841
18835
  }], collapsed: [{
@@ -18987,18 +18981,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
18987
18981
  }]
18988
18982
  }], ctorParameters: () => [{ type: I18nService }] });
18989
18983
 
18990
- const GET_ZONE_SELECTOR_LIST = gql `
18991
- query GetZoneSelectorList($options: ZoneListOptions) {
18992
- zones(options: $options) {
18993
- items {
18994
- id
18995
- createdAt
18996
- updatedAt
18997
- name
18998
- }
18999
- totalItems
19000
- }
19001
- }
18984
+ const GET_ZONE_SELECTOR_LIST = gql `
18985
+ query GetZoneSelectorList($options: ZoneListOptions) {
18986
+ zones(options: $options) {
18987
+ items {
18988
+ id
18989
+ createdAt
18990
+ updatedAt
18991
+ name
18992
+ }
18993
+ totalItems
18994
+ }
18995
+ }
19002
18996
  `;
19003
18997
  /**
19004
18998
  * @description
@@ -22101,7 +22095,7 @@ function setDashboardWidgetLayout(layoutDef) {
22101
22095
  /**
22102
22096
  * @description
22103
22097
  * Allows you to override the default component used to render the data of a particular column in a DataTable.
22104
- * The component should implement the {@link CustomDataTableColumnComponent} interface. The tableId and columnId can
22098
+ * The component should implement the {@link CustomColumnComponent} interface. The tableId and columnId can
22105
22099
  * be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
22106
22100
  *
22107
22101
  * @example