devexpress-reporting-angular 23.2.2-beta → 23.2.3

package/fesm2020/devexpress-reporting-angular-dx-report-viewer.mjs

@@ -673,10 +673,10 @@ class EditorComponentBase {
     }
 }
 EditorComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-EditorComponentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponentBase, selector: "dxa-editor", inputs: { data: "data" }, viewQueries: [{ propertyName: "widget", first: true, predicate: ["widget"], descendants: true }], ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
+EditorComponentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponentBase, selector: "dxa-editor", inputs: { data: "data" }, viewQueries: [{ propertyName: "widget", first: true, predicate: ["widget"], descendants: true }], ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponentBase, decorators: [{
             type: Component,
-            args: [{ selector: 'dxa-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'dxa-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\r\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\r\n        <div class=\"dx-editor-header\">\r\n            <div class=\"dx-field\" \r\n                role=\"treeitem\"\r\n                [attr.id]=\"data.isComplexEditor ? data.headerId : undefined\"\r\n                [attr.aria-owns]=\"data.isComplexEditor ? data.contentId : undefined\"\r\n                [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\r\n                [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\r\n                [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\">\r\n                    <div class=\"dx-field-label dx-accordion-header dxd-text-primary\" \r\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\r\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\">\r\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\r\n                            <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\" template=\"dxrd-svg-collapsed\" \r\n                             [class.dx-image-expanded]=\"!data.collapsed\"></dxa-template>\r\n                             <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\r\n                             <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\r\n                                 {{data.displayName}}\r\n                             </div>\r\n                        </div>\r\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        ></label>\r\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \r\n                        class=\"propertygrid-editor-displayName\"\r\n                        [attr.title]=\"data.displayName\"\r\n                        [attr.for]=\"data.editorInputId\"\r\n                        [class.dx-field-label-required]=\"data.isRequired\"\r\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\r\n                        >{{data.displayName}}</label>                             \r\n                </div>\r\n                <div class=\"dx-field-value\" \r\n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\r\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\r\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\r\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\r\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\r\n                    <!-- /ko -->\r\n                    <!-- /ko -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \r\n        [attr.aria-labelledby]=\"data.headerId\"\r\n        [attr.id]=\"data.contentId\"\r\n        [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\r\n        <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -755,10 +755,10 @@ class CollectionEditorComponent {
     }
 }
 CollectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CollectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
+CollectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CollectionEditorComponent, selector: "dxa-collectioneditor", inputs: { options: ["data", "options"], contentTemplate: "contentTemplate" }, ngImport: i0, template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary dxrd-display-inline-block\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>", 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: DxActionDirective, selector: "[dxAction]", inputs: ["dxActionModel", "dxAction"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "directive", type: DxMutationObserverDirective, selector: "[dxMutationObserver]", inputs: ["dxMutationObserver"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollectionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxa-collectioneditor', template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'dxa-collectioneditor', template: "<div class=\"dx-collectioneditor\">\n    <div [dxaAccordion]=\"data\" [dxMutationObserver]=\"data.keyboardHelper\">\n        <div class=\"dx-collectioneditor-header dx-accordion-header\">\n            <div class=\"dx-editor-header\">\n                <div role=\"treeitem\"\n                    class=\"dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger\"\n                    [attr.aria-expanded]=\"data.alwaysShow || !data.collapsed ? 'true' : 'false'\"\n                    [attr.aria-owns]=\"data.contentId\" [attr.id]=\"data.headerId\">\n                    <div *ngIf=\"data.showButtons\" class=\"dx-collectioneditor-actions-wrapper\">\n                        <dx-button *ngIf=\"data.buttons.up.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.up.action($event)\" [disabled]=\"data.buttons.up.disabled\"\n                            icon=\"dxrd-svg-operations-moveup\" iconClass=\"dx-image-moveup\"\n                            [template]=\"data.buttons.up.template\"\n                            [attr.title]=\"data.buttons.up.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.down.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.down.action($event)\" [disabled]=\"data.buttons.down.disabled\"\n                            icon=\"dxrd-svg-operations-movedown\" iconClass=\"dx-image-movedown\"\n                            [template]=\"data.buttons.down.template\"\n                            [attr.title]=\"data.buttons.down.text\"></dx-button>\n                        <div class=\"dx-collectioneditor-action-separator\"></div>\n                        <dx-button *ngIf=\"data.buttons.add.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.add.action($event)\" [disabled]=\"data.buttons.add.disabled\"\n                            [template]=\"data.buttons.add.template\"\n                            icon=\"dxrd-svg-operations-add\" iconClass=\"dx-image-add\"\n                            [attr.title]=\"data.buttons.add.text\"></dx-button>\n                        <dx-button *ngIf=\"data.buttons.delete.visible\"\n                            class=\"dx-collectioneditor-action dx-accessibility-focus-border-accented\"\n                            (onClick)=\"data.buttons.delete.action($event)\" [disabled]=\"data.buttons.delete.disabled\"\n                            [template]=\"data.buttons.delete.template\"\n                            icon=\"dxrd-svg-operations-remove\" iconClass=\"dx-image-remove\"\n                            [attr.title]=\"data.buttons.delete.text\"></dx-button>\n                    </div>\n                    <div *ngIf=\"!!data.displayName\" class=\"dx-collectioneditor-header-text dxd-text-primary\"\n                        [style.padding-left]=\"data.padding + 'px'\">\n                        <dxa-template class=\"dx-collapsing-image dxrd-display-inline-block\"\n                            template=\"dxrd-svg-collapsed\"\n                            [class.dx-image-expanded]=\"!data.collapsed \"></dxa-template>\n                        <div class=\"dx-group-header-font dxd-text-primary dxrd-display-inline-block\" [attr.title]=\"data.displayName\">\n                            {{data.displayName}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div role=\"group\" class=\"dx-accordion-content\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\"\n            [attr.aria-labelledby]=\"data.headerId\" [attr.id]=\"data.contentId\">\n            <dx-scroll-view [hidden]=\"data.disabled\" showScrollbar=\"onHover\" [disabled]=\"!data.showScroll\"\n                [useNative]=\"false\" [scrollByThumb]=\"true\" (onInitialized)=\"onScrollViewInitialized($event)\">\n                <div *ngIf=\"data.values.length === 0\"\n                    class=\"dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info\">\n                    <span class=\"dx-collectioneditor-empty-text\">{{data.emptyAreaText}}</span>\n                </div>\n                <div *ngIf=\"data.values.length !== 0\" class=\"dx-collectioneditor-items\">\n                    <div *ngFor=\"let value of data.values\"\n                        class=\"dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented\"\n                        [attr.aria-selected]=\"value.selected\" [dxActionModel]=\"value\" [dxAction]=\"value.select\"\n                        [class.dxd-state-selected]=\"value.selected\">\n                        <div class=\"dx-collection-item\">\n                            <ng-container *ngTemplateOutlet=\"contentTemplate, context: { data: value }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n            </dx-scroll-view>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input,
                 args: ['data']
@@ -1203,10 +1203,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class EditorComponent extends EditorComponentBase {
 }
 EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
+EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditorComponent, selector: "dxv-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"dx-collapsing-image  dxrd-display-inline-block\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: AccordionDirective, selector: "[dxaAccordion]", inputs: ["dxaAccordion"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"propertygrid-editor-collapsed dx-collapsing-image\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'dxv-editor', template: "<div class=\"dx-editor\" [hidden]=\"!data.visible\">\n    <div class=\"dx-group\" [dxaAccordion]=\"data\">\n        <div class=\"dx-editor-header\" [class.dxrd-empty-header]=\"data.hideEditorHeader\">\n            <div *ngIf=\"!data.hideEditorHeader\" class=\"dx-field\"\n            [attr.role]=\"'treeitem'\"\n            [attr.id]=\"data.isComplexEditor && data.headerId\"\n            [attr.aria-owns]=\"data.isComplexEditor && data.contentId\"\n            [attr.aria-expanded]=\"data.isComplexEditor && (data.alwaysShow || !data.collapsed ? 'true' : 'false')\"\n            [class.dxrd-accessibility-accordion-trigger]=\"data.isComplexEditor\"\n            [class.dx-accessibility-focus-border-accented]=\"data.isComplexEditor\"\n            [class.dxrd-vertical-label]=\"data.editorOptions && data.editorOptions.hasVerticalLabel\"\n            >\n                    <div class=\"dx-field-label dxrd-group-label dx-accordion-header dxd-text-primary\"\n                    [style.padding-left]=\"data.padding['padding-left'] + 'px'\"\n                    [class.dx-accordion-empty]=\"data.templateName === 'dx-emptyHeader'\"\n                    [class.dxd-back-secondary]=\"data.isGroupLabel\"\n                    [class.dx-accordion-hide-collapsing-image]=\"data.alwaysShow\">\n                        <div *ngIf=\"data.isComplexEditor\" [attr.disabled]=\"data.templateName !== 'dx-emptyHeader'\">\n                            <dxa-template *ngIf=\"!data.alwaysShow\" \n                            template=\"dxrd-svg-collapsed\" \n                            class=\"dx-collapsing-image  dxrd-display-inline-block\"\n                            [class.dx-image-expanded]=\"!data.collapsed\"\n                            ></dxa-template>\n                            <div *ngIf=\"!!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\" data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"></div>\n                            <div *ngIf=\"!data.textToSearch\" class=\"dx-group-header-font\" [attr.title]=\"data.displayName\">\n                                {{data.displayName}}\n                            </div>\n                        </div>\n                        <label *ngIf=\"!data.isComplexEditor && !!data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        data-bind=\"searchHighlighting: { text: displayName, textToSearch: textToSearch }\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        ></label>\n                        <label *ngIf=\"!data.isComplexEditor && !data.textToSearch\" \n                        class=\"propertygrid-editor-displayName\"\n                        [attr.title]=\"data.displayName\"\n                        [attr.for]=\"data.editorInputId\"\n                        [class.dx-field-label-required]=\"data.isRequired\"\n                        [style.fontWeight]=\"data.isPropertyModified ? 'Bold' : ''\"\n                        >{{data.displayName}}</label>                    \n                </div>\n                <div class=\"dx-field-value\" \n                [class.dxd-border-accented]=\"data.isPropertyHighlighted\">\n                    <div data-bind=\"service: { name: 'createEditorAddOn' }\"></div>\n                    <dxa-lazy-template *ngIf=\"data.templateName !== 'dx-emptyHeader'\" [isResolved]=\"isResolved\" [template]=\"data.templateName\" [data]=\"data\"></dxa-lazy-template>\n                    <!-- ko if: templateName !== 'dx-emptyHeader' -->\n                    <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: function(val) { $data.setIsRendered(val) } } -->\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"data.isComplexEditor\" class=\"dx-editor-content dx-accordion-content\" role=\"group\" \n            [attr.aria-labelledby]=\"data.headerId\"\n            [attr.id]=\"data.contentId\"\n            [attr.aria-hidden]=\"!data.alwaysShow && data.collapsed ? 'true' : 'false'\">\n            <dxa-template *ngIf=\"data.editorCreated\" [template]=\"data.contentTemplateName\" [data]=\"data\"></dxa-template>\n        </div>\n    </div>\n</div>" }]
         }] });
 
 class MultiValueComponent extends EditorDropDownComponentBase {
@@ -1249,10 +1249,10 @@ class MultiValueComponent extends EditorDropDownComponentBase {
     }
 }
 MultiValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MultiValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
+MultiValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiValueComponent, selector: "dxv-multivalue", usesInheritance: true, ngImport: i0, template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    (onMultiTagPreparing)=\"options.onMultiTagPreparing($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-multivalue', template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n" }]
+            args: [{ selector: 'dxv-multivalue', template: "<dx-tag-box #target #widget\n    [dataSource]=\"options.dataSource\"\n    [searchEnabled]=\"options.searchEnabled\"\n    [useItemTextAsTitle]=\"options.useItemTextAsTitle\"\n    [searchExpr]=\"options.searchExpr\"\n    [value]=\"options.value\"\n    [displayExpr]=\"options.displayExpr\"\n    [valueExpr]=\"options.valueExpr\"\n    [multiline]=\"options.multiline\"\n    [showSelectionControls]=\"options.showSelectionControls\"\n    (onValueChanged)=\"options.onValueChanged($event)\"\n    (onMultiTagPreparing)=\"options.onMultiTagPreparing($event)\"\n    [inputAttr]=\"options.inputAttr\"\n    [disabled]=\"options.disabled\"\n    [selectAllText]=\"options.selectAllText\"\n    [placeholder]=\"options.placeholder\"\n    [maxDisplayedTags]=\"options.maxDisplayedTags\"\n    [showMultiTagOnly]=\"options.showMultiTagOnly\"\n    [dropDownOptions]=\"dropDownOptions\"\n    >\n    <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n    </dx-validator>\n</dx-tag-box>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class ExportOptionsComponent {
@@ -1375,10 +1375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class CalendarComponent {
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0, template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    [min]=\"data.min\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>", dependencies: [{ kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }] });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "dxv-daterange-calendar", inputs: { data: "data" }, ngImport: i0, template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [min]=\"data.min\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>", dependencies: [{ kind: "directive", type: i2$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-daterange-calendar', template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    [min]=\"data.min\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>" }]
+            args: [{ selector: 'dxv-daterange-calendar', template: "<dx-calendar [tabIndex]=\"0\" class=\"dx-accessibility-calendar-item dx-accessibility-daterange-item\"\n    [min]=\"data.min\"\n    [value]=\"data.value\"\n    cellTemplate=\"select_cell\" \n    [height]=\"data.height\"\n    (onValueChanged)=\"data.onValueChanged($event)\"\n>\n    <div *dxTemplate=\"let item of 'select_cell'\" class=\"dxrv-daterange-cell\">\n        <div class=\"dxrv-daterange-cell-text\">{{item.text}}</div>\n        <div [class.dxd-back-accented]=\"data.inRange(item.date)\"></div>\n    </div>\n</dx-calendar>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -2263,10 +2263,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class MobileParametersPopupComponent extends ComponentWithParentContainer {
 }
 MobileParametersPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MobileParametersPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MobileParametersPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", dependencies: [{ kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
+MobileParametersPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MobileParametersPopupComponent, selector: "dxv-mobile-parameters-popup", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MobileParametersPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dxv-mobile-parameters-popup', template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>" }]
+            args: [{ selector: 'dxv-mobile-parameters-popup', template: "<dx-popup [wrapperAttr]=\"{ class: 'dxrd-menu-parameters-popup' }\" [showTitle]=\"false\" (onHidden)=\"data.onHidden($event)\" width=\"100vw\" height=\"100vh\" [visible]=\"data.visible\" [container]=\"parentContainer\">\n    <dxa-template *ngIf=\"data.visible\" template=\"dxrv-preview-parameters-mobile\" [data]=\"data\"></dxa-template>\n</dx-popup>" }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']