@vendure/admin-ui 3.1.0 → 3.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +5 -0
- package/catalog/components/product-variant-detail/product-variant-detail.component.d.ts +2 -0
- package/catalog/components/product-variant-list/product-variant-list.component.d.ts +1 -1
- package/core/common/generated-types.d.ts +23 -10
- package/core/common/version.d.ts +1 -1
- package/core/data/definitions/product-definitions.d.ts +1 -0
- package/core/extension/register-route-component.d.ts +1 -1
- package/core/shared/components/order-state-label/order-state-label.component.d.ts +1 -1
- package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
- package/esm2022/catalog/components/product-variant-detail/product-variant-detail.component.mjs +13 -5
- package/esm2022/catalog/components/product-variant-detail/product-variant-detail.graphql.mjs +4 -3
- package/esm2022/core/common/generated-types.mjs +5 -4
- package/esm2022/core/common/introspection-result.mjs +1 -1
- package/esm2022/core/common/utilities/selection-manager.mjs +3 -3
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/data/definitions/product-definitions.mjs +7 -1
- package/fesm2022/vendure-admin-ui-catalog.mjs +15 -7
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +14 -7
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/package.json +13 -13
- package/static/i18n-messages/pl.json +389 -389
|
@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/router';
|
|
|
4
4
|
import { ROUTES, RouterModule } from '@angular/router';
|
|
5
5
|
import { marker } from '@biesbjerg/ngx-translate-extract-marker';
|
|
6
6
|
import * as i1 from '@vendure/admin-ui/core';
|
|
7
|
-
import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, DuplicateEntityDialogComponent, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, detailComponentWithResolver, GetProductDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
|
|
7
|
+
import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, DuplicateEntityDialogComponent, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, detailComponentWithResolver, GetProductDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService, PRODUCT_VARIANT_PRICE_FRAGMENT } from '@vendure/admin-ui/core';
|
|
8
8
|
import { SortOrder as SortOrder$1 } from '@vendure/common/lib/generated-types';
|
|
9
9
|
import { shareReplay, mergeMap, map, switchMap, tap, take, startWith, debounceTime, takeUntil, finalize, distinctUntilChanged, filter, catchError, delay, skip, switchMapTo } from 'rxjs/operators';
|
|
10
10
|
import * as i2 from '@angular/forms';
|
|
@@ -4193,6 +4193,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
|
|
|
4193
4193
|
this.changeDetector = changeDetector;
|
|
4194
4194
|
this.updatePermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
|
|
4195
4195
|
this.customFields = this.getCustomFieldConfig('ProductVariant');
|
|
4196
|
+
this.customPriceFields = this.getCustomFieldConfig('ProductVariantPrice');
|
|
4196
4197
|
this.customOptionFields = this.getCustomFieldConfig('ProductOption');
|
|
4197
4198
|
this.detailForm = this.formBuilder.group({
|
|
4198
4199
|
id: '',
|
|
@@ -4248,6 +4249,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
|
|
|
4248
4249
|
currencyCode,
|
|
4249
4250
|
price: 0,
|
|
4250
4251
|
delete: false,
|
|
4252
|
+
customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customPriceFields)),
|
|
4251
4253
|
}));
|
|
4252
4254
|
}
|
|
4253
4255
|
toggleDeletePrice(deleteFormControl) {
|
|
@@ -4298,6 +4300,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
|
|
|
4298
4300
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
4299
4301
|
currencyCode: control.value.currencyCode,
|
|
4300
4302
|
delete: control.value.delete === true,
|
|
4303
|
+
customFields: control.get('customFields')?.value,
|
|
4301
4304
|
}));
|
|
4302
4305
|
}
|
|
4303
4306
|
return this.dataService.mutate(ProductVariantUpdateMutationDocument, {
|
|
@@ -4385,11 +4388,16 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
|
|
|
4385
4388
|
}
|
|
4386
4389
|
this.pricesForm.clear();
|
|
4387
4390
|
for (const price of variant.prices) {
|
|
4388
|
-
this.
|
|
4391
|
+
const priceForm = this.formBuilder.group({
|
|
4389
4392
|
price: price.price,
|
|
4390
4393
|
currencyCode: price.currencyCode,
|
|
4391
4394
|
delete: false,
|
|
4392
|
-
|
|
4395
|
+
customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customPriceFields)),
|
|
4396
|
+
});
|
|
4397
|
+
if (this.customPriceFields.length) {
|
|
4398
|
+
this.setCustomFieldFormValues(this.customPriceFields, priceForm.get(['customFields']), price);
|
|
4399
|
+
}
|
|
4400
|
+
this.pricesForm.push(priceForm);
|
|
4393
4401
|
}
|
|
4394
4402
|
if (this.customFields.length) {
|
|
4395
4403
|
this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), variant, variantTranslation);
|
|
@@ -4423,11 +4431,11 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
|
|
|
4423
4431
|
};
|
|
4424
4432
|
}
|
|
4425
4433
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductVariantDetailComponent, deps: [{ token: ProductDetailService }, { token: i2.FormBuilder }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProductVariantDetailComponent, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left [grow]=\"true\">\r\n <div class=\"flex center\">\r\n <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n <vdr-language-selector\r\n *ngIf=\"availableLanguages.length > 1\"\r\n class=\"mr-2\"\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </ng-container>\r\n <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n <button\r\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"\r\n (detailForm.invalid ||\r\n stockLevelsForm.invalid ||\r\n pricesForm.invalid ||\r\n (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n !assetsChanged()\r\n \"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n <vdr-action-bar-dropdown-menu locationId=\"product-variant-detail\"></vdr-action-bar-dropdown-menu>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar\r\n ><vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"enabled\"\r\n [formControl]=\"detailForm.get(['enabled'])\"\r\n />\r\n <label>{{ 'common.enabled' | translate }}</label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n <div class=\"options\">\r\n <vdr-chip\r\n *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n [invert]=\"true\"\r\n >\r\n <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n {{ optionName(option) }}\r\n </vdr-chip>\r\n </div>\r\n <div>\r\n <a\r\n [routerLink]=\"['../../', 'options']\"\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n >\r\n <clr-icon shape=\"pencil\"></clr-icon>\r\n {{ 'catalog.edit-options' | translate }}\r\n </a>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.facets' | translate\">\r\n <div class=\"facets\">\r\n <vdr-facet-value-chip\r\n *ngFor=\"let facetValue of facetValues$ | async\"\r\n [facetValue]=\"facetValue\"\r\n [removable]=\"updatePermissions | hasPermission\"\r\n (remove)=\"removeFacetValue(facetValue.id)\"\r\n ></vdr-facet-value-chip>\r\n </div>\r\n <div>\r\n <button\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n (click)=\"selectFacetValue()\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-facets' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n <input\r\n id=\"sku\"\r\n type=\"text\"\r\n formControlName=\"sku\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductVariant\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"product-variant-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n />\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"assetChanges.assets || variant.assets\"\r\n [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n [updatePermissions]=\"updatePermissions\"\r\n (change)=\"assetChanges = $event\"\r\n />\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n <option\r\n *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n [value]=\"taxCategory.id\"\r\n >\r\n {{ taxCategory.name }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n </div>\r\n <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n <vdr-form-field\r\n [label]=\"\r\n ('catalog.price' | translate) +\r\n (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n \"\r\n [tooltip]=\"\r\n 1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n ? ('catalog.default-currency' | translate)\r\n : undefined\r\n \"\r\n for=\"price\"\r\n >\r\n <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n <vdr-currency-input\r\n name=\"price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [readonly]=\"\r\n !(updatePermissions | hasPermission) || price.value.delete === true\r\n \"\r\n formControlName=\"price\"\r\n />\r\n <div *ngIf=\"1 < pricesForm.controls.length\">\r\n <button\r\n class=\"button-small delete-button\"\r\n [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </vdr-form-field>\r\n <vdr-variant-price-detail\r\n [price]=\"price.value.price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n />\r\n </div>\r\n <vdr-variant-price-strategy-detail\r\n [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\r\n [variant]=\"variant\"\r\n />\r\n <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n <div *ngIf=\"unusedCurrencyCodes.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-price-in-another-currency' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n (click)=\"addPriceInCurrency(currencyCode)\"\r\n >\r\n {{ currencyCode | localeCurrencyName }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n for=\"track-inventory\"\r\n [label]=\"'catalog.track-inventory' | translate\"\r\n [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n >\r\n <select\r\n name=\"track-inventory\"\r\n formControlName=\"trackInventory\"\r\n [disabled]=\"!(updatePermissions | hasPermission)\"\r\n >\r\n <option [value]=\"GlobalFlag.TRUE\">\r\n {{ 'catalog.track-inventory-true' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.FALSE\">\r\n {{ 'catalog.track-inventory-false' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.INHERIT\">\r\n {{ 'catalog.track-inventory-inherit' | translate }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n\r\n <vdr-form-item\r\n [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n >\r\n <input\r\n type=\"number\"\r\n formControlName=\"outOfStockThreshold\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n [vdrDisabled]=\"\r\n detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"useGlobalOutOfStockThreshold\"\r\n formControlName=\"useGlobalOutOfStockThreshold\"\r\n [vdrDisabled]=\"\r\n !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <label\r\n >{{ 'catalog.use-global-value' | translate }} ({{\r\n globalOutOfStockThreshold\r\n }})</label\r\n >\r\n </clr-toggle-wrapper>\r\n </vdr-form-item>\r\n </div>\r\n <div\r\n class=\"form-grid stock-levels\"\r\n *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n [formGroup]=\"stockLevel\"\r\n >\r\n <vdr-form-field\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-on-hand' | translate)\r\n \"\r\n [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n >\r\n <input\r\n [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n type=\"number\"\r\n formControlName=\"stockOnHand\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-item\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-allocated' | translate)\r\n \"\r\n >\r\n {{ stockLevel.get('stockAllocated')?.value }}\r\n </vdr-form-item>\r\n </div>\r\n <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n <div *ngIf=\"unusedStockLocations.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-stock-location' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let stockLocation of unusedStockLocations\"\r\n (click)=\"addStockLocation(stockLocation)\"\r\n >\r\n <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions", "multiSelect"], outputs: ["change"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: VariantPriceStrategyDetailComponent, selector: "vdr-variant-price-strategy-detail", inputs: ["channelPriceIncludesTax", "variant", "channelDefaultCurrencyCode"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProductVariantDetailComponent, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left [grow]=\"true\">\r\n <div class=\"flex center\">\r\n <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n <vdr-language-selector\r\n *ngIf=\"availableLanguages.length > 1\"\r\n class=\"mr-2\"\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </ng-container>\r\n <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n <button\r\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"\r\n (detailForm.invalid ||\r\n stockLevelsForm.invalid ||\r\n pricesForm.invalid ||\r\n (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n !assetsChanged()\r\n \"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n <vdr-action-bar-dropdown-menu locationId=\"product-variant-detail\"></vdr-action-bar-dropdown-menu>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar\r\n ><vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"enabled\"\r\n [formControl]=\"detailForm.get(['enabled'])\"\r\n />\r\n <label>{{ 'common.enabled' | translate }}</label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n <div class=\"options\">\r\n <vdr-chip\r\n *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n [invert]=\"true\"\r\n >\r\n <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n {{ optionName(option) }}\r\n </vdr-chip>\r\n </div>\r\n <div>\r\n <a\r\n [routerLink]=\"['../../', 'options']\"\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n >\r\n <clr-icon shape=\"pencil\"></clr-icon>\r\n {{ 'catalog.edit-options' | translate }}\r\n </a>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.facets' | translate\">\r\n <div class=\"facets\">\r\n <vdr-facet-value-chip\r\n *ngFor=\"let facetValue of facetValues$ | async\"\r\n [facetValue]=\"facetValue\"\r\n [removable]=\"updatePermissions | hasPermission\"\r\n (remove)=\"removeFacetValue(facetValue.id)\"\r\n ></vdr-facet-value-chip>\r\n </div>\r\n <div>\r\n <button\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n (click)=\"selectFacetValue()\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-facets' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n <input\r\n id=\"sku\"\r\n type=\"text\"\r\n formControlName=\"sku\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductVariant\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"product-variant-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n />\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"assetChanges.assets || variant.assets\"\r\n [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n [updatePermissions]=\"updatePermissions\"\r\n (change)=\"assetChanges = $event\"\r\n />\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n <option\r\n *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n [value]=\"taxCategory.id\"\r\n >\r\n {{ taxCategory.name }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n </div>\r\n <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n <vdr-form-field\r\n [label]=\"\r\n ('catalog.price' | translate) +\r\n (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n \"\r\n [tooltip]=\"\r\n 1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n ? ('catalog.default-currency' | translate)\r\n : undefined\r\n \"\r\n for=\"price\"\r\n >\r\n <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n <vdr-currency-input\r\n name=\"price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [readonly]=\"\r\n !(updatePermissions | hasPermission) || price.value.delete === true\r\n \"\r\n formControlName=\"price\"\r\n />\r\n <div *ngIf=\"1 < pricesForm.controls.length\">\r\n <button\r\n class=\"button-small delete-button\"\r\n [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </vdr-form-field>\r\n <vdr-variant-price-detail\r\n [price]=\"price.value.price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n />\r\n\r\n <div class=\"form-grid-span\" *ngIf=\"customPriceFields.length\">\r\n <div class=\"title-row\">\r\n <span class=\"title\">{{ 'common.custom-fields' | translate }}</span>\r\n </div>\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductVariantPrice\"\r\n [customFields]=\"customPriceFields\"\r\n [customFieldsFormGroup]=\"price.get(['customFields'])\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <vdr-variant-price-strategy-detail\r\n [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\r\n [variant]=\"variant\"\r\n />\r\n\r\n <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n <div *ngIf=\"unusedCurrencyCodes.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-price-in-another-currency' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n (click)=\"addPriceInCurrency(currencyCode)\"\r\n >\r\n {{ currencyCode | localeCurrencyName }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n for=\"track-inventory\"\r\n [label]=\"'catalog.track-inventory' | translate\"\r\n [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n >\r\n <select\r\n name=\"track-inventory\"\r\n formControlName=\"trackInventory\"\r\n [disabled]=\"!(updatePermissions | hasPermission)\"\r\n >\r\n <option [value]=\"GlobalFlag.TRUE\">\r\n {{ 'catalog.track-inventory-true' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.FALSE\">\r\n {{ 'catalog.track-inventory-false' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.INHERIT\">\r\n {{ 'catalog.track-inventory-inherit' | translate }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n\r\n <vdr-form-item\r\n [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n >\r\n <input\r\n type=\"number\"\r\n formControlName=\"outOfStockThreshold\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n [vdrDisabled]=\"\r\n detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"useGlobalOutOfStockThreshold\"\r\n formControlName=\"useGlobalOutOfStockThreshold\"\r\n [vdrDisabled]=\"\r\n !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <label\r\n >{{ 'catalog.use-global-value' | translate }} ({{\r\n globalOutOfStockThreshold\r\n }})</label\r\n >\r\n </clr-toggle-wrapper>\r\n </vdr-form-item>\r\n </div>\r\n <div\r\n class=\"form-grid stock-levels\"\r\n *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n [formGroup]=\"stockLevel\"\r\n >\r\n <vdr-form-field\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-on-hand' | translate)\r\n \"\r\n [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n >\r\n <input\r\n [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n type=\"number\"\r\n formControlName=\"stockOnHand\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-item\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-allocated' | translate)\r\n \"\r\n >\r\n {{ stockLevel.get('stockAllocated')?.value }}\r\n </vdr-form-item>\r\n </div>\r\n <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n <div *ngIf=\"unusedStockLocations.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-stock-location' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let stockLocation of unusedStockLocations\"\r\n (click)=\"addStockLocation(stockLocation)\"\r\n >\r\n <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}.title-row{display:flex;justify-content:space-between;align-items:center}.title{font-size:var(--font-size-base)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions", "multiSelect"], outputs: ["change"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: VariantPriceStrategyDetailComponent, selector: "vdr-variant-price-strategy-detail", inputs: ["channelPriceIncludesTax", "variant", "channelDefaultCurrencyCode"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4427
4435
|
}
|
|
4428
4436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductVariantDetailComponent, decorators: [{
|
|
4429
4437
|
type: Component,
|
|
4430
|
-
args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left [grow]=\"true\">\r\n <div class=\"flex center\">\r\n <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n <vdr-language-selector\r\n *ngIf=\"availableLanguages.length > 1\"\r\n class=\"mr-2\"\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </ng-container>\r\n <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n <button\r\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"\r\n (detailForm.invalid ||\r\n stockLevelsForm.invalid ||\r\n pricesForm.invalid ||\r\n (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n !assetsChanged()\r\n \"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n <vdr-action-bar-dropdown-menu locationId=\"product-variant-detail\"></vdr-action-bar-dropdown-menu>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar\r\n ><vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"enabled\"\r\n [formControl]=\"detailForm.get(['enabled'])\"\r\n />\r\n <label>{{ 'common.enabled' | translate }}</label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n <div class=\"options\">\r\n <vdr-chip\r\n *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n [invert]=\"true\"\r\n >\r\n <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n {{ optionName(option) }}\r\n </vdr-chip>\r\n </div>\r\n <div>\r\n <a\r\n [routerLink]=\"['../../', 'options']\"\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n >\r\n <clr-icon shape=\"pencil\"></clr-icon>\r\n {{ 'catalog.edit-options' | translate }}\r\n </a>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.facets' | translate\">\r\n <div class=\"facets\">\r\n <vdr-facet-value-chip\r\n *ngFor=\"let facetValue of facetValues$ | async\"\r\n [facetValue]=\"facetValue\"\r\n [removable]=\"updatePermissions | hasPermission\"\r\n (remove)=\"removeFacetValue(facetValue.id)\"\r\n ></vdr-facet-value-chip>\r\n </div>\r\n <div>\r\n <button\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n (click)=\"selectFacetValue()\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-facets' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n <input\r\n id=\"sku\"\r\n type=\"text\"\r\n formControlName=\"sku\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductVariant\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"product-variant-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n />\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"assetChanges.assets || variant.assets\"\r\n [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n [updatePermissions]=\"updatePermissions\"\r\n (change)=\"assetChanges = $event\"\r\n />\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n <option\r\n *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n [value]=\"taxCategory.id\"\r\n >\r\n {{ taxCategory.name }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n </div>\r\n <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n <vdr-form-field\r\n [label]=\"\r\n ('catalog.price' | translate) +\r\n (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n \"\r\n [tooltip]=\"\r\n 1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n ? ('catalog.default-currency' | translate)\r\n : undefined\r\n \"\r\n for=\"price\"\r\n >\r\n <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n <vdr-currency-input\r\n name=\"price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [readonly]=\"\r\n !(updatePermissions | hasPermission) || price.value.delete === true\r\n \"\r\n formControlName=\"price\"\r\n />\r\n <div *ngIf=\"1 < pricesForm.controls.length\">\r\n <button\r\n class=\"button-small delete-button\"\r\n [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </vdr-form-field>\r\n <vdr-variant-price-detail\r\n [price]=\"price.value.price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n />\r\n </div>\r\n <vdr-variant-price-strategy-detail\r\n [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\r\n [variant]=\"variant\"\r\n />\r\n <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n <div *ngIf=\"unusedCurrencyCodes.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-price-in-another-currency' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n (click)=\"addPriceInCurrency(currencyCode)\"\r\n >\r\n {{ currencyCode | localeCurrencyName }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n for=\"track-inventory\"\r\n [label]=\"'catalog.track-inventory' | translate\"\r\n [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n >\r\n <select\r\n name=\"track-inventory\"\r\n formControlName=\"trackInventory\"\r\n [disabled]=\"!(updatePermissions | hasPermission)\"\r\n >\r\n <option [value]=\"GlobalFlag.TRUE\">\r\n {{ 'catalog.track-inventory-true' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.FALSE\">\r\n {{ 'catalog.track-inventory-false' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.INHERIT\">\r\n {{ 'catalog.track-inventory-inherit' | translate }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n\r\n <vdr-form-item\r\n [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n >\r\n <input\r\n type=\"number\"\r\n formControlName=\"outOfStockThreshold\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n [vdrDisabled]=\"\r\n detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"useGlobalOutOfStockThreshold\"\r\n formControlName=\"useGlobalOutOfStockThreshold\"\r\n [vdrDisabled]=\"\r\n !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <label\r\n >{{ 'catalog.use-global-value' | translate }} ({{\r\n globalOutOfStockThreshold\r\n }})</label\r\n >\r\n </clr-toggle-wrapper>\r\n </vdr-form-item>\r\n </div>\r\n <div\r\n class=\"form-grid stock-levels\"\r\n *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n [formGroup]=\"stockLevel\"\r\n >\r\n <vdr-form-field\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-on-hand' | translate)\r\n \"\r\n [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n >\r\n <input\r\n [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n type=\"number\"\r\n formControlName=\"stockOnHand\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-item\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-allocated' | translate)\r\n \"\r\n >\r\n {{ stockLevel.get('stockAllocated')?.value }}\r\n </vdr-form-item>\r\n </div>\r\n <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n <div *ngIf=\"unusedStockLocations.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-stock-location' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let stockLocation of unusedStockLocations\"\r\n (click)=\"addStockLocation(stockLocation)\"\r\n >\r\n <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"] }]
|
|
4438
|
+
args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left [grow]=\"true\">\r\n <div class=\"flex center\">\r\n <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n <vdr-language-selector\r\n *ngIf=\"availableLanguages.length > 1\"\r\n class=\"mr-2\"\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </ng-container>\r\n <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n <button\r\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"\r\n (detailForm.invalid ||\r\n stockLevelsForm.invalid ||\r\n pricesForm.invalid ||\r\n (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n !assetsChanged()\r\n \"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n <vdr-action-bar-dropdown-menu locationId=\"product-variant-detail\"></vdr-action-bar-dropdown-menu>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar\r\n ><vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"enabled\"\r\n [formControl]=\"detailForm.get(['enabled'])\"\r\n />\r\n <label>{{ 'common.enabled' | translate }}</label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n <div class=\"options\">\r\n <vdr-chip\r\n *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n [invert]=\"true\"\r\n >\r\n <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n {{ optionName(option) }}\r\n </vdr-chip>\r\n </div>\r\n <div>\r\n <a\r\n [routerLink]=\"['../../', 'options']\"\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n >\r\n <clr-icon shape=\"pencil\"></clr-icon>\r\n {{ 'catalog.edit-options' | translate }}\r\n </a>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.facets' | translate\">\r\n <div class=\"facets\">\r\n <vdr-facet-value-chip\r\n *ngFor=\"let facetValue of facetValues$ | async\"\r\n [facetValue]=\"facetValue\"\r\n [removable]=\"updatePermissions | hasPermission\"\r\n (remove)=\"removeFacetValue(facetValue.id)\"\r\n ></vdr-facet-value-chip>\r\n </div>\r\n <div>\r\n <button\r\n class=\"button-small mt-2\"\r\n *vdrIfPermissions=\"updatePermissions\"\r\n (click)=\"selectFacetValue()\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-facets' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n <input\r\n id=\"sku\"\r\n type=\"text\"\r\n formControlName=\"sku\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductVariant\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"product-variant-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n />\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"assetChanges.assets || variant.assets\"\r\n [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n [updatePermissions]=\"updatePermissions\"\r\n (change)=\"assetChanges = $event\"\r\n />\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n <option\r\n *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n [value]=\"taxCategory.id\"\r\n >\r\n {{ taxCategory.name }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n </div>\r\n <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n <vdr-form-field\r\n [label]=\"\r\n ('catalog.price' | translate) +\r\n (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n \"\r\n [tooltip]=\"\r\n 1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n ? ('catalog.default-currency' | translate)\r\n : undefined\r\n \"\r\n for=\"price\"\r\n >\r\n <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n <vdr-currency-input\r\n name=\"price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [readonly]=\"\r\n !(updatePermissions | hasPermission) || price.value.delete === true\r\n \"\r\n formControlName=\"price\"\r\n />\r\n <div *ngIf=\"1 < pricesForm.controls.length\">\r\n <button\r\n class=\"button-small delete-button\"\r\n [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </vdr-form-field>\r\n <vdr-variant-price-detail\r\n [price]=\"price.value.price\"\r\n [currencyCode]=\"price.value.currencyCode\"\r\n [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n />\r\n\r\n <div class=\"form-grid-span\" *ngIf=\"customPriceFields.length\">\r\n <div class=\"title-row\">\r\n <span class=\"title\">{{ 'common.custom-fields' | translate }}</span>\r\n </div>\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductVariantPrice\"\r\n [customFields]=\"customPriceFields\"\r\n [customFieldsFormGroup]=\"price.get(['customFields'])\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <vdr-variant-price-strategy-detail\r\n [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\r\n [variant]=\"variant\"\r\n />\r\n\r\n <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n <div *ngIf=\"unusedCurrencyCodes.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-price-in-another-currency' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n (click)=\"addPriceInCurrency(currencyCode)\"\r\n >\r\n {{ currencyCode | localeCurrencyName }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n for=\"track-inventory\"\r\n [label]=\"'catalog.track-inventory' | translate\"\r\n [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n >\r\n <select\r\n name=\"track-inventory\"\r\n formControlName=\"trackInventory\"\r\n [disabled]=\"!(updatePermissions | hasPermission)\"\r\n >\r\n <option [value]=\"GlobalFlag.TRUE\">\r\n {{ 'catalog.track-inventory-true' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.FALSE\">\r\n {{ 'catalog.track-inventory-false' | translate }}\r\n </option>\r\n <option [value]=\"GlobalFlag.INHERIT\">\r\n {{ 'catalog.track-inventory-inherit' | translate }}\r\n </option>\r\n </select>\r\n </vdr-form-field>\r\n\r\n <vdr-form-item\r\n [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n >\r\n <input\r\n type=\"number\"\r\n formControlName=\"outOfStockThreshold\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n [vdrDisabled]=\"\r\n detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n name=\"useGlobalOutOfStockThreshold\"\r\n formControlName=\"useGlobalOutOfStockThreshold\"\r\n [vdrDisabled]=\"\r\n !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n \"\r\n />\r\n <label\r\n >{{ 'catalog.use-global-value' | translate }} ({{\r\n globalOutOfStockThreshold\r\n }})</label\r\n >\r\n </clr-toggle-wrapper>\r\n </vdr-form-item>\r\n </div>\r\n <div\r\n class=\"form-grid stock-levels\"\r\n *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n [formGroup]=\"stockLevel\"\r\n >\r\n <vdr-form-field\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-on-hand' | translate)\r\n \"\r\n [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n >\r\n <input\r\n [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n type=\"number\"\r\n formControlName=\"stockOnHand\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-item\r\n [label]=\"\r\n stockLevel.get('stockLocationName')?.value +\r\n ': ' +\r\n ('catalog.stock-allocated' | translate)\r\n \"\r\n >\r\n {{ stockLevel.get('stockAllocated')?.value }}\r\n </vdr-form-item>\r\n </div>\r\n <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n <div *ngIf=\"unusedStockLocations.length\">\r\n <vdr-dropdown>\r\n <button class=\"button mt-2\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.add-stock-location' | translate }}\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu>\r\n <button\r\n vdrDropdownItem\r\n *ngFor=\"let stockLocation of unusedStockLocations\"\r\n (click)=\"addStockLocation(stockLocation)\"\r\n >\r\n <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </ng-container>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}.title-row{display:flex;justify-content:space-between;align-items:center}.title{font-size:var(--font-size-base)}\n"] }]
|
|
4431
4439
|
}], ctorParameters: () => [{ type: ProductDetailService }, { type: i2.FormBuilder }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
|
|
4432
4440
|
|
|
4433
4441
|
const assignProductVariantsToChannelBulkAction = {
|
|
@@ -4995,8 +5003,7 @@ const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql `
|
|
|
4995
5003
|
price
|
|
4996
5004
|
currencyCode
|
|
4997
5005
|
prices {
|
|
4998
|
-
|
|
4999
|
-
currencyCode
|
|
5006
|
+
...ProductVariantPrice
|
|
5000
5007
|
}
|
|
5001
5008
|
priceWithTax
|
|
5002
5009
|
stockOnHand
|
|
@@ -5070,6 +5077,7 @@ const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql `
|
|
|
5070
5077
|
}
|
|
5071
5078
|
}
|
|
5072
5079
|
}
|
|
5080
|
+
${PRODUCT_VARIANT_PRICE_FRAGMENT}
|
|
5073
5081
|
`;
|
|
5074
5082
|
const PRODUCT_VARIANT_DETAIL_QUERY = gql `
|
|
5075
5083
|
query GetProductVariantDetail($id: ID!) {
|