@vendure/admin-ui 3.0.5 → 3.0.7

package/fesm2022/vendure-admin-ui-core.mjs

@@ -7742,7 +7742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [{ type: AlertsService }] });
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '3.0.5';
+const ADMIN_UI_VERSION = '3.0.7';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -11190,6 +11190,12 @@ class DynamicFormInputComponent {
         if (this.listItems) {
             for (const item of this.listItems) {
                 if (item.componentRef) {
+                    const { value } = item.control;
+                    const { type } = item.componentRef.instance.config || {};
+                    // fix a bug where the list item of string turns into number which lead to unexpected behavior
+                    if (typeof value === 'number' && type === 'string') {
+                        item.control.setValue(item.control.value.toString(), { emitEvent: false });
+                    }
                     this.updateBindings(changes, item.componentRef);
                 }
             }
@@ -12988,11 +12994,11 @@ class ProductMultiSelectorDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem;color:var(--color-text-100)}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px;color:var(--color-text-100)}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem;color:var(--color-text-100)}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px;color:var(--color-text-100)}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }], ctorParameters: () => [{ type: DataService }, { type: i0.ChangeDetectorRef }] });
 
 class ProductMultiSelectorFormInputComponent {
@@ -13045,7 +13051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @example
  * ```HTML
  * <vdr-product-variant-selector
- *   (productSelected)="selectResult($event)"></vdr-product-selector>
+ *   (productSelected)="selectResult($event)"></vdr-product-variant-selector>
  * ```
  *
  * @docsCategory components
@@ -17776,6 +17782,26 @@ class DataTableFilterPresetsComponent {
         });
         this.serializedActiveFilters = this.filters.serialize();
         this.filterPresets$ = this.filterPresetService.presetChanges$.pipe(startWith(this.filterPresetService.getFilterPresets(this.dataTableId)));
+        // When any query param changes, we want to trigger change detection
+        // so that the links for each preset are updated.
+        this.route.queryParamMap
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
+    }
+    getQueryParamsForPreset(preset, serializedActiveFilters) {
+        // Clone the current query params to avoid mutating them directly
+        const currentParams = { ...this.route.snapshot.queryParams };
+        if (preset === serializedActiveFilters) {
+            // Toggling off: remove 'filters' and 'page' params
+            delete currentParams['filters'];
+            delete currentParams['page'];
+        }
+        else {
+            // Toggling on: set 'filters' and 'page' params
+            currentParams['filters'] = preset;
+            currentParams['page'] = 1;
+        }
+        return currentParams;
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -17810,11 +17836,11 @@ class DataTableFilterPresetsComponent {
         this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableFilterPresetsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: FilterPresetService }, { token: ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.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: i4$1.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: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"getQueryParamsForPreset(preset.value, serializedActiveFilters)\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.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: i4$1.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: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableFilterPresetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filter-presets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'vdr-data-table-filter-presets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"getQueryParamsForPreset(preset.value, serializedActiveFilters)\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: FilterPresetService }, { type: ModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { dataTableId: [{
                 type: Input,
                 args: [{ required: true }]