@vendure/admin-ui 2.0.0-next.2 → 2.0.0-next.3

package/catalog/components/collection-contents/collection-contents.component.d.ts

@@ -1,7 +1,7 @@
 import { OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DataService, GetCollectionContentsQuery } from '@vendure/admin-ui/core';
+import { ConfigurableOperationInput, DataService, GetCollectionContentsQuery } from '@vendure/admin-ui/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy {
@@ -9,13 +9,19 @@ export declare class CollectionContentsComponent implements OnInit, OnChanges, O
     private router;
     private dataService;
     collectionId: string;
+    parentId: string;
+    updatedFilters: ConfigurableOperationInput[] | undefined;
+    previewUpdatedFilters: boolean;
     headerTemplate: TemplateRef<any>;
     contents$: Observable<NonNullable<GetCollectionContentsQuery['collection']>['productVariants']['items']>;
     contentsTotalItems$: Observable<number>;
     contentsItemsPerPage$: Observable<number>;
     contentsCurrentPage$: Observable<number>;
     filterTermControl: FormControl;
+    isLoading: boolean;
     private collectionIdChange$;
+    private parentIdChange$;
+    private filterChanges$;
     private refresh$;
     private destroy$;
     constructor(route: ActivatedRoute, router: Router, dataService: DataService);
@@ -27,5 +33,5 @@ export declare class CollectionContentsComponent implements OnInit, OnChanges, O
     refresh(): void;
     private setParam;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollectionContentsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CollectionContentsComponent, "vdr-collection-contents", never, { "collectionId": "collectionId"; }, {}, ["headerTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CollectionContentsComponent, "vdr-collection-contents", never, { "collectionId": "collectionId"; "parentId": "parentId"; "updatedFilters": "updatedFilters"; "previewUpdatedFilters": "previewUpdatedFilters"; }, {}, ["headerTemplate"], never>;
 }

package/catalog/components/collection-detail/collection-detail.component.d.ts

@@ -1,7 +1,8 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Asset, BaseDetailComponent, CollectionFragment, ConfigurableOperation, ConfigurableOperationDefinition, CustomFieldConfig, DataService, LanguageCode, ModalService, NotificationService, Permission, ServerConfigService } from '@vendure/admin-ui/core';
+import { Asset, BaseDetailComponent, CollectionFragment, ConfigurableOperation, ConfigurableOperationDefinition, ConfigurableOperationInput, CustomFieldConfig, DataService, LanguageCode, LocalStorageService, ModalService, NotificationService, Permission, ServerConfigService } from '@vendure/admin-ui/core';
+import { Observable } from 'rxjs';
 import { CollectionContentsComponent } from '../collection-contents/collection-contents.component';
 import * as i0 from "@angular/core";
 export declare class CollectionDetailComponent extends BaseDetailComponent<CollectionFragment> implements OnInit, OnDestroy {
@@ -10,6 +11,7 @@ export declare class CollectionDetailComponent extends BaseDetailComponent<Colle
     private formBuilder;
     private notificationService;
     private modalService;
+    private localStorageService;
     customFields: CustomFieldConfig[];
     detailForm: FormGroup;
     assetChanges: {
@@ -18,22 +20,27 @@ export declare class CollectionDetailComponent extends BaseDetailComponent<Colle
     };
     filters: ConfigurableOperation[];
     allFilters: ConfigurableOperationDefinition[];
+    updatedFilters$: Observable<ConfigurableOperationInput[]>;
+    livePreview: boolean;
+    parentId$: Observable<string | undefined>;
     readonly updatePermission: Permission[];
     contentsComponent: CollectionContentsComponent;
-    constructor(router: Router, route: ActivatedRoute, serverConfigService: ServerConfigService, changeDetector: ChangeDetectorRef, dataService: DataService, formBuilder: FormBuilder, notificationService: NotificationService, modalService: ModalService);
+    constructor(router: Router, route: ActivatedRoute, serverConfigService: ServerConfigService, changeDetector: ChangeDetectorRef, dataService: DataService, formBuilder: FormBuilder, notificationService: NotificationService, modalService: ModalService, localStorageService: LocalStorageService);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    getFilterDefinition(filter: ConfigurableOperation): ConfigurableOperationDefinition | undefined;
+    getFilterDefinition(_filter: ConfigurableOperation): ConfigurableOperationDefinition | undefined;
     assetsChanged(): boolean;
     /**
      * If creating a new Collection, automatically generate the slug based on the collection name.
      */
     updateSlug(nameValue: string): void;
     addFilter(collectionFilter: ConfigurableOperation): void;
-    removeFilter(collectionFilter: ConfigurableOperation): void;
+    removeFilter(index: number): void;
     create(): void;
     save(): void;
     canDeactivate(): boolean;
+    toggleLivePreview(): void;
+    trackByFn(index: number, item: ConfigurableOperation): string;
     /**
      * Sets the values of the form on changes to the category or current language.
      */

package/catalog/components/collection-list/collection-list.component.d.ts

@@ -19,11 +19,13 @@ export declare class CollectionListComponent implements OnInit, OnDestroy {
     availableLanguages$: Observable<LanguageCode[]>;
     contentLanguage$: Observable<LanguageCode>;
     expandAll: boolean;
+    expandedIds: string[];
     private queryResult;
     private destroy$;
     constructor(dataService: DataService, notificationService: NotificationService, modalService: ModalService, router: Router, route: ActivatedRoute, serverConfigService: ServerConfigService);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    toggleExpandAll(): void;
     onRearrange(event: RearrangeEvent): void;
     deleteCollection(id: string): void;
     closeContents(): void;

package/catalog/components/collection-tree/array-to-tree.d.ts

@@ -16,4 +16,4 @@ export declare type RootNode<T extends HasParent> = {
  * Builds a tree from an array of nodes which have a parent.
  * Based on https://stackoverflow.com/a/31247960/772859, modified to preserve ordering.
  */
-export declare function arrayToTree<T extends HasParent>(nodes: T[], currentState?: RootNode<T>): RootNode<T>;
+export declare function arrayToTree<T extends HasParent>(nodes: T[], currentState?: RootNode<T>, expandedIds?: string[]): RootNode<T>;

package/catalog/components/collection-tree/collection-tree-node.component.d.ts

@@ -1,5 +1,6 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { DataService } from '@vendure/admin-ui/core';
 import { Observable } from 'rxjs';
 import { RootNode, TreeNode } from './array-to-tree';
@@ -10,6 +11,8 @@ export declare class CollectionTreeNodeComponent implements OnInit, OnChanges {
     private parent;
     private dataService;
     private collectionTreeService;
+    private router;
+    private route;
     depth: number;
     parentName: string;
     collectionTree: TreeNode<CollectionPartial>;
@@ -21,16 +24,17 @@ export declare class CollectionTreeNodeComponent implements OnInit, OnChanges {
         path: string;
         id: string;
     }>;
-    constructor(parent: CollectionTreeNodeComponent, dataService: DataService, collectionTreeService: CollectionTreeService);
+    constructor(parent: CollectionTreeNodeComponent, dataService: DataService, collectionTreeService: CollectionTreeService, router: Router, route: ActivatedRoute);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     trackByFn(index: number, item: CollectionPartial): string;
+    toggleExpanded(collection: TreeNode<CollectionPartial>): void;
     getMoveListItems(collection: CollectionPartial): void;
     move(collection: CollectionPartial, parentId: string): void;
     moveUp(collection: CollectionPartial, currentIndex: number): void;
     moveDown(collection: CollectionPartial, currentIndex: number): void;
     drop(event: CdkDragDrop<CollectionPartial | RootNode<CollectionPartial>>): void;
     delete(id: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CollectionTreeNodeComponent, [{ optional: true; skipSelf: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollectionTreeNodeComponent, [{ optional: true; skipSelf: true; }, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CollectionTreeNodeComponent, "vdr-collection-tree-node", never, { "collectionTree": "collectionTree"; "activeCollectionId": "activeCollectionId"; "expandAll": "expandAll"; }, {}, never, never>;
 }

package/catalog/components/collection-tree/collection-tree.component.d.ts

@@ -8,6 +8,7 @@ export declare class CollectionTreeComponent implements OnInit, OnChanges {
     collections: CollectionPartial[];
     activeCollectionId: string;
     expandAll: boolean;
+    expandedIds: string[];
     rearrange: EventEmitter<RearrangeEvent>;
     deleteCollection: EventEmitter<string>;
     collectionTree: RootNode<CollectionPartial>;
@@ -15,5 +16,5 @@ export declare class CollectionTreeComponent implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollectionTreeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CollectionTreeComponent, "vdr-collection-tree", never, { "collections": "collections"; "activeCollectionId": "activeCollectionId"; "expandAll": "expandAll"; }, { "rearrange": "rearrange"; "deleteCollection": "deleteCollection"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CollectionTreeComponent, "vdr-collection-tree", never, { "collections": "collections"; "activeCollectionId": "activeCollectionId"; "expandAll": "expandAll"; "expandedIds": "expandedIds"; }, { "rearrange": "rearrange"; "deleteCollection": "deleteCollection"; }, never, never>;
 }

package/catalog/components/product-variants-list/product-variants-list.component.d.ts

@@ -51,6 +51,7 @@ export declare class ProductVariantsListComponent implements OnChanges, OnInit,
     trackById(index: number, item: ProductVariantFragment): string;
     inventoryIsNotTracked(formGroup: FormGroup): boolean;
     getTaxCategoryName(group: FormGroup): string;
+    getStockOnHandMinValue(variant: FormGroup): any;
     getSaleableStockLevel(variant: ProductVariantFragment): number;
     areAllSelected(): boolean;
     onAssetChange(variantId: string, event: AssetChange): void;

package/core/common/generated-types.d.ts

@@ -3133,6 +3133,31 @@ export declare type PaymentStateTransitionError = ErrorResult & {
  * Permissions for administrators and customers. Used to control access to
  * GraphQL resolvers via the {@link Allow} decorator.
  *
+ * ## Understanding Permission.Owner
+ *
+ * `Permission.Owner` is a special permission which is used in some of the Vendure resolvers to indicate that that resolver should only
+ * be accessible to the "owner" of that resource.
+ *
+ * For example, the Shop API `activeCustomer` query resolver should only return the Customer object for the "owner" of that Customer, i.e.
+ * based on the activeUserId of the current session. As a result, the resolver code looks like this:
+ *
+ * @example
+ * ```TypeScript
+ * \@Query()
+ * \@Allow(Permission.Owner)
+ * async activeCustomer(\@Ctx() ctx: RequestContext): Promise<Customer | undefined> {
+ *   const userId = ctx.activeUserId;
+ *   if (userId) {
+ *     return this.customerService.findOneByUserId(ctx, userId);
+ *   }
+ * }
+ * ```
+ *
+ * Here we can see that the "ownership" must be enforced by custom logic inside the resolver. Since "ownership" cannot be defined generally
+ * nor statically encoded at build-time, any resolvers using `Permission.Owner` **must** include logic to enforce that only the owner
+ * of the resource has access. If not, then it is the equivalent of using `Permission.Public`.
+ *
+ *
  * @docsCategory common
  */
 export declare enum Permission {
@@ -3314,6 +3339,10 @@ export declare type PermissionDefinition = {
     description: Scalars['String'];
     name: Scalars['String'];
 };
+export declare type PreviewCollectionVariantsInput = {
+    filters: Array<ConfigurableOperationInput>;
+    parentId?: InputMaybe<Scalars['ID']>;
+};
 /** The price range where the result has more than one price */
 export declare type PriceRange = {
     __typename?: 'PriceRange';
@@ -3656,6 +3685,8 @@ export declare type Query = {
     paymentMethodHandlers: Array<ConfigurableOperationDefinition>;
     paymentMethods: PaymentMethodList;
     pendingSearchIndexUpdates: Scalars['Int'];
+    /** Used for real-time previews of the contents of a Collection */
+    previewCollectionVariants: ProductVariantList;
     /** Get a Product either by id or slug. If neither id nor slug is specified, an error will result. */
     product?: Maybe<Product>;
     productOptionGroup?: Maybe<ProductOptionGroup>;
@@ -3760,6 +3791,10 @@ export declare type QueryPaymentMethodArgs = {
 export declare type QueryPaymentMethodsArgs = {
     options?: InputMaybe<PaymentMethodListOptions>;
 };
+export declare type QueryPreviewCollectionVariantsArgs = {
+    input: PreviewCollectionVariantsInput;
+    options?: InputMaybe<ProductVariantListOptions>;
+};
 export declare type QueryProductArgs = {
     id?: InputMaybe<Scalars['ID']>;
     slug?: InputMaybe<Scalars['String']>;
@@ -5351,6 +5386,7 @@ export declare type GetCollectionFiltersQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
 };
@@ -5826,10 +5862,28 @@ export declare type GetCollectionContentsQuery = {
                 id: string;
                 productId: string;
                 name: string;
+                sku: string;
             }>;
         };
     } | null;
 };
+export declare type PreviewCollectionContentsQueryVariables = Exact<{
+    input: PreviewCollectionVariantsInput;
+    options?: InputMaybe<ProductVariantListOptions>;
+}>;
+export declare type PreviewCollectionContentsQuery = {
+    previewCollectionVariants: {
+        __typename?: 'ProductVariantList';
+        totalItems: number;
+        items: Array<{
+            __typename?: 'ProductVariant';
+            id: string;
+            productId: string;
+            name: string;
+            sku: string;
+        }>;
+    };
+};
 export declare type AddressFragment = {
     __typename?: 'Address';
     id: string;
@@ -10374,6 +10428,7 @@ export declare type GetAdjustmentOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
     promotionActions: Array<{
@@ -10389,6 +10444,7 @@ export declare type GetAdjustmentOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
 };
@@ -11293,6 +11349,7 @@ export declare type GetPaymentMethodOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
     paymentMethodHandlers: Array<{
@@ -11308,6 +11365,7 @@ export declare type GetPaymentMethodOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
 };
@@ -16377,6 +16435,7 @@ export declare type ConfigurableOperationDefFragment = {
         list: boolean;
         ui?: any | null;
         label?: string | null;
+        description?: string | null;
     }>;
 };
 declare type ErrorResult_AlreadyRefundedError_Fragment = {
@@ -16696,6 +16755,7 @@ export declare type GetShippingMethodOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
     shippingCalculators: Array<{
@@ -16711,6 +16771,7 @@ export declare type GetShippingMethodOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
     fulfillmentHandlers: Array<{
@@ -16726,6 +16787,7 @@ export declare type GetShippingMethodOperationsQuery = {
             list: boolean;
             ui?: any | null;
             label?: string | null;
+            description?: string | null;
         }>;
     }>;
 };

package/core/common/version.d.ts

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

package/core/data/definitions/collection-definitions.d.ts

@@ -7,3 +7,4 @@ export declare const UPDATE_COLLECTION: import("apollo-angular").TypedDocumentNo
 export declare const MOVE_COLLECTION: import("apollo-angular").TypedDocumentNode<unknown, unknown>;
 export declare const DELETE_COLLECTION: import("apollo-angular").TypedDocumentNode<unknown, unknown>;
 export declare const GET_COLLECTION_CONTENTS: import("apollo-angular").TypedDocumentNode<unknown, unknown>;
+export declare const PREVIEW_COLLECTION_CONTENTS: import("apollo-angular").TypedDocumentNode<unknown, unknown>;

package/core/data/providers/collection-data.service.d.ts

@@ -14,6 +14,10 @@ export declare class CollectionDataService {
     updateCollection(input: Codegen.UpdateCollectionInput): import("rxjs").Observable<Codegen.UpdateCollectionMutation>;
     moveCollection(inputs: Codegen.MoveCollectionInput[]): import("rxjs").Observable<Codegen.MoveCollectionMutation[]>;
     deleteCollection(id: string): import("rxjs").Observable<Codegen.DeleteCollectionMutation>;
+    previewCollectionVariants(input: Codegen.PreviewCollectionVariantsInput, options: Codegen.ProductVariantListOptions): import("@vendure/admin-ui/core").QueryResult<Codegen.PreviewCollectionContentsQuery, Codegen.Exact<{
+        input: Codegen.PreviewCollectionVariantsInput;
+        options?: Codegen.InputMaybe<Codegen.ProductVariantListOptions> | undefined;
+    }>>;
     getCollectionContents(id: string, take?: number, skip?: number, filterTerm?: string): import("@vendure/admin-ui/core").QueryResult<Codegen.GetCollectionContentsQuery, Codegen.Exact<{
         id: string;
         options?: Codegen.InputMaybe<Codegen.ProductVariantListOptions> | undefined;

package/core/providers/local-storage/local-storage.service.d.ts

@@ -11,6 +11,7 @@ export declare type LocalStorageTypeMap = {
     orderListLastCustomFilters: any;
     dashboardWidgetLayout: WidgetLayoutDefinition;
     activeTheme: string;
+    livePreviewCollectionContents: boolean;
 };
 export declare type LocalStorageLocationBasedTypeMap = {
     shippingTestOrder: any;

package/esm2020/catalog/components/assets/assets.component.mjs

@@ -78,10 +78,10 @@ export class AssetsComponent {
     }
 }
 AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetsComponent, deps: [{ token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);cursor:pointer}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], components: [{ type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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"] }, { type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "assetPreview": i1.AssetPreviewPipe, "translate": i5.TranslatePipe, "hasPermission": i1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], components: [{ type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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"] }, { type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "assetPreview": i1.AssetPreviewPipe, "translate": i5.TranslatePipe, "hasPermission": i1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);cursor:pointer}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"] }]
+            args: [{ selector: 'vdr-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { assetsSetter: [{
                 type: Input,
                 args: ['assets']