npm - @vendure/admin-ui - Versions diffs - 2.2.0-next.1 → 2.2.0-next.2 - Mend

@vendure/admin-ui 2.2.0-next.1 → 2.2.0-next.2

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 (190) hide show

package/core/common/version.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const ADMIN_UI_VERSION = "2.2.0-next.1";
1	+ export declare const ADMIN_UI_VERSION = "2.2.0-next.2";

package/core/data/server-config.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Injector } from '@angular/core';
-import { CustomFieldConfig, CustomFields, GetGlobalSettingsQuery, OrderProcessState, PermissionDefinition, ServerConfig } from '../common/generated-types';
+import { CustomFieldConfig, CustomFields, GetGlobalSettingsQuery, GetServerConfigQuery, OrderProcessState, PermissionDefinition } from '../common/generated-types';
 import * as i0 from "@angular/core";
 export declare function initializeServerConfigService(serverConfigService: ServerConfigService): () => Promise<any>;
 /**
@@ -9,6 +9,7 @@ export declare function initializeServerConfigService(serverConfigService: Serve
 export declare class ServerConfigService {
     private injector;
     private _serverConfig;
+    customFieldsMap: Map<string, CustomFieldConfig[]>;
     private get baseDataService();
     constructor(injector: Injector);
     /**
@@ -28,11 +29,11 @@ export declare class ServerConfigService {
     /**
      * Retrieves the custom field configs for the given entity type.
      */
-    getCustomFieldsFor(type: Exclude<keyof CustomFields, '__typename'>): CustomFieldConfig[];
+    getCustomFieldsFor(type: Exclude<keyof CustomFields, '__typename'> | string): CustomFieldConfig[];
     getOrderProcessStates(): OrderProcessState[];
     getPermittedAssetTypes(): string[];
     getPermissionDefinitions(): PermissionDefinition[];
-    get serverConfig(): ServerConfig;
+    get serverConfig(): GetServerConfigQuery['globalSettings']['serverConfig'];
     static ɵfac: i0.ɵɵFactoryDeclaration<ServerConfigService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ServerConfigService>;
 }

package/core/data/utils/add-custom-fields.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { DocumentNode } from 'graphql';
-import { CustomFields } from '../../common/generated-types';
+import { CustomFieldConfig } from '../../common/generated-types';
 /**
  * Given a GraphQL AST (DocumentNode), this function looks for fragment definitions and adds and configured
  * custom fields to those fragments.
  */
-export declare function addCustomFields(documentNode: DocumentNode, customFields: CustomFields): DocumentNode;
+export declare function addCustomFields(documentNode: DocumentNode, customFields: Map<string, CustomFieldConfig[]>): DocumentNode;

package/core/shared/components/custom-field-control/custom-field-control.component.d.ts CHANGED Viewed

@@ -20,8 +20,6 @@ export declare class CustomFieldControlComponent implements OnInit {
     showLabel: boolean;
     readonly: boolean;
     hasCustomControl: boolean;
-    private customComponentPlaceholder;
-    private customComponentFactory;
     uiLanguage$: Observable<LanguageCode>;
     constructor(dataService: DataService, customFieldComponentService: CustomFieldComponentService);
     ngOnInit(): void;

package/core/shared/components/form-field/form-field-control.directive.d.ts CHANGED Viewed

@@ -10,6 +10,6 @@ export declare class FormFieldControlDirective {
     get touched(): boolean;
     setReadOnly(value: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldControlDirective, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FormFieldControlDirective, "input, textarea, select", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FormFieldControlDirective, "input, textarea, select, vdr-currency-input", never, {}, {}, never, never, false, never>;
 }
 export {};

package/core/shared/components/form-field/form-field.component.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { EventEmitter, OnInit } from '@angular/core';
 import { FormFieldControlDirective } from './form-field-control.directive';
 import * as i0 from "@angular/core";
 /**
@@ -21,11 +21,12 @@ export declare class FormFieldComponent implements OnInit {
      * will be displayed which allows the field to be edited.
      */
     readOnlyToggle: boolean;
+    readOnlyToggleChange: EventEmitter<boolean>;
     formFieldControl: FormFieldControlDirective;
     isReadOnly: boolean;
     ngOnInit(): void;
     setReadOnly(value: boolean): void;
     getErrorMessage(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "vdr-form-field", never, { "label": { "alias": "label"; "required": false; }; "for": { "alias": "for"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "readOnlyToggle": { "alias": "readOnlyToggle"; "required": false; }; }, {}, ["formFieldControl"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "vdr-form-field", never, { "label": { "alias": "label"; "required": false; }; "for": { "alias": "for"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "readOnlyToggle": { "alias": "readOnlyToggle"; "required": false; }; }, { "readOnlyToggleChange": "readOnlyToggleChange"; }, ["formFieldControl"], ["*"], false, never>;
 }

package/core/shared/components/page-title/page-title.component.d.ts CHANGED Viewed

@@ -1,15 +1,14 @@
-import { ChangeDetectorRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
 import { BreadcrumbService } from '../../../providers/breadcrumb/breadcrumb.service';
 import * as i0 from "@angular/core";
 export declare class PageTitleComponent implements OnInit, OnChanges {
-    private changeDetector;
     private breadcrumbService;
     title: string;
     private titleChange$;
     protected title$: Observable<string>;
     readonly setTitle: (title: string) => void;
-    constructor(changeDetector: ChangeDetectorRef, breadcrumbService: BreadcrumbService);
+    constructor(breadcrumbService: BreadcrumbService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PageTitleComponent, never>;

package/esm2022/catalog/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.mjs CHANGED Viewed

@@ -93,7 +93,7 @@ export class AssignProductsToChannelDialogComponent {
         }).single$)).productVariants.items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssignProductsToChannelDialogComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssignProductsToChannelDialogComponent, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\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)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssignProductsToChannelDialogComponent, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\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)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssignProductsToChannelDialogComponent, decorators: [{
             type: Component,

package/esm2022/catalog/components/collection-data-table/collection-data-table.component.mjs CHANGED Viewed

@@ -76,7 +76,7 @@ export class CollectionDataTableComponent extends DataTable2Component {
         this.changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalStorageService }, { token: i1.DataService }, { token: i2.DragDrop }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                >\r\n                    <ng-container\r\n                        *ngComponentOutlet=\"\r\n                            componentConfig.config.component;\r\n                            inputs: { rowItem: item };\r\n                            injector: componentConfig.injector\r\n                        \"\r\n                    ></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultComponent>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                    ></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i1.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i1.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                >\r\n                    <ng-container\r\n                        *ngComponentOutlet=\"\r\n                            componentConfig.config.component;\r\n                            inputs: { rowItem: item };\r\n                            injector: componentConfig.injector\r\n                        \"\r\n                    ></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultComponent>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                    ></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i1.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i1.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDataTableComponent, decorators: [{
             type: Component,

package/esm2022/catalog/components/collection-detail/collection-detail.component.mjs CHANGED Viewed

@@ -252,7 +252,7 @@ export class CollectionDetailComponent extends TypedBaseDetailComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template></vdr-ab-right\r\n        >\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block *ngIf=\"entity$ | async as entity\"\r\n            ><nav role=\"navigation\">\r\n                <ul class=\"collection-breadcrumbs\">\r\n                    <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\r\n                        <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\r\n                            'catalog.root-collection' | translate\r\n                        }}</a>\r\n                        <a\r\n                            [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\r\n                            *ngIf=\"!isFirst && !isLast\"\r\n                            >{{ breadcrumb.name | translate }}</a\r\n                        >\r\n                        <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n                    </li>\r\n                </ul>\r\n            </nav>\r\n        </vdr-page-block>\r\n\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateSlug($event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'catalog.slug' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n                    >\r\n                        <input\r\n                            id=\"slug\"\r\n                            type=\"text\"\r\n                            formControlName=\"slug\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"entity?.assets\"\r\n                    [featuredAsset]=\"entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermission\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.filters' | translate\">\r\n                <vdr-form-field\r\n                    [label]=\"'catalog.filter-inheritance' | translate\"\r\n                    for=\"inheritFilters\"\r\n                >\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            formControlName=\"inheritFilters\"\r\n                            id=\"inheritFilters\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                                'catalog.inherit-filters-from-parent' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #noInherit>{{\r\n                                'catalog.do-not-inherit-filters' | translate\r\n                            }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n                <div formArrayName=\"filters\">\r\n                    <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\r\n                        <vdr-configurable-input\r\n                            (remove)=\"removeFilter(i)\"\r\n                            [position]=\"i\"\r\n                            [operation]=\"filter\"\r\n                            [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                            [formControlName]=\"i\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-configurable-input>\r\n                    </ng-container>\r\n                </div>\r\n                <div *vdrIfPermissions=\"updatePermission\">\r\n                    <vdr-dropdown>\r\n                        <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            <span>{{ 'marketing.add-condition' | translate }}</span>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                            <button\r\n                                *ngFor=\"let filter of allFilters\"\r\n                                type=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"addFilter(filter)\"\r\n                            >\r\n                                {{ filter.description }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\r\n                <vdr-collection-contents\r\n                    [collectionId]=\"id\"\r\n                    [parentId]=\"parentId$ | async\"\r\n                    [updatedFilters]=\"updatedFilters$ | async\"\r\n                    [inheritFilters]=\"inheritFilters$ | async\"\r\n                    [previewUpdatedFilters]=\"livePreview\"\r\n                    #collectionContents\r\n                >\r\n                    <ng-template let-count>\r\n                        <div class=\"ml-3\">\r\n                            <div class=\"contents-title\">\r\n                                {{ 'catalog.collection-contents' | translate }} ({{\r\n                                    'common.results-count' | translate : { count: count }\r\n                                }})\r\n                            </div>\r\n                            <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                                <input\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    [ngModelOptions]=\"{ standalone: true }\"\r\n                                    [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                                    [ngModel]=\"livePreview\"\r\n                                    (ngModelChange)=\"toggleLivePreview()\"\r\n                                />\r\n                                <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-collection-contents>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i6.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: i7.CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template></vdr-ab-right\r\n        >\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block *ngIf=\"entity$ | async as entity\"\r\n            ><nav role=\"navigation\">\r\n                <ul class=\"collection-breadcrumbs\">\r\n                    <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\r\n                        <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\r\n                            'catalog.root-collection' | translate\r\n                        }}</a>\r\n                        <a\r\n                            [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\r\n                            *ngIf=\"!isFirst && !isLast\"\r\n                            >{{ breadcrumb.name | translate }}</a\r\n                        >\r\n                        <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n                    </li>\r\n                </ul>\r\n            </nav>\r\n        </vdr-page-block>\r\n\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateSlug($event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'catalog.slug' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n                    >\r\n                        <input\r\n                            id=\"slug\"\r\n                            type=\"text\"\r\n                            formControlName=\"slug\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"entity?.assets\"\r\n                    [featuredAsset]=\"entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermission\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.filters' | translate\">\r\n                <vdr-form-field\r\n                    [label]=\"'catalog.filter-inheritance' | translate\"\r\n                    for=\"inheritFilters\"\r\n                >\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            formControlName=\"inheritFilters\"\r\n                            id=\"inheritFilters\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                                'catalog.inherit-filters-from-parent' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #noInherit>{{\r\n                                'catalog.do-not-inherit-filters' | translate\r\n                            }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n                <div formArrayName=\"filters\">\r\n                    <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\r\n                        <vdr-configurable-input\r\n                            (remove)=\"removeFilter(i)\"\r\n                            [position]=\"i\"\r\n                            [operation]=\"filter\"\r\n                            [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                            [formControlName]=\"i\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-configurable-input>\r\n                    </ng-container>\r\n                </div>\r\n                <div *vdrIfPermissions=\"updatePermission\">\r\n                    <vdr-dropdown>\r\n                        <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            <span>{{ 'marketing.add-condition' | translate }}</span>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                            <button\r\n                                *ngFor=\"let filter of allFilters\"\r\n                                type=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"addFilter(filter)\"\r\n                            >\r\n                                {{ filter.description }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\r\n                <vdr-collection-contents\r\n                    [collectionId]=\"id\"\r\n                    [parentId]=\"parentId$ | async\"\r\n                    [updatedFilters]=\"updatedFilters$ | async\"\r\n                    [inheritFilters]=\"inheritFilters$ | async\"\r\n                    [previewUpdatedFilters]=\"livePreview\"\r\n                    #collectionContents\r\n                >\r\n                    <ng-template let-count>\r\n                        <div class=\"ml-3\">\r\n                            <div class=\"contents-title\">\r\n                                {{ 'catalog.collection-contents' | translate }} ({{\r\n                                    'common.results-count' | translate : { count: count }\r\n                                }})\r\n                            </div>\r\n                            <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                                <input\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    [ngModelOptions]=\"{ standalone: true }\"\r\n                                    [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                                    [ngModel]=\"livePreview\"\r\n                                    (ngModelChange)=\"toggleLivePreview()\"\r\n                                />\r\n                                <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-collection-contents>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i6.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: i7.CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDetailComponent, decorators: [{
             type: Component,