@vendure/admin-ui 3.2.0 → 3.2.1
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 +42 -42
- package/core/common/version.d.ts +1 -1
- package/fesm2022/vendure-admin-ui-catalog.mjs +257 -257
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +4140 -4140
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-customer.mjs +119 -119
- package/fesm2022/vendure-admin-ui-customer.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-dashboard.mjs +58 -58
- package/fesm2022/vendure-admin-ui-dashboard.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-login.mjs +2 -2
- package/fesm2022/vendure-admin-ui-login.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-marketing.mjs +35 -35
- package/fesm2022/vendure-admin-ui-marketing.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +186 -186
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-react.mjs +8 -8
- package/fesm2022/vendure-admin-ui-react.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-settings.mjs +441 -441
- package/fesm2022/vendure-admin-ui-settings.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-system.mjs +6 -6
- package/fesm2022/vendure-admin-ui-system.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui.mjs.map +1 -1
- package/package.json +13 -9
- package/static/fonts/fonts.scss +253 -253
- package/static/i18n-messages/ar.json +813 -813
- package/static/i18n-messages/cs.json +813 -813
- package/static/i18n-messages/de.json +813 -813
- package/static/i18n-messages/en.json +817 -817
- package/static/i18n-messages/es.json +813 -813
- package/static/i18n-messages/fa.json +813 -813
- package/static/i18n-messages/fr.json +813 -813
- package/static/i18n-messages/he.json +813 -813
- package/static/i18n-messages/hr.json +813 -813
- package/static/i18n-messages/it.json +813 -813
- package/static/i18n-messages/ja.json +818 -818
- package/static/i18n-messages/nb.json +811 -811
- package/static/i18n-messages/ne.json +813 -813
- package/static/i18n-messages/pl.json +813 -813
- package/static/i18n-messages/pt_BR.json +813 -813
- package/static/i18n-messages/pt_PT.json +814 -814
- package/static/i18n-messages/ru.json +813 -813
- package/static/i18n-messages/sv.json +806 -806
- package/static/i18n-messages/tr.json +814 -814
- package/static/i18n-messages/uk.json +813 -813
- package/static/i18n-messages/zh_Hans.json +813 -813
- package/static/i18n-messages/zh_Hant.json +813 -813
- package/static/index.html +14 -14
- package/static/polyfills.ts +66 -66
- package/static/styles/_mixins.scss +60 -60
- package/static/styles/_variables.scss +11 -11
- package/static/styles/component/prosemirror.scss +513 -513
- package/static/styles/global/_buttons.scss +147 -147
- package/static/styles/global/_clarity.scss +140 -140
- package/static/styles/global/_forms.scss +187 -187
- package/static/styles/global/_global.scss +41 -41
- package/static/styles/global/_overrides.scss +165 -165
- package/static/styles/global/_sass-overrides.scss +7 -7
- package/static/styles/global/_utilities.scss +155 -155
- package/static/styles/rtl.scss +143 -143
- package/static/styles/styles.scss +19 -19
- package/static/styles/theme/dark.scss +591 -591
- package/static/styles/theme/default.scss +254 -254
- package/static/styles/ui-extension-theme.scss +13 -13
- package/static/vendure-ui-config.json +289 -289
|
@@ -455,11 +455,11 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
|
|
|
455
455
|
return optionForm;
|
|
456
456
|
}
|
|
457
457
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductOptionsEditorComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.ServerConfigService }, { token: i1.DataService }, { token: i1.PermissionsService }, { token: ProductDetailService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
458
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductOptionsEditorComponent, isStandalone: false, selector: "vdr-product-options-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-header>\r\n <vdr-page-title></vdr-page-title>\r\n <vdr-page-header-description>{{ 'catalog.page-description-options-editor' | translate }}</vdr-page-header-description>\r\n</vdr-page-header>\r\n<vdr-page-body>\r\n <vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <vdr-language-selector\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <div class=\"flex center\">\r\n <div class=\"mr-2\">\r\n <clr-checkbox-wrapper>\r\n <input\r\n clrCheckbox\r\n type=\"checkbox\"\r\n id=\"auto-update\"\r\n [(ngModel)]=\"autoUpdateVariantNames\"\r\n />\r\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n <button\r\n *vdrIfPermissions=\"updatePermission\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </div>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n </vdr-page-block>\r\n <vdr-page-block>\r\n <form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n <div formGroupName=\"optionGroups\">\r\n <vdr-card\r\n *ngFor=\"let optionGroup of getOptionGroups(); index as i\"\r\n [formArrayName]=\"i\"\r\n [title]=\"optionGroup.value.code\"\r\n >\r\n <vdr-page-entity-info [entity]=\"optionGroup.value\"></vdr-page-entity-info>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n [id]=\"'name-' + i\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n <input\r\n [id]=\"'code-' + i\"\r\n type=\"text\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n formControlName=\"code\"\r\n />\r\n </vdr-form-field>\r\n </div>\r\n <ng-container formGroupName=\"customFields\" *ngIf=\"optionGroupCustomFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductOptionGroup\"\r\n [customFields]=\"optionGroupCustomFields\"\r\n [customFieldsFormGroup]=\"optionGroup.get('customFields')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </ng-container>\r\n\r\n <vdr-data-table-2\r\n id=\"edit-options-list\"\r\n *ngIf=\"getOptions(optionGroup) as options\"\r\n [items]=\"options\"\r\n [trackByPath]=\"'value.id'\"\r\n [itemsPerPage]=\"paginationSettings[optionGroup.value.id]?.itemsPerPage\"\r\n [currentPage]=\"paginationSettings[optionGroup.value.id]?.currentPage\"\r\n (pageChange)=\"paginationSettings[optionGroup.value.id].currentPage = $event\"\r\n (itemsPerPageChange)=\"paginationSettings[optionGroup.value.id].itemsPerPage = $event\"\r\n [totalItems]=\"options.length\"\r\n >\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-optionControl=\"item\">\r\n {{ optionControl.value.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n <ng-template let-optionControl=\"item\">\r\n {{ optionControl.value.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n <ng-template let-optionControl=\"item\">\r\n {{ optionControl.value.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n <ng-template let-optionControl=\"item\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"optionControl.get('name')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n <ng-template let-optionControl=\"item\">\r\n <input type=\"text\" [formControl]=\"optionControl.get('code')\" />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.custom-fields' | translate\" id=\"custom-fields\"\r\n [hiddenByDefault]=\"optionCustomFields.length === 0\"\r\n >\r\n <ng-template let-optionControl=\"item\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"ProductOption\"\r\n [customFields]=\"optionCustomFields\"\r\n [compact]=\"true\"\r\n [customFieldsFormGroup]=\"optionControl.get('customFields')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n </div>\r\n </form>\r\n </vdr-page-block>\r\n</vdr-page-body>\r\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: i1.PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: i1.PageHeaderDescriptionComponent, selector: "vdr-page-header-description" }, { kind: "component", type: i1.PageBodyComponent, selector: "vdr-page-body" }, { 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.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
458
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductOptionsEditorComponent, isStandalone: false, selector: "vdr-product-options-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-header>\n <vdr-page-title></vdr-page-title>\n <vdr-page-header-description>{{ 'catalog.page-description-options-editor' | translate }}</vdr-page-header-description>\n</vdr-page-header>\n<vdr-page-body>\n <vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <div class=\"flex center\">\n <div class=\"mr-2\">\n <clr-checkbox-wrapper>\n <input\n clrCheckbox\n type=\"checkbox\"\n id=\"auto-update\"\n [(ngModel)]=\"autoUpdateVariantNames\"\n />\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\n </clr-checkbox-wrapper>\n </div>\n <button\n *vdrIfPermissions=\"updatePermission\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"detailForm.pristine || detailForm.invalid\"\n >\n {{ 'common.update' | translate }}\n </button>\n </div>\n </vdr-ab-right>\n </vdr-action-bar>\n </vdr-page-block>\n <vdr-page-block>\n <form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\n <div formGroupName=\"optionGroups\">\n <vdr-card\n *ngFor=\"let optionGroup of getOptionGroups(); index as i\"\n [formArrayName]=\"i\"\n [title]=\"optionGroup.value.code\"\n >\n <vdr-page-entity-info [entity]=\"optionGroup.value\"></vdr-page-entity-info>\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n [id]=\"'name-' + i\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\n <input\n [id]=\"'code-' + i\"\n type=\"text\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n </div>\n <ng-container formGroupName=\"customFields\" *ngIf=\"optionGroupCustomFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"ProductOptionGroup\"\n [customFields]=\"optionGroupCustomFields\"\n [customFieldsFormGroup]=\"optionGroup.get('customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </ng-container>\n\n <vdr-data-table-2\n id=\"edit-options-list\"\n *ngIf=\"getOptions(optionGroup) as options\"\n [items]=\"options\"\n [trackByPath]=\"'value.id'\"\n [itemsPerPage]=\"paginationSettings[optionGroup.value.id]?.itemsPerPage\"\n [currentPage]=\"paginationSettings[optionGroup.value.id]?.currentPage\"\n (pageChange)=\"paginationSettings[optionGroup.value.id].currentPage = $event\"\n (itemsPerPageChange)=\"paginationSettings[optionGroup.value.id].itemsPerPage = $event\"\n [totalItems]=\"options.length\"\n >\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-optionControl=\"item\">\n {{ optionControl.value.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n <ng-template let-optionControl=\"item\">\n {{ optionControl.value.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n <ng-template let-optionControl=\"item\">\n {{ optionControl.value.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-optionControl=\"item\">\n <input\n type=\"text\"\n [formControl]=\"optionControl.get('name')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\n <ng-template let-optionControl=\"item\">\n <input type=\"text\" [formControl]=\"optionControl.get('code')\" />\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.custom-fields' | translate\" id=\"custom-fields\"\n [hiddenByDefault]=\"optionCustomFields.length === 0\"\n >\n <ng-template let-optionControl=\"item\">\n <vdr-tabbed-custom-fields\n entityName=\"ProductOption\"\n [customFields]=\"optionCustomFields\"\n [compact]=\"true\"\n [customFieldsFormGroup]=\"optionControl.get('customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n </div>\n </form>\n </vdr-page-block>\n</vdr-page-body>\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: i1.PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: i1.PageHeaderDescriptionComponent, selector: "vdr-page-header-description" }, { kind: "component", type: i1.PageBodyComponent, selector: "vdr-page-body" }, { 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.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
459
459
|
}
|
|
460
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductOptionsEditorComponent, decorators: [{
|
|
461
461
|
type: Component,
|
|
462
|
-
args: [{ selector: 'vdr-product-options-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-header>\
|
|
462
|
+
args: [{ selector: 'vdr-product-options-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-header>\n <vdr-page-title></vdr-page-title>\n <vdr-page-header-description>{{ 'catalog.page-description-options-editor' | translate }}</vdr-page-header-description>\n</vdr-page-header>\n<vdr-page-body>\n <vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <div class=\"flex center\">\n <div class=\"mr-2\">\n <clr-checkbox-wrapper>\n <input\n clrCheckbox\n type=\"checkbox\"\n id=\"auto-update\"\n [(ngModel)]=\"autoUpdateVariantNames\"\n />\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\n </clr-checkbox-wrapper>\n </div>\n <button\n *vdrIfPermissions=\"updatePermission\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"detailForm.pristine || detailForm.invalid\"\n >\n {{ 'common.update' | translate }}\n </button>\n </div>\n </vdr-ab-right>\n </vdr-action-bar>\n </vdr-page-block>\n <vdr-page-block>\n <form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\n <div formGroupName=\"optionGroups\">\n <vdr-card\n *ngFor=\"let optionGroup of getOptionGroups(); index as i\"\n [formArrayName]=\"i\"\n [title]=\"optionGroup.value.code\"\n >\n <vdr-page-entity-info [entity]=\"optionGroup.value\"></vdr-page-entity-info>\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n [id]=\"'name-' + i\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\n <input\n [id]=\"'code-' + i\"\n type=\"text\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n </div>\n <ng-container formGroupName=\"customFields\" *ngIf=\"optionGroupCustomFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"ProductOptionGroup\"\n [customFields]=\"optionGroupCustomFields\"\n [customFieldsFormGroup]=\"optionGroup.get('customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </ng-container>\n\n <vdr-data-table-2\n id=\"edit-options-list\"\n *ngIf=\"getOptions(optionGroup) as options\"\n [items]=\"options\"\n [trackByPath]=\"'value.id'\"\n [itemsPerPage]=\"paginationSettings[optionGroup.value.id]?.itemsPerPage\"\n [currentPage]=\"paginationSettings[optionGroup.value.id]?.currentPage\"\n (pageChange)=\"paginationSettings[optionGroup.value.id].currentPage = $event\"\n (itemsPerPageChange)=\"paginationSettings[optionGroup.value.id].itemsPerPage = $event\"\n [totalItems]=\"options.length\"\n >\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-optionControl=\"item\">\n {{ optionControl.value.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n <ng-template let-optionControl=\"item\">\n {{ optionControl.value.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n <ng-template let-optionControl=\"item\">\n {{ optionControl.value.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-optionControl=\"item\">\n <input\n type=\"text\"\n [formControl]=\"optionControl.get('name')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\n <ng-template let-optionControl=\"item\">\n <input type=\"text\" [formControl]=\"optionControl.get('code')\" />\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.custom-fields' | translate\" id=\"custom-fields\"\n [hiddenByDefault]=\"optionCustomFields.length === 0\"\n >\n <ng-template let-optionControl=\"item\">\n <vdr-tabbed-custom-fields\n entityName=\"ProductOption\"\n [customFields]=\"optionCustomFields\"\n [compact]=\"true\"\n [customFieldsFormGroup]=\"optionControl.get('customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n </div>\n </form>\n </vdr-page-block>\n</vdr-page-body>\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"] }]
|
|
463
463
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i1.ServerConfigService }, { type: i1.DataService }, { type: i1.PermissionsService }, { type: ProductDetailService }, { type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.NotificationService }] });
|
|
464
464
|
|
|
465
465
|
class CreateProductOptionGroupDialogComponent {
|
|
@@ -492,11 +492,11 @@ class CreateProductOptionGroupDialogComponent {
|
|
|
492
492
|
this.resolveWith();
|
|
493
493
|
}
|
|
494
494
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CreateProductOptionGroupDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CreateProductOptionGroupDialogComponent, isStandalone: false, selector: "vdr-create-product-option-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CreateProductOptionGroupDialogComponent, isStandalone: false, selector: "vdr-create-product-option-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.create-product-option-group' | translate }}\n</ng-template>\n<div class=\"form-grid\" [formGroup]=\"form\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\n </vdr-form-field>\n <vdr-form-field\n [label]=\"'common.code' | translate\"\n for=\"code\"\n >\n <input\n id=\"code\"\n type=\"text\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n</div>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>\n", styles: [""], dependencies: [{ 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: "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: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
496
496
|
}
|
|
497
497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CreateProductOptionGroupDialogComponent, decorators: [{
|
|
498
498
|
type: Component,
|
|
499
|
-
args: [{ selector: 'vdr-create-product-option-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
499
|
+
args: [{ selector: 'vdr-create-product-option-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.create-product-option-group' | translate }}\n</ng-template>\n<div class=\"form-grid\" [formGroup]=\"form\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\n </vdr-form-field>\n <vdr-form-field\n [label]=\"'common.code' | translate\"\n for=\"code\"\n >\n <input\n id=\"code\"\n type=\"text\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n</div>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>\n" }]
|
|
500
500
|
}], ctorParameters: () => [{ type: i2.FormBuilder }] });
|
|
501
501
|
|
|
502
502
|
class CreateProductVariantDialogComponent {
|
|
@@ -562,11 +562,11 @@ class CreateProductVariantDialogComponent {
|
|
|
562
562
|
return this.product.optionGroups.find(og => og.code === code)?.id ?? '';
|
|
563
563
|
}
|
|
564
564
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CreateProductVariantDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
565
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CreateProductVariantDialogComponent, isStandalone: false, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CreateProductVariantDialogComponent, isStandalone: false, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.create-product-variant' | translate }}\n</ng-template>\n<form [formGroup]=\"form\">\n <div formGroupName=\"options\" class=\"form-grid\">\n <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\n <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\n bindValue=\"id\" appendTo=\"body\">\n </ng-select>\n </vdr-form-field>\n <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\n class=\"form-grid-span\">\n <clr-alert-item>\n <span class=\"alert-text\">\n {{ 'catalog.cannot-create-variants-without-options' | translate }}\n </span>\n </clr-alert-item>\n </clr-alert>\n </div>\n <div *ngIf=\"existingVariant\" class=\"mt-2\">\n <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\n <clr-alert-item>\n <span class=\"alert-text\">\n {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\n existingVariant.sku\n }})\n </span>\n </clr-alert-item>\n </clr-alert>\n </div>\n <div class=\"form-grid mt-2\">\n <vdr-form-field [label]=\"'common.name' | translate\">\n <input type=\"text\" formControlName=\"name\" />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.sku' | translate\">\n <input type=\"text\" formControlName=\"sku\" />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.price' | translate\">\n <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\n </vdr-form-field>\n </div>\n</form>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\n [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], 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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
566
566
|
}
|
|
567
567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CreateProductVariantDialogComponent, decorators: [{
|
|
568
568
|
type: Component,
|
|
569
|
-
args: [{ selector: 'vdr-create-product-variant-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
569
|
+
args: [{ selector: 'vdr-create-product-variant-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.create-product-variant' | translate }}\n</ng-template>\n<form [formGroup]=\"form\">\n <div formGroupName=\"options\" class=\"form-grid\">\n <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\n <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\n bindValue=\"id\" appendTo=\"body\">\n </ng-select>\n </vdr-form-field>\n <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\n class=\"form-grid-span\">\n <clr-alert-item>\n <span class=\"alert-text\">\n {{ 'catalog.cannot-create-variants-without-options' | translate }}\n </span>\n </clr-alert-item>\n </clr-alert>\n </div>\n <div *ngIf=\"existingVariant\" class=\"mt-2\">\n <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\n <clr-alert-item>\n <span class=\"alert-text\">\n {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\n existingVariant.sku\n }})\n </span>\n </clr-alert-item>\n </clr-alert>\n </div>\n <div class=\"form-grid mt-2\">\n <vdr-form-field [label]=\"'common.name' | translate\">\n <input type=\"text\" formControlName=\"name\" />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.sku' | translate\">\n <input type=\"text\" formControlName=\"sku\" />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.price' | translate\">\n <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\n </vdr-form-field>\n </div>\n</form>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\n [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>" }]
|
|
570
570
|
}], ctorParameters: () => [{ type: i2.FormBuilder }] });
|
|
571
571
|
|
|
572
572
|
const OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
|
|
@@ -693,11 +693,11 @@ class OptionValueInputComponent {
|
|
|
693
693
|
}
|
|
694
694
|
}
|
|
695
695
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OptionValueInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
696
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OptionValueInputComponent, isStandalone: false, selector: "vdr-option-value-input", inputs: { groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { add: "add", remove: "remove", edit: "edit" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }, { propertyName: "nameInputs", predicate: ["editNameInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\
|
|
696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OptionValueInputComponent, isStandalone: false, selector: "vdr-option-value-input", inputs: { groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { add: "add", remove: "remove", edit: "edit" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }, { propertyName: "nameInputs", predicate: ["editNameInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\n <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\n <vdr-chip\n *ngFor=\"let option of optionValues; last as isLast; index as i\"\n [icon]=\"option.locked ? 'lock' : 'times'\"\n [class.selected]=\"isLast && lastSelected\"\n [class.locked]=\"option.locked\"\n [colorFrom]=\"groupName\"\n (iconClick)=\"removeOption(option)\"\n >\n <span [hidden]=\"editingIndex !== i\">\n <input\n #editNameInput\n type=\"text\"\n [ngModel]=\"option.name\"\n (blur)=\"updateOption(i, $event)\"\n (click)=\"$event.cancelBubble = true\"\n />\n </span>\n <span\n class=\"option-name\"\n [class.editable]=\"!option.locked && !option.id\"\n (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\n </vdr-chip>\n </div>\n <textarea\n #textArea\n (keyup)=\"handleKey($event)\"\n (focus)=\"isFocussed = true\"\n (blur)=\"handleBlur()\"\n [(ngModel)]=\"input\"\n [disabled]=\"disabled\"\n ></textarea>\n</div>\n", styles: [".input-wrapper{background-color:var(--color-form-input-bg);border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
697
697
|
}
|
|
698
698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OptionValueInputComponent, decorators: [{
|
|
699
699
|
type: Component,
|
|
700
|
-
args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], standalone: false, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\
|
|
700
|
+
args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], standalone: false, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\n <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\n <vdr-chip\n *ngFor=\"let option of optionValues; last as isLast; index as i\"\n [icon]=\"option.locked ? 'lock' : 'times'\"\n [class.selected]=\"isLast && lastSelected\"\n [class.locked]=\"option.locked\"\n [colorFrom]=\"groupName\"\n (iconClick)=\"removeOption(option)\"\n >\n <span [hidden]=\"editingIndex !== i\">\n <input\n #editNameInput\n type=\"text\"\n [ngModel]=\"option.name\"\n (blur)=\"updateOption(i, $event)\"\n (click)=\"$event.cancelBubble = true\"\n />\n </span>\n <span\n class=\"option-name\"\n [class.editable]=\"!option.locked && !option.id\"\n (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\n </vdr-chip>\n </div>\n <textarea\n #textArea\n (keyup)=\"handleKey($event)\"\n (focus)=\"isFocussed = true\"\n (blur)=\"handleBlur()\"\n [(ngModel)]=\"input\"\n [disabled]=\"disabled\"\n ></textarea>\n</div>\n", styles: [".input-wrapper{background-color:var(--color-form-input-bg);border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"] }]
|
|
701
701
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { groupName: [{
|
|
702
702
|
type: Input
|
|
703
703
|
}], textArea: [{
|
|
@@ -983,11 +983,11 @@ class ProductVariantsEditorComponent {
|
|
|
983
983
|
return variant.options.find(o => o.groupId === groupId);
|
|
984
984
|
}
|
|
985
985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantsEditorComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.DataService }, { token: ProductDetailService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantsEditorComponent, isStandalone: false, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-page-block>\r\n <vdr-card>\r\n <div *ngFor=\"let group of optionGroups; index as i\" class=\"option-groups\">\r\n <vdr-form-field [label]=\"'catalog.option' | translate\">\r\n <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'catalog.option-values' | translate\" class=\"flex-spacer\">\r\n <vdr-option-value-input\r\n #optionValueInputComponent\r\n [options]=\"group.values\"\r\n [groupName]=\"group.name\"\r\n [disabled]=\"group.name === ''\"\r\n (add)=\"addOption(i, $event.name)\"\r\n (remove)=\"removeOption(i, $event)\"\r\n ></vdr-option-value-input>\r\n </vdr-form-field>\r\n <div>\r\n <button class=\"button-small mt-4\" (click)=\"removeOptionGroup(group)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"button mt-1\" (click)=\"addOptionGroup()\">\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.create-product-option-group' | translate }}\r\n </button>\r\n </vdr-card>\r\n <vdr-card [paddingX]=\"false\">\r\n <div class=\"mx-3\">\r\n <button class=\"button\" (click)=\"createNewVariant()\">\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.create-product-variant' | translate }}\r\n </button>\r\n </div>\r\n <vdr-data-table-2\r\n id=\"manage-product-variant-list\"\r\n [items]=\"variants$ | async\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems$ | async\"\r\n [currentPage]=\"currentPage\"\r\n (pageChange)=\"setPageNumber($event)\"\r\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n >\r\n <vdr-dt2-search\r\n [searchTermControl]=\"searchTermControl\"\r\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n />\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column *ngFor=\"let optionGroup of optionGroups$ | async\" [heading]=\"optionGroup.name\" [id]=\"optionGroup.code\">\r\n <ng-template let-variant=\"item\">\r\n <vdr-chip\r\n *ngIf=\"getOption(variant, optionGroup.id) as option; else selectOption\"\r\n [colorFrom]=\"optionGroup.code\"\r\n >{{ option.name }}</vdr-chip\r\n >\r\n <ng-template #selectOption>\r\n <div class=\"flex center\">\r\n <ng-select\r\n [items]=\"optionGroup.options\"\r\n bindLabel=\"name\"\r\n bindValue=\"id\"\r\n appendTo=\"body\"\r\n (change)=\"setOptionToAddToVariant(variant.id, optionGroup.id, $event?.id)\"\r\n ></ng-select>\r\n <button\r\n class=\"button-small ml-1\"\r\n [class.primary]=\"!!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\r\n (click)=\"addOptionToVariant(variant)\"\r\n [disabled]=\"!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\r\n >\r\n <clr-icon shape=\"floppy\"></clr-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.price' | translate\" id=\"price\" [hiddenByDefault]=\"true\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.price | localeCurrency : variant.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [hiddenByDefault]=\"true\">\r\n <ng-template let-variant=\"item\">\r\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.delete' | translate\" id=\"delete\" [optional]=\"false\">\r\n <ng-template let-variant=\"item\">\r\n <button class=\"button-small\" (click)=\"deleteVariant(variant)\">\r\n <clr-icon shape=\"trash is-danger\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n</vdr-page-block>\r\n", styles: [".option-groups{display:flex;width:100%;gap:var(--space-unit)}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantsEditorComponent, isStandalone: false, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-page-block>\n <vdr-card>\n <div *ngFor=\"let group of optionGroups; index as i\" class=\"option-groups\">\n <vdr-form-field [label]=\"'catalog.option' | translate\">\n <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.option-values' | translate\" class=\"flex-spacer\">\n <vdr-option-value-input\n #optionValueInputComponent\n [options]=\"group.values\"\n [groupName]=\"group.name\"\n [disabled]=\"group.name === ''\"\n (add)=\"addOption(i, $event.name)\"\n (remove)=\"removeOption(i, $event)\"\n ></vdr-option-value-input>\n </vdr-form-field>\n <div>\n <button class=\"button-small mt-4\" (click)=\"removeOptionGroup(group)\">\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </div>\n <button class=\"button mt-1\" (click)=\"addOptionGroup()\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-product-option-group' | translate }}\n </button>\n </vdr-card>\n <vdr-card [paddingX]=\"false\">\n <div class=\"mx-3\">\n <button class=\"button\" (click)=\"createNewVariant()\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-product-variant' | translate }}\n </button>\n </div>\n <vdr-data-table-2\n id=\"manage-product-variant-list\"\n [items]=\"variants$ | async\"\n [itemsPerPage]=\"itemsPerPage\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n >\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n {{ variant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n {{ variant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column *ngFor=\"let optionGroup of optionGroups$ | async\" [heading]=\"optionGroup.name\" [id]=\"optionGroup.code\">\n <ng-template let-variant=\"item\">\n <vdr-chip\n *ngIf=\"getOption(variant, optionGroup.id) as option; else selectOption\"\n [colorFrom]=\"optionGroup.code\"\n >{{ option.name }}</vdr-chip\n >\n <ng-template #selectOption>\n <div class=\"flex center\">\n <ng-select\n [items]=\"optionGroup.options\"\n bindLabel=\"name\"\n bindValue=\"id\"\n appendTo=\"body\"\n (change)=\"setOptionToAddToVariant(variant.id, optionGroup.id, $event?.id)\"\n ></ng-select>\n <button\n class=\"button-small ml-1\"\n [class.primary]=\"!!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\n (click)=\"addOptionToVariant(variant)\"\n [disabled]=\"!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\n >\n <clr-icon shape=\"floppy\"></clr-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.price' | translate\" id=\"price\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.price | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.delete' | translate\" id=\"delete\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n <button class=\"button-small\" (click)=\"deleteVariant(variant)\">\n <clr-icon shape=\"trash is-danger\"></clr-icon>\n </button>\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n</vdr-page-block>\n", styles: [".option-groups{display:flex;width:100%;gap:var(--space-unit)}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
987
987
|
}
|
|
988
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
|
|
989
989
|
type: Component,
|
|
990
|
-
args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<vdr-page-block>\
|
|
990
|
+
args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<vdr-page-block>\n <vdr-card>\n <div *ngFor=\"let group of optionGroups; index as i\" class=\"option-groups\">\n <vdr-form-field [label]=\"'catalog.option' | translate\">\n <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.option-values' | translate\" class=\"flex-spacer\">\n <vdr-option-value-input\n #optionValueInputComponent\n [options]=\"group.values\"\n [groupName]=\"group.name\"\n [disabled]=\"group.name === ''\"\n (add)=\"addOption(i, $event.name)\"\n (remove)=\"removeOption(i, $event)\"\n ></vdr-option-value-input>\n </vdr-form-field>\n <div>\n <button class=\"button-small mt-4\" (click)=\"removeOptionGroup(group)\">\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </div>\n <button class=\"button mt-1\" (click)=\"addOptionGroup()\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-product-option-group' | translate }}\n </button>\n </vdr-card>\n <vdr-card [paddingX]=\"false\">\n <div class=\"mx-3\">\n <button class=\"button\" (click)=\"createNewVariant()\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-product-variant' | translate }}\n </button>\n </div>\n <vdr-data-table-2\n id=\"manage-product-variant-list\"\n [items]=\"variants$ | async\"\n [itemsPerPage]=\"itemsPerPage\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n >\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n {{ variant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n {{ variant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column *ngFor=\"let optionGroup of optionGroups$ | async\" [heading]=\"optionGroup.name\" [id]=\"optionGroup.code\">\n <ng-template let-variant=\"item\">\n <vdr-chip\n *ngIf=\"getOption(variant, optionGroup.id) as option; else selectOption\"\n [colorFrom]=\"optionGroup.code\"\n >{{ option.name }}</vdr-chip\n >\n <ng-template #selectOption>\n <div class=\"flex center\">\n <ng-select\n [items]=\"optionGroup.options\"\n bindLabel=\"name\"\n bindValue=\"id\"\n appendTo=\"body\"\n (change)=\"setOptionToAddToVariant(variant.id, optionGroup.id, $event?.id)\"\n ></ng-select>\n <button\n class=\"button-small ml-1\"\n [class.primary]=\"!!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\n (click)=\"addOptionToVariant(variant)\"\n [disabled]=\"!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\n >\n <clr-icon shape=\"floppy\"></clr-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.price' | translate\" id=\"price\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.price | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.delete' | translate\" id=\"delete\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n <button class=\"button-small\" (click)=\"deleteVariant(variant)\">\n <clr-icon shape=\"trash is-danger\"></clr-icon>\n </button>\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n</vdr-page-block>\n", styles: [".option-groups{display:flex;width:100%;gap:var(--space-unit)}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
|
|
991
991
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1.DataService }, { type: ProductDetailService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: i0.ChangeDetectorRef }] });
|
|
992
992
|
|
|
993
993
|
class ProductVariantsResolver extends BaseEntityResolver {
|
|
@@ -1165,27 +1165,27 @@ class ApplyFacetDialogComponent {
|
|
|
1165
1165
|
this.resolveWith();
|
|
1166
1166
|
}
|
|
1167
1167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ApplyFacetDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ApplyFacetDialogComponent, isStandalone: false, selector: "vdr-apply-facet-dialog", viewQueries: [{ propertyName: "selector", first: true, predicate: FacetValueSelectorComponent, descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\
|
|
1168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ApplyFacetDialogComponent, isStandalone: false, selector: "vdr-apply-facet-dialog", viewQueries: [{ propertyName: "selector", first: true, predicate: FacetValueSelectorComponent, descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\n\n<vdr-facet-value-selector\n (selectedValuesChange)=\"selectedValues = $event\"\n></vdr-facet-value-selector>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button\n type=\"submit\"\n (click)=\"selectValues()\"\n [disabled]=\"selectedValues.length === 0\"\n class=\"btn btn-primary\"\n >\n {{ 'catalog.add-facets' | translate }}\n </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { 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 }); }
|
|
1169
1169
|
}
|
|
1170
1170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ApplyFacetDialogComponent, decorators: [{
|
|
1171
1171
|
type: Component,
|
|
1172
|
-
args: [{ selector: 'vdr-apply-facet-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\
|
|
1172
|
+
args: [{ selector: 'vdr-apply-facet-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\n\n<vdr-facet-value-selector\n (selectedValuesChange)=\"selectedValues = $event\"\n></vdr-facet-value-selector>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button\n type=\"submit\"\n (click)=\"selectValues()\"\n [disabled]=\"selectedValues.length === 0\"\n class=\"btn btn-primary\"\n >\n {{ 'catalog.add-facets' | translate }}\n </button>\n</ng-template>\n" }]
|
|
1173
1173
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selector: [{
|
|
1174
1174
|
type: ViewChild,
|
|
1175
1175
|
args: [FacetValueSelectorComponent]
|
|
1176
1176
|
}] } });
|
|
1177
1177
|
|
|
1178
|
-
const ASSET_DETAIL_QUERY = gql `
|
|
1179
|
-
query AssetDetailQuery($id: ID!) {
|
|
1180
|
-
asset(id: $id) {
|
|
1181
|
-
...Asset
|
|
1182
|
-
tags {
|
|
1183
|
-
...Tag
|
|
1184
|
-
}
|
|
1185
|
-
}
|
|
1186
|
-
}
|
|
1187
|
-
${ASSET_FRAGMENT}
|
|
1188
|
-
${TAG_FRAGMENT}
|
|
1178
|
+
const ASSET_DETAIL_QUERY = gql `
|
|
1179
|
+
query AssetDetailQuery($id: ID!) {
|
|
1180
|
+
asset(id: $id) {
|
|
1181
|
+
...Asset
|
|
1182
|
+
tags {
|
|
1183
|
+
...Tag
|
|
1184
|
+
}
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
${ASSET_FRAGMENT}
|
|
1188
|
+
${TAG_FRAGMENT}
|
|
1189
1189
|
`;
|
|
1190
1190
|
class AssetDetailComponent extends TypedBaseDetailComponent {
|
|
1191
1191
|
constructor(notificationService, dataService, formBuilder) {
|
|
@@ -1235,11 +1235,11 @@ class AssetDetailComponent extends TypedBaseDetailComponent {
|
|
|
1235
1235
|
}
|
|
1236
1236
|
}
|
|
1237
1237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssetDetailComponent, deps: [{ token: i1.NotificationService }, { token: i1.DataService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AssetDetailComponent, isStandalone: false, selector: "vdr-asset-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\
|
|
1238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AssetDetailComponent, isStandalone: false, selector: "vdr-asset-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left></vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"asset-detail\" />\n <button\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateAsset']\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.update' | translate }}\n </button>\n <vdr-action-bar-dropdown-menu locationId=\"asset-detail\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-page-block>\n <vdr-asset-preview\n [asset]=\"entity$ | async\"\n [editable]=\"true\"\n [customFields]=\"customFields\"\n [customFieldsForm]=\"detailForm.get('customFields')\"\n (assetChange)=\"onAssetChange($event)\"\n />\n</vdr-page-block>\n", styles: [":host{display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ 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.AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "assets", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1239
1239
|
}
|
|
1240
1240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssetDetailComponent, decorators: [{
|
|
1241
1241
|
type: Component,
|
|
1242
|
-
args: [{ selector: 'vdr-asset-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\
|
|
1242
|
+
args: [{ selector: 'vdr-asset-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left></vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"asset-detail\" />\n <button\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateAsset']\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.update' | translate }}\n </button>\n <vdr-action-bar-dropdown-menu locationId=\"asset-detail\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-page-block>\n <vdr-asset-preview\n [asset]=\"entity$ | async\"\n [editable]=\"true\"\n [customFields]=\"customFields\"\n [customFieldsForm]=\"detailForm.get('customFields')\"\n (assetChange)=\"onAssetChange($event)\"\n />\n</vdr-page-block>\n", styles: [":host{display:flex;flex-direction:column;height:100%}\n"] }]
|
|
1243
1243
|
}], ctorParameters: () => [{ type: i1.NotificationService }, { type: i1.DataService }, { type: i2.UntypedFormBuilder }] });
|
|
1244
1244
|
|
|
1245
1245
|
class AssetListComponent extends BaseListComponent {
|
|
@@ -1345,11 +1345,11 @@ class AssetListComponent extends BaseListComponent {
|
|
|
1345
1345
|
.pipe(switchMap(res => (res ? this.dataService.product.deleteAssets(assetIds, !!message) : EMPTY)), map(res => res.deleteAssets));
|
|
1346
1346
|
}
|
|
1347
1347
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssetListComponent, deps: [{ token: i1.NotificationService }, { token: i1.ModalService }, { token: i1.DataService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AssetListComponent, isStandalone: false, selector: "vdr-asset-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\
|
|
1348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AssetListComponent, isStandalone: false, selector: "vdr-asset-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <div class=\"my-2\">\n <vdr-asset-search-input\n [tags]=\"allTags$ | async\"\n (searchTermChange)=\"searchTerm$.next($event)\"\n (tagsChange)=\"filterByTags$.next($event)\"\n >\n <vdr-asset-file-input\n (selectFiles)=\"filesSelected($event)\"\n [uploading]=\"uploading\"\n dropZoneTarget=\".content-area\"\n ></vdr-asset-file-input>\n </vdr-asset-search-input>\n </div>\n <vdr-asset-gallery\n [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\n [multiSelect]=\"true\"\n [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\n (deleteAssets)=\"deleteAssets($event)\"\n ></vdr-asset-gallery>\n\n <div class=\"paging-controls\">\n <vdr-items-per-page-controls\n [itemsPerPage]=\"itemsPerPage$ | async\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n ></vdr-items-per-page-controls>\n\n <vdr-pagination-controls\n [currentPage]=\"currentPage$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n (pageChange)=\"setPageNumber($event)\"\n ></vdr-pagination-controls>\n </div>\n</vdr-page-block>\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "component", type: i1.AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "component", type: i1.AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: i1.AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets", "editAssetClick"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }] }); }
|
|
1349
1349
|
}
|
|
1350
1350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssetListComponent, decorators: [{
|
|
1351
1351
|
type: Component,
|
|
1352
|
-
args: [{ selector: 'vdr-asset-list', standalone: false, template: "<vdr-page-block>\
|
|
1352
|
+
args: [{ selector: 'vdr-asset-list', standalone: false, template: "<vdr-page-block>\n <div class=\"my-2\">\n <vdr-asset-search-input\n [tags]=\"allTags$ | async\"\n (searchTermChange)=\"searchTerm$.next($event)\"\n (tagsChange)=\"filterByTags$.next($event)\"\n >\n <vdr-asset-file-input\n (selectFiles)=\"filesSelected($event)\"\n [uploading]=\"uploading\"\n dropZoneTarget=\".content-area\"\n ></vdr-asset-file-input>\n </vdr-asset-search-input>\n </div>\n <vdr-asset-gallery\n [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\n [multiSelect]=\"true\"\n [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\n (deleteAssets)=\"deleteAssets($event)\"\n ></vdr-asset-gallery>\n\n <div class=\"paging-controls\">\n <vdr-items-per-page-controls\n [itemsPerPage]=\"itemsPerPage$ | async\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n ></vdr-items-per-page-controls>\n\n <vdr-pagination-controls\n [currentPage]=\"currentPage$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n (pageChange)=\"setPageNumber($event)\"\n ></vdr-pagination-controls>\n </div>\n</vdr-page-block>\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"] }]
|
|
1353
1353
|
}], ctorParameters: () => [{ type: i1.NotificationService }, { type: i1.ModalService }, { type: i1.DataService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }] });
|
|
1354
1354
|
|
|
1355
1355
|
class AssignProductsToChannelDialogComponent {
|
|
@@ -1435,79 +1435,79 @@ class AssignProductsToChannelDialogComponent {
|
|
|
1435
1435
|
}).single$)).productVariants.items;
|
|
1436
1436
|
}
|
|
1437
1437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssignProductsToChannelDialogComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AssignProductsToChannelDialogComponent, isStandalone: false, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
1438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AssignProductsToChannelDialogComponent, isStandalone: false, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\n 'catalog.assign-variants-to-channel' | translate\n }}</ng-container>\n <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\n</ng-template>\n\n<div class=\"flex\">\n <clr-input-container>\n <label>{{ 'common.channel' | translate }}</label>\n <vdr-channel-assignment-control\n clrInput\n [multiple]=\"false\"\n [includeDefaultChannel]=\"false\"\n [disableChannelIds]=\"currentChannelIds\"\n [formControl]=\"selectedChannelIdControl\"\n ></vdr-channel-assignment-control>\n </clr-input-container>\n <div class=\"flex-spacer\"></div>\n <clr-input-container>\n <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\n <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\n </clr-input-container>\n</div>\n\n<div class=\"channel-price-preview\">\n <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\n <table class=\"table\">\n <thead>\n <tr>\n <th>{{ 'common.name' | translate }}</th>\n <th>\n {{\n 'catalog.price-in-channel'\n | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\n }}\n </th>\n <th>\n <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\n {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\n </ng-template>\n <ng-template #noSelection>\n {{ 'catalog.no-channel-selected' | translate }}\n </ng-template>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of variantsPreview$ | async\">\n <td>{{ row.name }}</td>\n <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\n <td>\n <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\n {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\n </ng-template>\n <ng-template #noChannelSelected> - </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\n <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\n {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\n </ng-template>\n <ng-template #noSelection>\n {{ 'catalog.no-channel-selected' | translate }}\n </ng-template>\n </button>\n</ng-template>\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1439
1439
|
}
|
|
1440
1440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AssignProductsToChannelDialogComponent, decorators: [{
|
|
1441
1441
|
type: Component,
|
|
1442
|
-
args: [{ selector: 'vdr-assign-products-to-channel-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
1442
|
+
args: [{ selector: 'vdr-assign-products-to-channel-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\n 'catalog.assign-variants-to-channel' | translate\n }}</ng-container>\n <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\n</ng-template>\n\n<div class=\"flex\">\n <clr-input-container>\n <label>{{ 'common.channel' | translate }}</label>\n <vdr-channel-assignment-control\n clrInput\n [multiple]=\"false\"\n [includeDefaultChannel]=\"false\"\n [disableChannelIds]=\"currentChannelIds\"\n [formControl]=\"selectedChannelIdControl\"\n ></vdr-channel-assignment-control>\n </clr-input-container>\n <div class=\"flex-spacer\"></div>\n <clr-input-container>\n <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\n <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\n </clr-input-container>\n</div>\n\n<div class=\"channel-price-preview\">\n <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\n <table class=\"table\">\n <thead>\n <tr>\n <th>{{ 'common.name' | translate }}</th>\n <th>\n {{\n 'catalog.price-in-channel'\n | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\n }}\n </th>\n <th>\n <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\n {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\n </ng-template>\n <ng-template #noSelection>\n {{ 'catalog.no-channel-selected' | translate }}\n </ng-template>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of variantsPreview$ | async\">\n <td>{{ row.name }}</td>\n <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\n <td>\n <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\n {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\n </ng-template>\n <ng-template #noChannelSelected> - </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\n <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\n {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\n </ng-template>\n <ng-template #noSelection>\n {{ 'catalog.no-channel-selected' | translate }}\n </ng-template>\n </button>\n</ng-template>\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"] }]
|
|
1443
1443
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }] });
|
|
1444
1444
|
|
|
1445
|
-
const GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS = gql `
|
|
1446
|
-
query GetProductsWithFacetValuesByIds($ids: [String!]!) {
|
|
1447
|
-
products(options: { filter: { id: { in: $ids } } }) {
|
|
1448
|
-
items {
|
|
1449
|
-
id
|
|
1450
|
-
name
|
|
1451
|
-
facetValues {
|
|
1452
|
-
id
|
|
1453
|
-
name
|
|
1454
|
-
code
|
|
1455
|
-
facet {
|
|
1456
|
-
id
|
|
1457
|
-
name
|
|
1458
|
-
code
|
|
1459
|
-
}
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
}
|
|
1463
|
-
}
|
|
1445
|
+
const GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS = gql `
|
|
1446
|
+
query GetProductsWithFacetValuesByIds($ids: [String!]!) {
|
|
1447
|
+
products(options: { filter: { id: { in: $ids } } }) {
|
|
1448
|
+
items {
|
|
1449
|
+
id
|
|
1450
|
+
name
|
|
1451
|
+
facetValues {
|
|
1452
|
+
id
|
|
1453
|
+
name
|
|
1454
|
+
code
|
|
1455
|
+
facet {
|
|
1456
|
+
id
|
|
1457
|
+
name
|
|
1458
|
+
code
|
|
1459
|
+
}
|
|
1460
|
+
}
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1464
1464
|
`;
|
|
1465
|
-
const GET_VARIANTS_WITH_FACET_VALUES_BY_IDS = gql `
|
|
1466
|
-
query GetVariantsWithFacetValuesByIds($ids: [String!]!) {
|
|
1467
|
-
productVariants(options: { filter: { id: { in: $ids } } }) {
|
|
1468
|
-
items {
|
|
1469
|
-
id
|
|
1470
|
-
name
|
|
1471
|
-
sku
|
|
1472
|
-
facetValues {
|
|
1473
|
-
id
|
|
1474
|
-
name
|
|
1475
|
-
code
|
|
1476
|
-
facet {
|
|
1477
|
-
id
|
|
1478
|
-
name
|
|
1479
|
-
code
|
|
1480
|
-
}
|
|
1481
|
-
}
|
|
1482
|
-
}
|
|
1483
|
-
}
|
|
1484
|
-
}
|
|
1465
|
+
const GET_VARIANTS_WITH_FACET_VALUES_BY_IDS = gql `
|
|
1466
|
+
query GetVariantsWithFacetValuesByIds($ids: [String!]!) {
|
|
1467
|
+
productVariants(options: { filter: { id: { in: $ids } } }) {
|
|
1468
|
+
items {
|
|
1469
|
+
id
|
|
1470
|
+
name
|
|
1471
|
+
sku
|
|
1472
|
+
facetValues {
|
|
1473
|
+
id
|
|
1474
|
+
name
|
|
1475
|
+
code
|
|
1476
|
+
facet {
|
|
1477
|
+
id
|
|
1478
|
+
name
|
|
1479
|
+
code
|
|
1480
|
+
}
|
|
1481
|
+
}
|
|
1482
|
+
}
|
|
1483
|
+
}
|
|
1484
|
+
}
|
|
1485
1485
|
`;
|
|
1486
|
-
const UPDATE_PRODUCTS_BULK = gql `
|
|
1487
|
-
mutation UpdateProductsBulk($input: [UpdateProductInput!]!) {
|
|
1488
|
-
updateProducts(input: $input) {
|
|
1489
|
-
id
|
|
1490
|
-
name
|
|
1491
|
-
facetValues {
|
|
1492
|
-
id
|
|
1493
|
-
name
|
|
1494
|
-
code
|
|
1495
|
-
}
|
|
1496
|
-
}
|
|
1497
|
-
}
|
|
1486
|
+
const UPDATE_PRODUCTS_BULK = gql `
|
|
1487
|
+
mutation UpdateProductsBulk($input: [UpdateProductInput!]!) {
|
|
1488
|
+
updateProducts(input: $input) {
|
|
1489
|
+
id
|
|
1490
|
+
name
|
|
1491
|
+
facetValues {
|
|
1492
|
+
id
|
|
1493
|
+
name
|
|
1494
|
+
code
|
|
1495
|
+
}
|
|
1496
|
+
}
|
|
1497
|
+
}
|
|
1498
1498
|
`;
|
|
1499
|
-
const UPDATE_VARIANTS_BULK = gql `
|
|
1500
|
-
mutation UpdateVariantsBulk($input: [UpdateProductVariantInput!]!) {
|
|
1501
|
-
updateProductVariants(input: $input) {
|
|
1502
|
-
id
|
|
1503
|
-
name
|
|
1504
|
-
facetValues {
|
|
1505
|
-
id
|
|
1506
|
-
name
|
|
1507
|
-
code
|
|
1508
|
-
}
|
|
1509
|
-
}
|
|
1510
|
-
}
|
|
1499
|
+
const UPDATE_VARIANTS_BULK = gql `
|
|
1500
|
+
mutation UpdateVariantsBulk($input: [UpdateProductVariantInput!]!) {
|
|
1501
|
+
updateProductVariants(input: $input) {
|
|
1502
|
+
id
|
|
1503
|
+
name
|
|
1504
|
+
facetValues {
|
|
1505
|
+
id
|
|
1506
|
+
name
|
|
1507
|
+
code
|
|
1508
|
+
}
|
|
1509
|
+
}
|
|
1510
|
+
}
|
|
1511
1511
|
`;
|
|
1512
1512
|
|
|
1513
1513
|
class BulkAddFacetValuesDialogComponent {
|
|
@@ -1578,11 +1578,11 @@ class BulkAddFacetValuesDialogComponent {
|
|
|
1578
1578
|
});
|
|
1579
1579
|
}
|
|
1580
1580
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: BulkAddFacetValuesDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: BulkAddFacetValuesDialogComponent, isStandalone: false, selector: "vdr-bulk-add-facet-values-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
1581
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: BulkAddFacetValuesDialogComponent, isStandalone: false, selector: "vdr-bulk-add-facet-values-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.edit-facet-values' | translate }}\n</ng-template>\n\n<div class=\"flex\">\n <div class=\"flex center\">\n <div class=\"mr2\">\n {{ 'catalog.add-facet-value' | translate }}\n </div>\n <vdr-facet-value-selector\n (selectedValuesChange)=\"selectedValues = $event\"\n ></vdr-facet-value-selector>\n </div>\n</div>\n\n<table class=\"table\" *ngIf=\"state !== 'loading'; else placeholder\">\n <tbody>\n <tr *ngFor=\"let item of items\">\n <td class=\"left align-middle\">\n <div>{{ item.name }}</div>\n <div *ngIf=\"item.sku\" class=\"sku\">{{ item.sku }}</div>\n </td>\n <td class=\"left\">\n <vdr-facet-value-chip\n *ngFor=\"let facetValue of item.facetValues\"\n [facetValue]=\"facetValue\"\n (remove)=\"removeFacetValue(item, facetValue.id)\"\n ></vdr-facet-value-chip>\n </td>\n </tr>\n </tbody>\n</table>\n\n<ng-template #placeholder>\n <div class=\"loading\">\n <clr-spinner></clr-spinner>\n </div>\n</ng-template>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button\n type=\"submit\"\n (click)=\"addFacetValues()\"\n [disabled]=\"selectedValues.length === 0 && facetValuesRemoved === false\"\n class=\"btn btn-primary\"\n >\n {{ 'common.update' | translate }}\n </button>\n</ng-template>\n", styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "component", type: i3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { 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: "component", type: i1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { 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 }); }
|
|
1582
1582
|
}
|
|
1583
1583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: BulkAddFacetValuesDialogComponent, decorators: [{
|
|
1584
1584
|
type: Component,
|
|
1585
|
-
args: [{ selector: 'vdr-bulk-add-facet-values-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
1585
|
+
args: [{ selector: 'vdr-bulk-add-facet-values-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.edit-facet-values' | translate }}\n</ng-template>\n\n<div class=\"flex\">\n <div class=\"flex center\">\n <div class=\"mr2\">\n {{ 'catalog.add-facet-value' | translate }}\n </div>\n <vdr-facet-value-selector\n (selectedValuesChange)=\"selectedValues = $event\"\n ></vdr-facet-value-selector>\n </div>\n</div>\n\n<table class=\"table\" *ngIf=\"state !== 'loading'; else placeholder\">\n <tbody>\n <tr *ngFor=\"let item of items\">\n <td class=\"left align-middle\">\n <div>{{ item.name }}</div>\n <div *ngIf=\"item.sku\" class=\"sku\">{{ item.sku }}</div>\n </td>\n <td class=\"left\">\n <vdr-facet-value-chip\n *ngFor=\"let facetValue of item.facetValues\"\n [facetValue]=\"facetValue\"\n (remove)=\"removeFacetValue(item, facetValue.id)\"\n ></vdr-facet-value-chip>\n </td>\n </tr>\n </tbody>\n</table>\n\n<ng-template #placeholder>\n <div class=\"loading\">\n <clr-spinner></clr-spinner>\n </div>\n</ng-template>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button\n type=\"submit\"\n (click)=\"addFacetValues()\"\n [disabled]=\"selectedValues.length === 0 && facetValuesRemoved === false\"\n class=\"btn btn-primary\"\n >\n {{ 'common.update' | translate }}\n </button>\n</ng-template>\n", styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"] }]
|
|
1586
1586
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
|
|
1587
1587
|
|
|
1588
1588
|
class CollectionContentsComponent {
|
|
@@ -1679,11 +1679,11 @@ class CollectionContentsComponent {
|
|
|
1679
1679
|
});
|
|
1680
1680
|
}
|
|
1681
1681
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionContentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionContentsComponent, isStandalone: false, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", inheritFilters: "inheritFilters", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-wrapper\">\
|
|
1682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionContentsComponent, isStandalone: false, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", inheritFilters: "inheritFilters", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-wrapper\">\n <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\n <div class=\"header-title-row\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\n ></ng-container>\n </div>\n <vdr-data-table-2\n id=\"collection-contents\"\n [class.loading]=\"isLoading\"\n [items]=\"contents$ | async\"\n [itemsPerPage]=\"contentsItemsPerPage$ | async\"\n [totalItems]=\"contentsTotalItems$ | async\"\n [currentPage]=\"contentsCurrentPage$ | async\"\n (pageChange)=\"setContentsPageNumber($event)\"\n (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\n >\n <vdr-dt2-search\n [searchTermControl]=\"filterTermControl\"\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', variant.productId]\"\n ><span>{{ variant.name }}</span\n ><clr-icon shape=\"arrow right\"\n /></a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n {{ variant.sku }}\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n</div>\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1683
1683
|
}
|
|
1684
1684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionContentsComponent, decorators: [{
|
|
1685
1685
|
type: Component,
|
|
1686
|
-
args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"table-wrapper\">\
|
|
1686
|
+
args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"table-wrapper\">\n <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\n <div class=\"header-title-row\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\n ></ng-container>\n </div>\n <vdr-data-table-2\n id=\"collection-contents\"\n [class.loading]=\"isLoading\"\n [items]=\"contents$ | async\"\n [itemsPerPage]=\"contentsItemsPerPage$ | async\"\n [totalItems]=\"contentsTotalItems$ | async\"\n [currentPage]=\"contentsCurrentPage$ | async\"\n (pageChange)=\"setContentsPageNumber($event)\"\n (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\n >\n <vdr-dt2-search\n [searchTermControl]=\"filterTermControl\"\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n <ng-template let-variant=\"item\">\n {{ variant.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', variant.productId]\"\n ><span>{{ variant.name }}</span\n ><clr-icon shape=\"arrow right\"\n /></a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\n <ng-template let-variant=\"item\">\n {{ variant.sku }}\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n</div>\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"] }]
|
|
1687
1687
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i1.DataService }], propDecorators: { collectionId: [{
|
|
1688
1688
|
type: Input
|
|
1689
1689
|
}], parentId: [{
|
|
@@ -1765,11 +1765,11 @@ class CollectionDataTableComponent extends DataTable2Component {
|
|
|
1765
1765
|
this.changeDetectorRef.markForCheck();
|
|
1766
1766
|
}
|
|
1767
1767
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionDataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1768
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionDataTableComponent, isStandalone: false, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n *ngIf=\"filters\"\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n <div class=\"bulk-actions\">\r\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n </div>\r\n <table class=\"\" [class.no-select]=\"disableSelect\">\r\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n <tr class=\"heading-row\">\r\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n <div class=\"flex\">\r\n <div class=\"drag-handle-spacer\"></div>\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n (change)=\"onToggleAllClick()\"\r\n />\r\n </div>\r\n </th>\r\n <th\r\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n [class.expand]=\"column.expand\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\r\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n </button>\r\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n </div>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"column-picker\">\r\n <vdr-data-table-colum-picker\r\n [uiLanguage]=\"uiLanguage$ | async\"\r\n [columns]=\"sortedColumns\"\r\n (reorder)=\"onColumnReorder($event)\"\r\n (resetColumns)=\"onColumnsReset()\"\r\n ></vdr-data-table-colum-picker>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n <th\r\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n class=\"filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n >\r\n <button\r\n class=\"button-ghost toggle-search-filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n (click)=\"toggleSearchFilterRow()\"\r\n [title]=\"'common.search-and-filter-list' | translate\"\r\n >\r\n <clr-icon shape=\"search\"></clr-icon>\r\n </button>\r\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n <ng-container *ngIf=\"filters\">\r\n <div class=\"filters\">\r\n <vdr-data-table-filters\r\n *ngFor=\"let activeFilter of filters.activeFilters\"\r\n [filterWithValue]=\"activeFilter\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-data-table-filters\r\n *ngIf=\"filters.length\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-add-filter-preset-button\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n ></vdr-add-filter-preset-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody\r\n cdkDropList\r\n cdkDropListLockAxis=\"y\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n [cdkDropListSortPredicate]=\"sortPredicate\"\r\n >\r\n <ng-container\r\n *ngFor=\"\r\n let item of items\r\n | paginate\r\n : {\r\n itemsPerPage: itemsPerPage,\r\n currentPage: currentPage,\r\n totalItems: totalItems,\r\n id: id,\r\n };\r\n index as i;\r\n trackBy: trackByFn.bind(this)\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"collectionRowTmp\"\r\n [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-container>\r\n <tr *ngIf=\"!items?.length\">\r\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n <vdr-items-per-page-controls\r\n *ngIf=\"totalItems\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n ></vdr-items-per-page-controls>\r\n <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n </div>\r\n\r\n <vdr-pagination-controls\r\n *ngIf=\"totalItems\"\r\n [id]=\"id\"\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n <td\r\n *ngIf=\"selectionManager\"\r\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n class=\"selection-col\"\r\n >\r\n <div class=\"flex\">\r\n <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n <clr-icon shape=\"drag-handle\"></clr-icon>\r\n </div>\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.isSelected(item)\"\r\n (click)=\"onRowClick(item, $event)\"\r\n />\r\n </div>\r\n </td>\r\n <td\r\n *ngFor=\"let column of visibleSortedColumns\"\r\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <ng-container\r\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n ></ng-container>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n </tr>\r\n <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n ></ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i1.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i1.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionDataTableComponent, isStandalone: false, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\n *ngIf=\"filters\"\n [filters]=\"filters\"\n [dataTableId]=\"id\"\n></vdr-data-table-filter-presets>\n<div class=\"table-wrapper\">\n <div class=\"bulk-actions\">\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n </div>\n <table class=\"\" [class.no-select]=\"disableSelect\">\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\n <tr class=\"heading-row\">\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\n <div class=\"flex\">\n <div class=\"drag-handle-spacer\"></div>\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n (change)=\"onToggleAllClick()\"\n />\n </div>\n </th>\n <th\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n [class.expand]=\"column.expand\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <vdr-ui-extension-point\n [locationId]=\"id\"\n [metadata]=\"column.id\"\n api=\"dataTable\"\n [topPx]=\"-6\"\n [leftPx]=\"-24\"\n display=\"block\"\n >\n <span>{{ column.heading }}</span>\n </vdr-ui-extension-point>\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n </button>\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n </div>\n </div>\n </th>\n <th>\n <div class=\"column-picker\">\n <vdr-data-table-colum-picker\n [uiLanguage]=\"uiLanguage$ | async\"\n [columns]=\"sortedColumns\"\n (reorder)=\"onColumnReorder($event)\"\n (resetColumns)=\"onColumnsReset()\"\n ></vdr-data-table-colum-picker>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n <th\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n class=\"filter-row\"\n [class.active]=\"showSearchFilterRow\"\n >\n <button\n class=\"button-ghost toggle-search-filter-row\"\n [class.active]=\"showSearchFilterRow\"\n (click)=\"toggleSearchFilterRow()\"\n [title]=\"'common.search-and-filter-list' | translate\"\n >\n <clr-icon shape=\"search\"></clr-icon>\n </button>\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n <ng-container *ngIf=\"filters\">\n <div class=\"filters\">\n <vdr-data-table-filters\n *ngFor=\"let activeFilter of filters.activeFilters\"\n [filterWithValue]=\"activeFilter\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-data-table-filters\n *ngIf=\"filters.length\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-add-filter-preset-button\n [filters]=\"filters\"\n [dataTableId]=\"id\"\n ></vdr-add-filter-preset-button>\n </div>\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody\n cdkDropList\n cdkDropListLockAxis=\"y\"\n (cdkDropListDropped)=\"onDrop($event)\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n >\n <ng-container\n *ngFor=\"\n let item of items\n | paginate\n : {\n itemsPerPage: itemsPerPage,\n currentPage: currentPage,\n totalItems: totalItems,\n id: id,\n };\n index as i;\n trackBy: trackByFn.bind(this)\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"collectionRowTmp\"\n [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\n ></ng-container>\n </ng-container>\n <ng-container>\n <tr *ngIf=\"!items?.length\">\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</div>\n<div class=\"table-footer\">\n <vdr-items-per-page-controls\n *ngIf=\"totalItems\"\n [itemsPerPage]=\"itemsPerPage\"\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\n ></vdr-items-per-page-controls>\n <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\n </div>\n\n <vdr-pagination-controls\n *ngIf=\"totalItems\"\n [id]=\"id\"\n [currentPage]=\"currentPage\"\n [itemsPerPage]=\"itemsPerPage\"\n [totalItems]=\"totalItems\"\n (pageChange)=\"pageChange.emit($event)\"\n ></vdr-pagination-controls>\n</div>\n\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\n <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\n <td\n *ngIf=\"selectionManager\"\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\n class=\"selection-col\"\n >\n <div class=\"flex\">\n <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\n <clr-icon shape=\"drag-handle\"></clr-icon>\n </div>\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.isSelected(item)\"\n (click)=\"onRowClick(item, $event)\"\n />\n </div>\n </td>\n <td\n *ngFor=\"let column of visibleSortedColumns\"\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <ng-container\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n >\n <ng-container\n *ngComponentOutlet=\"\n componentConfig.config.component;\n inputs: { rowItem: item };\n injector: componentConfig.injector\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultComponent>\n <ng-container\n *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\n ></ng-container>\n </ng-template>\n </div>\n </td>\n <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\n </tr>\n <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\n <ng-container\n *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i1.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i1.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1769
1769
|
}
|
|
1770
1770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionDataTableComponent, decorators: [{
|
|
1771
1771
|
type: Component,
|
|
1772
|
-
args: [{ selector: 'vdr-collection-data-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-data-table-filter-presets\r\n *ngIf=\"filters\"\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n <div class=\"bulk-actions\">\r\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n </div>\r\n <table class=\"\" [class.no-select]=\"disableSelect\">\r\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n <tr class=\"heading-row\">\r\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n <div class=\"flex\">\r\n <div class=\"drag-handle-spacer\"></div>\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n (change)=\"onToggleAllClick()\"\r\n />\r\n </div>\r\n </th>\r\n <th\r\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n [class.expand]=\"column.expand\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\r\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n </button>\r\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n </div>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"column-picker\">\r\n <vdr-data-table-colum-picker\r\n [uiLanguage]=\"uiLanguage$ | async\"\r\n [columns]=\"sortedColumns\"\r\n (reorder)=\"onColumnReorder($event)\"\r\n (resetColumns)=\"onColumnsReset()\"\r\n ></vdr-data-table-colum-picker>\r\n </div>\r\n </th>\r\n </tr>\r\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n <th\r\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n class=\"filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n >\r\n <button\r\n class=\"button-ghost toggle-search-filter-row\"\r\n [class.active]=\"showSearchFilterRow\"\r\n (click)=\"toggleSearchFilterRow()\"\r\n [title]=\"'common.search-and-filter-list' | translate\"\r\n >\r\n <clr-icon shape=\"search\"></clr-icon>\r\n </button>\r\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n <ng-container *ngIf=\"filters\">\r\n <div class=\"filters\">\r\n <vdr-data-table-filters\r\n *ngFor=\"let activeFilter of filters.activeFilters\"\r\n [filterWithValue]=\"activeFilter\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-data-table-filters\r\n *ngIf=\"filters.length\"\r\n [filters]=\"filters\"\r\n class=\"mt-1\"\r\n ></vdr-data-table-filters>\r\n <vdr-add-filter-preset-button\r\n [filters]=\"filters\"\r\n [dataTableId]=\"id\"\r\n ></vdr-add-filter-preset-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody\r\n cdkDropList\r\n cdkDropListLockAxis=\"y\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n [cdkDropListSortPredicate]=\"sortPredicate\"\r\n >\r\n <ng-container\r\n *ngFor=\"\r\n let item of items\r\n | paginate\r\n : {\r\n itemsPerPage: itemsPerPage,\r\n currentPage: currentPage,\r\n totalItems: totalItems,\r\n id: id,\r\n };\r\n index as i;\r\n trackBy: trackByFn.bind(this)\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"collectionRowTmp\"\r\n [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-container>\r\n <tr *ngIf=\"!items?.length\">\r\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n <vdr-items-per-page-controls\r\n *ngIf=\"totalItems\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n ></vdr-items-per-page-controls>\r\n <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n </div>\r\n\r\n <vdr-pagination-controls\r\n *ngIf=\"totalItems\"\r\n [id]=\"id\"\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n <td\r\n *ngIf=\"selectionManager\"\r\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n class=\"selection-col\"\r\n >\r\n <div class=\"flex\">\r\n <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n <clr-icon shape=\"drag-handle\"></clr-icon>\r\n </div>\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager?.isSelected(item)\"\r\n (click)=\"onRowClick(item, $event)\"\r\n />\r\n </div>\r\n </td>\r\n <td\r\n *ngFor=\"let column of visibleSortedColumns\"\r\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n >\r\n <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n <ng-container\r\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n ></ng-container>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n </tr>\r\n <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n ></ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"] }]
|
|
1772
|
+
args: [{ selector: 'vdr-collection-data-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-data-table-filter-presets\n *ngIf=\"filters\"\n [filters]=\"filters\"\n [dataTableId]=\"id\"\n></vdr-data-table-filter-presets>\n<div class=\"table-wrapper\">\n <div class=\"bulk-actions\">\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n </div>\n <table class=\"\" [class.no-select]=\"disableSelect\">\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\n <tr class=\"heading-row\">\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\n <div class=\"flex\">\n <div class=\"drag-handle-spacer\"></div>\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n (change)=\"onToggleAllClick()\"\n />\n </div>\n </th>\n <th\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n [class.expand]=\"column.expand\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <vdr-ui-extension-point\n [locationId]=\"id\"\n [metadata]=\"column.id\"\n api=\"dataTable\"\n [topPx]=\"-6\"\n [leftPx]=\"-24\"\n display=\"block\"\n >\n <span>{{ column.heading }}</span>\n </vdr-ui-extension-point>\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n </button>\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n </div>\n </div>\n </th>\n <th>\n <div class=\"column-picker\">\n <vdr-data-table-colum-picker\n [uiLanguage]=\"uiLanguage$ | async\"\n [columns]=\"sortedColumns\"\n (reorder)=\"onColumnReorder($event)\"\n (resetColumns)=\"onColumnsReset()\"\n ></vdr-data-table-colum-picker>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n <th\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n class=\"filter-row\"\n [class.active]=\"showSearchFilterRow\"\n >\n <button\n class=\"button-ghost toggle-search-filter-row\"\n [class.active]=\"showSearchFilterRow\"\n (click)=\"toggleSearchFilterRow()\"\n [title]=\"'common.search-and-filter-list' | translate\"\n >\n <clr-icon shape=\"search\"></clr-icon>\n </button>\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n <ng-container *ngIf=\"filters\">\n <div class=\"filters\">\n <vdr-data-table-filters\n *ngFor=\"let activeFilter of filters.activeFilters\"\n [filterWithValue]=\"activeFilter\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-data-table-filters\n *ngIf=\"filters.length\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-add-filter-preset-button\n [filters]=\"filters\"\n [dataTableId]=\"id\"\n ></vdr-add-filter-preset-button>\n </div>\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody\n cdkDropList\n cdkDropListLockAxis=\"y\"\n (cdkDropListDropped)=\"onDrop($event)\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n >\n <ng-container\n *ngFor=\"\n let item of items\n | paginate\n : {\n itemsPerPage: itemsPerPage,\n currentPage: currentPage,\n totalItems: totalItems,\n id: id,\n };\n index as i;\n trackBy: trackByFn.bind(this)\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"collectionRowTmp\"\n [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\n ></ng-container>\n </ng-container>\n <ng-container>\n <tr *ngIf=\"!items?.length\">\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</div>\n<div class=\"table-footer\">\n <vdr-items-per-page-controls\n *ngIf=\"totalItems\"\n [itemsPerPage]=\"itemsPerPage\"\n (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\n ></vdr-items-per-page-controls>\n <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\n {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\n </div>\n\n <vdr-pagination-controls\n *ngIf=\"totalItems\"\n [id]=\"id\"\n [currentPage]=\"currentPage\"\n [itemsPerPage]=\"itemsPerPage\"\n [totalItems]=\"totalItems\"\n (pageChange)=\"pageChange.emit($event)\"\n ></vdr-pagination-controls>\n</div>\n\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\n <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\n <td\n *ngIf=\"selectionManager\"\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\n class=\"selection-col\"\n >\n <div class=\"flex\">\n <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\n <clr-icon shape=\"drag-handle\"></clr-icon>\n </div>\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.isSelected(item)\"\n (click)=\"onRowClick(item, $event)\"\n />\n </div>\n </td>\n <td\n *ngFor=\"let column of visibleSortedColumns\"\n [class.active]=\"activeIndex === absoluteIndex[item.id]\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <ng-container\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n >\n <ng-container\n *ngComponentOutlet=\"\n componentConfig.config.component;\n inputs: { rowItem: item };\n injector: componentConfig.injector\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultComponent>\n <ng-container\n *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\n ></ng-container>\n </ng-template>\n </div>\n </td>\n <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\n </tr>\n <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\n <ng-container\n *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\n ></ng-container>\n </ng-container>\n</ng-template>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"] }]
|
|
1773
1773
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }], propDecorators: { subCollections: [{
|
|
1774
1774
|
type: Input
|
|
1775
1775
|
}], changeOrder: [{
|
|
@@ -1782,13 +1782,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
1782
1782
|
args: ['collectionRow', { read: CdkDrag }]
|
|
1783
1783
|
}] } });
|
|
1784
1784
|
|
|
1785
|
-
const COLLECTION_DETAIL_QUERY = gql `
|
|
1786
|
-
query CollectionDetailQuery($id: ID!) {
|
|
1787
|
-
collection(id: $id) {
|
|
1788
|
-
...Collection
|
|
1789
|
-
}
|
|
1790
|
-
}
|
|
1791
|
-
${COLLECTION_FRAGMENT}
|
|
1785
|
+
const COLLECTION_DETAIL_QUERY = gql `
|
|
1786
|
+
query CollectionDetailQuery($id: ID!) {
|
|
1787
|
+
collection(id: $id) {
|
|
1788
|
+
...Collection
|
|
1789
|
+
}
|
|
1790
|
+
}
|
|
1791
|
+
${COLLECTION_FRAGMENT}
|
|
1792
1792
|
`;
|
|
1793
1793
|
class CollectionDetailComponent extends TypedBaseDetailComponent {
|
|
1794
1794
|
constructor(changeDetector, dataService, formBuilder, notificationService, modalService, localStorageService) {
|
|
@@ -2019,11 +2019,11 @@ class CollectionDetailComponent extends TypedBaseDetailComponent {
|
|
|
2019
2019
|
}));
|
|
2020
2020
|
}
|
|
2021
2021
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2022
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionDetailComponent, isStandalone: false, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <vdr-language-selector\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"collection-detail\" />\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"updatePermission\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n <vdr-action-bar-dropdown-menu locationId=\"collection-detail\" />\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n formControlName=\"visible\"\r\n id=\"visibility\"\r\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n />\r\n <label class=\"visible-toggle\">\r\n <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n 'catalog.public' | translate\r\n }}</ng-container>\r\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n </label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"entity$ | async as entity\">\r\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block *ngIf=\"entity$ | async as entity\"\r\n ><nav role=\"navigation\">\r\n <ul class=\"collection-breadcrumbs\">\r\n <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\r\n <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\r\n 'catalog.root-collection' | translate\r\n }}</a>\r\n <a\r\n [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\r\n *ngIf=\"!isFirst && !isLast\"\r\n >{{ breadcrumb.name | translate }}</a\r\n >\r\n <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n </li>\r\n </ul>\r\n </nav>\r\n </vdr-page-block>\r\n\r\n <vdr-page-block>\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n (input)=\"updateSlug($event.target.value)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'catalog.slug' | translate\"\r\n for=\"slug\"\r\n [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n >\r\n <input\r\n id=\"slug\"\r\n type=\"text\"\r\n formControlName=\"slug\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n class=\"form-grid-span\"\r\n [label]=\"'common.description' | translate\"\r\n for=\"slug\"\r\n >\r\n <vdr-rich-text-editor\r\n formControlName=\"description\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-rich-text-editor>\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card\r\n formGroupName=\"customFields\"\r\n *ngIf=\"customFields.length\"\r\n [title]=\"'common.custom-fields' | translate\"\r\n >\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Collection\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"collection-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"entity?.assets\"\r\n [featuredAsset]=\"entity?.featuredAsset\"\r\n [updatePermissions]=\"updatePermission\"\r\n (change)=\"assetChanges = $event\"\r\n ></vdr-assets>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.filters' | translate\">\r\n <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n formControlName=\"inheritFilters\"\r\n id=\"inheritFilters\"\r\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n />\r\n <label class=\"visible-toggle\">\r\n <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n 'catalog.inherit-filters-from-parent' | translate\r\n }}</ng-container>\r\n <ng-template #noInherit>{{\r\n 'catalog.do-not-inherit-filters' | translate\r\n }}</ng-template>\r\n </label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n <div formArrayName=\"filters\">\r\n <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\r\n <vdr-configurable-input\r\n (remove)=\"removeFilter(i)\"\r\n [position]=\"i\"\r\n [operation]=\"filter\"\r\n [operationDefinition]=\"getFilterDefinition(filter)\"\r\n [formControlName]=\"i\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-configurable-input>\r\n </ng-container>\r\n </div>\r\n <div *vdrIfPermissions=\"updatePermission\">\r\n <vdr-dropdown>\r\n <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n <span>{{ 'marketing.add-condition' | translate }}</span>\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n <button\r\n *ngFor=\"let filter of allFilters\"\r\n type=\"button\"\r\n vdrDropdownItem\r\n (click)=\"addFilter(filter)\"\r\n >\r\n {{ filter.description }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </vdr-card>\r\n\r\n <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\r\n <vdr-collection-contents\r\n [collectionId]=\"id\"\r\n [parentId]=\"parentId$ | async\"\r\n [updatedFilters]=\"updatedFilters$ | async\"\r\n [inheritFilters]=\"inheritFilters$ | async\"\r\n [previewUpdatedFilters]=\"livePreview\"\r\n #collectionContents\r\n >\r\n <ng-template let-count>\r\n <div class=\"ml-3\">\r\n <div class=\"contents-title\">\r\n {{ 'catalog.collection-contents' | translate }} ({{\r\n 'common.results-count' | translate : { count: count }\r\n }})\r\n </div>\r\n <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [disabled]=\"detailForm.get('filters')?.pristine\"\r\n [ngModel]=\"livePreview\"\r\n (ngModelChange)=\"toggleLivePreview()\"\r\n />\r\n <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n </ng-template>\r\n </vdr-collection-contents>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: 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.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { 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: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2022
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionDetailComponent, isStandalone: false, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"collection-detail\" />\n <button\n class=\"btn btn-primary\"\n *ngIf=\"isNew$ | async; else updateButton\"\n (click)=\"create()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.create' | translate }}\n </button>\n <ng-template #updateButton>\n <button\n *vdrIfPermissions=\"updatePermission\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\n >\n {{ 'common.update' | translate }}\n </button>\n </ng-template>\n <vdr-action-bar-dropdown-menu locationId=\"collection-detail\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar>\n <vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n formControlName=\"visible\"\n id=\"visibility\"\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n />\n <label class=\"visible-toggle\">\n <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\n 'catalog.public' | translate\n }}</ng-container>\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\n </label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <vdr-card *ngIf=\"entity$ | async as entity\">\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block *ngIf=\"entity$ | async as entity\"\n ><nav role=\"navigation\">\n <ul class=\"collection-breadcrumbs\">\n <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\n <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\n 'catalog.root-collection' | translate\n }}</a>\n <a\n [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\n *ngIf=\"!isFirst && !isLast\"\n >{{ breadcrumb.name | translate }}</a\n >\n <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\n </li>\n </ul>\n </nav>\n </vdr-page-block>\n\n <vdr-page-block>\n <vdr-card>\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n (input)=\"updateSlug($event.target.value)\"\n />\n </vdr-form-field>\n <vdr-form-field\n [label]=\"'catalog.slug' | translate\"\n for=\"slug\"\n [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\n >\n <input\n id=\"slug\"\n type=\"text\"\n formControlName=\"slug\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field\n class=\"form-grid-span\"\n [label]=\"'common.description' | translate\"\n for=\"slug\"\n >\n <vdr-rich-text-editor\n formControlName=\"description\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-rich-text-editor>\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card\n formGroupName=\"customFields\"\n *ngIf=\"customFields.length\"\n [title]=\"'common.custom-fields' | translate\"\n >\n <vdr-tabbed-custom-fields\n entityName=\"Collection\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </vdr-card>\n <vdr-custom-detail-component-host\n locationId=\"collection-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n ></vdr-custom-detail-component-host>\n <vdr-card [title]=\"'catalog.assets' | translate\">\n <vdr-assets\n [assets]=\"entity?.assets\"\n [featuredAsset]=\"entity?.featuredAsset\"\n [updatePermissions]=\"updatePermission\"\n (change)=\"assetChanges = $event\"\n ></vdr-assets>\n </vdr-card>\n <vdr-card [title]=\"'catalog.filters' | translate\">\n <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n formControlName=\"inheritFilters\"\n id=\"inheritFilters\"\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n />\n <label class=\"visible-toggle\">\n <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\n 'catalog.inherit-filters-from-parent' | translate\n }}</ng-container>\n <ng-template #noInherit>{{\n 'catalog.do-not-inherit-filters' | translate\n }}</ng-template>\n </label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n <div formArrayName=\"filters\">\n <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\n <vdr-configurable-input\n (remove)=\"removeFilter(i)\"\n [position]=\"i\"\n [operation]=\"filter\"\n [operationDefinition]=\"getFilterDefinition(filter)\"\n [formControlName]=\"i\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-configurable-input>\n </ng-container>\n </div>\n <div *vdrIfPermissions=\"updatePermission\">\n <vdr-dropdown>\n <button class=\"btn btn-outline\" vdrDropdownTrigger>\n <clr-icon shape=\"plus\"></clr-icon>\n <span>{{ 'marketing.add-condition' | translate }}</span>\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n <button\n *ngFor=\"let filter of allFilters\"\n type=\"button\"\n vdrDropdownItem\n (click)=\"addFilter(filter)\"\n >\n {{ filter.description }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n </vdr-card>\n\n <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\n <vdr-collection-contents\n [collectionId]=\"id\"\n [parentId]=\"parentId$ | async\"\n [updatedFilters]=\"updatedFilters$ | async\"\n [inheritFilters]=\"inheritFilters$ | async\"\n [previewUpdatedFilters]=\"livePreview\"\n #collectionContents\n >\n <ng-template let-count>\n <div class=\"ml-3\">\n <div class=\"contents-title\">\n {{ 'catalog.collection-contents' | translate }} ({{\n 'common.results-count' | translate : { count: count }\n }})\n </div>\n <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"detailForm.get('filters')?.pristine\"\n [ngModel]=\"livePreview\"\n (ngModelChange)=\"toggleLivePreview()\"\n />\n <label>{{ 'catalog.live-preview-contents' | translate }}</label>\n </clr-checkbox-wrapper>\n </div>\n </ng-template>\n </vdr-collection-contents>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: 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.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { 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: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2023
2023
|
}
|
|
2024
2024
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionDetailComponent, decorators: [{
|
|
2025
2025
|
type: Component,
|
|
2026
|
-
args: [{ selector: 'vdr-collection-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <vdr-language-selector\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"collection-detail\" />\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"updatePermission\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n <vdr-action-bar-dropdown-menu locationId=\"collection-detail\" />\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n formControlName=\"visible\"\r\n id=\"visibility\"\r\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n />\r\n <label class=\"visible-toggle\">\r\n <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n 'catalog.public' | translate\r\n }}</ng-container>\r\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n </label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"entity$ | async as entity\">\r\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block *ngIf=\"entity$ | async as entity\"\r\n ><nav role=\"navigation\">\r\n <ul class=\"collection-breadcrumbs\">\r\n <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\r\n <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\r\n 'catalog.root-collection' | translate\r\n }}</a>\r\n <a\r\n [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\r\n *ngIf=\"!isFirst && !isLast\"\r\n >{{ breadcrumb.name | translate }}</a\r\n >\r\n <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n </li>\r\n </ul>\r\n </nav>\r\n </vdr-page-block>\r\n\r\n <vdr-page-block>\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n (input)=\"updateSlug($event.target.value)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'catalog.slug' | translate\"\r\n for=\"slug\"\r\n [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n >\r\n <input\r\n id=\"slug\"\r\n type=\"text\"\r\n formControlName=\"slug\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n class=\"form-grid-span\"\r\n [label]=\"'common.description' | translate\"\r\n for=\"slug\"\r\n >\r\n <vdr-rich-text-editor\r\n formControlName=\"description\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-rich-text-editor>\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card\r\n formGroupName=\"customFields\"\r\n *ngIf=\"customFields.length\"\r\n [title]=\"'common.custom-fields' | translate\"\r\n >\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Collection\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"collection-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"entity?.assets\"\r\n [featuredAsset]=\"entity?.featuredAsset\"\r\n [updatePermissions]=\"updatePermission\"\r\n (change)=\"assetChanges = $event\"\r\n ></vdr-assets>\r\n </vdr-card>\r\n <vdr-card [title]=\"'catalog.filters' | translate\">\r\n <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n formControlName=\"inheritFilters\"\r\n id=\"inheritFilters\"\r\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n />\r\n <label class=\"visible-toggle\">\r\n <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n 'catalog.inherit-filters-from-parent' | translate\r\n }}</ng-container>\r\n <ng-template #noInherit>{{\r\n 'catalog.do-not-inherit-filters' | translate\r\n }}</ng-template>\r\n </label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n <div formArrayName=\"filters\">\r\n <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\r\n <vdr-configurable-input\r\n (remove)=\"removeFilter(i)\"\r\n [position]=\"i\"\r\n [operation]=\"filter\"\r\n [operationDefinition]=\"getFilterDefinition(filter)\"\r\n [formControlName]=\"i\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-configurable-input>\r\n </ng-container>\r\n </div>\r\n <div *vdrIfPermissions=\"updatePermission\">\r\n <vdr-dropdown>\r\n <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n <span>{{ 'marketing.add-condition' | translate }}</span>\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n <button\r\n *ngFor=\"let filter of allFilters\"\r\n type=\"button\"\r\n vdrDropdownItem\r\n (click)=\"addFilter(filter)\"\r\n >\r\n {{ filter.description }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </vdr-card>\r\n\r\n <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\r\n <vdr-collection-contents\r\n [collectionId]=\"id\"\r\n [parentId]=\"parentId$ | async\"\r\n [updatedFilters]=\"updatedFilters$ | async\"\r\n [inheritFilters]=\"inheritFilters$ | async\"\r\n [previewUpdatedFilters]=\"livePreview\"\r\n #collectionContents\r\n >\r\n <ng-template let-count>\r\n <div class=\"ml-3\">\r\n <div class=\"contents-title\">\r\n {{ 'catalog.collection-contents' | translate }} ({{\r\n 'common.results-count' | translate : { count: count }\r\n }})\r\n </div>\r\n <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [disabled]=\"detailForm.get('filters')?.pristine\"\r\n [ngModel]=\"livePreview\"\r\n (ngModelChange)=\"toggleLivePreview()\"\r\n />\r\n <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n </ng-template>\r\n </vdr-collection-contents>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"] }]
|
|
2026
|
+
args: [{ selector: 'vdr-collection-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"collection-detail\" />\n <button\n class=\"btn btn-primary\"\n *ngIf=\"isNew$ | async; else updateButton\"\n (click)=\"create()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.create' | translate }}\n </button>\n <ng-template #updateButton>\n <button\n *vdrIfPermissions=\"updatePermission\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\n >\n {{ 'common.update' | translate }}\n </button>\n </ng-template>\n <vdr-action-bar-dropdown-menu locationId=\"collection-detail\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar>\n <vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n formControlName=\"visible\"\n id=\"visibility\"\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n />\n <label class=\"visible-toggle\">\n <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\n 'catalog.public' | translate\n }}</ng-container>\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\n </label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <vdr-card *ngIf=\"entity$ | async as entity\">\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block *ngIf=\"entity$ | async as entity\"\n ><nav role=\"navigation\">\n <ul class=\"collection-breadcrumbs\">\n <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\n <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\n 'catalog.root-collection' | translate\n }}</a>\n <a\n [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\n *ngIf=\"!isFirst && !isLast\"\n >{{ breadcrumb.name | translate }}</a\n >\n <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\n </li>\n </ul>\n </nav>\n </vdr-page-block>\n\n <vdr-page-block>\n <vdr-card>\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n (input)=\"updateSlug($event.target.value)\"\n />\n </vdr-form-field>\n <vdr-form-field\n [label]=\"'catalog.slug' | translate\"\n for=\"slug\"\n [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\n >\n <input\n id=\"slug\"\n type=\"text\"\n formControlName=\"slug\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field\n class=\"form-grid-span\"\n [label]=\"'common.description' | translate\"\n for=\"slug\"\n >\n <vdr-rich-text-editor\n formControlName=\"description\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-rich-text-editor>\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card\n formGroupName=\"customFields\"\n *ngIf=\"customFields.length\"\n [title]=\"'common.custom-fields' | translate\"\n >\n <vdr-tabbed-custom-fields\n entityName=\"Collection\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </vdr-card>\n <vdr-custom-detail-component-host\n locationId=\"collection-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n ></vdr-custom-detail-component-host>\n <vdr-card [title]=\"'catalog.assets' | translate\">\n <vdr-assets\n [assets]=\"entity?.assets\"\n [featuredAsset]=\"entity?.featuredAsset\"\n [updatePermissions]=\"updatePermission\"\n (change)=\"assetChanges = $event\"\n ></vdr-assets>\n </vdr-card>\n <vdr-card [title]=\"'catalog.filters' | translate\">\n <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n formControlName=\"inheritFilters\"\n id=\"inheritFilters\"\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n />\n <label class=\"visible-toggle\">\n <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\n 'catalog.inherit-filters-from-parent' | translate\n }}</ng-container>\n <ng-template #noInherit>{{\n 'catalog.do-not-inherit-filters' | translate\n }}</ng-template>\n </label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n <div formArrayName=\"filters\">\n <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\n <vdr-configurable-input\n (remove)=\"removeFilter(i)\"\n [position]=\"i\"\n [operation]=\"filter\"\n [operationDefinition]=\"getFilterDefinition(filter)\"\n [formControlName]=\"i\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-configurable-input>\n </ng-container>\n </div>\n <div *vdrIfPermissions=\"updatePermission\">\n <vdr-dropdown>\n <button class=\"btn btn-outline\" vdrDropdownTrigger>\n <clr-icon shape=\"plus\"></clr-icon>\n <span>{{ 'marketing.add-condition' | translate }}</span>\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n <button\n *ngFor=\"let filter of allFilters\"\n type=\"button\"\n vdrDropdownItem\n (click)=\"addFilter(filter)\"\n >\n {{ filter.description }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n </vdr-card>\n\n <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\n <vdr-collection-contents\n [collectionId]=\"id\"\n [parentId]=\"parentId$ | async\"\n [updatedFilters]=\"updatedFilters$ | async\"\n [inheritFilters]=\"inheritFilters$ | async\"\n [previewUpdatedFilters]=\"livePreview\"\n #collectionContents\n >\n <ng-template let-count>\n <div class=\"ml-3\">\n <div class=\"contents-title\">\n {{ 'catalog.collection-contents' | translate }} ({{\n 'common.results-count' | translate : { count: count }\n }})\n </div>\n <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"detailForm.get('filters')?.pristine\"\n [ngModel]=\"livePreview\"\n (ngModelChange)=\"toggleLivePreview()\"\n />\n <label>{{ 'catalog.live-preview-contents' | translate }}</label>\n </clr-checkbox-wrapper>\n </div>\n </ng-template>\n </vdr-collection-contents>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"] }]
|
|
2027
2027
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2.FormBuilder }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: i1.LocalStorageService }], propDecorators: { contentsComponent: [{
|
|
2028
2028
|
type: ViewChild,
|
|
2029
2029
|
args: ['collectionContents']
|
|
@@ -2129,11 +2129,11 @@ class MoveCollectionsDialogComponent {
|
|
|
2129
2129
|
this.expandedIds$.next(expandedIds);
|
|
2130
2130
|
}
|
|
2131
2131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MoveCollectionsDialogComponent, deps: [{ token: i1.DataService }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: MoveCollectionsDialogComponent, isStandalone: false, selector: "vdr-move-collections-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
2132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: MoveCollectionsDialogComponent, isStandalone: false, selector: "vdr-move-collections-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.move-collections' | translate }}\n</ng-template>\n<vdr-collection-data-table\n class=\"mt-2\"\n id=\"move-collection-list\"\n [items]=\"items$ | async\"\n [subCollections]=\"subCollections$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n (pageChange)=\"currentPage$.next($event)\"\n (itemsPerPageChange)=\"itemsPerPage$.next($event)\"\n>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n ></vdr-dt2-search>\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-collection=\"item\">\n {{ collection.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-collection=\"item\" let-depth=\"depth\">\n <div [ngClass]=\"'indent-' + depth\"></div>\n <clr-icon\n class=\"child-arrow\"\n [class.transparent]=\"depth === 0\"\n shape=\"child-arrow\"\n *ngIf=\"!collection.children?.length && collection.parentId !== '__'\"\n ></clr-icon>\n <button\n class=\"icon-button folder-button\"\n *ngIf=\"collection.children?.length\"\n (click)=\"toggleExpanded(collection)\"\n >\n <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\n <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\n </button>\n <button class=\"icon-button folder-button\" *ngIf=\"collection.parentId === '__'\" disabled>\n <clr-icon shape=\"folder\" class=\"is-solid\"></clr-icon>\n </button>\n <button class=\"button-ghost\" (click)=\"resolveWith(collection)\">\n <span>{{ 'catalog.move-collection-to' | translate : {name: collection.name} }}</span>\n </button>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\n <ng-template let-collection=\"item\">\n <div class=\"breadcrumb\">\n <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\n <ng-container *ngIf=\"breadcrumbs.length\">\n <div *ngFor=\"let item of breadcrumbs\">\n <span class=\"separator\">/</span>{{ item.name }}\n </div>\n </ng-container>\n <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\n </ng-container>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\">\n <ng-template let-collection=\"item\">\n {{ collection.slug }}\n </ng-template>\n </vdr-dt2-column>\n</vdr-collection-data-table>\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2133
2133
|
}
|
|
2134
2134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MoveCollectionsDialogComponent, decorators: [{
|
|
2135
2135
|
type: Component,
|
|
2136
|
-
args: [{ selector: 'vdr-move-collections-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
2136
|
+
args: [{ selector: 'vdr-move-collections-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.move-collections' | translate }}\n</ng-template>\n<vdr-collection-data-table\n class=\"mt-2\"\n id=\"move-collection-list\"\n [items]=\"items$ | async\"\n [subCollections]=\"subCollections$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n (pageChange)=\"currentPage$.next($event)\"\n (itemsPerPageChange)=\"itemsPerPage$.next($event)\"\n>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n ></vdr-dt2-search>\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-collection=\"item\">\n {{ collection.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\n <ng-template let-collection=\"item\" let-depth=\"depth\">\n <div [ngClass]=\"'indent-' + depth\"></div>\n <clr-icon\n class=\"child-arrow\"\n [class.transparent]=\"depth === 0\"\n shape=\"child-arrow\"\n *ngIf=\"!collection.children?.length && collection.parentId !== '__'\"\n ></clr-icon>\n <button\n class=\"icon-button folder-button\"\n *ngIf=\"collection.children?.length\"\n (click)=\"toggleExpanded(collection)\"\n >\n <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\n <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\n </button>\n <button class=\"icon-button folder-button\" *ngIf=\"collection.parentId === '__'\" disabled>\n <clr-icon shape=\"folder\" class=\"is-solid\"></clr-icon>\n </button>\n <button class=\"button-ghost\" (click)=\"resolveWith(collection)\">\n <span>{{ 'catalog.move-collection-to' | translate : {name: collection.name} }}</span>\n </button>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\n <ng-template let-collection=\"item\">\n <div class=\"breadcrumb\">\n <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\n <ng-container *ngIf=\"breadcrumbs.length\">\n <div *ngFor=\"let item of breadcrumbs\">\n <span class=\"separator\">/</span>{{ item.name }}\n </div>\n </ng-container>\n <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\n </ng-container>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\">\n <ng-template let-collection=\"item\">\n {{ collection.slug }}\n </ng-template>\n </vdr-dt2-column>\n</vdr-collection-data-table>\n", styles: [":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"] }]
|
|
2137
2137
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1.I18nService }] });
|
|
2138
2138
|
|
|
2139
2139
|
const deleteCollectionsBulkAction = createBulkDeleteAction({
|
|
@@ -2365,11 +2365,11 @@ class CollectionListComponent extends TypedBaseListComponent {
|
|
|
2365
2365
|
});
|
|
2366
2366
|
}
|
|
2367
2367
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionListComponent, isStandalone: false, selector: "vdr-collection-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <vdr-language-selector\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"contentLanguage$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"collection-list\" />\r\n <a\r\n class=\"btn btn-primary\"\r\n *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n [routerLink]=\"['./create']\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.create-new-collection' | translate }}\r\n </a>\r\n <vdr-action-bar-dropdown-menu locationId=\"collection-list\" />\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\r\n <ng-template vdrSplitViewLeft>\r\n <vdr-collection-data-table\r\n class=\"mt-2\"\r\n [id]=\"dataTableListId\"\r\n [items]=\"items$ | async\"\r\n [subCollections]=\"subCollections$ | async\"\r\n [itemsPerPage]=\"itemsPerPage$ | async\"\r\n [totalItems]=\"totalItems$ | async\"\r\n [currentPage]=\"currentPage$ | async\"\r\n [filters]=\"filters\"\r\n [activeIndex]=\"activeCollectionIndex$ | async\"\r\n (pageChange)=\"setPageNumber($event)\"\r\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n (changeOrder)=\"onRearrange($event)\"\r\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n >\r\n <vdr-bulk-action-menu\r\n locationId=\"collection-list\"\r\n [hostComponent]=\"this\"\r\n [selectionManager]=\"selectionManager\"\r\n ></vdr-bulk-action-menu>\r\n <vdr-dt2-search\r\n [searchTermControl]=\"searchTermControl\"\r\n [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n ></vdr-dt2-search>\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-collection=\"item\">\r\n {{ collection.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n [hiddenByDefault]=\"true\"\r\n [sort]=\"sorts.get('createdAt')\"\r\n >\r\n <ng-template let-collection=\"item\">\r\n {{ collection.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n [hiddenByDefault]=\"true\"\r\n [sort]=\"sorts.get('updatedAt')\"\r\n >\r\n <ng-template let-collection=\"item\">\r\n {{ collection.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.position' | translate\" id=\"position\"\r\n [hiddenByDefault]=\"true\"\r\n [sort]=\"sorts.get('position')\"\r\n >\r\n <ng-template let-collection=\"item\">\r\n {{ collection.position }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.name' | translate\" id=\"name\"\r\n [optional]=\"false\"\r\n [sort]=\"sorts.get('name')\"\r\n >\r\n <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n <div [ngClass]=\"'indent-' + depth\"></div>\r\n <clr-icon\r\n class=\"child-arrow\"\r\n [class.transparent]=\"depth === 0\"\r\n shape=\"child-arrow\"\r\n *ngIf=\"!collection.children?.length\"\r\n ></clr-icon>\r\n <button\r\n class=\"icon-button folder-button\"\r\n *ngIf=\"collection.children?.length\"\r\n (click)=\"toggleExpanded(collection)\"\r\n >\r\n <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n </button>\r\n <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\r\n ><span>{{ collection.name }}</span>\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\r\n <ng-template let-collection=\"item\">\r\n <div class=\"breadcrumb\">\r\n <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n <ng-container *ngIf=\"breadcrumbs.length\">\r\n <div *ngFor=\"let item of breadcrumbs\">\r\n <span class=\"separator\">/</span>{{ item.name }}\r\n </div>\r\n </ng-container>\r\n <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n <ng-template let-collection=\"item\">\r\n {{ collection.slug }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\r\n <ng-template let-collection=\"item\">\r\n <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\r\n 'common.private' | translate\r\n }}</vdr-chip>\r\n <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\r\n 'common.public' | translate\r\n }}</vdr-chip>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n <ng-template let-collection=\"item\">\r\n <a\r\n class=\"button-small bg-weight-150\"\r\n [routerLink]=\"['./', { contents: collection.id }]\"\r\n [queryParams]=\"{ contentsPage: 1 }\"\r\n queryParamsHandling=\"merge\"\r\n >\r\n <span>{{ 'common.view-contents' | translate }}</span>\r\n <clr-icon shape=\"file-group\"></clr-icon>\r\n </a>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of customFields\"\r\n [customField]=\"customField\"\r\n [sorts]=\"sorts\"\r\n />\r\n </vdr-collection-data-table>\r\n </ng-template>\r\n <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\r\n <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\r\n <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\r\n </ng-container>\r\n </ng-template>\r\n</vdr-split-view>\r\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionListComponent, isStandalone: false, selector: "vdr-collection-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"collection-list\" />\n <a\n class=\"btn btn-primary\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\n [routerLink]=\"['./create']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-collection' | translate }}\n </a>\n <vdr-action-bar-dropdown-menu locationId=\"collection-list\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\n <ng-template vdrSplitViewLeft>\n <vdr-collection-data-table\n class=\"mt-2\"\n [id]=\"dataTableListId\"\n [items]=\"items$ | async\"\n [subCollections]=\"subCollections$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n [activeIndex]=\"activeCollectionIndex$ | async\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n (changeOrder)=\"onRearrange($event)\"\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\n >\n <vdr-bulk-action-menu\n locationId=\"collection-list\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n ></vdr-bulk-action-menu>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n ></vdr-dt2-search>\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-collection=\"item\">\n {{ collection.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-collection=\"item\">\n {{ collection.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-collection=\"item\">\n {{ collection.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.position' | translate\" id=\"position\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('position')\"\n >\n <ng-template let-collection=\"item\">\n {{ collection.position }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.name' | translate\" id=\"name\"\n [optional]=\"false\"\n [sort]=\"sorts.get('name')\"\n >\n <ng-template let-collection=\"item\" let-depth=\"depth\">\n <div [ngClass]=\"'indent-' + depth\"></div>\n <clr-icon\n class=\"child-arrow\"\n [class.transparent]=\"depth === 0\"\n shape=\"child-arrow\"\n *ngIf=\"!collection.children?.length\"\n ></clr-icon>\n <button\n class=\"icon-button folder-button\"\n *ngIf=\"collection.children?.length\"\n (click)=\"toggleExpanded(collection)\"\n >\n <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\n <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\n </button>\n <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\n ><span>{{ collection.name }}</span>\n <clr-icon shape=\"arrow right\"></clr-icon>\n </a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\n <ng-template let-collection=\"item\">\n <div class=\"breadcrumb\">\n <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\n <ng-container *ngIf=\"breadcrumbs.length\">\n <div *ngFor=\"let item of breadcrumbs\">\n <span class=\"separator\">/</span>{{ item.name }}\n </div>\n </ng-container>\n <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\n </ng-container>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\n <ng-template let-collection=\"item\">\n {{ collection.slug }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\n <ng-template let-collection=\"item\">\n <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\n 'common.private' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\n 'common.public' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\n <ng-template let-collection=\"item\">\n <a\n class=\"button-small bg-weight-150\"\n [routerLink]=\"['./', { contents: collection.id }]\"\n [queryParams]=\"{ contentsPage: 1 }\"\n queryParamsHandling=\"merge\"\n >\n <span>{{ 'common.view-contents' | translate }}</span>\n <clr-icon shape=\"file-group\"></clr-icon>\n </a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of customFields\"\n [customField]=\"customField\"\n [sorts]=\"sorts\"\n />\n </vdr-collection-data-table>\n </ng-template>\n <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\n <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\n <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\n </ng-container>\n </ng-template>\n</vdr-split-view>\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2369
2369
|
}
|
|
2370
2370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionListComponent, decorators: [{
|
|
2371
2371
|
type: Component,
|
|
2372
|
-
args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\
|
|
2372
|
+
args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"collection-list\" />\n <a\n class=\"btn btn-primary\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\n [routerLink]=\"['./create']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-collection' | translate }}\n </a>\n <vdr-action-bar-dropdown-menu locationId=\"collection-list\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\n <ng-template vdrSplitViewLeft>\n <vdr-collection-data-table\n class=\"mt-2\"\n [id]=\"dataTableListId\"\n [items]=\"items$ | async\"\n [subCollections]=\"subCollections$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n [activeIndex]=\"activeCollectionIndex$ | async\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n (changeOrder)=\"onRearrange($event)\"\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\n >\n <vdr-bulk-action-menu\n locationId=\"collection-list\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n ></vdr-bulk-action-menu>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n ></vdr-dt2-search>\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n <ng-template let-collection=\"item\">\n {{ collection.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-collection=\"item\">\n {{ collection.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-collection=\"item\">\n {{ collection.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.position' | translate\" id=\"position\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('position')\"\n >\n <ng-template let-collection=\"item\">\n {{ collection.position }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.name' | translate\" id=\"name\"\n [optional]=\"false\"\n [sort]=\"sorts.get('name')\"\n >\n <ng-template let-collection=\"item\" let-depth=\"depth\">\n <div [ngClass]=\"'indent-' + depth\"></div>\n <clr-icon\n class=\"child-arrow\"\n [class.transparent]=\"depth === 0\"\n shape=\"child-arrow\"\n *ngIf=\"!collection.children?.length\"\n ></clr-icon>\n <button\n class=\"icon-button folder-button\"\n *ngIf=\"collection.children?.length\"\n (click)=\"toggleExpanded(collection)\"\n >\n <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\n <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\n </button>\n <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\n ><span>{{ collection.name }}</span>\n <clr-icon shape=\"arrow right\"></clr-icon>\n </a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\n <ng-template let-collection=\"item\">\n <div class=\"breadcrumb\">\n <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\n <ng-container *ngIf=\"breadcrumbs.length\">\n <div *ngFor=\"let item of breadcrumbs\">\n <span class=\"separator\">/</span>{{ item.name }}\n </div>\n </ng-container>\n <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\n </ng-container>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\n <ng-template let-collection=\"item\">\n {{ collection.slug }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\n <ng-template let-collection=\"item\">\n <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\n 'common.private' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\n 'common.public' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\n <ng-template let-collection=\"item\">\n <a\n class=\"button-small bg-weight-150\"\n [routerLink]=\"['./', { contents: collection.id }]\"\n [queryParams]=\"{ contentsPage: 1 }\"\n queryParamsHandling=\"merge\"\n >\n <span>{{ 'common.view-contents' | translate }}</span>\n <clr-icon shape=\"file-group\"></clr-icon>\n </a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of customFields\"\n [customField]=\"customField\"\n [sorts]=\"sorts\"\n />\n </vdr-collection-data-table>\n </ng-template>\n <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\n <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\n <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\n </ng-container>\n </ng-template>\n</vdr-split-view>\n", styles: [":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"] }]
|
|
2373
2373
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }] });
|
|
2374
2374
|
|
|
2375
2375
|
/**
|
|
@@ -2531,11 +2531,11 @@ class CollectionTreeNodeComponent {
|
|
|
2531
2531
|
this.collectionTreeService.onDelete(id);
|
|
2532
2532
|
}
|
|
2533
2533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionTreeNodeComponent, deps: [{ token: CollectionTreeNodeComponent, optional: true, skipSelf: true }, { token: i1.DataService }, { token: CollectionTreeService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionTreeNodeComponent, isStandalone: false, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll", selectionManager: "selectionManager" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n cdkDropList\r\n class=\"tree-node\"\r\n #dropList\r\n [cdkDropListData]=\"collectionTree\"\r\n [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n <div\r\n class=\"collection\"\r\n [class.private]=\"collection.isPrivate\"\r\n *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n cdkDrag\r\n [cdkDragData]=\"collection\"\r\n >\r\n <div\r\n class=\"collection-detail\"\r\n [ngClass]=\"'depth-' + depth\"\r\n [class.active]=\"collection.id === activeCollectionId\"\r\n >\r\n <div>\r\n <input\r\n type=\"checkbox\"\r\n clrCheckbox\r\n [checked]=\"selectionManager.isSelected(collection)\"\r\n (click)=\"selectionManager.toggleSelection(collection, $event)\"\r\n />\r\n </div>\r\n <div class=\"name\">\r\n <button\r\n class=\"icon-button folder-button\"\r\n [disabled]=\"expandAll\"\r\n *ngIf=\"collection.children?.length; else folderSpacer\"\r\n (click)=\"toggleExpanded(collection)\"\r\n >\r\n <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n </button>\r\n <ng-template #folderSpacer>\r\n <div class=\"folder-button-spacer\"></div>\r\n </ng-template>\r\n {{ collection.name }}\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n <a\r\n class=\"btn btn-link btn-sm\"\r\n [routerLink]=\"['./', { contents: collection.id }]\"\r\n queryParamsHandling=\"preserve\"\r\n >\r\n <clr-icon shape=\"view-list\"></clr-icon>\r\n {{ 'catalog.view-contents' | translate }}\r\n </a>\r\n <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n </a>\r\n <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n </div>\r\n <vdr-dropdown>\r\n <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n <a\r\n class=\"dropdown-item\"\r\n [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'catalog.create-new-collection' | translate }}\r\n </a>\r\n <div class=\"dropdown-divider\"></div>\r\n <button\r\n type=\"button\"\r\n vdrDropdownItem\r\n [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n (click)=\"moveUp(collection, i)\"\r\n >\r\n <clr-icon shape=\"caret up\"></clr-icon>\r\n {{ 'catalog.move-up' | translate }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n vdrDropdownItem\r\n [disabled]=\"\r\n i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n \"\r\n (click)=\"moveDown(collection, i)\"\r\n >\r\n <clr-icon shape=\"caret down\"></clr-icon>\r\n {{ 'catalog.move-down' | translate }}\r\n </button>\r\n <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n <button\r\n type=\"button\"\r\n vdrDropdownItem\r\n *ngFor=\"let item of moveListItems\"\r\n (click)=\"move(collection, item.id)\"\r\n [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n >\r\n <div class=\"move-to-item\">\r\n <div class=\"move-icon\">\r\n <clr-icon shape=\"child-arrow\"></clr-icon>\r\n </div>\r\n <div class=\"path\">\r\n {{ item.path }}\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"dropdown-divider\"></div>\r\n <button\r\n class=\"button\"\r\n vdrDropdownItem\r\n (click)=\"delete(collection.id)\"\r\n [disabled]=\"!(hasDeletePermission$ | async)\"\r\n >\r\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n {{ 'common.delete' | translate }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n <vdr-collection-tree-node\r\n *ngIf=\"collection.expanded || expandAll\"\r\n [expandAll]=\"expandAll\"\r\n [collectionTree]=\"collection\"\r\n [activeCollectionId]=\"activeCollectionId\"\r\n [selectionManager]=\"selectionManager\"\r\n ></vdr-collection-tree-node>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-inline-start:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-inline-start:36px}.collection .collection-detail.depth-2{padding-inline-start:60px}.collection .collection-detail.depth-3{padding-inline-start:84px}.collection .collection-detail.depth-4{padding-inline-start:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-inline-end:3px}.move-to-item .path{line-height:18px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll", "selectionManager"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionTreeNodeComponent, isStandalone: false, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll", selectionManager: "selectionManager" }, usesOnChanges: true, ngImport: i0, template: "<div\n cdkDropList\n class=\"tree-node\"\n #dropList\n [cdkDropListData]=\"collectionTree\"\n [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\n (cdkDropListDropped)=\"drop($event)\"\n>\n <div\n class=\"collection\"\n [class.private]=\"collection.isPrivate\"\n *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\n cdkDrag\n [cdkDragData]=\"collection\"\n >\n <div\n class=\"collection-detail\"\n [ngClass]=\"'depth-' + depth\"\n [class.active]=\"collection.id === activeCollectionId\"\n >\n <div>\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager.isSelected(collection)\"\n (click)=\"selectionManager.toggleSelection(collection, $event)\"\n />\n </div>\n <div class=\"name\">\n <button\n class=\"icon-button folder-button\"\n [disabled]=\"expandAll\"\n *ngIf=\"collection.children?.length; else folderSpacer\"\n (click)=\"toggleExpanded(collection)\"\n >\n <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\n <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\n </button>\n <ng-template #folderSpacer>\n <div class=\"folder-button-spacer\"></div>\n </ng-template>\n {{ collection.name }}\n </div>\n <div class=\"flex-spacer\"></div>\n <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\n <a\n class=\"btn btn-link btn-sm\"\n [routerLink]=\"['./', { contents: collection.id }]\"\n queryParamsHandling=\"preserve\"\n >\n <clr-icon shape=\"view-list\"></clr-icon>\n {{ 'catalog.view-contents' | translate }}\n </a>\n <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\n <clr-icon shape=\"edit\"></clr-icon>\n {{ 'common.edit' | translate }}\n </a>\n <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\n <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\n </div>\n <vdr-dropdown>\n <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n <a\n class=\"dropdown-item\"\n [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-collection' | translate }}\n </a>\n <div class=\"dropdown-divider\"></div>\n <button\n type=\"button\"\n vdrDropdownItem\n [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\n (click)=\"moveUp(collection, i)\"\n >\n <clr-icon shape=\"caret up\"></clr-icon>\n {{ 'catalog.move-up' | translate }}\n </button>\n <button\n type=\"button\"\n vdrDropdownItem\n [disabled]=\"\n i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\n \"\n (click)=\"moveDown(collection, i)\"\n >\n <clr-icon shape=\"caret down\"></clr-icon>\n {{ 'catalog.move-down' | translate }}\n </button>\n <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\n <button\n type=\"button\"\n vdrDropdownItem\n *ngFor=\"let item of moveListItems\"\n (click)=\"move(collection, item.id)\"\n [disabled]=\"!(hasUpdatePermission$ | async)\"\n >\n <div class=\"move-to-item\">\n <div class=\"move-icon\">\n <clr-icon shape=\"child-arrow\"></clr-icon>\n </div>\n <div class=\"path\">\n {{ item.path }}\n </div>\n </div>\n </button>\n <div class=\"dropdown-divider\"></div>\n <button\n class=\"button\"\n vdrDropdownItem\n (click)=\"delete(collection.id)\"\n [disabled]=\"!(hasDeletePermission$ | async)\"\n >\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n {{ 'common.delete' | translate }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n <vdr-collection-tree-node\n *ngIf=\"collection.expanded || expandAll\"\n [expandAll]=\"expandAll\"\n [collectionTree]=\"collection\"\n [activeCollectionId]=\"activeCollectionId\"\n [selectionManager]=\"selectionManager\"\n ></vdr-collection-tree-node>\n </div>\n</div>\n", styles: [":host{display:block}.collection{background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-inline-start:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-inline-start:36px}.collection .collection-detail.depth-2{padding-inline-start:60px}.collection .collection-detail.depth-3{padding-inline-start:84px}.collection .collection-detail.depth-4{padding-inline-start:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-inline-end:3px}.move-to-item .path{line-height:18px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll", "selectionManager"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2535
2535
|
}
|
|
2536
2536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionTreeNodeComponent, decorators: [{
|
|
2537
2537
|
type: Component,
|
|
2538
|
-
args: [{ selector: 'vdr-collection-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\
|
|
2538
|
+
args: [{ selector: 'vdr-collection-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n cdkDropList\n class=\"tree-node\"\n #dropList\n [cdkDropListData]=\"collectionTree\"\n [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\n (cdkDropListDropped)=\"drop($event)\"\n>\n <div\n class=\"collection\"\n [class.private]=\"collection.isPrivate\"\n *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\n cdkDrag\n [cdkDragData]=\"collection\"\n >\n <div\n class=\"collection-detail\"\n [ngClass]=\"'depth-' + depth\"\n [class.active]=\"collection.id === activeCollectionId\"\n >\n <div>\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager.isSelected(collection)\"\n (click)=\"selectionManager.toggleSelection(collection, $event)\"\n />\n </div>\n <div class=\"name\">\n <button\n class=\"icon-button folder-button\"\n [disabled]=\"expandAll\"\n *ngIf=\"collection.children?.length; else folderSpacer\"\n (click)=\"toggleExpanded(collection)\"\n >\n <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\n <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\n </button>\n <ng-template #folderSpacer>\n <div class=\"folder-button-spacer\"></div>\n </ng-template>\n {{ collection.name }}\n </div>\n <div class=\"flex-spacer\"></div>\n <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\n <a\n class=\"btn btn-link btn-sm\"\n [routerLink]=\"['./', { contents: collection.id }]\"\n queryParamsHandling=\"preserve\"\n >\n <clr-icon shape=\"view-list\"></clr-icon>\n {{ 'catalog.view-contents' | translate }}\n </a>\n <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\n <clr-icon shape=\"edit\"></clr-icon>\n {{ 'common.edit' | translate }}\n </a>\n <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\n <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\n </div>\n <vdr-dropdown>\n <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n <a\n class=\"dropdown-item\"\n [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-collection' | translate }}\n </a>\n <div class=\"dropdown-divider\"></div>\n <button\n type=\"button\"\n vdrDropdownItem\n [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\n (click)=\"moveUp(collection, i)\"\n >\n <clr-icon shape=\"caret up\"></clr-icon>\n {{ 'catalog.move-up' | translate }}\n </button>\n <button\n type=\"button\"\n vdrDropdownItem\n [disabled]=\"\n i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\n \"\n (click)=\"moveDown(collection, i)\"\n >\n <clr-icon shape=\"caret down\"></clr-icon>\n {{ 'catalog.move-down' | translate }}\n </button>\n <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\n <button\n type=\"button\"\n vdrDropdownItem\n *ngFor=\"let item of moveListItems\"\n (click)=\"move(collection, item.id)\"\n [disabled]=\"!(hasUpdatePermission$ | async)\"\n >\n <div class=\"move-to-item\">\n <div class=\"move-icon\">\n <clr-icon shape=\"child-arrow\"></clr-icon>\n </div>\n <div class=\"path\">\n {{ item.path }}\n </div>\n </div>\n </button>\n <div class=\"dropdown-divider\"></div>\n <button\n class=\"button\"\n vdrDropdownItem\n (click)=\"delete(collection.id)\"\n [disabled]=\"!(hasDeletePermission$ | async)\"\n >\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n {{ 'common.delete' | translate }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n <vdr-collection-tree-node\n *ngIf=\"collection.expanded || expandAll\"\n [expandAll]=\"expandAll\"\n [collectionTree]=\"collection\"\n [activeCollectionId]=\"activeCollectionId\"\n [selectionManager]=\"selectionManager\"\n ></vdr-collection-tree-node>\n </div>\n</div>\n", styles: [":host{display:block}.collection{background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-inline-start:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-inline-start:36px}.collection .collection-detail.depth-2{padding-inline-start:60px}.collection .collection-detail.depth-3{padding-inline-start:84px}.collection .collection-detail.depth-4{padding-inline-start:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-inline-end:3px}.move-to-item .path{line-height:18px}\n"] }]
|
|
2539
2539
|
}], ctorParameters: () => [{ type: CollectionTreeNodeComponent, decorators: [{
|
|
2540
2540
|
type: SkipSelf
|
|
2541
2541
|
}, {
|
|
@@ -2626,11 +2626,11 @@ class CollectionTreeComponent {
|
|
|
2626
2626
|
this.collectionTreeService.delete$.subscribe(id => this.deleteCollection.emit(id));
|
|
2627
2627
|
}
|
|
2628
2628
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionTreeComponent, deps: [{ token: CollectionTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionTreeComponent, isStandalone: false, selector: "vdr-collection-tree", inputs: { collections: "collections", activeCollectionId: "activeCollectionId", expandAll: "expandAll", expandedIds: "expandedIds", selectionManager: "selectionManager" }, outputs: { rearrange: "rearrange", deleteCollection: "deleteCollection" }, providers: [CollectionTreeService], usesOnChanges: true, ngImport: i0, template: "<vdr-collection-tree-node\
|
|
2629
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CollectionTreeComponent, isStandalone: false, selector: "vdr-collection-tree", inputs: { collections: "collections", activeCollectionId: "activeCollectionId", expandAll: "expandAll", expandedIds: "expandedIds", selectionManager: "selectionManager" }, outputs: { rearrange: "rearrange", deleteCollection: "deleteCollection" }, providers: [CollectionTreeService], usesOnChanges: true, ngImport: i0, template: "<vdr-collection-tree-node\n *ngIf=\"collectionTree\"\n cdkDropListGroup\n [expandAll]=\"expandAll\"\n [collectionTree]=\"collectionTree\"\n [selectionManager]=\"selectionManager\"\n [activeCollectionId]=\"activeCollectionId\"\n></vdr-collection-tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll", "selectionManager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2630
2630
|
}
|
|
2631
2631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CollectionTreeComponent, decorators: [{
|
|
2632
2632
|
type: Component,
|
|
2633
|
-
args: [{ selector: 'vdr-collection-tree', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CollectionTreeService], standalone: false, template: "<vdr-collection-tree-node\
|
|
2633
|
+
args: [{ selector: 'vdr-collection-tree', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CollectionTreeService], standalone: false, template: "<vdr-collection-tree-node\n *ngIf=\"collectionTree\"\n cdkDropListGroup\n [expandAll]=\"expandAll\"\n [collectionTree]=\"collectionTree\"\n [selectionManager]=\"selectionManager\"\n [activeCollectionId]=\"activeCollectionId\"\n></vdr-collection-tree-node>\n" }]
|
|
2634
2634
|
}], ctorParameters: () => [{ type: CollectionTreeService }], propDecorators: { collections: [{
|
|
2635
2635
|
type: Input
|
|
2636
2636
|
}], activeCollectionId: [{
|
|
@@ -2658,11 +2658,11 @@ class ConfirmVariantDeletionDialogComponent {
|
|
|
2658
2658
|
this.resolveWith();
|
|
2659
2659
|
}
|
|
2660
2660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmVariantDeletionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2661
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ConfirmVariantDeletionDialogComponent, isStandalone: false, selector: "vdr-confirm-variant-deletion-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
2661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ConfirmVariantDeletionDialogComponent, isStandalone: false, selector: "vdr-confirm-variant-deletion-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.confirm-deletion-of-unused-variants-title' | translate }}\n</ng-template>\n{{ 'catalog.confirm-deletion-of-unused-variants-body' | translate }}\n<ul>\n <li *ngFor=\"let variant of variants\">{{ variant.name }} ({{ variant.sku }})</li>\n</ul>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }); }
|
|
2662
2662
|
}
|
|
2663
2663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmVariantDeletionDialogComponent, decorators: [{
|
|
2664
2664
|
type: Component,
|
|
2665
|
-
args: [{ selector: 'vdr-confirm-variant-deletion-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
2665
|
+
args: [{ selector: 'vdr-confirm-variant-deletion-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.confirm-deletion-of-unused-variants-title' | translate }}\n</ng-template>\n{{ 'catalog.confirm-deletion-of-unused-variants-body' | translate }}\n<ul>\n <li *ngFor=\"let variant of variants\">{{ variant.name }} ({{ variant.sku }})</li>\n</ul>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>\n" }]
|
|
2666
2666
|
}] });
|
|
2667
2667
|
|
|
2668
2668
|
class CreateFacetValueDialogComponent {
|
|
@@ -2695,20 +2695,20 @@ class CreateFacetValueDialogComponent {
|
|
|
2695
2695
|
this.resolveWith();
|
|
2696
2696
|
}
|
|
2697
2697
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CreateFacetValueDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CreateFacetValueDialogComponent, isStandalone: false, selector: "vdr-create-facet-value-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\
|
|
2698
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CreateFacetValueDialogComponent, isStandalone: false, selector: "vdr-create-facet-value-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.create-facet-value' | translate }}\n</ng-template>\n<div class=\"form-grid\" [formGroup]=\"form\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\n </vdr-form-field>\n <vdr-form-field\n [label]=\"'common.code' | translate\"\n for=\"code\"\n >\n <input\n id=\"code\"\n type=\"text\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n</div>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>\n", styles: [""], dependencies: [{ 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: "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: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2699
2699
|
}
|
|
2700
2700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CreateFacetValueDialogComponent, decorators: [{
|
|
2701
2701
|
type: Component,
|
|
2702
|
-
args: [{ selector: 'vdr-create-facet-value-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\
|
|
2702
|
+
args: [{ selector: 'vdr-create-facet-value-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n {{ 'catalog.create-facet-value' | translate }}\n</ng-template>\n<div class=\"form-grid\" [formGroup]=\"form\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\n </vdr-form-field>\n <vdr-form-field\n [label]=\"'common.code' | translate\"\n for=\"code\"\n >\n <input\n id=\"code\"\n type=\"text\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n</div>\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\n {{ 'common.confirm' | translate }}\n </button>\n</ng-template>\n" }]
|
|
2703
2703
|
}], ctorParameters: () => [{ type: i2.FormBuilder }] });
|
|
2704
2704
|
|
|
2705
|
-
const FACET_DETAIL_QUERY = gql `
|
|
2706
|
-
query GetFacetDetail($id: ID!, $facetValueListOptions: FacetValueListOptions) {
|
|
2707
|
-
facet(id: $id) {
|
|
2708
|
-
...FacetWithValueList
|
|
2709
|
-
}
|
|
2710
|
-
}
|
|
2711
|
-
${FACET_WITH_VALUE_LIST_FRAGMENT}
|
|
2705
|
+
const FACET_DETAIL_QUERY = gql `
|
|
2706
|
+
query GetFacetDetail($id: ID!, $facetValueListOptions: FacetValueListOptions) {
|
|
2707
|
+
facet(id: $id) {
|
|
2708
|
+
...FacetWithValueList
|
|
2709
|
+
}
|
|
2710
|
+
}
|
|
2711
|
+
${FACET_WITH_VALUE_LIST_FRAGMENT}
|
|
2712
2712
|
`;
|
|
2713
2713
|
class FacetDetailComponent extends TypedBaseDetailComponent {
|
|
2714
2714
|
constructor(changeDetector, dataService, formBuilder, notificationService, modalService) {
|
|
@@ -3015,11 +3015,11 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
|
|
|
3015
3015
|
.filter(notNullOrUndefined);
|
|
3016
3016
|
}
|
|
3017
3017
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FacetDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3018
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FacetDetailComponent, isStandalone: false, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <vdr-language-selector\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"facet-detail\" />\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"updatePermission\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n <vdr-action-bar-dropdown-menu locationId=\"facet-detail\" />\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n <vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n formControlName=\"visible\"\r\n id=\"visibility\"\r\n />\r\n <label class=\"visible-toggle\">\r\n <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n 'catalog.public' | translate\r\n }}</ng-container>\r\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n </label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card>\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 <vdr-page-block>\r\n <vdr-card formGroupName=\"facet\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n <input\r\n id=\"code\"\r\n type=\"text\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n formControlName=\"code\"\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=\"Facet\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n />\r\n </vdr-card>\r\n\r\n <vdr-custom-detail-component-host\r\n locationId=\"facet-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n\r\n <vdr-card\r\n *ngIf=\"!(isNew$ | async)\"\r\n [title]=\"'catalog.facet-values' | translate\"\r\n [paddingX]=\"false\"\r\n >\r\n <ng-template vdrCardControls>\r\n <input\r\n type=\"text\"\r\n class=\"mr-3\"\r\n [formControl]=\"filterControl\"\r\n [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n />\r\n </ng-template>\r\n <ng-container *ngIf=\"values$ | async as filteredValues\">\r\n <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n <thead>\r\n <tr>\r\n <th></th>\r\n <th>{{ 'common.name' | translate }}</th>\r\n <th>{{ 'common.code' | translate }}</th>\r\n <ng-container *ngIf=\"customValueFields.length\">\r\n <th>{{ 'common.custom-fields' | translate }}</th>\r\n </ng-container>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n class=\"facet-value\"\r\n *ngFor=\"\r\n let value of filteredValues\r\n | paginate\r\n : {\r\n currentPage: currentPage,\r\n itemsPerPage: itemsPerPage,\r\n totalItems: totalItems,\r\n };\r\n let i = index\r\n \"\r\n [formGroup]=\"detailForm.get(['values', value.id])\"\r\n >\r\n <td class=\"align-middle\">\r\n <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n </td>\r\n <td class=\"align-middle\">\r\n <input\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n />\r\n </td>\r\n <td class=\"align-middle\">\r\n <input type=\"text\" formControlName=\"code\" />\r\n </td>\r\n <td class=\"\" *ngIf=\"customValueFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"FacetValue\"\r\n [customFields]=\"customValueFields\"\r\n [compact]=\"true\"\r\n [customFieldsFormGroup]=\"\r\n detailForm.get(['values', value.id, 'customFields'])\r\n \"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </td>\r\n <td class=\"align-middle\">\r\n <vdr-dropdown>\r\n <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n <button\r\n type=\"button\"\r\n class=\"delete-button\"\r\n (click)=\"deleteFacetValue(value.id)\"\r\n [disabled]=\"!(updatePermission | hasPermission)\"\r\n vdrDropdownItem\r\n >\r\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n {{ 'common.delete' | translate }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"pagination-wrapper\">\r\n <vdr-items-per-page-controls\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n ></vdr-items-per-page-controls>\r\n <vdr-pagination-controls\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"setCurrentPage($event)\"\r\n ></vdr-pagination-controls>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <button\r\n type=\"button\"\r\n class=\"button m-3\"\r\n *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n (click)=\"addFacetValue()\"\r\n >\r\n <clr-icon shape=\"add\"></clr-icon>\r\n {{ 'catalog.add-facet-value' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.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.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { 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: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FacetDetailComponent, isStandalone: false, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"facet-detail\" />\n <button\n class=\"btn btn-primary\"\n *ngIf=\"isNew$ | async; else updateButton\"\n (click)=\"create()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.create' | translate }}\n </button>\n <ng-template #updateButton>\n <button\n *vdrIfPermissions=\"updatePermission\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.update' | translate }}\n </button>\n </ng-template>\n <vdr-action-bar-dropdown-menu locationId=\"facet-detail\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar formGroupName=\"facet\">\n <vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n formControlName=\"visible\"\n id=\"visibility\"\n />\n <label class=\"visible-toggle\">\n <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\n 'catalog.public' | translate\n }}</ng-container>\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\n </label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <vdr-card>\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n </vdr-card>\n </vdr-page-detail-sidebar>\n <vdr-page-block>\n <vdr-card formGroupName=\"facet\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n (input)=\"updateCode(entity?.code, $event.target.value)\"\n />\n </vdr-form-field>\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\n <input\n id=\"code\"\n type=\"text\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"Facet\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </vdr-card>\n\n <vdr-custom-detail-component-host\n locationId=\"facet-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n ></vdr-custom-detail-component-host>\n\n <vdr-card\n *ngIf=\"!(isNew$ | async)\"\n [title]=\"'catalog.facet-values' | translate\"\n [paddingX]=\"false\"\n >\n <ng-template vdrCardControls>\n <input\n type=\"text\"\n class=\"mr-3\"\n [formControl]=\"filterControl\"\n [placeholder]=\"'catalog.filter-by-name' | translate\"\n />\n </ng-template>\n <ng-container *ngIf=\"values$ | async as filteredValues\">\n <table class=\"facet-values-list table\" formArrayName=\"values\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'common.name' | translate }}</th>\n <th>{{ 'common.code' | translate }}</th>\n <ng-container *ngIf=\"customValueFields.length\">\n <th>{{ 'common.custom-fields' | translate }}</th>\n </ng-container>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr\n class=\"facet-value\"\n *ngFor=\"\n let value of filteredValues\n | paginate\n : {\n currentPage: currentPage,\n itemsPerPage: itemsPerPage,\n totalItems: totalItems,\n };\n let i = index\n \"\n [formGroup]=\"detailForm.get(['values', value.id])\"\n >\n <td class=\"align-middle\">\n <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\n </td>\n <td class=\"align-middle\">\n <input\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\n />\n </td>\n <td class=\"align-middle\">\n <input type=\"text\" formControlName=\"code\" />\n </td>\n <td class=\"\" *ngIf=\"customValueFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"FacetValue\"\n [customFields]=\"customValueFields\"\n [compact]=\"true\"\n [customFieldsFormGroup]=\"\n detailForm.get(['values', value.id, 'customFields'])\n \"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </td>\n <td class=\"align-middle\">\n <vdr-dropdown>\n <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n <button\n type=\"button\"\n class=\"delete-button\"\n (click)=\"deleteFacetValue(value.id)\"\n [disabled]=\"!(updatePermission | hasPermission)\"\n vdrDropdownItem\n >\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n {{ 'common.delete' | translate }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </td>\n </tr>\n </tbody>\n </table>\n <div class=\"pagination-wrapper\">\n <vdr-items-per-page-controls\n [itemsPerPage]=\"itemsPerPage\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n ></vdr-items-per-page-controls>\n <vdr-pagination-controls\n [currentPage]=\"currentPage\"\n [itemsPerPage]=\"itemsPerPage\"\n [totalItems]=\"totalItems\"\n (pageChange)=\"setCurrentPage($event)\"\n ></vdr-pagination-controls>\n </div>\n </ng-container>\n <div>\n <button\n type=\"button\"\n class=\"button m-3\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\n (click)=\"addFacetValue()\"\n >\n <clr-icon shape=\"add\"></clr-icon>\n {{ 'catalog.add-facet-value' | translate }}\n </button>\n </div>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.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.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { 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: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3019
3019
|
}
|
|
3020
3020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FacetDetailComponent, decorators: [{
|
|
3021
3021
|
type: Component,
|
|
3022
|
-
args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <vdr-language-selector\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"facet-detail\" />\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"updatePermission\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n <vdr-action-bar-dropdown-menu locationId=\"facet-detail\" />\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n <vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper>\r\n <input\r\n type=\"checkbox\"\r\n clrToggle\r\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n formControlName=\"visible\"\r\n id=\"visibility\"\r\n />\r\n <label class=\"visible-toggle\">\r\n <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n 'catalog.public' | translate\r\n }}</ng-container>\r\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n </label>\r\n </clr-toggle-wrapper>\r\n </vdr-form-field>\r\n </vdr-card>\r\n <vdr-card>\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 <vdr-page-block>\r\n <vdr-card formGroupName=\"facet\">\r\n <div class=\"form-grid\">\r\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n <input\r\n id=\"code\"\r\n type=\"text\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n formControlName=\"code\"\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=\"Facet\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n />\r\n </vdr-card>\r\n\r\n <vdr-custom-detail-component-host\r\n locationId=\"facet-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n\r\n <vdr-card\r\n *ngIf=\"!(isNew$ | async)\"\r\n [title]=\"'catalog.facet-values' | translate\"\r\n [paddingX]=\"false\"\r\n >\r\n <ng-template vdrCardControls>\r\n <input\r\n type=\"text\"\r\n class=\"mr-3\"\r\n [formControl]=\"filterControl\"\r\n [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n />\r\n </ng-template>\r\n <ng-container *ngIf=\"values$ | async as filteredValues\">\r\n <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n <thead>\r\n <tr>\r\n <th></th>\r\n <th>{{ 'common.name' | translate }}</th>\r\n <th>{{ 'common.code' | translate }}</th>\r\n <ng-container *ngIf=\"customValueFields.length\">\r\n <th>{{ 'common.custom-fields' | translate }}</th>\r\n </ng-container>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n class=\"facet-value\"\r\n *ngFor=\"\r\n let value of filteredValues\r\n | paginate\r\n : {\r\n currentPage: currentPage,\r\n itemsPerPage: itemsPerPage,\r\n totalItems: totalItems,\r\n };\r\n let i = index\r\n \"\r\n [formGroup]=\"detailForm.get(['values', value.id])\"\r\n >\r\n <td class=\"align-middle\">\r\n <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n </td>\r\n <td class=\"align-middle\">\r\n <input\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n />\r\n </td>\r\n <td class=\"align-middle\">\r\n <input type=\"text\" formControlName=\"code\" />\r\n </td>\r\n <td class=\"\" *ngIf=\"customValueFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"FacetValue\"\r\n [customFields]=\"customValueFields\"\r\n [compact]=\"true\"\r\n [customFieldsFormGroup]=\"\r\n detailForm.get(['values', value.id, 'customFields'])\r\n \"\r\n [readonly]=\"!(updatePermission | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </td>\r\n <td class=\"align-middle\">\r\n <vdr-dropdown>\r\n <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n </button>\r\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n <button\r\n type=\"button\"\r\n class=\"delete-button\"\r\n (click)=\"deleteFacetValue(value.id)\"\r\n [disabled]=\"!(updatePermission | hasPermission)\"\r\n vdrDropdownItem\r\n >\r\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n {{ 'common.delete' | translate }}\r\n </button>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div class=\"pagination-wrapper\">\r\n <vdr-items-per-page-controls\r\n [itemsPerPage]=\"itemsPerPage\"\r\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n ></vdr-items-per-page-controls>\r\n <vdr-pagination-controls\r\n [currentPage]=\"currentPage\"\r\n [itemsPerPage]=\"itemsPerPage\"\r\n [totalItems]=\"totalItems\"\r\n (pageChange)=\"setCurrentPage($event)\"\r\n ></vdr-pagination-controls>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <button\r\n type=\"button\"\r\n class=\"button m-3\"\r\n *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n (click)=\"addFacetValue()\"\r\n >\r\n <clr-icon shape=\"add\"></clr-icon>\r\n {{ 'catalog.add-facet-value' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"] }]
|
|
3022
|
+
args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"facet-detail\" />\n <button\n class=\"btn btn-primary\"\n *ngIf=\"isNew$ | async; else updateButton\"\n (click)=\"create()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.create' | translate }}\n </button>\n <ng-template #updateButton>\n <button\n *vdrIfPermissions=\"updatePermission\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine\"\n >\n {{ 'common.update' | translate }}\n </button>\n </ng-template>\n <vdr-action-bar-dropdown-menu locationId=\"facet-detail\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar formGroupName=\"facet\">\n <vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n formControlName=\"visible\"\n id=\"visibility\"\n />\n <label class=\"visible-toggle\">\n <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\n 'catalog.public' | translate\n }}</ng-container>\n <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\n </label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <vdr-card>\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n </vdr-card>\n </vdr-page-detail-sidebar>\n <vdr-page-block>\n <vdr-card formGroupName=\"facet\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n (input)=\"updateCode(entity?.code, $event.target.value)\"\n />\n </vdr-form-field>\n <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\n <input\n id=\"code\"\n type=\"text\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"code\"\n />\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"Facet\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </vdr-card>\n\n <vdr-custom-detail-component-host\n locationId=\"facet-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n ></vdr-custom-detail-component-host>\n\n <vdr-card\n *ngIf=\"!(isNew$ | async)\"\n [title]=\"'catalog.facet-values' | translate\"\n [paddingX]=\"false\"\n >\n <ng-template vdrCardControls>\n <input\n type=\"text\"\n class=\"mr-3\"\n [formControl]=\"filterControl\"\n [placeholder]=\"'catalog.filter-by-name' | translate\"\n />\n </ng-template>\n <ng-container *ngIf=\"values$ | async as filteredValues\">\n <table class=\"facet-values-list table\" formArrayName=\"values\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'common.name' | translate }}</th>\n <th>{{ 'common.code' | translate }}</th>\n <ng-container *ngIf=\"customValueFields.length\">\n <th>{{ 'common.custom-fields' | translate }}</th>\n </ng-container>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr\n class=\"facet-value\"\n *ngFor=\"\n let value of filteredValues\n | paginate\n : {\n currentPage: currentPage,\n itemsPerPage: itemsPerPage,\n totalItems: totalItems,\n };\n let i = index\n \"\n [formGroup]=\"detailForm.get(['values', value.id])\"\n >\n <td class=\"align-middle\">\n <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\n </td>\n <td class=\"align-middle\">\n <input\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\n />\n </td>\n <td class=\"align-middle\">\n <input type=\"text\" formControlName=\"code\" />\n </td>\n <td class=\"\" *ngIf=\"customValueFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"FacetValue\"\n [customFields]=\"customValueFields\"\n [compact]=\"true\"\n [customFieldsFormGroup]=\"\n detailForm.get(['values', value.id, 'customFields'])\n \"\n [readonly]=\"!(updatePermission | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </td>\n <td class=\"align-middle\">\n <vdr-dropdown>\n <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n <button\n type=\"button\"\n class=\"delete-button\"\n (click)=\"deleteFacetValue(value.id)\"\n [disabled]=\"!(updatePermission | hasPermission)\"\n vdrDropdownItem\n >\n <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n {{ 'common.delete' | translate }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </td>\n </tr>\n </tbody>\n </table>\n <div class=\"pagination-wrapper\">\n <vdr-items-per-page-controls\n [itemsPerPage]=\"itemsPerPage\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n ></vdr-items-per-page-controls>\n <vdr-pagination-controls\n [currentPage]=\"currentPage\"\n [itemsPerPage]=\"itemsPerPage\"\n [totalItems]=\"totalItems\"\n (pageChange)=\"setCurrentPage($event)\"\n ></vdr-pagination-controls>\n </div>\n </ng-container>\n <div>\n <button\n type=\"button\"\n class=\"button m-3\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\n (click)=\"addFacetValue()\"\n >\n <clr-icon shape=\"add\"></clr-icon>\n {{ 'catalog.add-facet-value' | translate }}\n </button>\n </div>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"] }]
|
|
3023
3023
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2.FormBuilder }, { type: i1.NotificationService }, { type: i1.ModalService }] });
|
|
3024
3024
|
|
|
3025
3025
|
const deleteFacetsBulkAction = createBulkDeleteAction({
|
|
@@ -3165,16 +3165,16 @@ const duplicateFacetsBulkAction = {
|
|
|
3165
3165
|
},
|
|
3166
3166
|
};
|
|
3167
3167
|
|
|
3168
|
-
const FACET_LIST_QUERY = gql `
|
|
3169
|
-
query GetFacetList($options: FacetListOptions, $facetValueListOptions: FacetValueListOptions) {
|
|
3170
|
-
facets(options: $options) {
|
|
3171
|
-
items {
|
|
3172
|
-
...FacetWithValueList
|
|
3173
|
-
}
|
|
3174
|
-
totalItems
|
|
3175
|
-
}
|
|
3176
|
-
}
|
|
3177
|
-
${FACET_WITH_VALUE_LIST_FRAGMENT}
|
|
3168
|
+
const FACET_LIST_QUERY = gql `
|
|
3169
|
+
query GetFacetList($options: FacetListOptions, $facetValueListOptions: FacetValueListOptions) {
|
|
3170
|
+
facets(options: $options) {
|
|
3171
|
+
items {
|
|
3172
|
+
...FacetWithValueList
|
|
3173
|
+
}
|
|
3174
|
+
totalItems
|
|
3175
|
+
}
|
|
3176
|
+
}
|
|
3177
|
+
${FACET_WITH_VALUE_LIST_FRAGMENT}
|
|
3178
3178
|
`;
|
|
3179
3179
|
class FacetListComponent extends TypedBaseListComponent {
|
|
3180
3180
|
constructor(dataService) {
|
|
@@ -3240,11 +3240,11 @@ class FacetListComponent extends TypedBaseListComponent {
|
|
|
3240
3240
|
this.dataService.client.setContentLanguage(code).subscribe();
|
|
3241
3241
|
}
|
|
3242
3242
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FacetListComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FacetListComponent, isStandalone: false, selector: "vdr-facet-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\
|
|
3243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FacetListComponent, isStandalone: false, selector: "vdr-facet-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"facet-list\" />\n <a\n class=\"btn btn-primary\"\n [routerLink]=\"['./create']\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-facet' | translate }}\n </a>\n <vdr-action-bar-dropdown-menu locationId=\"facet-list\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n class=\"mt-2\"\n [id]=\"dataTableListId\"\n [items]=\"items$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\n>\n <vdr-bulk-action-menu\n locationId=\"facet-list\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n ></vdr-bulk-action-menu>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n ></vdr-dt2-search>\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n <ng-template let-facet=\"item\">\n {{ facet.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-facet=\"item\">\n {{ facet.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-facet=\"item\">\n {{ facet.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\n <ng-template let-facet=\"item\">\n <a class=\"button-ghost\" [routerLink]=\"['./', facet.id]\"\n ><span>{{ facet.name }}</span>\n <clr-icon shape=\"arrow right\"></clr-icon>\n </a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\n <ng-template let-facet=\"item\">\n {{ facet.code }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\n <ng-template let-facet=\"item\">\n <vdr-chip *ngIf=\"facet.isPrivate\" colorType=\"warning\">{{\n 'common.private' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!facet.isPrivate\" colorType=\"success\">{{\n 'common.public' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.values' | translate\" id=\"values\">\n <ng-template let-facet=\"item\">\n <div class=\"facet-values-list\">\n <vdr-facet-value-chip\n *ngFor=\"let value of facet.valueList.items | slice : 0 : displayLimit[facet.id] || 3\"\n [facetValue]=\"value\"\n [removable]=\"false\"\n [displayFacetName]=\"false\"\n ></vdr-facet-value-chip>\n <vdr-chip *ngIf=\"displayLimit[facet.id] < facet.valueList.totalItems && (displayLimit[facet.id] || 0) === facet.valueList.items.length\">\n ... + {{ facet.valueList.totalItems - facet.valueList.items.length }}\n </vdr-chip>\n <button\n class=\"button-small\"\n *ngIf=\"facet.valueList.items.length > initialLimit\"\n (click)=\"toggleDisplayLimit(facet)\"\n >\n <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.valueList.items.length; else collapse\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ facet.valueList.totalItems - initialLimit }}\n </ng-container>\n <ng-template #collapse>\n <clr-icon shape=\"minus\"></clr-icon>\n </ng-template>\n </button>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\n</vdr-data-table-2>\n", styles: [".facet-values-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: 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.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
|
|
3244
3244
|
}
|
|
3245
3245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FacetListComponent, decorators: [{
|
|
3246
3246
|
type: Component,
|
|
3247
|
-
args: [{ selector: 'vdr-facet-list', standalone: false, template: "<vdr-page-block>\
|
|
3247
|
+
args: [{ selector: 'vdr-facet-list', standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"facet-list\" />\n <a\n class=\"btn btn-primary\"\n [routerLink]=\"['./create']\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-facet' | translate }}\n </a>\n <vdr-action-bar-dropdown-menu locationId=\"facet-list\" />\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n class=\"mt-2\"\n [id]=\"dataTableListId\"\n [items]=\"items$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\n>\n <vdr-bulk-action-menu\n locationId=\"facet-list\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n ></vdr-bulk-action-menu>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n ></vdr-dt2-search>\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n <ng-template let-facet=\"item\">\n {{ facet.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-facet=\"item\">\n {{ facet.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-facet=\"item\">\n {{ facet.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\n <ng-template let-facet=\"item\">\n <a class=\"button-ghost\" [routerLink]=\"['./', facet.id]\"\n ><span>{{ facet.name }}</span>\n <clr-icon shape=\"arrow right\"></clr-icon>\n </a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\n <ng-template let-facet=\"item\">\n {{ facet.code }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\n <ng-template let-facet=\"item\">\n <vdr-chip *ngIf=\"facet.isPrivate\" colorType=\"warning\">{{\n 'common.private' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!facet.isPrivate\" colorType=\"success\">{{\n 'common.public' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.values' | translate\" id=\"values\">\n <ng-template let-facet=\"item\">\n <div class=\"facet-values-list\">\n <vdr-facet-value-chip\n *ngFor=\"let value of facet.valueList.items | slice : 0 : displayLimit[facet.id] || 3\"\n [facetValue]=\"value\"\n [removable]=\"false\"\n [displayFacetName]=\"false\"\n ></vdr-facet-value-chip>\n <vdr-chip *ngIf=\"displayLimit[facet.id] < facet.valueList.totalItems && (displayLimit[facet.id] || 0) === facet.valueList.items.length\">\n ... + {{ facet.valueList.totalItems - facet.valueList.items.length }}\n </vdr-chip>\n <button\n class=\"button-small\"\n *ngIf=\"facet.valueList.items.length > initialLimit\"\n (click)=\"toggleDisplayLimit(facet)\"\n >\n <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.valueList.items.length; else collapse\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ facet.valueList.totalItems - initialLimit }}\n </ng-container>\n <ng-template #collapse>\n <clr-icon shape=\"minus\"></clr-icon>\n </ng-template>\n </button>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\n</vdr-data-table-2>\n", styles: [".facet-values-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"] }]
|
|
3248
3248
|
}], ctorParameters: () => [{ type: i1.DataService }] });
|
|
3249
3249
|
|
|
3250
3250
|
const DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';
|
|
@@ -3357,11 +3357,11 @@ class GenerateProductVariantsComponent {
|
|
|
3357
3357
|
: value;
|
|
3358
3358
|
}
|
|
3359
3359
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GenerateProductVariantsComponent, deps: [{ token: i1.DataService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3360
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GenerateProductVariantsComponent, isStandalone: false, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, viewQueries: [{ propertyName: "groupNameInputs", predicate: ["optionGroupName"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\
|
|
3360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GenerateProductVariantsComponent, isStandalone: false, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, viewQueries: [{ propertyName: "groupNameInputs", predicate: ["optionGroupName"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\n <div class=\"name\">\n <label>{{ 'catalog.option' | translate }}</label>\n <input\n #optionGroupName\n placeholder=\"e.g. Size\"\n clrInput\n [(ngModel)]=\"group.name\"\n name=\"name\"\n required\n (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\n />\n </div>\n <div class=\"values\">\n <label>{{ 'catalog.option-values' | translate }}</label>\n <vdr-option-value-input\n #optionValueInputComponent\n [(ngModel)]=\"group.values\"\n (ngModelChange)=\"generateVariants()\"\n (edit)=\"generateVariants()\"\n [groupName]=\"group.name\"\n [disabled]=\"group.name === ''\"\n ></vdr-option-value-input>\n </div>\n <div class=\"remove-group\">\n <button\n class=\"button-small mt-2\"\n [title]=\"'catalog.remove-option' | translate\"\n (click)=\"removeOption(group.name)\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n</div>\n<button class=\"button mb-2\" (click)=\"addOption()\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-option' | translate }}\n</button>\n\n<ng-container *ngIf=\"stockLocations$ | async as stockLocations\">\n <clr-alert *ngIf=\"stockLocations.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\n <clr-alert-item>\n <span class=\"alert-text\">\n {{ 'catalog.no-stock-locations-available-on-current-channel' | translate }}\n </span>\n </clr-alert-item>\n </clr-alert>\n\n <div class=\"form-grid mb-2\">\n <vdr-form-field *ngIf=\"stockLocations.length\" [label]=\"'catalog.add-stock-to-location' | translate\">\n <select [(ngModel)]=\"selectedStockLocationId\">\n <option *ngFor=\"let location of stockLocations\" [value]=\"location.id\">\n {{ location.name }}\n </option>\n </select>\n </vdr-form-field>\n </div>\n\n <div class=\"variants-preview\" *ngIf=\"0 < stockLocations.length\">\n <table class=\"table\">\n <thead>\n <tr>\n <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\n <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\n <th>{{ 'catalog.sku' | translate }}</th>\n <th>{{ 'catalog.price' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n </tr>\n </thead>\n <tr\n *ngFor=\"let variant of variants; trackBy: trackByFn\"\n [class.disabled]=\"!variantFormValues[variant.id].value.enabled === false\"\n [formGroup]=\"variantFormValues[variant.id]\"\n >\n <td *ngIf=\"1 < variants.length\">\n <input type=\"checkbox\" formControlName=\"enabled\" clrCheckbox />\n </td>\n <td *ngIf=\"1 < variants.length\">\n {{ variant.values.join(' ') }}\n </td>\n <td>\n <vdr-form-field>\n <input type=\"text\" formControlName=\"sku\" [placeholder]=\"'catalog.sku' | translate\" />\n </vdr-form-field>\n </td>\n <td>\n <vdr-form-field>\n <vdr-currency-input\n formControlName=\"price\"\n [currencyCode]=\"currencyCode\"\n ></vdr-currency-input>\n </vdr-form-field>\n </td>\n <td>\n <vdr-form-field>\n <input type=\"number\" formControlName=\"stock\" min=\"0\" step=\"1\" />\n </vdr-form-field>\n </td>\n </tr>\n </table>\n </div>\n</ng-container>\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
|
|
3361
3361
|
}
|
|
3362
3362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GenerateProductVariantsComponent, decorators: [{
|
|
3363
3363
|
type: Component,
|
|
3364
|
-
args: [{ selector: 'vdr-generate-product-variants', standalone: false, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\
|
|
3364
|
+
args: [{ selector: 'vdr-generate-product-variants', standalone: false, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\n <div class=\"name\">\n <label>{{ 'catalog.option' | translate }}</label>\n <input\n #optionGroupName\n placeholder=\"e.g. Size\"\n clrInput\n [(ngModel)]=\"group.name\"\n name=\"name\"\n required\n (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\n />\n </div>\n <div class=\"values\">\n <label>{{ 'catalog.option-values' | translate }}</label>\n <vdr-option-value-input\n #optionValueInputComponent\n [(ngModel)]=\"group.values\"\n (ngModelChange)=\"generateVariants()\"\n (edit)=\"generateVariants()\"\n [groupName]=\"group.name\"\n [disabled]=\"group.name === ''\"\n ></vdr-option-value-input>\n </div>\n <div class=\"remove-group\">\n <button\n class=\"button-small mt-2\"\n [title]=\"'catalog.remove-option' | translate\"\n (click)=\"removeOption(group.name)\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n</div>\n<button class=\"button mb-2\" (click)=\"addOption()\">\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-option' | translate }}\n</button>\n\n<ng-container *ngIf=\"stockLocations$ | async as stockLocations\">\n <clr-alert *ngIf=\"stockLocations.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\n <clr-alert-item>\n <span class=\"alert-text\">\n {{ 'catalog.no-stock-locations-available-on-current-channel' | translate }}\n </span>\n </clr-alert-item>\n </clr-alert>\n\n <div class=\"form-grid mb-2\">\n <vdr-form-field *ngIf=\"stockLocations.length\" [label]=\"'catalog.add-stock-to-location' | translate\">\n <select [(ngModel)]=\"selectedStockLocationId\">\n <option *ngFor=\"let location of stockLocations\" [value]=\"location.id\">\n {{ location.name }}\n </option>\n </select>\n </vdr-form-field>\n </div>\n\n <div class=\"variants-preview\" *ngIf=\"0 < stockLocations.length\">\n <table class=\"table\">\n <thead>\n <tr>\n <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\n <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\n <th>{{ 'catalog.sku' | translate }}</th>\n <th>{{ 'catalog.price' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n </tr>\n </thead>\n <tr\n *ngFor=\"let variant of variants; trackBy: trackByFn\"\n [class.disabled]=\"!variantFormValues[variant.id].value.enabled === false\"\n [formGroup]=\"variantFormValues[variant.id]\"\n >\n <td *ngIf=\"1 < variants.length\">\n <input type=\"checkbox\" formControlName=\"enabled\" clrCheckbox />\n </td>\n <td *ngIf=\"1 < variants.length\">\n {{ variant.values.join(' ') }}\n </td>\n <td>\n <vdr-form-field>\n <input type=\"text\" formControlName=\"sku\" [placeholder]=\"'catalog.sku' | translate\" />\n </vdr-form-field>\n </td>\n <td>\n <vdr-form-field>\n <vdr-currency-input\n formControlName=\"price\"\n [currencyCode]=\"currencyCode\"\n ></vdr-currency-input>\n </vdr-form-field>\n </td>\n <td>\n <vdr-form-field>\n <input type=\"number\" formControlName=\"stock\" min=\"0\" step=\"1\" />\n </vdr-form-field>\n </td>\n </tr>\n </table>\n </div>\n</ng-container>\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
|
|
3365
3365
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i2.FormBuilder }], propDecorators: { variantsChange: [{
|
|
3366
3366
|
type: Output
|
|
3367
3367
|
}], groupNameInputs: [{
|
|
@@ -3465,11 +3465,11 @@ class ProductVariantListComponent extends TypedBaseListComponent {
|
|
|
3465
3465
|
});
|
|
3466
3466
|
}
|
|
3467
3467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantListComponent, isStandalone: false, selector: "vdr-product-variant-list", inputs: { productId: "productId", hideLanguageSelect: "hideLanguageSelect", dataTableId: "dataTableId" }, usesInheritance: true, ngImport: i0, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\
|
|
3468
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantListComponent, isStandalone: false, selector: "vdr-product-variant-list", inputs: { productId: "productId", hideLanguageSelect: "hideLanguageSelect", dataTableId: "dataTableId" }, usesInheritance: true, ngImport: i0, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n</vdr-page-block>\n<vdr-data-table-2\n class=\"mt-2\"\n [id]=\"dataTableId || 'product-variant-list'\"\n [items]=\"items$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n>\n <vdr-bulk-action-menu\n locationId=\"product-variant-list\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n />\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n <ng-template let-variant=\"item\">\n {{ variant.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-variant=\"item\">\n {{ variant.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-variant=\"item\">\n {{ variant.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-variant=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\n <ng-template let-variant=\"item\">\n <a\n class=\"button-ghost\"\n [routerLink]=\"['/catalog/products', variant.productId, 'variants', variant.id]\"\n ><span>{{ variant.name }}</span\n ><clr-icon shape=\"arrow right\"\n /></a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [sort]=\"sorts.get('sku')\">\n <ng-template let-variant=\"item\">\n {{ variant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\n <ng-template let-variant=\"item\">\n <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\n 'common.enabled' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\n 'common.disabled' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.price' | translate\" id=\"price\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('price')\"\n >\n <ng-template let-variant=\"item\">\n {{ variant.price | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [sort]=\"sorts.get('priceWithTax')\">\n <ng-template let-variant=\"item\">\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n\n <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" id=\"stock-on-hand\" [hiddenByDefault]=\"false\">\n <ng-template let-variant=\"item\">\n <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\n <div class=\"flex center\">\n <div>\n {{ stockLevel.stockOnHand\n }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\n >({{ stockLevel.stockAllocated }} allocated)</span\n >\n </div>\n </div>\n </vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\n</vdr-data-table-2>\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }] }); }
|
|
3469
3469
|
}
|
|
3470
3470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantListComponent, decorators: [{
|
|
3471
3471
|
type: Component,
|
|
3472
|
-
args: [{ selector: 'vdr-product-variant-list', standalone: false, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\
|
|
3472
|
+
args: [{ selector: 'vdr-product-variant-list', standalone: false, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n</vdr-page-block>\n<vdr-data-table-2\n class=\"mt-2\"\n [id]=\"dataTableId || 'product-variant-list'\"\n [items]=\"items$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n>\n <vdr-bulk-action-menu\n locationId=\"product-variant-list\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n />\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n <ng-template let-variant=\"item\">\n {{ variant.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-variant=\"item\">\n {{ variant.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-variant=\"item\">\n {{ variant.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-variant=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\n <ng-template let-variant=\"item\">\n <a\n class=\"button-ghost\"\n [routerLink]=\"['/catalog/products', variant.productId, 'variants', variant.id]\"\n ><span>{{ variant.name }}</span\n ><clr-icon shape=\"arrow right\"\n /></a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [sort]=\"sorts.get('sku')\">\n <ng-template let-variant=\"item\">\n {{ variant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\n <ng-template let-variant=\"item\">\n <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\n 'common.enabled' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\n 'common.disabled' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.price' | translate\" id=\"price\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('price')\"\n >\n <ng-template let-variant=\"item\">\n {{ variant.price | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [sort]=\"sorts.get('priceWithTax')\">\n <ng-template let-variant=\"item\">\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n </ng-template>\n </vdr-dt2-column>\n\n <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" id=\"stock-on-hand\" [hiddenByDefault]=\"false\">\n <ng-template let-variant=\"item\">\n <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\n <div class=\"flex center\">\n <div>\n {{ stockLevel.stockOnHand\n }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\n >({{ stockLevel.stockAllocated }} allocated)</span\n >\n </div>\n </div>\n </vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\n</vdr-data-table-2>\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
|
|
3473
3473
|
}], ctorParameters: () => [], propDecorators: { productId: [{
|
|
3474
3474
|
type: Input
|
|
3475
3475
|
}], hideLanguageSelect: [{
|
|
@@ -3478,13 +3478,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
3478
3478
|
type: Input
|
|
3479
3479
|
}] } });
|
|
3480
3480
|
|
|
3481
|
-
const GET_PRODUCT_DETAIL = gql `
|
|
3482
|
-
query GetProductDetail($id: ID!) {
|
|
3483
|
-
product(id: $id) {
|
|
3484
|
-
...ProductDetail
|
|
3485
|
-
}
|
|
3486
|
-
}
|
|
3487
|
-
${PRODUCT_DETAIL_FRAGMENT}
|
|
3481
|
+
const GET_PRODUCT_DETAIL = gql `
|
|
3482
|
+
query GetProductDetail($id: ID!) {
|
|
3483
|
+
product(id: $id) {
|
|
3484
|
+
...ProductDetail
|
|
3485
|
+
}
|
|
3486
|
+
}
|
|
3487
|
+
${PRODUCT_DETAIL_FRAGMENT}
|
|
3488
3488
|
`;
|
|
3489
3489
|
class ProductDetailComponent extends TypedBaseDetailComponent {
|
|
3490
3490
|
constructor(productDetailService, formBuilder, modalService, notificationService, dataService, changeDetector) {
|
|
@@ -3767,11 +3767,11 @@ class ProductDetailComponent extends TypedBaseDetailComponent {
|
|
|
3767
3767
|
}
|
|
3768
3768
|
}
|
|
3769
3769
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductDetailComponent, deps: [{ token: ProductDetailService }, { token: i2.FormBuilder }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3770
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductDetailComponent, isStandalone: false, selector: "vdr-product-detail2", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <div class=\"flex clr-flex-row\"></div>\r\n <vdr-language-selector\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"updatePermissions\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n <vdr-action-bar-dropdown-menu locationId=\"product-detail\"></vdr-action-bar-dropdown-menu>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\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 <ng-container *ngIf=\"!(isNew$ | async)\">\r\n <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n <vdr-form-item *vdrIfDefaultChannelActive>\r\n <div class=\"flex channel-assignment\">\r\n <div class=\"mb-2\">\r\n <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n <vdr-chip\r\n *ngIf=\"!isDefaultChannel(channel.code)\"\r\n icon=\"times-circle\"\r\n (iconClick)=\"removeFromChannel(channel.id)\"\r\n >\r\n <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n {{ channel.code | channelCodeToLabel }}\r\n </vdr-chip>\r\n </ng-container>\r\n </div>\r\n <button class=\"button-small\" (click)=\"assignToChannel()\">\r\n <clr-icon shape=\"layers\"></clr-icon>\r\n {{ 'common.assign-to-channel' | translate }}\r\n </button>\r\n </div>\r\n </vdr-form-item>\r\n </vdr-card>\r\n </ng-container>\r\n <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n <div class=\"options\">\r\n <vdr-chip\r\n *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n [colorFrom]=\"optionGroup.code\"\r\n [invert]=\"true\"\r\n >\r\n {{ optionGroup.name }}\r\n </vdr-chip>\r\n </div>\r\n <div>\r\n <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\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)=\"removeProductFacetValue(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)=\"selectProductFacetValue()\"\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 <vdr-card *ngIf=\"entity$ | async as entity\">\r\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\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 <div>\r\n <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n (input)=\"updateSlug($event.target.value)\"\r\n />\r\n </vdr-form-field>\r\n <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\r\n <clr-checkbox-wrapper>\r\n <input\r\n clrCheckbox\r\n type=\"checkbox\"\r\n id=\"auto-update\"\r\n formControlName=\"autoUpdateVariantNames\"\r\n />\r\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n </div>\r\n <vdr-form-field\r\n [label]=\"'catalog.slug' | translate\"\r\n for=\"slug\"\r\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n >\r\n <input\r\n id=\"slug\"\r\n type=\"text\"\r\n formControlName=\"slug\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n class=\"form-grid-span\"\r\n [label]=\"'common.description' | translate\"\r\n for=\"slug\"\r\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n >\r\n <vdr-rich-text-editor\r\n formControlName=\"description\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n ></vdr-rich-text-editor>\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=\"Product\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"product-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"assetChanges.assets || entity?.assets\"\r\n [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n [updatePermissions]=\"updatePermissions\"\r\n (change)=\"assetChanges = $event\"\r\n ></vdr-assets>\r\n </vdr-card>\r\n\r\n <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n <div *ngIf=\"isNew$ | async; else variantList\">\r\n <vdr-generate-product-variants\r\n (variantsChange)=\"createVariantsConfig = $event\"\r\n ></vdr-generate-product-variants>\r\n </div>\r\n <ng-template #variantList>\r\n <vdr-product-variant-list\r\n [productId]=\"this.id\"\r\n dataTableId=\"product-detail-variants-list\"\r\n [hideLanguageSelect]=\"true\"\r\n ></vdr-product-variant-list>\r\n </ng-template>\r\n <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n <clr-icon shape=\"add-text\"></clr-icon>\r\n {{ 'catalog.manage-variants' | translate }}</a\r\n >\r\n </div>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-inline-start:none}.group-name{padding-inline-end:6px}.view-mode{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;min-height:24px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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.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.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "directive", type: i1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "directive", type: i1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { 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: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { kind: "component", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: ["productId", "hideLanguageSelect", "dataTableId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductDetailComponent, isStandalone: false, selector: "vdr-product-detail2", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <div class=\"flex clr-flex-row\"></div>\n <vdr-language-selector\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\n <button\n class=\"btn btn-primary\"\n *ngIf=\"isNew$ | async; else updateButton\"\n (click)=\"create()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0\"\n >\n {{ 'common.create' | translate }}\n </button>\n <ng-template #updateButton>\n <button\n *vdrIfPermissions=\"updatePermissions\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\n >\n {{ 'common.update' | translate }}\n </button>\n </ng-template>\n <vdr-action-bar-dropdown-menu locationId=\"product-detail\"></vdr-action-bar-dropdown-menu>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n\n<form class=\"form\" [formGroup]=\"detailForm\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar>\n <vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\n <input\n type=\"checkbox\"\n clrToggle\n name=\"enabled\"\n [formControl]=\"detailForm.get(['enabled'])\"\n />\n <label>{{ 'common.enabled' | translate }}</label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <ng-container *ngIf=\"!(isNew$ | async)\">\n <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\n <vdr-form-item *vdrIfDefaultChannelActive>\n <div class=\"flex channel-assignment\">\n <div class=\"mb-2\">\n <ng-container *ngFor=\"let channel of productChannels$ | async\">\n <vdr-chip\n *ngIf=\"!isDefaultChannel(channel.code)\"\n icon=\"times-circle\"\n (iconClick)=\"removeFromChannel(channel.id)\"\n >\n <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\n {{ channel.code | channelCodeToLabel }}\n </vdr-chip>\n </ng-container>\n </div>\n <button class=\"button-small\" (click)=\"assignToChannel()\">\n <clr-icon shape=\"layers\"></clr-icon>\n {{ 'common.assign-to-channel' | translate }}\n </button>\n </div>\n </vdr-form-item>\n </vdr-card>\n </ng-container>\n <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\n <div class=\"options\">\n <vdr-chip\n *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\n [colorFrom]=\"optionGroup.code\"\n [invert]=\"true\"\n >\n {{ optionGroup.name }}\n </vdr-chip>\n </div>\n <div>\n <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\n <clr-icon shape=\"pencil\"></clr-icon>\n {{ 'catalog.edit-options' | translate }}\n </a>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'catalog.facets' | translate\">\n <div class=\"facets\">\n <vdr-facet-value-chip\n *ngFor=\"let facetValue of facetValues$ | async\"\n [facetValue]=\"facetValue\"\n [removable]=\"updatePermissions | hasPermission\"\n (remove)=\"removeProductFacetValue(facetValue.id)\"\n ></vdr-facet-value-chip>\n </div>\n <div>\n <button\n class=\"button-small mt-2\"\n *vdrIfPermissions=\"updatePermissions\"\n (click)=\"selectProductFacetValue()\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-facets' | translate }}\n </button>\n </div>\n </vdr-card>\n <vdr-card *ngIf=\"entity$ | async as entity\">\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\n <vdr-card>\n <div class=\"form-grid\">\n <div>\n <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n (input)=\"updateSlug($event.target.value)\"\n />\n </vdr-form-field>\n <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\n <clr-checkbox-wrapper>\n <input\n clrCheckbox\n type=\"checkbox\"\n id=\"auto-update\"\n formControlName=\"autoUpdateVariantNames\"\n />\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\n </clr-checkbox-wrapper>\n </div>\n </div>\n <vdr-form-field\n [label]=\"'catalog.slug' | translate\"\n for=\"slug\"\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\n >\n <input\n id=\"slug\"\n type=\"text\"\n formControlName=\"slug\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field\n class=\"form-grid-span\"\n [label]=\"'common.description' | translate\"\n for=\"slug\"\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\n >\n <vdr-rich-text-editor\n formControlName=\"description\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n ></vdr-rich-text-editor>\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"Product\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </vdr-card>\n <vdr-custom-detail-component-host\n locationId=\"product-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n ></vdr-custom-detail-component-host>\n <vdr-card [title]=\"'catalog.assets' | translate\">\n <vdr-assets\n [assets]=\"assetChanges.assets || entity?.assets\"\n [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\n [updatePermissions]=\"updatePermissions\"\n (change)=\"assetChanges = $event\"\n ></vdr-assets>\n </vdr-card>\n\n <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\n <div *ngIf=\"isNew$ | async; else variantList\">\n <vdr-generate-product-variants\n (variantsChange)=\"createVariantsConfig = $event\"\n ></vdr-generate-product-variants>\n </div>\n <ng-template #variantList>\n <vdr-product-variant-list\n [productId]=\"this.id\"\n dataTableId=\"product-detail-variants-list\"\n [hideLanguageSelect]=\"true\"\n ></vdr-product-variant-list>\n </ng-template>\n <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\n <a class=\"button\" [routerLink]=\"['manage-variants']\">\n <clr-icon shape=\"add-text\"></clr-icon>\n {{ 'catalog.manage-variants' | translate }}</a\n >\n </div>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-inline-start:none}.group-name{padding-inline-end:6px}.view-mode{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;min-height:24px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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.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.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "directive", type: i1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "directive", type: i1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { 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: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { kind: "component", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: ["productId", "hideLanguageSelect", "dataTableId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3771
3771
|
}
|
|
3772
3772
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductDetailComponent, decorators: [{
|
|
3773
3773
|
type: Component,
|
|
3774
|
-
args: [{ selector: 'vdr-product-detail2', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left>\r\n <div class=\"flex clr-flex-row\"></div>\r\n <vdr-language-selector\r\n [disabled]=\"isNew$ | async\"\r\n [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n [currentLanguageCode]=\"languageCode$ | async\"\r\n (languageCodeChange)=\"setLanguage($event)\"\r\n ></vdr-language-selector>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"updatePermissions\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n <vdr-action-bar-dropdown-menu locationId=\"product-detail\"></vdr-action-bar-dropdown-menu>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n <vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\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 <ng-container *ngIf=\"!(isNew$ | async)\">\r\n <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n <vdr-form-item *vdrIfDefaultChannelActive>\r\n <div class=\"flex channel-assignment\">\r\n <div class=\"mb-2\">\r\n <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n <vdr-chip\r\n *ngIf=\"!isDefaultChannel(channel.code)\"\r\n icon=\"times-circle\"\r\n (iconClick)=\"removeFromChannel(channel.id)\"\r\n >\r\n <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n {{ channel.code | channelCodeToLabel }}\r\n </vdr-chip>\r\n </ng-container>\r\n </div>\r\n <button class=\"button-small\" (click)=\"assignToChannel()\">\r\n <clr-icon shape=\"layers\"></clr-icon>\r\n {{ 'common.assign-to-channel' | translate }}\r\n </button>\r\n </div>\r\n </vdr-form-item>\r\n </vdr-card>\r\n </ng-container>\r\n <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n <div class=\"options\">\r\n <vdr-chip\r\n *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n [colorFrom]=\"optionGroup.code\"\r\n [invert]=\"true\"\r\n >\r\n {{ optionGroup.name }}\r\n </vdr-chip>\r\n </div>\r\n <div>\r\n <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\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)=\"removeProductFacetValue(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)=\"selectProductFacetValue()\"\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 <vdr-card *ngIf=\"entity$ | async as entity\">\r\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\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 <div>\r\n <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n <input\r\n id=\"name\"\r\n type=\"text\"\r\n formControlName=\"name\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n (input)=\"updateSlug($event.target.value)\"\r\n />\r\n </vdr-form-field>\r\n <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\r\n <clr-checkbox-wrapper>\r\n <input\r\n clrCheckbox\r\n type=\"checkbox\"\r\n id=\"auto-update\"\r\n formControlName=\"autoUpdateVariantNames\"\r\n />\r\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n </div>\r\n <vdr-form-field\r\n [label]=\"'catalog.slug' | translate\"\r\n for=\"slug\"\r\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n >\r\n <input\r\n id=\"slug\"\r\n type=\"text\"\r\n formControlName=\"slug\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n class=\"form-grid-span\"\r\n [label]=\"'common.description' | translate\"\r\n for=\"slug\"\r\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n >\r\n <vdr-rich-text-editor\r\n formControlName=\"description\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n ></vdr-rich-text-editor>\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=\"Product\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n [readonly]=\"!(updatePermissions | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-custom-detail-component-host\r\n locationId=\"product-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <vdr-card [title]=\"'catalog.assets' | translate\">\r\n <vdr-assets\r\n [assets]=\"assetChanges.assets || entity?.assets\"\r\n [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n [updatePermissions]=\"updatePermissions\"\r\n (change)=\"assetChanges = $event\"\r\n ></vdr-assets>\r\n </vdr-card>\r\n\r\n <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n <div *ngIf=\"isNew$ | async; else variantList\">\r\n <vdr-generate-product-variants\r\n (variantsChange)=\"createVariantsConfig = $event\"\r\n ></vdr-generate-product-variants>\r\n </div>\r\n <ng-template #variantList>\r\n <vdr-product-variant-list\r\n [productId]=\"this.id\"\r\n dataTableId=\"product-detail-variants-list\"\r\n [hideLanguageSelect]=\"true\"\r\n ></vdr-product-variant-list>\r\n </ng-template>\r\n <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n <clr-icon shape=\"add-text\"></clr-icon>\r\n {{ 'catalog.manage-variants' | translate }}</a\r\n >\r\n </div>\r\n </vdr-card>\r\n </vdr-page-block>\r\n </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-inline-start:none}.group-name{padding-inline-end:6px}.view-mode{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;min-height:24px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"] }]
|
|
3774
|
+
args: [{ selector: 'vdr-product-detail2', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <div class=\"flex clr-flex-row\"></div>\n <vdr-language-selector\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\n <button\n class=\"btn btn-primary\"\n *ngIf=\"isNew$ | async; else updateButton\"\n (click)=\"create()\"\n [disabled]=\"detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0\"\n >\n {{ 'common.create' | translate }}\n </button>\n <ng-template #updateButton>\n <button\n *vdrIfPermissions=\"updatePermissions\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\n >\n {{ 'common.update' | translate }}\n </button>\n </ng-template>\n <vdr-action-bar-dropdown-menu locationId=\"product-detail\"></vdr-action-bar-dropdown-menu>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n\n<form class=\"form\" [formGroup]=\"detailForm\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar>\n <vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\n <input\n type=\"checkbox\"\n clrToggle\n name=\"enabled\"\n [formControl]=\"detailForm.get(['enabled'])\"\n />\n <label>{{ 'common.enabled' | translate }}</label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <ng-container *ngIf=\"!(isNew$ | async)\">\n <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\n <vdr-form-item *vdrIfDefaultChannelActive>\n <div class=\"flex channel-assignment\">\n <div class=\"mb-2\">\n <ng-container *ngFor=\"let channel of productChannels$ | async\">\n <vdr-chip\n *ngIf=\"!isDefaultChannel(channel.code)\"\n icon=\"times-circle\"\n (iconClick)=\"removeFromChannel(channel.id)\"\n >\n <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\n {{ channel.code | channelCodeToLabel }}\n </vdr-chip>\n </ng-container>\n </div>\n <button class=\"button-small\" (click)=\"assignToChannel()\">\n <clr-icon shape=\"layers\"></clr-icon>\n {{ 'common.assign-to-channel' | translate }}\n </button>\n </div>\n </vdr-form-item>\n </vdr-card>\n </ng-container>\n <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\n <div class=\"options\">\n <vdr-chip\n *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\n [colorFrom]=\"optionGroup.code\"\n [invert]=\"true\"\n >\n {{ optionGroup.name }}\n </vdr-chip>\n </div>\n <div>\n <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\n <clr-icon shape=\"pencil\"></clr-icon>\n {{ 'catalog.edit-options' | translate }}\n </a>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'catalog.facets' | translate\">\n <div class=\"facets\">\n <vdr-facet-value-chip\n *ngFor=\"let facetValue of facetValues$ | async\"\n [facetValue]=\"facetValue\"\n [removable]=\"updatePermissions | hasPermission\"\n (remove)=\"removeProductFacetValue(facetValue.id)\"\n ></vdr-facet-value-chip>\n </div>\n <div>\n <button\n class=\"button-small mt-2\"\n *vdrIfPermissions=\"updatePermissions\"\n (click)=\"selectProductFacetValue()\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-facets' | translate }}\n </button>\n </div>\n </vdr-card>\n <vdr-card *ngIf=\"entity$ | async as entity\">\n <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\n <vdr-card>\n <div class=\"form-grid\">\n <div>\n <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n (input)=\"updateSlug($event.target.value)\"\n />\n </vdr-form-field>\n <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\n <clr-checkbox-wrapper>\n <input\n clrCheckbox\n type=\"checkbox\"\n id=\"auto-update\"\n formControlName=\"autoUpdateVariantNames\"\n />\n <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\n </clr-checkbox-wrapper>\n </div>\n </div>\n <vdr-form-field\n [label]=\"'catalog.slug' | translate\"\n for=\"slug\"\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\n >\n <input\n id=\"slug\"\n type=\"text\"\n formControlName=\"slug\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field\n class=\"form-grid-span\"\n [label]=\"'common.description' | translate\"\n for=\"slug\"\n [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\n >\n <vdr-rich-text-editor\n formControlName=\"description\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n ></vdr-rich-text-editor>\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"Product\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n </vdr-card>\n <vdr-custom-detail-component-host\n locationId=\"product-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n ></vdr-custom-detail-component-host>\n <vdr-card [title]=\"'catalog.assets' | translate\">\n <vdr-assets\n [assets]=\"assetChanges.assets || entity?.assets\"\n [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\n [updatePermissions]=\"updatePermissions\"\n (change)=\"assetChanges = $event\"\n ></vdr-assets>\n </vdr-card>\n\n <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\n <div *ngIf=\"isNew$ | async; else variantList\">\n <vdr-generate-product-variants\n (variantsChange)=\"createVariantsConfig = $event\"\n ></vdr-generate-product-variants>\n </div>\n <ng-template #variantList>\n <vdr-product-variant-list\n [productId]=\"this.id\"\n dataTableId=\"product-detail-variants-list\"\n [hideLanguageSelect]=\"true\"\n ></vdr-product-variant-list>\n </ng-template>\n <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\n <a class=\"button\" [routerLink]=\"['manage-variants']\">\n <clr-icon shape=\"add-text\"></clr-icon>\n {{ 'catalog.manage-variants' | translate }}</a\n >\n </div>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-inline-start:none}.group-name{padding-inline-end:6px}.view-mode{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;min-height:24px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"] }]
|
|
3775
3775
|
}], ctorParameters: () => [{ type: ProductDetailService }, { type: i2.FormBuilder }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
|
|
3776
3776
|
|
|
3777
3777
|
const deleteProductsBulkAction = {
|
|
@@ -4054,11 +4054,11 @@ class ProductListComponent extends TypedBaseListComponent {
|
|
|
4054
4054
|
});
|
|
4055
4055
|
}
|
|
4056
4056
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductListComponent, deps: [{ token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.JobQueueService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4057
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductListComponent, isStandalone: false, selector: "vdr-products-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\
|
|
4057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductListComponent, isStandalone: false, selector: "vdr-products-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items [locationId]=\"pageLocationId\"></vdr-action-bar-items>\n <a\n class=\"button primary mr-1\"\n [routerLink]=\"['./create']\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-product' | translate }}\n </a>\n <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" [locationId]=\"pageLocationId\">\n <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\n <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\n {{ 'catalog.rebuild-search-index' | translate }}\n </button>\n </vdr-action-bar-dropdown-menu>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n class=\"mt-2\"\n [id]=\"dataTableListId\"\n [items]=\"items$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\n>\n <vdr-bulk-action-menu\n [locationId]=\"dataTableListId\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n ></vdr-bulk-action-menu>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n <ng-template let-product=\"item\">\n {{ product.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-product=\"item\">\n {{ product.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-product=\"item\">\n {{ product.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-product=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\n <ng-template let-product=\"item\">\n <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\n ><span>{{ product.name }}</span\n ><clr-icon shape=\"arrow right\"\n /></a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\n <ng-template let-product=\"item\">\n {{ product.slug }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\n <ng-template let-product=\"item\">\n <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\n 'common.enabled' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\n 'common.disabled' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\" id=\"number-of-variants\">\n <ng-template let-product=\"item\">\n {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of customFields\"\n [customField]=\"customField\"\n [sorts]=\"sorts\"\n />\n</vdr-data-table-2>\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: 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.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { 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: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
|
|
4058
4058
|
}
|
|
4059
4059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
4060
4060
|
type: Component,
|
|
4061
|
-
args: [{ selector: 'vdr-products-list', standalone: false, template: "<vdr-page-block>\
|
|
4061
|
+
args: [{ selector: 'vdr-products-list', standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left>\n <vdr-language-selector\n [availableLanguageCodes]=\"availableLanguages$ | async\"\n [currentLanguageCode]=\"contentLanguage$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </vdr-ab-left>\n <vdr-ab-right>\n <vdr-action-bar-items [locationId]=\"pageLocationId\"></vdr-action-bar-items>\n <a\n class=\"button primary mr-1\"\n [routerLink]=\"['./create']\"\n *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.create-new-product' | translate }}\n </a>\n <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" [locationId]=\"pageLocationId\">\n <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\n <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\n {{ 'catalog.rebuild-search-index' | translate }}\n </button>\n </vdr-action-bar-dropdown-menu>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n class=\"mt-2\"\n [id]=\"dataTableListId\"\n [items]=\"items$ | async\"\n [itemsPerPage]=\"itemsPerPage$ | async\"\n [totalItems]=\"totalItems$ | async\"\n [currentPage]=\"currentPage$ | async\"\n [filters]=\"filters\"\n (pageChange)=\"setPageNumber($event)\"\n (itemsPerPageChange)=\"setItemsPerPage($event)\"\n (visibleColumnsChange)=\"setVisibleColumns($event)\"\n>\n <vdr-bulk-action-menu\n [locationId]=\"dataTableListId\"\n [hostComponent]=\"this\"\n [selectionManager]=\"selectionManager\"\n ></vdr-bulk-action-menu>\n <vdr-dt2-search\n [searchTermControl]=\"searchTermControl\"\n [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\n />\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n <ng-template let-product=\"item\">\n {{ product.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('createdAt')\"\n >\n <ng-template let-product=\"item\">\n {{ product.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n [hiddenByDefault]=\"true\"\n [sort]=\"sorts.get('updatedAt')\"\n >\n <ng-template let-product=\"item\">\n {{ product.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-product=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\n <ng-template let-product=\"item\">\n <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\n ><span>{{ product.name }}</span\n ><clr-icon shape=\"arrow right\"\n /></a>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\n <ng-template let-product=\"item\">\n {{ product.slug }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\n <ng-template let-product=\"item\">\n <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\n 'common.enabled' | translate\n }}</vdr-chip>\n <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\n 'common.disabled' | translate\n }}</vdr-chip>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\" id=\"number-of-variants\">\n <ng-template let-product=\"item\">\n {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of customFields\"\n [customField]=\"customField\"\n [sorts]=\"sorts\"\n />\n</vdr-data-table-2>\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
|
|
4062
4062
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.JobQueueService }] });
|
|
4063
4063
|
|
|
4064
4064
|
class VariantPriceDetailComponent {
|
|
@@ -4097,11 +4097,11 @@ class VariantPriceDetailComponent {
|
|
|
4097
4097
|
}
|
|
4098
4098
|
}
|
|
4099
4099
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: VariantPriceDetailComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: VariantPriceDetailComponent, isStandalone: false, selector: "vdr-variant-price-detail", inputs: { priceIncludesTax: "priceIncludesTax", price: "price", currencyCode: "currencyCode", taxCategoryId: "taxCategoryId" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"clr-control-label\">{{ 'catalog.taxes' | translate }}</label>\
|
|
4100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: VariantPriceDetailComponent, isStandalone: false, selector: "vdr-variant-price-detail", inputs: { priceIncludesTax: "priceIncludesTax", price: "price", currencyCode: "currencyCode", taxCategoryId: "taxCategoryId" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"clr-control-label\">{{ 'catalog.taxes' | translate }}</label>\n<div *ngIf=\"priceIncludesTax\" class=\"value\">\n {{ 'catalog.price-includes-tax-at' | translate: { rate: taxRate$ | async } }}\n</div>\n<div *ngIf=\"!priceIncludesTax\" class=\"value\">\n {{\n 'catalog.price-with-tax-in-default-zone'\n | translate: { price: grossPrice$ | async | localeCurrency: currencyCode, rate: taxRate$ | async }\n }}\n</div>\n", styles: [":host{display:flex;flex-direction:column}.value{margin-top:3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4101
4101
|
}
|
|
4102
4102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: VariantPriceDetailComponent, decorators: [{
|
|
4103
4103
|
type: Component,
|
|
4104
|
-
args: [{ selector: 'vdr-variant-price-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<label class=\"clr-control-label\">{{ 'catalog.taxes' | translate }}</label>\
|
|
4104
|
+
args: [{ selector: 'vdr-variant-price-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<label class=\"clr-control-label\">{{ 'catalog.taxes' | translate }}</label>\n<div *ngIf=\"priceIncludesTax\" class=\"value\">\n {{ 'catalog.price-includes-tax-at' | translate: { rate: taxRate$ | async } }}\n</div>\n<div *ngIf=\"!priceIncludesTax\" class=\"value\">\n {{\n 'catalog.price-with-tax-in-default-zone'\n | translate: { price: grossPrice$ | async | localeCurrency: currencyCode, rate: taxRate$ | async }\n }}\n</div>\n", styles: [":host{display:flex;flex-direction:column}.value{margin-top:3px}\n"] }]
|
|
4105
4105
|
}], ctorParameters: () => [{ type: i1.DataService }], propDecorators: { priceIncludesTax: [{
|
|
4106
4106
|
type: Input
|
|
4107
4107
|
}], price: [{
|
|
@@ -4127,11 +4127,11 @@ class VariantPriceStrategyDetailComponent {
|
|
|
4127
4127
|
}
|
|
4128
4128
|
}
|
|
4129
4129
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: VariantPriceStrategyDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: VariantPriceStrategyDetailComponent, isStandalone: false, selector: "vdr-variant-price-strategy-detail", inputs: { channelPriceIncludesTax: "channelPriceIncludesTax", variant: "variant", channelDefaultCurrencyCode: "channelDefaultCurrencyCode" }, ngImport: i0, template: "<div *ngIf=\"calculatedPriceDiffersFromInputPrice()\" class=\"price-strategy-detail\">\
|
|
4130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: VariantPriceStrategyDetailComponent, isStandalone: false, selector: "vdr-variant-price-strategy-detail", inputs: { channelPriceIncludesTax: "channelPriceIncludesTax", variant: "variant", channelDefaultCurrencyCode: "channelDefaultCurrencyCode" }, ngImport: i0, template: "<div *ngIf=\"calculatedPriceDiffersFromInputPrice()\" class=\"price-strategy-detail\">\n <vdr-form-item\n [label]=\"'catalog.calculated-price' | translate\"\n [tooltip]=\"'catalog.calculated-price-tooltip' | translate\"\n for=\"price\"\n >\n </vdr-form-item>\n <div class=\"form-grid mt-2\">\n <vdr-form-item [label]=\"'common.price' | translate\">\n {{ variant.price | localeCurrency : variant.currencyCode }}\n </vdr-form-item>\n <vdr-form-item [label]=\"'common.price-with-tax' | translate\">\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n </vdr-form-item>\n </div>\n</div>\n", styles: [":host{display:block}.price-strategy-detail{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4131
4131
|
}
|
|
4132
4132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: VariantPriceStrategyDetailComponent, decorators: [{
|
|
4133
4133
|
type: Component,
|
|
4134
|
-
args: [{ selector: 'vdr-variant-price-strategy-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"calculatedPriceDiffersFromInputPrice()\" class=\"price-strategy-detail\">\
|
|
4134
|
+
args: [{ selector: 'vdr-variant-price-strategy-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"calculatedPriceDiffersFromInputPrice()\" class=\"price-strategy-detail\">\n <vdr-form-item\n [label]=\"'catalog.calculated-price' | translate\"\n [tooltip]=\"'catalog.calculated-price-tooltip' | translate\"\n for=\"price\"\n >\n </vdr-form-item>\n <div class=\"form-grid mt-2\">\n <vdr-form-item [label]=\"'common.price' | translate\">\n {{ variant.price | localeCurrency : variant.currencyCode }}\n </vdr-form-item>\n <vdr-form-item [label]=\"'common.price-with-tax' | translate\">\n {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n </vdr-form-item>\n </div>\n</div>\n", styles: [":host{display:block}.price-strategy-detail{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}\n"] }]
|
|
4135
4135
|
}], propDecorators: { channelPriceIncludesTax: [{
|
|
4136
4136
|
type: Input
|
|
4137
4137
|
}], variant: [{
|
|
@@ -4140,17 +4140,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
4140
4140
|
type: Input
|
|
4141
4141
|
}] } });
|
|
4142
4142
|
|
|
4143
|
-
const GET_PRODUCT_VARIANTS_QUICK_JUMP = gql `
|
|
4144
|
-
query GetProductVariantsQuickJump($id: ID!) {
|
|
4145
|
-
product(id: $id) {
|
|
4146
|
-
id
|
|
4147
|
-
variants {
|
|
4148
|
-
id
|
|
4149
|
-
name
|
|
4150
|
-
sku
|
|
4151
|
-
}
|
|
4152
|
-
}
|
|
4153
|
-
}
|
|
4143
|
+
const GET_PRODUCT_VARIANTS_QUICK_JUMP = gql `
|
|
4144
|
+
query GetProductVariantsQuickJump($id: ID!) {
|
|
4145
|
+
product(id: $id) {
|
|
4146
|
+
id
|
|
4147
|
+
variants {
|
|
4148
|
+
id
|
|
4149
|
+
name
|
|
4150
|
+
sku
|
|
4151
|
+
}
|
|
4152
|
+
}
|
|
4153
|
+
}
|
|
4154
4154
|
`;
|
|
4155
4155
|
class ProductVariantQuickJumpComponent {
|
|
4156
4156
|
constructor(dataService, router) {
|
|
@@ -4174,11 +4174,11 @@ class ProductVariantQuickJumpComponent {
|
|
|
4174
4174
|
}
|
|
4175
4175
|
}
|
|
4176
4176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantQuickJumpComponent, deps: [{ token: i1.DataService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4177
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantQuickJumpComponent, isStandalone: false, selector: "vdr-product-variant-quick-jump", inputs: { productId: "productId" }, ngImport: i0, template: "<ng-select\
|
|
4177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantQuickJumpComponent, isStandalone: false, selector: "vdr-product-variant-quick-jump", inputs: { productId: "productId" }, ngImport: i0, template: "<ng-select\n *ngIf=\"(variants$ | async)?.length > 1\"\n [items]=\"variants$ | async\"\n appendTo=\"body\"\n bindValue=\"id\"\n [(ngModel)]=\"selectedVariantId\"\n [searchFn]=\"searchFn\"\n [clearable]=\"false\"\n [placeholder]=\"'catalog.quick-jump-placeholder' | translate\"\n (change)=\"onSelect($event)\"\n>\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n {{ item.name }} ({{ item.sku }})\n </ng-template>\n</ng-select>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4178
4178
|
}
|
|
4179
4179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantQuickJumpComponent, decorators: [{
|
|
4180
4180
|
type: Component,
|
|
4181
|
-
args: [{ selector: 'vdr-product-variant-quick-jump', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-select\
|
|
4181
|
+
args: [{ selector: 'vdr-product-variant-quick-jump', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-select\n *ngIf=\"(variants$ | async)?.length > 1\"\n [items]=\"variants$ | async\"\n appendTo=\"body\"\n bindValue=\"id\"\n [(ngModel)]=\"selectedVariantId\"\n [searchFn]=\"searchFn\"\n [clearable]=\"false\"\n [placeholder]=\"'catalog.quick-jump-placeholder' | translate\"\n (change)=\"onSelect($event)\"\n>\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n {{ item.name }} ({{ item.sku }})\n </ng-template>\n</ng-select>\n" }]
|
|
4182
4182
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1$1.Router }], propDecorators: { productId: [{
|
|
4183
4183
|
type: Input
|
|
4184
4184
|
}] } });
|
|
@@ -4432,11 +4432,11 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
|
|
|
4432
4432
|
};
|
|
4433
4433
|
}
|
|
4434
4434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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 }); }
|
|
4435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantDetailComponent, isStandalone: false, 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: ["id", "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 }); }
|
|
4435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantDetailComponent, isStandalone: false, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left [grow]=\"true\">\n <div class=\"flex center\">\n <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\n <vdr-language-selector\n *ngIf=\"availableLanguages.length > 1\"\n class=\"mr-2\"\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </ng-container>\n <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\n </div>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\n <button\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"\n (detailForm.invalid ||\n stockLevelsForm.invalid ||\n pricesForm.invalid ||\n (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\n !assetsChanged()\n \"\n >\n {{ 'common.update' | translate }}\n </button>\n <vdr-action-bar-dropdown-menu locationId=\"product-variant-detail\"></vdr-action-bar-dropdown-menu>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar\n ><vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\n <input\n type=\"checkbox\"\n clrToggle\n name=\"enabled\"\n [formControl]=\"detailForm.get(['enabled'])\"\n />\n <label>{{ 'common.enabled' | translate }}</label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\n <div class=\"options\">\n <vdr-chip\n *ngFor=\"let option of variant.options | sort : 'groupId'\"\n [colorFrom]=\"optionGroupCode(option.groupId)\"\n [invert]=\"true\"\n >\n <span>{{ optionGroupCode(option.groupId) }}:</span>\n {{ optionName(option) }}\n </vdr-chip>\n </div>\n <div>\n <a\n [routerLink]=\"['../../', 'options']\"\n class=\"button-small mt-2\"\n *vdrIfPermissions=\"updatePermissions\"\n >\n <clr-icon shape=\"pencil\"></clr-icon>\n {{ 'catalog.edit-options' | translate }}\n </a>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'catalog.facets' | translate\">\n <div class=\"facets\">\n <vdr-facet-value-chip\n *ngFor=\"let facetValue of facetValues$ | async\"\n [facetValue]=\"facetValue\"\n [removable]=\"updatePermissions | hasPermission\"\n (remove)=\"removeFacetValue(facetValue.id)\"\n ></vdr-facet-value-chip>\n </div>\n <div>\n <button\n class=\"button-small mt-2\"\n *vdrIfPermissions=\"updatePermissions\"\n (click)=\"selectFacetValue()\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-facets' | translate }}\n </button>\n </div>\n </vdr-card>\n\n <vdr-card>\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\n <vdr-card>\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\n <input\n id=\"sku\"\n type=\"text\"\n formControlName=\"sku\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"ProductVariant\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-card>\n <vdr-custom-detail-component-host\n locationId=\"product-variant-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n />\n <vdr-card [title]=\"'catalog.assets' | translate\">\n <vdr-assets\n [assets]=\"assetChanges.assets || variant.assets\"\n [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\n [updatePermissions]=\"updatePermissions\"\n (change)=\"assetChanges = $event\"\n />\n </vdr-card>\n <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\n <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\n <option\n *ngFor=\"let taxCategory of taxCategories$ | async\"\n [value]=\"taxCategory.id\"\n >\n {{ taxCategory.name }}\n </option>\n </select>\n </vdr-form-field>\n </div>\n <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\n <vdr-form-field\n [label]=\"\n ('catalog.price' | translate) +\n (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\n \"\n [tooltip]=\"\n 1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\n ? ('catalog.default-currency' | translate)\n : undefined\n \"\n for=\"price\"\n >\n <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\n <vdr-currency-input\n name=\"price\"\n [currencyCode]=\"price.value.currencyCode\"\n [readonly]=\"\n !(updatePermissions | hasPermission) || price.value.delete === true\n \"\n formControlName=\"price\"\n />\n <div *ngIf=\"1 < pricesForm.controls.length\">\n <button\n class=\"button-small delete-button\"\n [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\n (click)=\"toggleDeletePrice(price.get('delete'))\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </div>\n </vdr-form-field>\n <vdr-variant-price-detail\n [price]=\"price.value.price\"\n [currencyCode]=\"price.value.currencyCode\"\n [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\n />\n\n <div class=\"form-grid-span\" *ngIf=\"customPriceFields.length\">\n <div class=\"title-row\">\n <span class=\"title\">{{ 'common.custom-fields' | translate }}</span>\n </div>\n <vdr-tabbed-custom-fields\n entityName=\"ProductVariantPrice\"\n [customFields]=\"customPriceFields\"\n [customFieldsFormGroup]=\"price.get(['customFields'])\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </div>\n </div>\n\n <vdr-variant-price-strategy-detail\n [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\n [variant]=\"variant\"\n />\n\n <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\n <div *ngIf=\"unusedCurrencyCodes.length\">\n <vdr-dropdown>\n <button class=\"button mt-2\" vdrDropdownTrigger>\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-price-in-another-currency' | translate }}\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu>\n <button\n vdrDropdownItem\n *ngFor=\"let currencyCode of unusedCurrencyCodes\"\n (click)=\"addPriceInCurrency(currencyCode)\"\n >\n {{ currencyCode | localeCurrencyName }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n </ng-container>\n </vdr-card>\n <vdr-card [title]=\"'catalog.stock-levels' | translate\">\n <div class=\"form-grid\">\n <vdr-form-field\n for=\"track-inventory\"\n [label]=\"'catalog.track-inventory' | translate\"\n [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\n >\n <select\n name=\"track-inventory\"\n formControlName=\"trackInventory\"\n [disabled]=\"!(updatePermissions | hasPermission)\"\n >\n <option [value]=\"GlobalFlag.TRUE\">\n {{ 'catalog.track-inventory-true' | translate }}\n </option>\n <option [value]=\"GlobalFlag.FALSE\">\n {{ 'catalog.track-inventory-false' | translate }}\n </option>\n <option [value]=\"GlobalFlag.INHERIT\">\n {{ 'catalog.track-inventory-inherit' | translate }}\n </option>\n </select>\n </vdr-form-field>\n\n <vdr-form-item\n [label]=\"'catalog.out-of-stock-threshold' | translate\"\n [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\n >\n <input\n type=\"number\"\n formControlName=\"outOfStockThreshold\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n [vdrDisabled]=\"\n detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\n inventoryIsNotTracked(detailForm)\n \"\n />\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n name=\"useGlobalOutOfStockThreshold\"\n formControlName=\"useGlobalOutOfStockThreshold\"\n [vdrDisabled]=\"\n !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\n \"\n />\n <label\n >{{ 'catalog.use-global-value' | translate }} ({{\n globalOutOfStockThreshold\n }})</label\n >\n </clr-toggle-wrapper>\n </vdr-form-item>\n </div>\n <div\n class=\"form-grid stock-levels\"\n *ngFor=\"let stockLevel of stockLevelsForm.controls\"\n [formGroup]=\"stockLevel\"\n >\n <vdr-form-field\n [label]=\"\n stockLevel.get('stockLocationName')?.value +\n ': ' +\n ('catalog.stock-on-hand' | translate)\n \"\n [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n >\n <input\n [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n type=\"number\"\n formControlName=\"stockOnHand\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-item\n [label]=\"\n stockLevel.get('stockLocationName')?.value +\n ': ' +\n ('catalog.stock-allocated' | translate)\n \"\n >\n {{ stockLevel.get('stockAllocated')?.value }}\n </vdr-form-item>\n </div>\n <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\n <div *ngIf=\"unusedStockLocations.length\">\n <vdr-dropdown>\n <button class=\"button mt-2\" vdrDropdownTrigger>\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-stock-location' | translate }}\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu>\n <button\n vdrDropdownItem\n *ngFor=\"let stockLocation of unusedStockLocations\"\n (click)=\"addStockLocation(stockLocation)\"\n >\n <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n </ng-container>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\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: ["id", "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 }); }
|
|
4436
4436
|
}
|
|
4437
4437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantDetailComponent, decorators: [{
|
|
4438
4438
|
type: Component,
|
|
4439
|
-
args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
|
|
4439
|
+
args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n <vdr-action-bar>\n <vdr-ab-left [grow]=\"true\">\n <div class=\"flex center\">\n <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\n <vdr-language-selector\n *ngIf=\"availableLanguages.length > 1\"\n class=\"mr-2\"\n [disabled]=\"isNew$ | async\"\n [availableLanguageCodes]=\"availableLanguages\"\n [currentLanguageCode]=\"languageCode$ | async\"\n (languageCodeChange)=\"setLanguage($event)\"\n ></vdr-language-selector>\n </ng-container>\n <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\n </div>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\n <button\n *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\n class=\"btn btn-primary\"\n (click)=\"save()\"\n [disabled]=\"\n (detailForm.invalid ||\n stockLevelsForm.invalid ||\n pricesForm.invalid ||\n (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\n !assetsChanged()\n \"\n >\n {{ 'common.update' | translate }}\n </button>\n <vdr-action-bar-dropdown-menu locationId=\"product-variant-detail\"></vdr-action-bar-dropdown-menu>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\n <vdr-page-detail-layout>\n <vdr-page-detail-sidebar\n ><vdr-card>\n <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\n <input\n type=\"checkbox\"\n clrToggle\n name=\"enabled\"\n [formControl]=\"detailForm.get(['enabled'])\"\n />\n <label>{{ 'common.enabled' | translate }}</label>\n </clr-toggle-wrapper>\n </vdr-form-field>\n </vdr-card>\n <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\n <div class=\"options\">\n <vdr-chip\n *ngFor=\"let option of variant.options | sort : 'groupId'\"\n [colorFrom]=\"optionGroupCode(option.groupId)\"\n [invert]=\"true\"\n >\n <span>{{ optionGroupCode(option.groupId) }}:</span>\n {{ optionName(option) }}\n </vdr-chip>\n </div>\n <div>\n <a\n [routerLink]=\"['../../', 'options']\"\n class=\"button-small mt-2\"\n *vdrIfPermissions=\"updatePermissions\"\n >\n <clr-icon shape=\"pencil\"></clr-icon>\n {{ 'catalog.edit-options' | translate }}\n </a>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'catalog.facets' | translate\">\n <div class=\"facets\">\n <vdr-facet-value-chip\n *ngFor=\"let facetValue of facetValues$ | async\"\n [facetValue]=\"facetValue\"\n [removable]=\"updatePermissions | hasPermission\"\n (remove)=\"removeFacetValue(facetValue.id)\"\n ></vdr-facet-value-chip>\n </div>\n <div>\n <button\n class=\"button-small mt-2\"\n *vdrIfPermissions=\"updatePermissions\"\n (click)=\"selectFacetValue()\"\n >\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-facets' | translate }}\n </button>\n </div>\n </vdr-card>\n\n <vdr-card>\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\n <vdr-card>\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\n <input\n id=\"sku\"\n type=\"text\"\n formControlName=\"sku\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-form-field>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n <vdr-tabbed-custom-fields\n entityName=\"ProductVariant\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-card>\n <vdr-custom-detail-component-host\n locationId=\"product-variant-detail\"\n [entity$]=\"entity$\"\n [detailForm]=\"detailForm\"\n />\n <vdr-card [title]=\"'catalog.assets' | translate\">\n <vdr-assets\n [assets]=\"assetChanges.assets || variant.assets\"\n [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\n [updatePermissions]=\"updatePermissions\"\n (change)=\"assetChanges = $event\"\n />\n </vdr-card>\n <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\n <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\n <option\n *ngFor=\"let taxCategory of taxCategories$ | async\"\n [value]=\"taxCategory.id\"\n >\n {{ taxCategory.name }}\n </option>\n </select>\n </vdr-form-field>\n </div>\n <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\n <vdr-form-field\n [label]=\"\n ('catalog.price' | translate) +\n (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\n \"\n [tooltip]=\"\n 1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\n ? ('catalog.default-currency' | translate)\n : undefined\n \"\n for=\"price\"\n >\n <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\n <vdr-currency-input\n name=\"price\"\n [currencyCode]=\"price.value.currencyCode\"\n [readonly]=\"\n !(updatePermissions | hasPermission) || price.value.delete === true\n \"\n formControlName=\"price\"\n />\n <div *ngIf=\"1 < pricesForm.controls.length\">\n <button\n class=\"button-small delete-button\"\n [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\n (click)=\"toggleDeletePrice(price.get('delete'))\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </div>\n </vdr-form-field>\n <vdr-variant-price-detail\n [price]=\"price.value.price\"\n [currencyCode]=\"price.value.currencyCode\"\n [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\n />\n\n <div class=\"form-grid-span\" *ngIf=\"customPriceFields.length\">\n <div class=\"title-row\">\n <span class=\"title\">{{ 'common.custom-fields' | translate }}</span>\n </div>\n <vdr-tabbed-custom-fields\n entityName=\"ProductVariantPrice\"\n [customFields]=\"customPriceFields\"\n [customFieldsFormGroup]=\"price.get(['customFields'])\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </div>\n </div>\n\n <vdr-variant-price-strategy-detail\n [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\n [variant]=\"variant\"\n />\n\n <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\n <div *ngIf=\"unusedCurrencyCodes.length\">\n <vdr-dropdown>\n <button class=\"button mt-2\" vdrDropdownTrigger>\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-price-in-another-currency' | translate }}\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu>\n <button\n vdrDropdownItem\n *ngFor=\"let currencyCode of unusedCurrencyCodes\"\n (click)=\"addPriceInCurrency(currencyCode)\"\n >\n {{ currencyCode | localeCurrencyName }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n </ng-container>\n </vdr-card>\n <vdr-card [title]=\"'catalog.stock-levels' | translate\">\n <div class=\"form-grid\">\n <vdr-form-field\n for=\"track-inventory\"\n [label]=\"'catalog.track-inventory' | translate\"\n [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\n >\n <select\n name=\"track-inventory\"\n formControlName=\"trackInventory\"\n [disabled]=\"!(updatePermissions | hasPermission)\"\n >\n <option [value]=\"GlobalFlag.TRUE\">\n {{ 'catalog.track-inventory-true' | translate }}\n </option>\n <option [value]=\"GlobalFlag.FALSE\">\n {{ 'catalog.track-inventory-false' | translate }}\n </option>\n <option [value]=\"GlobalFlag.INHERIT\">\n {{ 'catalog.track-inventory-inherit' | translate }}\n </option>\n </select>\n </vdr-form-field>\n\n <vdr-form-item\n [label]=\"'catalog.out-of-stock-threshold' | translate\"\n [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\n >\n <input\n type=\"number\"\n formControlName=\"outOfStockThreshold\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n [vdrDisabled]=\"\n detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\n inventoryIsNotTracked(detailForm)\n \"\n />\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n name=\"useGlobalOutOfStockThreshold\"\n formControlName=\"useGlobalOutOfStockThreshold\"\n [vdrDisabled]=\"\n !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\n \"\n />\n <label\n >{{ 'catalog.use-global-value' | translate }} ({{\n globalOutOfStockThreshold\n }})</label\n >\n </clr-toggle-wrapper>\n </vdr-form-item>\n </div>\n <div\n class=\"form-grid stock-levels\"\n *ngFor=\"let stockLevel of stockLevelsForm.controls\"\n [formGroup]=\"stockLevel\"\n >\n <vdr-form-field\n [label]=\"\n stockLevel.get('stockLocationName')?.value +\n ': ' +\n ('catalog.stock-on-hand' | translate)\n \"\n [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n >\n <input\n [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n type=\"number\"\n formControlName=\"stockOnHand\"\n [readonly]=\"!(updatePermissions | hasPermission)\"\n />\n </vdr-form-field>\n <vdr-form-item\n [label]=\"\n stockLevel.get('stockLocationName')?.value +\n ': ' +\n ('catalog.stock-allocated' | translate)\n \"\n >\n {{ stockLevel.get('stockAllocated')?.value }}\n </vdr-form-item>\n </div>\n <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\n <div *ngIf=\"unusedStockLocations.length\">\n <vdr-dropdown>\n <button class=\"button mt-2\" vdrDropdownTrigger>\n <clr-icon shape=\"plus\"></clr-icon>\n {{ 'catalog.add-stock-location' | translate }}\n <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n </button>\n <vdr-dropdown-menu>\n <button\n vdrDropdownItem\n *ngFor=\"let stockLocation of unusedStockLocations\"\n (click)=\"addStockLocation(stockLocation)\"\n >\n <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\n </button>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </div>\n </ng-container>\n </vdr-card>\n </vdr-page-block>\n </vdr-page-detail-layout>\n</form>\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"] }]
|
|
4440
4440
|
}], ctorParameters: () => [{ type: ProductDetailService }, { type: i2.FormBuilder }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
|
|
4441
4441
|
|
|
4442
4442
|
const assignProductVariantsToChannelBulkAction = {
|
|
@@ -4597,11 +4597,11 @@ class ProductVariantsTableComponent {
|
|
|
4597
4597
|
this.changeDetector.markForCheck();
|
|
4598
4598
|
}
|
|
4599
4599
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantsTableComponent, isStandalone: false, selector: "vdr-product-variants-table", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", optionGroups: "optionGroups", pendingAssetChanges: "pendingAssetChanges" }, ngImport: i0, template: "<table class=\"table\">\
|
|
4600
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ProductVariantsTableComponent, isStandalone: false, selector: "vdr-product-variants-table", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", optionGroups: "optionGroups", pendingAssetChanges: "pendingAssetChanges" }, ngImport: i0, template: "<table class=\"table\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'common.name' | translate }}</th>\n <th>{{ 'catalog.sku' | translate }}</th>\n <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\n <th>{{ optionGroup.name }}</th>\n </ng-container>\n <th>{{ 'catalog.price' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n <th>{{ 'common.enabled' | translate }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\n <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\n <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <div class=\"card-img\">\n <div class=\"featured-asset\">\n <img\n *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\n [src]=\"featuredAsset | assetPreview: 'tiny'\"\n />\n <ng-template #placeholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </div>\n </td>\n <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <input\n clrInput\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n [placeholder]=\"'common.name' | translate\"\n />\n </clr-input-container>\n </td>\n <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <input\n clrInput\n type=\"text\"\n formControlName=\"sku\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n [placeholder]=\"'catalog.sku' | translate\"\n />\n </clr-input-container>\n </td>\n <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\n <td\n class=\"left align-middle\"\n [class.disabled]=\"!formGroup.get('enabled')!.value\"\n [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\n >\n {{ option.name }}\n </td>\n </ng-container>\n <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <vdr-currency-input\n *ngIf=\"!channelPriceIncludesTax\"\n clrInput\n [currencyCode]=\"variant.currencyCode\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"price\"\n ></vdr-currency-input>\n <vdr-currency-input\n *ngIf=\"channelPriceIncludesTax\"\n clrInput\n [currencyCode]=\"variant.currencyCode\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"priceWithTax\"\n ></vdr-currency-input>\n </clr-input-container>\n </td>\n <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <input\n clrInput\n type=\"number\"\n min=\"0\"\n step=\"1\"\n formControlName=\"stockOnHand\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </clr-input-container>\n </td>\n <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n name=\"enabled\"\n formControlName=\"enabled\"\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n />\n </clr-toggle-wrapper>\n </td>\n </ng-container>\n </tr>\n </tbody>\n</table>\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.StringToColorPipe, name: "stringToColor" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4601
4601
|
}
|
|
4602
4602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProductVariantsTableComponent, decorators: [{
|
|
4603
4603
|
type: Component,
|
|
4604
|
-
args: [{ selector: 'vdr-product-variants-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<table class=\"table\">\
|
|
4604
|
+
args: [{ selector: 'vdr-product-variants-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<table class=\"table\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'common.name' | translate }}</th>\n <th>{{ 'catalog.sku' | translate }}</th>\n <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\n <th>{{ optionGroup.name }}</th>\n </ng-container>\n <th>{{ 'catalog.price' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n <th>{{ 'common.enabled' | translate }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\n <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\n <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <div class=\"card-img\">\n <div class=\"featured-asset\">\n <img\n *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\n [src]=\"featuredAsset | assetPreview: 'tiny'\"\n />\n <ng-template #placeholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </div>\n </td>\n <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <input\n clrInput\n type=\"text\"\n formControlName=\"name\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n [placeholder]=\"'common.name' | translate\"\n />\n </clr-input-container>\n </td>\n <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <input\n clrInput\n type=\"text\"\n formControlName=\"sku\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n [placeholder]=\"'catalog.sku' | translate\"\n />\n </clr-input-container>\n </td>\n <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\n <td\n class=\"left align-middle\"\n [class.disabled]=\"!formGroup.get('enabled')!.value\"\n [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\n >\n {{ option.name }}\n </td>\n </ng-container>\n <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <vdr-currency-input\n *ngIf=\"!channelPriceIncludesTax\"\n clrInput\n [currencyCode]=\"variant.currencyCode\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"price\"\n ></vdr-currency-input>\n <vdr-currency-input\n *ngIf=\"channelPriceIncludesTax\"\n clrInput\n [currencyCode]=\"variant.currencyCode\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n formControlName=\"priceWithTax\"\n ></vdr-currency-input>\n </clr-input-container>\n </td>\n <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-input-container>\n <input\n clrInput\n type=\"number\"\n min=\"0\"\n step=\"1\"\n formControlName=\"stockOnHand\"\n [readonly]=\"!(updatePermission | hasPermission)\"\n />\n </clr-input-container>\n </td>\n <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n <clr-toggle-wrapper>\n <input\n type=\"checkbox\"\n clrToggle\n name=\"enabled\"\n formControlName=\"enabled\"\n [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n />\n </clr-toggle-wrapper>\n </td>\n </ng-container>\n </tr>\n </tbody>\n</table>\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"] }]
|
|
4605
4605
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formArray: [{
|
|
4606
4606
|
type: Input,
|
|
4607
4607
|
args: ['productVariantsFormArray']
|
|
@@ -4664,11 +4664,11 @@ class UpdateProductOptionDialogComponent {
|
|
|
4664
4664
|
}
|
|
4665
4665
|
}
|
|
4666
4666
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UpdateProductOptionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4667
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: UpdateProductOptionDialogComponent, isStandalone: false, selector: "vdr-update-product-option-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\
|
|
4667
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: UpdateProductOptionDialogComponent, isStandalone: false, selector: "vdr-update-product-option-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\n<vdr-form-field [label]=\"'catalog.option-name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n #nameInput=\"ngModel\"\n [(ngModel)]=\"name\"\n required\n (input)=\"updateCode($event.target.value)\"\n />\n</vdr-form-field>\n<vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\n <input id=\"code\" type=\"text\" #codeInput=\"ngModel\" required [(ngModel)]=\"code\" pattern=\"[a-z0-9_-]+\" />\n</vdr-form-field>\n<clr-checkbox-wrapper>\n <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"updateVariantName\" />\n <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>\n</clr-checkbox-wrapper>\n<section *ngIf=\"customFields.length\">\n <label>{{ 'common.custom-fields' | translate }}</label>\n <vdr-tabbed-custom-fields\n entityName=\"ProductOption\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"customFieldsForm\"\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n</section>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button\n type=\"submit\"\n (click)=\"update()\"\n [disabled]=\"\n nameInput.invalid ||\n codeInput.invalid ||\n (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)\n \"\n class=\"btn btn-primary\"\n >\n {{ 'catalog.update-product-option' | translate }}\n </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4668
4668
|
}
|
|
4669
4669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UpdateProductOptionDialogComponent, decorators: [{
|
|
4670
4670
|
type: Component,
|
|
4671
|
-
args: [{ selector: 'vdr-update-product-option-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\
|
|
4671
|
+
args: [{ selector: 'vdr-update-product-option-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\n<vdr-form-field [label]=\"'catalog.option-name' | translate\" for=\"name\">\n <input\n id=\"name\"\n type=\"text\"\n #nameInput=\"ngModel\"\n [(ngModel)]=\"name\"\n required\n (input)=\"updateCode($event.target.value)\"\n />\n</vdr-form-field>\n<vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\n <input id=\"code\" type=\"text\" #codeInput=\"ngModel\" required [(ngModel)]=\"code\" pattern=\"[a-z0-9_-]+\" />\n</vdr-form-field>\n<clr-checkbox-wrapper>\n <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"updateVariantName\" />\n <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>\n</clr-checkbox-wrapper>\n<section *ngIf=\"customFields.length\">\n <label>{{ 'common.custom-fields' | translate }}</label>\n <vdr-tabbed-custom-fields\n entityName=\"ProductOption\"\n [customFields]=\"customFields\"\n [customFieldsFormGroup]=\"customFieldsForm\"\n [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n ></vdr-tabbed-custom-fields>\n</section>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button\n type=\"submit\"\n (click)=\"update()\"\n [disabled]=\"\n nameInput.invalid ||\n codeInput.invalid ||\n (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)\n \"\n class=\"btn btn-primary\"\n >\n {{ 'catalog.update-product-option' | translate }}\n </button>\n</ng-template>\n" }]
|
|
4672
4672
|
}] });
|
|
4673
4673
|
|
|
4674
4674
|
const CATALOG_COMPONENTS = [
|
|
@@ -4957,40 +4957,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
4957
4957
|
}]
|
|
4958
4958
|
}], ctorParameters: () => [{ type: i1.BulkActionRegistryService }, { type: i1.PageService }] });
|
|
4959
4959
|
|
|
4960
|
-
const PRODUCT_LIST_QUERY_PRODUCT_FRAGMENT = gql `
|
|
4961
|
-
fragment ProductListQueryProductFragment on Product {
|
|
4962
|
-
id
|
|
4963
|
-
createdAt
|
|
4964
|
-
updatedAt
|
|
4965
|
-
enabled
|
|
4966
|
-
languageCode
|
|
4967
|
-
name
|
|
4968
|
-
slug
|
|
4969
|
-
featuredAsset {
|
|
4970
|
-
id
|
|
4971
|
-
createdAt
|
|
4972
|
-
updatedAt
|
|
4973
|
-
preview
|
|
4974
|
-
focalPoint {
|
|
4975
|
-
x
|
|
4976
|
-
y
|
|
4977
|
-
}
|
|
4978
|
-
}
|
|
4979
|
-
variantList {
|
|
4980
|
-
totalItems
|
|
4981
|
-
}
|
|
4982
|
-
}
|
|
4960
|
+
const PRODUCT_LIST_QUERY_PRODUCT_FRAGMENT = gql `
|
|
4961
|
+
fragment ProductListQueryProductFragment on Product {
|
|
4962
|
+
id
|
|
4963
|
+
createdAt
|
|
4964
|
+
updatedAt
|
|
4965
|
+
enabled
|
|
4966
|
+
languageCode
|
|
4967
|
+
name
|
|
4968
|
+
slug
|
|
4969
|
+
featuredAsset {
|
|
4970
|
+
id
|
|
4971
|
+
createdAt
|
|
4972
|
+
updatedAt
|
|
4973
|
+
preview
|
|
4974
|
+
focalPoint {
|
|
4975
|
+
x
|
|
4976
|
+
y
|
|
4977
|
+
}
|
|
4978
|
+
}
|
|
4979
|
+
variantList {
|
|
4980
|
+
totalItems
|
|
4981
|
+
}
|
|
4982
|
+
}
|
|
4983
4983
|
`;
|
|
4984
|
-
const PRODUCT_LIST_QUERY = gql `
|
|
4985
|
-
query ProductListQuery($options: ProductListOptions) {
|
|
4986
|
-
products(options: $options) {
|
|
4987
|
-
items {
|
|
4988
|
-
...ProductListQueryProductFragment
|
|
4989
|
-
}
|
|
4990
|
-
totalItems
|
|
4991
|
-
}
|
|
4992
|
-
}
|
|
4993
|
-
${PRODUCT_LIST_QUERY_PRODUCT_FRAGMENT}
|
|
4984
|
+
const PRODUCT_LIST_QUERY = gql `
|
|
4985
|
+
query ProductListQuery($options: ProductListOptions) {
|
|
4986
|
+
products(options: $options) {
|
|
4987
|
+
items {
|
|
4988
|
+
...ProductListQueryProductFragment
|
|
4989
|
+
}
|
|
4990
|
+
totalItems
|
|
4991
|
+
}
|
|
4992
|
+
}
|
|
4993
|
+
${PRODUCT_LIST_QUERY_PRODUCT_FRAGMENT}
|
|
4994
4994
|
`;
|
|
4995
4995
|
|
|
4996
4996
|
const PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT = gql `
|
|
@@ -5121,53 +5121,53 @@ const PRODUCT_VARIANT_UPDATE_MUTATION = gql `
|
|
|
5121
5121
|
${PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT}
|
|
5122
5122
|
`;
|
|
5123
5123
|
|
|
5124
|
-
const PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT = gql `
|
|
5125
|
-
fragment ProductVariantListQueryProductVariantFragment on ProductVariant {
|
|
5126
|
-
id
|
|
5127
|
-
createdAt
|
|
5128
|
-
updatedAt
|
|
5129
|
-
productId
|
|
5130
|
-
enabled
|
|
5131
|
-
languageCode
|
|
5132
|
-
name
|
|
5133
|
-
price
|
|
5134
|
-
currencyCode
|
|
5135
|
-
priceWithTax
|
|
5136
|
-
trackInventory
|
|
5137
|
-
outOfStockThreshold
|
|
5138
|
-
stockLevels {
|
|
5139
|
-
id
|
|
5140
|
-
createdAt
|
|
5141
|
-
updatedAt
|
|
5142
|
-
stockLocationId
|
|
5143
|
-
stockOnHand
|
|
5144
|
-
stockAllocated
|
|
5145
|
-
stockLocation {
|
|
5146
|
-
id
|
|
5147
|
-
createdAt
|
|
5148
|
-
updatedAt
|
|
5149
|
-
name
|
|
5150
|
-
}
|
|
5151
|
-
}
|
|
5152
|
-
useGlobalOutOfStockThreshold
|
|
5153
|
-
sku
|
|
5154
|
-
featuredAsset {
|
|
5155
|
-
...Asset
|
|
5156
|
-
}
|
|
5157
|
-
}
|
|
5158
|
-
|
|
5159
|
-
${ASSET_FRAGMENT}
|
|
5124
|
+
const PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT = gql `
|
|
5125
|
+
fragment ProductVariantListQueryProductVariantFragment on ProductVariant {
|
|
5126
|
+
id
|
|
5127
|
+
createdAt
|
|
5128
|
+
updatedAt
|
|
5129
|
+
productId
|
|
5130
|
+
enabled
|
|
5131
|
+
languageCode
|
|
5132
|
+
name
|
|
5133
|
+
price
|
|
5134
|
+
currencyCode
|
|
5135
|
+
priceWithTax
|
|
5136
|
+
trackInventory
|
|
5137
|
+
outOfStockThreshold
|
|
5138
|
+
stockLevels {
|
|
5139
|
+
id
|
|
5140
|
+
createdAt
|
|
5141
|
+
updatedAt
|
|
5142
|
+
stockLocationId
|
|
5143
|
+
stockOnHand
|
|
5144
|
+
stockAllocated
|
|
5145
|
+
stockLocation {
|
|
5146
|
+
id
|
|
5147
|
+
createdAt
|
|
5148
|
+
updatedAt
|
|
5149
|
+
name
|
|
5150
|
+
}
|
|
5151
|
+
}
|
|
5152
|
+
useGlobalOutOfStockThreshold
|
|
5153
|
+
sku
|
|
5154
|
+
featuredAsset {
|
|
5155
|
+
...Asset
|
|
5156
|
+
}
|
|
5157
|
+
}
|
|
5158
|
+
|
|
5159
|
+
${ASSET_FRAGMENT}
|
|
5160
5160
|
`;
|
|
5161
|
-
const PRODUCT_VARIANT_LIST_QUERY = gql `
|
|
5162
|
-
query ProductVariantListQuery($options: ProductVariantListOptions!) {
|
|
5163
|
-
productVariants(options: $options) {
|
|
5164
|
-
items {
|
|
5165
|
-
...ProductVariantListQueryProductVariantFragment
|
|
5166
|
-
}
|
|
5167
|
-
totalItems
|
|
5168
|
-
}
|
|
5169
|
-
}
|
|
5170
|
-
${PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT}
|
|
5161
|
+
const PRODUCT_VARIANT_LIST_QUERY = gql `
|
|
5162
|
+
query ProductVariantListQuery($options: ProductVariantListOptions!) {
|
|
5163
|
+
productVariants(options: $options) {
|
|
5164
|
+
items {
|
|
5165
|
+
...ProductVariantListQueryProductVariantFragment
|
|
5166
|
+
}
|
|
5167
|
+
totalItems
|
|
5168
|
+
}
|
|
5169
|
+
}
|
|
5170
|
+
${PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT}
|
|
5171
5171
|
`;
|
|
5172
5172
|
|
|
5173
5173
|
// This file was generated by the build-public-api.ts script
|