npm - @vendure/admin-ui - Versions diffs - 2.0.0-beta.1 → 2.0.0-beta.2 - Mend

@vendure/admin-ui 2.0.0-beta.1 → 2.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (360) hide show

package/esm2020/core/shared/components/form-item/form-item.component.mjs CHANGED Viewed

@@ -7,9 +7,9 @@ import * as i1 from "@clr/angular";
  */
 export class FormItemComponent {
 }
-FormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: FormItemComponent, selector: "vdr-form-item", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"form-group\">\r\n    <label class=\"clr-control-label\">{{ label }}</label>\r\n    <div class=\"content\"><ng-content></ng-content></div>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>.content{flex:1;max-width:20rem}\n"], dependencies: [{ kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: FormItemComponent, decorators: [{
+FormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FormItemComponent, selector: "vdr-form-item", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"form-group\">\r\n    <label class=\"clr-control-label\">{{ label }}</label>\r\n    <div class=\"content\"><ng-content></ng-content></div>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>.content{flex:1;max-width:20rem}\n"], dependencies: [{ kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-form-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\r\n    <label class=\"clr-control-label\">{{ label }}</label>\r\n    <div class=\"content\"><ng-content></ng-content></div>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>.content{flex:1;max-width:20rem}\n"] }]
         }], propDecorators: { label: [{

package/esm2020/core/shared/components/formatted-address/formatted-address.component.mjs CHANGED Viewed

@@ -27,9 +27,9 @@ export class FormattedAddressComponent {
         return typeof input.country !== 'string';
     }
 }
-FormattedAddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: FormattedAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormattedAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: FormattedAddressComponent, selector: "vdr-formatted-address", inputs: { address: "address" }, ngImport: i0, template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n", styles: [".address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: FormattedAddressComponent, decorators: [{
+FormattedAddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormattedAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormattedAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FormattedAddressComponent, selector: "vdr-formatted-address", inputs: { address: "address" }, ngImport: i0, template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n", styles: [".address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormattedAddressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-formatted-address', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n", styles: [".address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\n"] }]
         }], propDecorators: { address: [{

package/esm2020/core/shared/components/help-tooltip/help-tooltip.component.mjs CHANGED Viewed

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "@clr/angular";
 export class HelpTooltipComponent {
 }
-HelpTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: HelpTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HelpTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: { content: "content", position: "position" }, ngImport: i0, template: "<clr-tooltip>\r\n    <clr-icon clrTooltipTrigger shape=\"help\" size=\"14\"></clr-icon>\r\n    <clr-tooltip-content [clrPosition]=\"position\" clrSize=\"md\" *clrIfOpen>\r\n        <span>{{ content }}</span>\r\n    </clr-tooltip-content>\r\n</clr-tooltip>\r\n", styles: ["clr-tooltip{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: HelpTooltipComponent, decorators: [{
+HelpTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: HelpTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HelpTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: { content: "content", position: "position" }, ngImport: i0, template: "<clr-tooltip>\r\n    <clr-icon clrTooltipTrigger shape=\"help\" size=\"14\"></clr-icon>\r\n    <clr-tooltip-content [clrPosition]=\"position\" clrSize=\"md\" *clrIfOpen>\r\n        <span>{{ content }}</span>\r\n    </clr-tooltip-content>\r\n</clr-tooltip>\r\n", styles: ["clr-tooltip{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: HelpTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-help-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<clr-tooltip>\r\n    <clr-icon clrTooltipTrigger shape=\"help\" size=\"14\"></clr-icon>\r\n    <clr-tooltip-content [clrPosition]=\"position\" clrSize=\"md\" *clrIfOpen>\r\n        <span>{{ content }}</span>\r\n    </clr-tooltip-content>\r\n</clr-tooltip>\r\n", styles: ["clr-tooltip{display:inline-flex}\n"] }]
         }], propDecorators: { content: [{

package/esm2020/core/shared/components/history-entry-detail/history-entry-detail.component.mjs CHANGED Viewed

@@ -7,9 +7,9 @@ import * as i4 from "../dropdown/dropdown-trigger.directive";
 import * as i5 from "@ngx-translate/core";
 export class HistoryEntryDetailComponent {
 }
-HistoryEntryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: HistoryEntryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HistoryEntryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: HistoryEntryDetailComponent, selector: "vdr-history-entry-detail", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link btn-sm details-button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".entry-dropdown{margin:0 12px}.details-button{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: i2.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i3.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i4.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: HistoryEntryDetailComponent, decorators: [{
+HistoryEntryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: HistoryEntryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HistoryEntryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: HistoryEntryDetailComponent, selector: "vdr-history-entry-detail", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link btn-sm details-button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".entry-dropdown{margin:0 12px}.details-button{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: i2.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i3.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i4.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: HistoryEntryDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-history-entry-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link btn-sm details-button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".entry-dropdown{margin:0 12px}.details-button{margin:0}\n"] }]
         }] });

package/esm2020/core/shared/components/items-per-page-controls/items-per-page-controls.component.mjs CHANGED Viewed

@@ -12,9 +12,9 @@ export class ItemsPerPageControlsComponent {
         this.itemsPerPageChange = new EventEmitter();
     }
 }
-ItemsPerPageControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ItemsPerPageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemsPerPageControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ItemsPerPageControlsComponent, decorators: [{
+ItemsPerPageControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ItemsPerPageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ItemsPerPageControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ItemsPerPageControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-items-per-page-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n" }]
         }], propDecorators: { itemsPerPage: [{

package/esm2020/core/shared/components/labeled-data/labeled-data.component.mjs CHANGED Viewed

@@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 export class LabeledDataComponent {
 }
-LabeledDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: LabeledDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabeledDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"label-title\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block;margin-bottom:6px}.label-title{font-size:12px;color:var(--color-text-300);line-height:12px;margin-bottom:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: LabeledDataComponent, decorators: [{
+LabeledDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LabeledDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabeledDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"label-title\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block;margin-bottom:6px}.label-title{font-size:12px;color:var(--color-text-300);line-height:12px;margin-bottom:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LabeledDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-labeled-data', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label-title\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block;margin-bottom:6px}.label-title{font-size:12px;color:var(--color-text-300);line-height:12px;margin-bottom:-4px}\n"] }]
         }], propDecorators: { label: [{

package/esm2020/core/shared/components/language-selector/language-selector.component.mjs CHANGED Viewed

@@ -14,9 +14,9 @@ export class LanguageSelectorComponent {
         this.languageCodeChange = new EventEmitter();
     }
 }
-LanguageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: LanguageSelectorComponent, selector: "vdr-language-selector", inputs: { currentLanguageCode: "currentLanguageCode", availableLanguageCodes: "availableLanguageCodes", disabled: "disabled" }, outputs: { languageCodeChange: "languageCodeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}\r\n            <clr-icon shape=\"caret down\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                <span>{{ code | localeLanguageName }}</span> <span class=\"code ml2\">{{ code }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [".code{color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i5.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i6.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.LocaleLanguageNamePipe, name: "localeLanguageName" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+LanguageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: LanguageSelectorComponent, selector: "vdr-language-selector", inputs: { currentLanguageCode: "currentLanguageCode", availableLanguageCodes: "availableLanguageCodes", disabled: "disabled" }, outputs: { languageCodeChange: "languageCodeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}\r\n            <clr-icon shape=\"caret down\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                <span>{{ code | localeLanguageName }}</span> <span class=\"code ml2\">{{ code }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [".code{color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i5.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i6.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.LocaleLanguageNamePipe, name: "localeLanguageName" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-language-selector', template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}\r\n            <clr-icon shape=\"caret down\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                <span>{{ code | localeLanguageName }}</span> <span class=\"code ml2\">{{ code }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [".code{color:var(--color-grey-400)}\n"] }]
         }], propDecorators: { currentLanguageCode: [{

package/esm2020/core/shared/components/manage-tags-dialog/manage-tags-dialog.component.mjs CHANGED Viewed

@@ -52,9 +52,9 @@ export class ManageTagsDialogComponent {
         return forkJoin(operations).subscribe(() => this.resolveWith(true));
     }
 }
-ManageTagsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ManageTagsDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-ManageTagsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ManageTagsDialogComponent, selector: "vdr-manage-tags-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb2 p1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i6.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ManageTagsDialogComponent, decorators: [{
+ManageTagsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ManageTagsDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+ManageTagsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ManageTagsDialogComponent, selector: "vdr-manage-tags-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb2 p1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i6.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: i8.StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ManageTagsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-manage-tags-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb2 p1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; } });

package/esm2020/core/shared/components/modal-dialog/dialog-buttons.directive.mjs CHANGED Viewed

@@ -14,9 +14,9 @@ export class DialogButtonsDirective {
         setTimeout(() => this.modal.registerButtonsTemplate(this.templateRef));
     }
 }
-DialogButtonsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogButtonsDirective, deps: [{ token: i1.ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DialogButtonsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: DialogButtonsDirective, selector: "[vdrDialogButtons]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogButtonsDirective, decorators: [{
+DialogButtonsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DialogButtonsDirective, deps: [{ token: i1.ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DialogButtonsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DialogButtonsDirective, selector: "[vdrDialogButtons]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DialogButtonsDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdrDialogButtons]' }]
         }], ctorParameters: function () { return [{ type: i1.ModalDialogComponent }, { type: i0.TemplateRef }]; } });

package/esm2020/core/shared/components/modal-dialog/dialog-component-outlet.component.mjs CHANGED Viewed

@@ -15,9 +15,9 @@ export class DialogComponentOutletComponent {
         this.create.emit(componentRef.instance);
     }
 }
-DialogComponentOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogComponentOutletComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponentOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: { component: "component" }, outputs: { create: "create" }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogComponentOutletComponent, decorators: [{
+DialogComponentOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DialogComponentOutletComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponentOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: { component: "component" }, outputs: { create: "create" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DialogComponentOutletComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vdr-dialog-component-outlet',

package/esm2020/core/shared/components/modal-dialog/dialog-title.directive.mjs CHANGED Viewed

@@ -14,9 +14,9 @@ export class DialogTitleDirective {
         setTimeout(() => this.modal.registerTitleTemplate(this.templateRef));
     }
 }
-DialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogTitleDirective, deps: [{ token: i1.ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: DialogTitleDirective, selector: "[vdrDialogTitle]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogTitleDirective, decorators: [{
+DialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DialogTitleDirective, deps: [{ token: i1.ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DialogTitleDirective, selector: "[vdrDialogTitle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DialogTitleDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdrDialogTitle]' }]
         }], ctorParameters: function () { return [{ type: i1.ModalDialogComponent }, { type: i0.TemplateRef }]; } });

package/esm2020/core/shared/components/modal-dialog/modal-dialog.component.mjs CHANGED Viewed

@@ -51,9 +51,9 @@ export class ModalDialogComponent {
         }
     }
 }
-ModalDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ModalDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<clr-modal\r\n    [clrModalOpen]=\"true\"\r\n    (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n    [clrModalClosable]=\"options?.closable\"\r\n    [clrModalSize]=\"options?.size\"\r\n    [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\"\r\n>\r\n    <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n    <div class=\"modal-body\">\r\n        <vdr-dialog-component-outlet\r\n            [component]=\"childComponentType\"\r\n            (create)=\"onCreate($event)\"\r\n        ></vdr-dialog-component-outlet>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n    </div>\r\n</clr-modal>\r\n", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ModalDialogComponent, decorators: [{
+ModalDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<clr-modal\r\n    [clrModalOpen]=\"true\"\r\n    (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n    [clrModalClosable]=\"options?.closable\"\r\n    [clrModalSize]=\"options?.size\"\r\n    [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\"\r\n>\r\n    <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n    <div class=\"modal-body\">\r\n        <vdr-dialog-component-outlet\r\n            [component]=\"childComponentType\"\r\n            (create)=\"onCreate($event)\"\r\n        ></vdr-dialog-component-outlet>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n    </div>\r\n</clr-modal>\r\n", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i1.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ModalDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-modal-dialog', template: "<clr-modal\r\n    [clrModalOpen]=\"true\"\r\n    (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n    [clrModalClosable]=\"options?.closable\"\r\n    [clrModalSize]=\"options?.size\"\r\n    [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\"\r\n>\r\n    <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n    <div class=\"modal-body\">\r\n        <vdr-dialog-component-outlet\r\n            [component]=\"childComponentType\"\r\n            (create)=\"onCreate($event)\"\r\n        ></vdr-dialog-component-outlet>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n    </div>\r\n</clr-modal>\r\n", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column}\n"] }]
         }] });

package/esm2020/core/shared/components/object-tree/object-tree.component.mjs CHANGED Viewed

@@ -39,9 +39,9 @@ export class ObjectTreeComponent {
         return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
     }
 }
-ObjectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-ObjectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ObjectTreeComponent, decorators: [{
+ObjectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+ObjectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ObjectTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-object-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: ObjectTreeComponent, decorators: [{

package/esm2020/core/shared/components/order-state-label/order-state-label.component.mjs CHANGED Viewed

@@ -36,9 +36,9 @@ export class OrderStateLabelComponent {
         }
     }
 }
-OrderStateLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: OrderStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OrderStateLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: OrderStateLabelComponent, decorators: [{
+OrderStateLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: OrderStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OrderStateLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: OrderStateLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-order-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"] }]
         }], propDecorators: { state: [{

package/esm2020/core/shared/components/pagination-controls/pagination-controls.component.mjs CHANGED Viewed

@@ -7,9 +7,9 @@ export class PaginationControlsComponent {
         this.pageChange = new EventEmitter();
     }
 }
-PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: { id: "id", currentPage: "currentPage", itemsPerPage: "itemsPerPage", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PaginationControlsComponent, decorators: [{
+PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: { id: "id", currentPage: "currentPage", itemsPerPage: "itemsPerPage", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PaginationControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-pagination-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"] }]
         }], propDecorators: { id: [{

package/esm2020/core/shared/components/product-multi-selector-dialog/product-multi-selector-dialog.component.mjs CHANGED Viewed

@@ -126,9 +126,9 @@ export class ProductMultiSelectorDialogComponent {
         this.resolveWith();
     }
 }
-ProductMultiSelectorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ProductMultiSelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i5.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i6.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i7.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i8.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i9.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
+ProductMultiSelectorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ProductMultiSelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i5.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i6.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i7.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i8.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i9.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });

package/esm2020/core/shared/components/product-search-input/product-search-input.component.mjs CHANGED Viewed

@@ -86,9 +86,9 @@ export class ProductSearchInputComponent {
         return this.selectComponent.itemsList.markedIndex === -1;
     }
 }
-ProductSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProductSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductSearchInputComponent, decorators: [{
+ProductSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProductSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductSearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-product-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
         }], propDecorators: { facetValueResults: [{

package/esm2020/core/shared/components/product-variant-selector/product-variant-selector.component.mjs CHANGED Viewed

@@ -48,9 +48,9 @@ export class ProductVariantSelectorComponent {
         }
     }
 }
-ProductVariantSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ProductVariantSelectorComponent, decorators: [{
+ProductVariantSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+ProductVariantSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductVariantSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-product-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { productSelected: [{

package/esm2020/core/shared/components/radio-card/radio-card-fieldset.component.mjs CHANGED Viewed

@@ -39,9 +39,9 @@ export class RadioCardFieldsetComponent {
         this.focussedId = item && this.idFn(item);
     }
 }
-RadioCardFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioCardFieldsetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RadioCardFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: { selectedItemId: "selectedItemId", idFn: "idFn" }, outputs: { selectItem: "selectItem" }, usesOnChanges: true, ngImport: i0, template: `<fieldset><ng-content></ng-content></fieldset> `, isInline: true, styles: ["fieldset{display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioCardFieldsetComponent, decorators: [{
+RadioCardFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RadioCardFieldsetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RadioCardFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: { selectedItemId: "selectedItemId", idFn: "idFn" }, outputs: { selectItem: "selectItem" }, usesOnChanges: true, ngImport: i0, template: `<fieldset><ng-content></ng-content></fieldset> `, isInline: true, styles: ["fieldset{display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RadioCardFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-radio-card-fieldset', template: `<fieldset><ng-content></ng-content></fieldset> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["fieldset{display:flex;align-items:flex-start}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedItemId: [{

package/esm2020/core/shared/components/radio-card/radio-card.component.mjs CHANGED Viewed

@@ -39,9 +39,9 @@ export class RadioCardComponent {
         return this.fieldset.idFn(item);
     }
 }
-RadioCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioCardComponent, deps: [{ token: i1.RadioCardFieldsetComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RadioCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: RadioCardComponent, selector: "vdr-radio-card", inputs: { item: "item" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["VdrRadioCard"], ngImport: i0, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:left;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i5.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioCardComponent, decorators: [{
+RadioCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RadioCardComponent, deps: [{ token: i1.RadioCardFieldsetComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RadioCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: RadioCardComponent, selector: "vdr-radio-card", inputs: { item: "item" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["VdrRadioCard"], ngImport: i0, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:left;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i5.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RadioCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-radio-card', exportAs: 'VdrRadioCard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:left;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-left:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.RadioCardFieldsetComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{