@vendure/admin-ui 2.0.6 → 2.0.7

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

@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/router';
 import { ROUTES, RouterModule } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1 from '@vendure/admin-ui/core';
-import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, CreateStockLocationDocument, UpdateStockLocationDocument, DeleteStockLocationsDocument, AssignStockLocationsToChannelDocument, RemoveStockLocationsFromChannelDocument, detailComponentWithResolver, GetProductDetailDocument, GetStockLocationDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
+import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, CreateStockLocationDocument, UpdateStockLocationDocument, DeleteStockLocationsDocument, AssignStockLocationsToChannelDocument, RemoveStockLocationsFromChannelDocument, detailComponentWithResolver, GetProductDetailDocument, GetStockLocationDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
 import { shareReplay, mergeMap, map, switchMap, tap, take, startWith, debounceTime, takeUntil, finalize, distinctUntilChanged, filter, catchError, skip, switchMapTo, delay } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormArray, Validators, FormControl, NG_VALUE_ACCESSOR, FormGroup, UntypedFormControl } from '@angular/forms';
@@ -483,10 +483,12 @@ class CreateProductVariantDialogComponent {
         this.form = this.formBuilder.group({
             name: ['', Validators.required],
             sku: ['', Validators.required],
+            price: ['', Validators.required],
             options: this.formBuilder.record({}),
         });
     }
     ngOnInit() {
+        this.currencyCode = this.product.variants[0].currencyCode;
         for (const optionGroup of this.product.optionGroups) {
             this.form.get('options').addControl(optionGroup.code, new FormControl('', Validators.required));
         }
@@ -510,14 +512,15 @@ class CreateProductVariantDialogComponent {
         });
     }
     confirm() {
-        const { name, sku, options } = this.form.value;
-        if (!name || !sku || !options) {
+        const { name, sku, options, price } = this.form.value;
+        if (!name || !sku || !options || !price) {
             return;
         }
         const optionIds = Object.values(options).filter(notNullOrUndefined);
         this.resolveWith({
             productId: this.product.id,
             sku,
+            price: Number(price),
             optionIds,
             translations: [
                 {
@@ -537,11 +540,11 @@ class CreateProductVariantDialogComponent {
         return this.product.optionGroups.find(og => og.code === code)?.id ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CreateProductVariantDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CreateProductVariantDialogComponent, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select\r\n                [items]=\"optionGroup.options\"\r\n                [formControlName]=\"optionGroup.code\"\r\n                bindLabel=\"name\"\r\n                bindValue=\"id\"\r\n                appendTo=\"body\"\r\n            >\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert\r\n            *ngIf=\"product.optionGroups.length === 0\"\r\n            clrAlertType=\"warning\"\r\n            [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\"\r\n        >\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                        existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\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)=\"confirm()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\"\r\n    >\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertClosed", "clrAlertType", "clrAlertIcon"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CreateProductVariantDialogComponent, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\r\n                bindValue=\"id\" appendTo=\"body\">\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                    existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.price' | translate\">\r\n            <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertClosed", "clrAlertType", "clrAlertIcon"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CreateProductVariantDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-create-product-variant-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select\r\n                [items]=\"optionGroup.options\"\r\n                [formControlName]=\"optionGroup.code\"\r\n                bindLabel=\"name\"\r\n                bindValue=\"id\"\r\n                appendTo=\"body\"\r\n            >\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert\r\n            *ngIf=\"product.optionGroups.length === 0\"\r\n            clrAlertType=\"warning\"\r\n            [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\"\r\n        >\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                        existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\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)=\"confirm()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\"\r\n    >\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-create-product-variant-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\r\n                bindValue=\"id\" appendTo=\"body\">\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                    existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.price' | translate\">\r\n            <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }]; } });
 
 const OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
@@ -1183,7 +1186,7 @@ class AssetDetailComponent extends TypedBaseDetailComponent {
         this.detailForm = new FormGroup({
             name: new FormControl(''),
             tags: new FormControl([]),
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
     }
     ngOnInit() {
@@ -1886,7 +1889,7 @@ class CollectionDetailComponent extends TypedBaseDetailComponent {
             visible: false,
             inheritFilters: true,
             filters: this.formBuilder.array([]),
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         this.assetChanges = {};
         this.filters = [];
@@ -2291,6 +2294,7 @@ class CollectionListComponent extends TypedBaseListComponent {
         this.expandedIds = [];
         this.customFields = this.getCustomFieldConfig('Collection');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilter({
             name: 'slug',
@@ -2741,7 +2745,7 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                 code: ['', Validators.required],
                 name: '',
                 visible: true,
-                customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+                customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
             }),
             values: this.formBuilder.array([]),
         });
@@ -3187,6 +3191,7 @@ class FacetListComponent extends TypedBaseListComponent {
         this.displayLimit = {};
         this.customFields = this.getCustomFieldConfig('Facet');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilter({
             name: 'visibility',
@@ -3371,6 +3376,7 @@ class ProductVariantListComponent extends TypedBaseListComponent {
         this.hideLanguageSelect = false;
         this.customFields = this.getCustomFieldConfig('ProductVariant');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilters([
             {
@@ -3379,12 +3385,6 @@ class ProductVariantListComponent extends TypedBaseListComponent {
                 label: marker('common.name'),
                 filterField: 'name',
             },
-            {
-                name: 'id',
-                type: { kind: 'text' },
-                label: marker('common.id'),
-                filterField: 'id',
-            },
             {
                 name: 'enabled',
                 type: { kind: 'boolean' },
@@ -3481,7 +3481,7 @@ class ProductDetailComponent extends TypedBaseDetailComponent {
             slug: ['', unicodePatternValidator(/^[\p{Letter}0-9._-]+$/)],
             description: '',
             facetValueIds: [[]],
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         this.assetChanges = {};
         this.createVariantsConfig = { groups: [], variants: [], stockLocationId: '' };
@@ -3890,14 +3890,9 @@ class ProductListComponent extends TypedBaseListComponent {
         this.pendingSearchIndexUpdates = 0;
         this.customFields = this.getCustomFieldConfig('Product');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilters([
-            {
-                name: 'id',
-                type: { kind: 'text' },
-                label: marker('common.id'),
-                filterField: 'id',
-            },
             {
                 name: 'enabled',
                 type: { kind: 'boolean' },
@@ -4138,7 +4133,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
             outOfStockThreshold: 0,
             trackInventory: GlobalFlag.TRUE,
             facetValueIds: [],
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         this.stockLevelsForm = this.formBuilder.array([]);
         this.pricesForm = this.formBuilder.array([]);
@@ -4554,7 +4549,7 @@ class StockLocationDetailComponent extends TypedBaseDetailComponent {
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             description: [''],
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
     }
     ngOnInit() {
@@ -4723,14 +4718,9 @@ class StockLocationListComponent extends TypedBaseListComponent {
         super();
         this.customFields = this.getCustomFieldConfig('StockLocation');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilters([
-            {
-                name: 'id',
-                type: { kind: 'text' },
-                label: marker('common.id'),
-                filterField: 'id',
-            },
             {
                 name: 'enabled',
                 type: { kind: 'text' },