devexpress-reporting-angular 23.2.5-build-2447-1420 → 23.2.5

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 (18) hide show
  1. package/dx-report-viewer/components/analytics/directives/buttonWithTemplate.directive.d.ts +10 -0
  2. package/dx-report-viewer/components/analytics/directives/ellipsisEditor.directive.d.ts +14 -0
  3. package/dx-report-viewer/components/analytics/directives/key-down-actions.directive.d.ts +4 -7
  4. package/dx-report-viewer/components/reporting/parameterspanel/date-range/date-range.component.d.ts +1 -5
  5. package/dx-report-viewer/dx-report-viewer.module.d.ts +26 -24
  6. package/esm2020/dx-report-viewer/components/analytics/directives/buttonWithTemplate.directive.mjs +25 -0
  7. package/esm2020/dx-report-viewer/components/analytics/directives/disposable.directive.base.mjs +1 -1
  8. package/esm2020/dx-report-viewer/components/analytics/directives/ellipsisEditor.directive.mjs +31 -0
  9. package/esm2020/dx-report-viewer/components/analytics/directives/key-down-actions.directive.mjs +14 -11
  10. package/esm2020/dx-report-viewer/components/analytics/properties/editor/editor.base.mjs +6 -6
  11. package/esm2020/dx-report-viewer/components/reporting/parameterspanel/date-range/date-range.component.mjs +6 -30
  12. package/esm2020/dx-report-viewer/components/reporting/parameterspanel/editor/editor.component.mjs +3 -3
  13. package/esm2020/dx-report-viewer/dx-report-viewer.module.mjs +7 -1
  14. package/fesm2015/devexpress-reporting-angular-dx-report-viewer.mjs +80 -47
  15. package/fesm2015/devexpress-reporting-angular-dx-report-viewer.mjs.map +1 -1
  16. package/fesm2020/devexpress-reporting-angular-dx-report-viewer.mjs +79 -45
  17. package/fesm2020/devexpress-reporting-angular-dx-report-viewer.mjs.map +1 -1
  18. package/package.json +3 -3
@@ -14,18 +14,18 @@ import { KeyboardEnum } from '@devexpress/analytics-core/property-grid/widgets/i
14
14
  import { initializeResize, initializeBaseResizableOptions } from '@devexpress/analytics-core/core/internal/_resizable';
15
15
  import { initializeMutationObserver } from '@devexpress/analytics-core/accessibility/_dxMutationObserver';
16
16
  import { extend } from '@devexpress/analytics-core/analytics-internal-native';
17
- import * as i2 from 'devextreme-angular';
18
- import { DxButtonModule, DxLoadIndicatorModule, DxScrollViewModule, DxSelectBoxModule, DxMenuModule, DxTagBoxModule, DxTextBoxModule, DxValidatorModule, DxDateBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxColorBoxModule, DxPopupModule, DxPopoverModule, DxSliderModule, DxCalendarModule, DxListModule, DxGalleryModule } from 'devextreme-angular';
19
17
  import { InitAccordion } from '@devexpress/analytics-core/property-grid/bindings.accordion';
18
+ import { InitButtonWithTemplate } from '@devexpress/analytics-core/core/widgets/_buttonInlineEditor';
20
19
  import { globalResolver } from '@devexpress/analytics-core/property-grid/internal/_codeResolver';
21
20
  import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
21
+ import * as i2 from 'devextreme-angular';
22
+ import { DxButtonModule, DxLoadIndicatorModule, DxScrollViewModule, DxSelectBoxModule, DxMenuModule, DxTagBoxModule, DxTextBoxModule, DxValidatorModule, DxDateBoxModule, DxCheckBoxModule, DxNumberBoxModule, DxColorBoxModule, DxPopupModule, DxPopoverModule, DxSliderModule, DxCalendarModule, DxListModule, DxGalleryModule } from 'devextreme-angular';
22
23
  import { CollectionEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
23
24
  import { noDataText, getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
24
25
  import * as i2$1 from 'devextreme-angular/core';
25
- import { KeyDownHandlersManager } from '@devexpress/analytics-core/core/tools/_keyboardHelper';
26
+ import { GetWindowKeyDownHandlersManager } from '@devexpress/analytics-core/core/tools/_keyboardHelper';
26
27
  import { createDateRangeEditor } from 'devexpress-reporting/viewer/widgets/dateRange/dateRangeEditor';
27
- import { generateIconTemplate } from '@devexpress/analytics-core/core/widgets/_generateIconTemplate';
28
- import * as i1$1 from 'devextreme-angular/ui/nested';
28
+ import { dxEllipsisEditor } from '@devexpress/analytics-core/property-grid/widgets/ellipsiseditor/_editor';
29
29
  import { calculateWithZoomFactor } from '@devexpress/analytics-core/accessibility/_internal';
30
30
  import { getLocalization as getLocalization$1 } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
31
31
  import { initializeLazyImagesBinding, initializeAutoFitBinding, initializeToViewBinding, initializeChildStyleBinding, initializeViewerExportBinding } from 'devexpress-reporting/viewer/internal/_bindings';
@@ -35,7 +35,7 @@ import { updateZoomBinding } from '@devexpress/analytics-core/core/_updateZoomBi
35
35
  import { PictureEditorModel } from 'devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorModel';
36
36
  import { Painter } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
37
37
  import { HighlightEngine } from '@devexpress/analytics-core/widgets/_searchHighlighting';
38
- import * as i1$2 from '@angular/platform-browser';
38
+ import * as i1$1 from '@angular/platform-browser';
39
39
  import { initializeSlideBinding, initializeMobileZoomBinding, initializeMobileSearchBinding, initializeMobilePaginatorBinding } from 'devexpress-reporting/viewer/mobile/internal/_mobileBindings';
40
40
  import { dxGalleryExtender } from 'devexpress-reporting/viewer/mobile/internal/gallery/_galleryComponent';
41
41
 
@@ -589,6 +589,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
589
589
  args: ['dxaAccordion']
590
590
  }] } });
591
591
 
592
+ class ButtonWithTemplateDirective extends BaseDisposableDirective {
593
+ constructor() {
594
+ super(...arguments);
595
+ this.eventName = 'afterViewInit';
596
+ }
597
+ InitAndReturnDisposeFunc(element) {
598
+ return InitButtonWithTemplate(element, this.options);
599
+ }
600
+ }
601
+ ButtonWithTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonWithTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
602
+ ButtonWithTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ButtonWithTemplateDirective, selector: "[dxaButtonWithTemplate]", inputs: { options: ["dxaButtonWithTemplate", "options"] }, usesInheritance: true, ngImport: i0 });
603
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonWithTemplateDirective, decorators: [{
604
+ type: Directive,
605
+ args: [{
606
+ selector: '[dxaButtonWithTemplate]'
607
+ }]
608
+ }], propDecorators: { options: [{
609
+ type: Input,
610
+ args: ['dxaButtonWithTemplate']
611
+ }] } });
612
+
592
613
  class LazyTemplateComponent extends TemplateComponent {
593
614
  constructor() {
594
615
  super(...arguments);
@@ -674,10 +695,10 @@ class EditorComponentBase {
674
695
  }
675
696
  }
676
697
  EditorComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
677
- 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 <dx-button *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\r\n class=\"propertygrid-editor-description\"\r\n (onClick)=\"data.editorDescriptionAddon.data.onClick($event)\"\r\n >\r\n <dxa-template template=\"dxrd-svg-tabs-description_info\"></dxa-template>\r\n </dx-button>\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: 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: 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"] }] });
698
+ 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 *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\r\n class=\"propertygrid-editor-description\"\r\n [dxaButtonWithTemplate]=\"{ onClick: data.editorDescriptionAddon.data.onClick, icon: 'dxrd-svg-tabs-description_info' }\"></div>\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: "directive", type: ButtonWithTemplateDirective, selector: "[dxaButtonWithTemplate]", inputs: ["dxaButtonWithTemplate"] }, { kind: "component", type: LazyTemplateComponent, selector: "dxa-lazy-template", inputs: ["resolver", "isResolved"] }] });
678
699
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponentBase, decorators: [{
679
700
  type: Component,
680
- 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 <dx-button *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\r\n class=\"propertygrid-editor-description\"\r\n (onClick)=\"data.editorDescriptionAddon.data.onClick($event)\"\r\n >\r\n <dxa-template template=\"dxrd-svg-tabs-description_info\"></dxa-template>\r\n </dx-button>\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>" }]
701
+ 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 *ngIf=\"!data.isComplexEditor && data.editorDescriptionAddon\"\r\n class=\"propertygrid-editor-description\"\r\n [dxaButtonWithTemplate]=\"{ onClick: data.editorDescriptionAddon.data.onClick, icon: 'dxrd-svg-tabs-description_info' }\"></div>\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>" }]
681
702
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
682
703
  type: Input,
683
704
  args: ['data']
@@ -1164,23 +1185,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1164
1185
  args: ['exportElement', { read: ElementRef }]
1165
1186
  }] } });
1166
1187
 
1167
- class KeyDownActionsDirective {
1168
- constructor(element) {
1169
- this.elementRef = element;
1170
- this.handlersManager = new KeyDownHandlersManager(window);
1188
+ class KeyDownActionsDirective extends BaseDisposableDirective {
1189
+ constructor() {
1190
+ super(...arguments);
1191
+ this.eventName = 'afterViewInit';
1171
1192
  }
1172
- ngAfterViewInit() {
1173
- this.handlersManager.bindHandler(this.elementRef.nativeElement, e => this.actionList.processShortcut(e));
1193
+ InitAndReturnDisposeFunc(element) {
1194
+ const handlersManager = GetWindowKeyDownHandlersManager();
1195
+ const disposeFunc = handlersManager.bindHandler(e => this.actionList.processShortcut(e));
1196
+ return () => disposeFunc();
1174
1197
  }
1175
1198
  }
1176
- KeyDownActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KeyDownActionsDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1177
- KeyDownActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: KeyDownActionsDirective, selector: "[dxKeyDownActions]", inputs: { actionList: ["dxKeyDownActions", "actionList"] }, ngImport: i0 });
1199
+ KeyDownActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KeyDownActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
1200
+ KeyDownActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: KeyDownActionsDirective, selector: "[dxKeyDownActions]", inputs: { actionList: ["dxKeyDownActions", "actionList"] }, usesInheritance: true, ngImport: i0 });
1178
1201
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KeyDownActionsDirective, decorators: [{
1179
1202
  type: Directive,
1180
1203
  args: [{
1181
1204
  selector: '[dxKeyDownActions]'
1182
1205
  }]
1183
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { actionList: [{
1206
+ }], propDecorators: { actionList: [{
1184
1207
  type: Input,
1185
1208
  args: ['dxKeyDownActions']
1186
1209
  }] } });
@@ -1203,10 +1226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1203
1226
  class EditorComponent extends EditorComponentBase {
1204
1227
  }
1205
1228
  EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1206
- 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"] }] });
1229
+ 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"] }] });
1207
1230
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, decorators: [{
1208
1231
  type: Component,
1209
- 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>" }]
1232
+ 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>" }]
1210
1233
  }] });
1211
1234
 
1212
1235
  class MultiValueComponent extends EditorDropDownComponentBase {
@@ -1326,6 +1349,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1326
1349
  args: ['properties']
1327
1350
  }] } });
1328
1351
 
1352
+ class EllipsisEditorDirective {
1353
+ constructor(_element) {
1354
+ this._element = _element;
1355
+ }
1356
+ ngAfterViewInit() {
1357
+ this._editor = new dxEllipsisEditor(this._element.nativeElement, this.options);
1358
+ }
1359
+ ngOnChanges() {
1360
+ if (this._editor && this._editor.option('value') != this.options.value) {
1361
+ this._editor.option('value', this.options.value);
1362
+ }
1363
+ }
1364
+ ngOnDestroy() {
1365
+ var _a;
1366
+ (_a = this._editor) === null || _a === void 0 ? void 0 : _a.dispose();
1367
+ }
1368
+ }
1369
+ EllipsisEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EllipsisEditorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1370
+ EllipsisEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EllipsisEditorDirective, selector: "[dxaEllipsisEditor]", inputs: { options: ["dxaEllipsisEditor", "options"] }, usesOnChanges: true, ngImport: i0 });
1371
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EllipsisEditorDirective, decorators: [{
1372
+ type: Directive,
1373
+ args: [{
1374
+ selector: '[dxaEllipsisEditor]'
1375
+ }]
1376
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
1377
+ type: Input,
1378
+ args: ['dxaEllipsisEditor']
1379
+ }] } });
1380
+
1329
1381
  class DateRangeComponent {
1330
1382
  constructor(_currentElement, _changeDetectorRef) {
1331
1383
  this._currentElement = _currentElement;
@@ -1342,40 +1394,17 @@ class DateRangeComponent {
1342
1394
  this._changeDetectorRef.markForCheck();
1343
1395
  });
1344
1396
  this.data.cacheElement(this._currentElement.nativeElement);
1345
- const processClickEvent = () => {
1397
+ this.processClickEvent = () => {
1346
1398
  this.data.showPopup();
1347
1399
  this._changeDetectorRef.markForCheck();
1348
1400
  };
1349
- const processKeyBoardEvent = (e) => {
1350
- if (e.key == KeyboardEnum.Enter || (e.key == KeyboardEnum.ArrowDown && e.altKey)) {
1351
- this.data.showPopup();
1352
- this._changeDetectorRef.markForCheck();
1353
- }
1354
- };
1355
- this.subscribeToEvents = (event) => {
1356
- var _a, _b;
1357
- this.textBoxInputElement = event.element.querySelector('.dx-texteditor-input');
1358
- (_a = this.textBoxInputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', processClickEvent);
1359
- (_b = this.textBoxInputElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', processKeyBoardEvent);
1360
- };
1361
- this.unsubscribeFromEvents = () => {
1362
- var _a, _b;
1363
- (_a = this.textBoxInputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', processClickEvent);
1364
- (_b = this.textBoxInputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', processKeyBoardEvent);
1365
- };
1366
- this.showPopupOptions = {
1367
- disabled: false,
1368
- onClick: processClickEvent,
1369
- template: generateIconTemplate('dx-ellipsis-image'),
1370
- icon: 'dxrd-svg-ellipsis'
1371
- };
1372
1401
  }
1373
1402
  }
1374
1403
  DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1375
- DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "dxv-date-range", inputs: { options: ["data", "options"] }, ngImport: i0, template: "<div class=\"dxrv-daterange-editor\">\n <dx-text-box \n [value]=\"data.displayValue\"\n [readOnly]=\"true\"\n (onContentReady)=\"subscribeToEvents($event)\" (onDisposing)=\"unsubscribeFromEvents()\"\n >\n <dxi-button\n name=\"showPopup\"\n location=\"after\"\n [options]=\"showPopupOptions\"\n ></dxi-button>\n </dx-text-box>\n <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>", dependencies: [{ kind: "component", type: i1$1.DxiButtonComponent, selector: "dxi-button", inputs: ["location", "name", "options", "cssClass", "disabled", "hint", "icon", "onClick", "template", "text", "visible"] }, { kind: "component", type: i2.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
1404
+ DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "dxv-date-range", inputs: { options: ["data", "options"] }, ngImport: i0, template: "<div class=\"dxrv-daterange-editor\">\n <div [dxaEllipsisEditor]=\"{\n buttonAction: processClickEvent,\n value: data.displayValue,\n readOnly: true,\n openOnFieldClick: true,\n inputAttr: { 'aria-label': data._displayName, id: data._editorInputId }\n }\"></div>\n <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>", dependencies: [{ kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }, { kind: "directive", type: EllipsisEditorDirective, selector: "[dxaEllipsisEditor]", inputs: ["dxaEllipsisEditor"] }] });
1376
1405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
1377
1406
  type: Component,
1378
- args: [{ selector: 'dxv-date-range', template: "<div class=\"dxrv-daterange-editor\">\n <dx-text-box \n [value]=\"data.displayValue\"\n [readOnly]=\"true\"\n (onContentReady)=\"subscribeToEvents($event)\" (onDisposing)=\"unsubscribeFromEvents()\"\n >\n <dxi-button\n name=\"showPopup\"\n location=\"after\"\n [options]=\"showPopupOptions\"\n ></dxi-button>\n </dx-text-box>\n <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>" }]
1407
+ args: [{ selector: 'dxv-date-range', template: "<div class=\"dxrv-daterange-editor\">\n <div [dxaEllipsisEditor]=\"{\n buttonAction: processClickEvent,\n value: data.displayValue,\n readOnly: true,\n openOnFieldClick: true,\n inputAttr: { 'aria-label': data._displayName, id: data._editorInputId }\n }\"></div>\n <dxa-template [template]=\"data.popupTemplate\" [data]=\"data.popupModel\"></dxa-template>\n</div>" }]
1379
1408
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
1380
1409
  type: Input,
1381
1410
  args: ['data']
@@ -2066,12 +2095,12 @@ class SignatureEditorComponent extends EditorDropDownComponentBase {
2066
2095
  this.options = this.data.getOptions(this.options);
2067
2096
  }
2068
2097
  }
2069
- SignatureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SignatureEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
2098
+ SignatureEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SignatureEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
2070
2099
  SignatureEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SignatureEditorComponent, selector: "dxv-signature-editor", usesInheritance: true, ngImport: i0, template: "<dx-select-box #target #widget\n [dataSource]=\"options.dataSource\"\n (onValueChanged)=\"options.onValueChanged($event)\"\n [itemTemplate]=\"options.itemTemplate\"\n [displayExpr]=\"options.displayExpr\"\n [valueExpr]=\"options.valueExpr\"\n [showClearButton]=\"options.showClearButton\"\n [noDataText]=\"options.noDataText\"\n [dropDownOptions]=\"dropDownOptions\">\n <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n </dx-validator>\n <div class=\"dxrdv-signature-editor-item\" *dxTemplate=\"let signature of 'item'\">\n <div class=\"dxrdv-signature-editor-item-image\">\n <img *ngIf=\"!!signature.image\" [attr.src]=\"processImage(signature.image)\" />\n <dxa-template *ngIf=\"!signature.image\" template=\"dxrd-svg-preview-signature_img_placeholder\"></dxa-template>\n </div>\n <div class=\"dxrdv-signature-editor-item-info\">\n <div *ngFor=\"let field of signature.fields\" class=\"dxrdv-signature-editor-item-info-field\" [attr.title]=\"field.value\">\n <span class=\"dxrdv-signature-editor-item-info-field-label\">{{field.label}}</span>\n <span>{{field.value}}</span>\n </div>\n </div>\n </div>\n</dx-select-box>\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$1.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i2.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "customItemCreateEvent", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "customItemCreateEventChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "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"] }, { kind: "component", type: TemplateComponent, selector: "dxa-template", inputs: ["data", "template"] }] });
2071
2100
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SignatureEditorComponent, decorators: [{
2072
2101
  type: Component,
2073
2102
  args: [{ selector: 'dxv-signature-editor', template: "<dx-select-box #target #widget\n [dataSource]=\"options.dataSource\"\n (onValueChanged)=\"options.onValueChanged($event)\"\n [itemTemplate]=\"options.itemTemplate\"\n [displayExpr]=\"options.displayExpr\"\n [valueExpr]=\"options.valueExpr\"\n [showClearButton]=\"options.showClearButton\"\n [noDataText]=\"options.noDataText\"\n [dropDownOptions]=\"dropDownOptions\">\n <dx-validator *ngIf=\"!!data.validationRules\" [validationRules]=\"validatorOptions.validationRules\">\n </dx-validator>\n <div class=\"dxrdv-signature-editor-item\" *dxTemplate=\"let signature of 'item'\">\n <div class=\"dxrdv-signature-editor-item-image\">\n <img *ngIf=\"!!signature.image\" [attr.src]=\"processImage(signature.image)\" />\n <dxa-template *ngIf=\"!signature.image\" template=\"dxrd-svg-preview-signature_img_placeholder\"></dxa-template>\n </div>\n <div class=\"dxrdv-signature-editor-item-info\">\n <div *ngFor=\"let field of signature.fields\" class=\"dxrdv-signature-editor-item-info-field\" [attr.title]=\"field.value\">\n <span class=\"dxrdv-signature-editor-item-info-field-label\">{{field.label}}</span>\n <span>{{field.value}}</span>\n </div>\n </div>\n </div>\n</dx-select-box>\n" }]
2074
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.DomSanitizer }]; } });
2103
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }]; } });
2075
2104
 
2076
2105
  class BrickComponent {
2077
2106
  }
@@ -2875,6 +2904,8 @@ DxReportViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
2875
2904
  ChildStyleDirective,
2876
2905
  SearchHighlightingDirective,
2877
2906
  AccordionDirective,
2907
+ EllipsisEditorDirective,
2908
+ ButtonWithTemplateDirective,
2878
2909
  EditingFieldCheckboxGlyphComponent,
2879
2910
  DxMutationObserverDirective,
2880
2911
  MobileSearchBarDirective,
@@ -3053,6 +3084,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3053
3084
  ChildStyleDirective,
3054
3085
  SearchHighlightingDirective,
3055
3086
  AccordionDirective,
3087
+ EllipsisEditorDirective,
3088
+ ButtonWithTemplateDirective,
3056
3089
  EditingFieldCheckboxGlyphComponent,
3057
3090
  DxMutationObserverDirective,
3058
3091
  MobileSearchBarDirective,