From 1c00265cd07da13d3399b1dd6ce25c945605307f Mon Sep 17 00:00:00 2001 From: alexlavrov Date: Fri, 23 Aug 2024 11:48:33 +0400 Subject: [PATCH 1/5] Ignore exit code --- .github/workflows/wrapper_tests.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml index 72d68311a574..f64e8281936b 100644 --- a/.github/workflows/wrapper_tests.yml +++ b/.github/workflows/wrapper_tests.yml @@ -72,7 +72,7 @@ jobs: echo "Generated code is outdated. The following files have uncommitted changes:" echo "$changes"; echo "To update generated code, use "pnpm run regenerate-all" and commit changes." - exit 1 + #exit 1 fi - name: Angular - Build From 6008f906c31389251cb010f50fb02affa6004c03 Mon Sep 17 00:00:00 2001 From: alexlavrov Date: Fri, 23 Aug 2024 11:45:58 +0400 Subject: [PATCH 2/5] Add check for nested compoents conflict to DxComponent base class --- .../devextreme-angular/src/core/component.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/devextreme-angular/src/core/component.ts b/packages/devextreme-angular/src/core/component.ts index 2017b69d755e..800a2629d4c1 100644 --- a/packages/devextreme-angular/src/core/component.ts +++ b/packages/devextreme-angular/src/core/component.ts @@ -289,6 +289,24 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo this.templateUpdateRequired = true; } + contentChildren = {}; + + checkContentChildren(propertyName: string, items: QueryList, className: string) { + if (this.contentChildren[propertyName]) { + if (items.length > 0) { + console.warn(`In ${this.constructor.name}, the nested ${className} and ${this.contentChildren[propertyName]} components are incompatible. Ensure that all nested components in the content area match.`); + } + return false; + } + return true; + } + + setContentChildren(propertyName: string, items: QueryList, className: string) { + if (items.length > 0) { + this.contentChildren[propertyName] = className; + } + } + setChildren(propertyName: string, items: QueryList) { this.resetOptions(propertyName); return this._collectionContainerImpl.setChildren(propertyName, items); From fa3462debf386fe045eb374323f73ef210a233e8 Mon Sep 17 00:00:00 2001 From: alexlavrov Date: Fri, 23 Aug 2024 12:32:13 +0400 Subject: [PATCH 3/5] Generate new devextreme-angular structure --- packages/devextreme-angular/src/index.ts | 4 +- .../src/ui/accordion/index.ts | 21 +- .../src/ui/accordion/nested/index.ts | 2 + .../src/ui/accordion/nested/item-dxi.ts | 143 ++++ .../src/ui/accordion/nested/ng-package.json | 5 + .../src/ui/action-sheet/index.ts | 21 +- .../src/ui/action-sheet/nested/index.ts | 2 + .../src/ui/action-sheet/nested/item-dxi.ts | 136 ++++ .../ui/action-sheet/nested/ng-package.json | 5 + .../src/ui/autocomplete/index.ts | 85 ++- .../src/ui/autocomplete/nested/animation.ts | 81 +++ .../src/ui/autocomplete/nested/at.ts | 81 +++ .../ui/autocomplete/nested/boundary-offset.ts | 80 +++ .../src/ui/autocomplete/nested/button-dxi.ts | 84 +++ .../src/ui/autocomplete/nested/collision.ts | 81 +++ .../autocomplete/nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/autocomplete/nested/from.ts | 105 +++ .../src/ui/autocomplete/nested/hide.ts | 146 ++++ .../src/ui/autocomplete/nested/index.ts | 17 + .../src/ui/autocomplete/nested/item-dxi.ts | 119 ++++ .../src/ui/autocomplete/nested/my.ts | 81 +++ .../ui/autocomplete/nested/ng-package.json | 5 + .../src/ui/autocomplete/nested/offset.ts | 80 +++ .../src/ui/autocomplete/nested/options.ts | 258 +++++++ .../src/ui/autocomplete/nested/position.ts | 123 ++++ .../src/ui/autocomplete/nested/show.ts | 146 ++++ .../src/ui/autocomplete/nested/to.ts | 105 +++ .../autocomplete/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/bar-gauge/index.ts | 50 ++ .../src/ui/bar-gauge/nested/animation.ts | 89 +++ .../src/ui/bar-gauge/nested/border.ts | 113 +++ .../src/ui/bar-gauge/nested/export.ts | 121 ++++ .../src/ui/bar-gauge/nested/font.ts | 104 +++ .../src/ui/bar-gauge/nested/format.ts | 113 +++ .../src/ui/bar-gauge/nested/geometry.ts | 80 +++ .../src/ui/bar-gauge/nested/index.ts | 17 + .../ui/bar-gauge/nested/item-text-format.ts | 113 +++ .../src/ui/bar-gauge/nested/label.ts | 122 ++++ .../src/ui/bar-gauge/nested/legend.ts | 251 +++++++ .../ui/bar-gauge/nested/loading-indicator.ts | 110 +++ .../src/ui/bar-gauge/nested/margin.ts | 96 +++ .../src/ui/bar-gauge/nested/ng-package.json | 5 + .../src/ui/bar-gauge/nested/shadow.ts | 104 +++ .../src/ui/bar-gauge/nested/size.ts | 80 +++ .../src/ui/bar-gauge/nested/subtitle.ts | 105 +++ .../src/ui/bar-gauge/nested/title.ts | 138 ++++ .../src/ui/bar-gauge/nested/tooltip.ts | 195 +++++ .../devextreme-angular/src/ui/box/index.ts | 24 +- .../src/ui/box/nested/box.ts | 268 +++++++ .../src/ui/box/nested/index.ts | 3 + .../src/ui/box/nested/item-dxi.ts | 152 ++++ .../src/ui/box/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/bullet/index.ts | 23 + .../src/ui/bullet/nested/border.ts | 105 +++ .../src/ui/bullet/nested/font.ts | 104 +++ .../src/ui/bullet/nested/format.ts | 113 +++ .../src/ui/bullet/nested/index.ts | 8 + .../src/ui/bullet/nested/margin.ts | 96 +++ .../src/ui/bullet/nested/ng-package.json | 5 + .../src/ui/bullet/nested/shadow.ts | 104 +++ .../src/ui/bullet/nested/size.ts | 80 +++ .../src/ui/bullet/nested/tooltip.ts | 195 +++++ .../src/ui/button-group/index.ts | 21 +- .../src/ui/button-group/nested/index.ts | 2 + .../src/ui/button-group/nested/item-dxi.ts | 123 ++++ .../ui/button-group/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/button/index.ts | 2 + .../src/ui/calendar/index.ts | 2 + .../devextreme-angular/src/ui/chart/index.ts | 318 ++++++++- .../src/ui/chart/nested/adaptive-layout.ts | 88 +++ .../ui/chart/nested/aggregation-interval.ts | 136 ++++ .../src/ui/chart/nested/aggregation.ts | 89 +++ .../src/ui/chart/nested/animation.ts | 97 +++ .../src/ui/chart/nested/annotation-dxi.ts | 315 +++++++++ .../src/ui/chart/nested/area.ts | 556 +++++++++++++++ .../src/ui/chart/nested/argument-axis.ts | 519 ++++++++++++++ .../src/ui/chart/nested/argument-format.ts | 113 +++ .../src/ui/chart/nested/background-color.ts | 80 +++ .../src/ui/chart/nested/bar.ts | 556 +++++++++++++++ .../src/ui/chart/nested/border.ts | 145 ++++ .../src/ui/chart/nested/break-dxi.ts | 74 ++ .../src/ui/chart/nested/break-style.ts | 89 +++ .../src/ui/chart/nested/bubble.ts | 556 +++++++++++++++ .../src/ui/chart/nested/candlestick.ts | 556 +++++++++++++++ .../src/ui/chart/nested/color.ts | 80 +++ .../nested/common-annotation-settings.ts | 313 ++++++++ .../ui/chart/nested/common-axis-settings.ts | 243 +++++++ .../ui/chart/nested/common-pane-settings.ts | 81 +++ .../ui/chart/nested/common-series-settings.ts | 556 +++++++++++++++ .../src/ui/chart/nested/connector.ts | 88 +++ .../src/ui/chart/nested/constant-line-dxi.ts | 132 ++++ .../ui/chart/nested/constant-line-style.ts | 114 +++ .../src/ui/chart/nested/crosshair.ts | 130 ++++ .../ui/chart/nested/data-prepare-settings.ts | 88 +++ .../src/ui/chart/nested/drag-box-style.ts | 80 +++ .../src/ui/chart/nested/export.ts | 121 ++++ .../src/ui/chart/nested/font.ts | 104 +++ .../src/ui/chart/nested/format.ts | 113 +++ .../src/ui/chart/nested/fullstackedarea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/fullstackedbar.ts | 556 +++++++++++++++ .../src/ui/chart/nested/fullstackedline.ts | 556 +++++++++++++++ .../src/ui/chart/nested/fullstackedspline.ts | 556 +++++++++++++++ .../ui/chart/nested/fullstackedsplinearea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/grid.ts | 96 +++ .../src/ui/chart/nested/hatching.ts | 97 +++ .../src/ui/chart/nested/height.ts | 80 +++ .../src/ui/chart/nested/horizontal-line.ts | 114 +++ .../src/ui/chart/nested/hover-style.ts | 121 ++++ .../src/ui/chart/nested/image.ts | 88 +++ .../src/ui/chart/nested/index.ts | 85 +++ .../src/ui/chart/nested/label.ts | 297 ++++++++ .../src/ui/chart/nested/legend.ts | 258 +++++++ .../src/ui/chart/nested/line.ts | 556 +++++++++++++++ .../src/ui/chart/nested/loading-indicator.ts | 118 ++++ .../src/ui/chart/nested/margin.ts | 96 +++ .../chart/nested/min-visual-range-length.ts | 136 ++++ .../src/ui/chart/nested/minor-grid.ts | 96 +++ .../ui/chart/nested/minor-tick-interval.ts | 136 ++++ .../src/ui/chart/nested/minor-tick.ts | 112 +++ .../src/ui/chart/nested/ng-package.json | 5 + .../src/ui/chart/nested/pane-dxi.ts | 91 +++ .../src/ui/chart/nested/point.ts | 145 ++++ .../src/ui/chart/nested/rangearea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/rangebar.ts | 556 +++++++++++++++ .../src/ui/chart/nested/reduction.ts | 81 +++ .../src/ui/chart/nested/scatter.ts | 556 +++++++++++++++ .../src/ui/chart/nested/scroll-bar.ts | 113 +++ .../src/ui/chart/nested/selection-style.ts | 121 ++++ .../src/ui/chart/nested/series-dxi.ts | 382 ++++++++++ .../src/ui/chart/nested/series-template.ts | 80 +++ .../src/ui/chart/nested/shadow.ts | 104 +++ .../src/ui/chart/nested/size.ts | 80 +++ .../src/ui/chart/nested/spline.ts | 556 +++++++++++++++ .../src/ui/chart/nested/splinearea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stackedarea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stackedbar.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stackedline.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stackedspline.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stackedsplinearea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/steparea.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stepline.ts | 556 +++++++++++++++ .../src/ui/chart/nested/stock.ts | 556 +++++++++++++++ .../src/ui/chart/nested/strip-dxi.ts | 108 +++ .../src/ui/chart/nested/strip-style.ts | 90 +++ .../src/ui/chart/nested/subtitle.ts | 105 +++ .../src/ui/chart/nested/tick-interval.ts | 136 ++++ .../src/ui/chart/nested/tick.ts | 112 +++ .../src/ui/chart/nested/title.ts | 146 ++++ .../src/ui/chart/nested/tooltip.ts | 220 ++++++ .../src/ui/chart/nested/url.ts | 80 +++ .../src/ui/chart/nested/value-axis-dxi.ts | 497 +++++++++++++ .../src/ui/chart/nested/value-error-bar.ts | 137 ++++ .../src/ui/chart/nested/vertical-line.ts | 114 +++ .../src/ui/chart/nested/width.ts | 80 +++ .../src/ui/chart/nested/zoom-and-pan.ts | 121 ++++ .../devextreme-angular/src/ui/chat/index.ts | 27 +- .../src/ui/chat/nested/author.ts | 88 +++ .../src/ui/chat/nested/index.ts | 4 + .../src/ui/chat/nested/item-dxi.ts | 91 +++ .../src/ui/chat/nested/ng-package.json | 5 + .../src/ui/chat/nested/user.ts | 88 +++ .../src/ui/check-box/index.ts | 2 + .../src/ui/circular-gauge/index.ts | 74 ++ .../src/ui/circular-gauge/nested/animation.ts | 89 +++ .../circular-gauge/nested/background-color.ts | 80 +++ .../src/ui/circular-gauge/nested/border.ts | 105 +++ .../src/ui/circular-gauge/nested/color.ts | 80 +++ .../src/ui/circular-gauge/nested/export.ts | 121 ++++ .../src/ui/circular-gauge/nested/font.ts | 104 +++ .../src/ui/circular-gauge/nested/format.ts | 113 +++ .../src/ui/circular-gauge/nested/geometry.ts | 80 +++ .../src/ui/circular-gauge/nested/index.ts | 25 + .../src/ui/circular-gauge/nested/label.ts | 131 ++++ .../nested/loading-indicator.ts | 110 +++ .../src/ui/circular-gauge/nested/margin.ts | 96 +++ .../ui/circular-gauge/nested/minor-tick.ts | 104 +++ .../ui/circular-gauge/nested/ng-package.json | 5 + .../circular-gauge/nested/range-container.ts | 134 ++++ .../src/ui/circular-gauge/nested/range-dxi.ts | 83 +++ .../src/ui/circular-gauge/nested/scale.ts | 163 +++++ .../src/ui/circular-gauge/nested/shadow.ts | 104 +++ .../src/ui/circular-gauge/nested/size.ts | 80 +++ .../src/ui/circular-gauge/nested/subtitle.ts | 105 +++ .../nested/subvalue-indicator.ts | 219 ++++++ .../src/ui/circular-gauge/nested/text.ts | 98 +++ .../src/ui/circular-gauge/nested/tick.ts | 104 +++ .../src/ui/circular-gauge/nested/title.ts | 138 ++++ .../src/ui/circular-gauge/nested/tooltip.ts | 195 +++++ .../circular-gauge/nested/value-indicator.ts | 219 ++++++ .../src/ui/color-box/index.ts | 66 +- .../src/ui/color-box/nested/animation.ts | 81 +++ .../src/ui/color-box/nested/at.ts | 81 +++ .../ui/color-box/nested/boundary-offset.ts | 80 +++ .../src/ui/color-box/nested/button-dxi.ts | 84 +++ .../src/ui/color-box/nested/collision.ts | 81 +++ .../ui/color-box/nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/color-box/nested/from.ts | 105 +++ .../src/ui/color-box/nested/hide.ts | 146 ++++ .../src/ui/color-box/nested/index.ts | 16 + .../src/ui/color-box/nested/my.ts | 81 +++ .../src/ui/color-box/nested/ng-package.json | 5 + .../src/ui/color-box/nested/offset.ts | 80 +++ .../src/ui/color-box/nested/options.ts | 258 +++++++ .../src/ui/color-box/nested/position.ts | 123 ++++ .../src/ui/color-box/nested/show.ts | 146 ++++ .../src/ui/color-box/nested/to.ts | 105 +++ .../ui/color-box/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/context-menu/index.ts | 63 +- .../src/ui/context-menu/nested/animation.ts | 81 +++ .../src/ui/context-menu/nested/at.ts | 81 +++ .../ui/context-menu/nested/boundary-offset.ts | 80 +++ .../src/ui/context-menu/nested/collision.ts | 81 +++ .../src/ui/context-menu/nested/delay.ts | 80 +++ .../src/ui/context-menu/nested/from.ts | 105 +++ .../src/ui/context-menu/nested/hide.ts | 146 ++++ .../src/ui/context-menu/nested/index.ts | 16 + .../src/ui/context-menu/nested/item-dxi.ts | 150 ++++ .../src/ui/context-menu/nested/my.ts | 81 +++ .../ui/context-menu/nested/ng-package.json | 5 + .../src/ui/context-menu/nested/offset.ts | 80 +++ .../src/ui/context-menu/nested/position.ts | 123 ++++ .../src/ui/context-menu/nested/show-event.ts | 80 +++ .../context-menu/nested/show-submenu-mode.ts | 81 +++ .../src/ui/context-menu/nested/show.ts | 146 ++++ .../src/ui/context-menu/nested/to.ts | 105 +++ .../src/ui/data-grid/index.ts | 229 +++++- .../src/ui/data-grid/nested/animation.ts | 81 +++ .../src/ui/data-grid/nested/at.ts | 81 +++ .../ui/data-grid/nested/boundary-offset.ts | 80 +++ .../src/ui/data-grid/nested/button-dxi.ts | 131 ++++ .../src/ui/data-grid/nested/button-options.ts | 258 +++++++ .../src/ui/data-grid/nested/change-dxi.ts | 99 +++ .../data-grid/nested/col-count-by-screen.ts | 96 +++ .../src/ui/data-grid/nested/collision.ts | 81 +++ .../src/ui/data-grid/nested/column-chooser.ts | 172 +++++ .../src/ui/data-grid/nested/column-dxi.ts | 667 ++++++++++++++++++ .../src/ui/data-grid/nested/column-fixing.ts | 80 +++ .../src/ui/data-grid/nested/cursor-offset.ts | 80 +++ .../data-grid/nested/custom-operation-dxi.ts | 123 ++++ .../src/ui/data-grid/nested/editing.ts | 236 +++++++ .../src/ui/data-grid/nested/export.ts | 97 +++ .../src/ui/data-grid/nested/field-dxi.ts | 167 +++++ .../data-grid/nested/filter-builder-popup.ts | 511 ++++++++++++++ .../src/ui/data-grid/nested/filter-builder.ts | 315 +++++++++ .../nested/filter-operation-descriptions.ts | 168 +++++ .../src/ui/data-grid/nested/filter-panel.ts | 109 +++ .../src/ui/data-grid/nested/filter-row.ts | 137 ++++ .../src/ui/data-grid/nested/form-item.ts | 190 +++++ .../src/ui/data-grid/nested/form.ts | 411 +++++++++++ .../src/ui/data-grid/nested/format.ts | 113 +++ .../src/ui/data-grid/nested/from.ts | 105 +++ .../src/ui/data-grid/nested/group-item-dxi.ts | 140 ++++ .../nested/group-operation-descriptions.ts | 96 +++ .../src/ui/data-grid/nested/group-panel.ts | 102 +++ .../src/ui/data-grid/nested/grouping.ts | 105 +++ .../src/ui/data-grid/nested/header-filter.ts | 156 ++++ .../src/ui/data-grid/nested/hide.ts | 146 ++++ .../src/ui/data-grid/nested/index.ts | 65 ++ .../src/ui/data-grid/nested/item-dxi.ts | 418 +++++++++++ .../data-grid/nested/keyboard-navigation.ts | 97 +++ .../src/ui/data-grid/nested/label.ts | 135 ++++ .../src/ui/data-grid/nested/load-panel.ts | 137 ++++ .../src/ui/data-grid/nested/lookup.ts | 106 +++ .../src/ui/data-grid/nested/master-detail.ts | 109 +++ .../src/ui/data-grid/nested/my.ts | 81 +++ .../src/ui/data-grid/nested/ng-package.json | 5 + .../src/ui/data-grid/nested/offset.ts | 80 +++ .../nested/operation-descriptions.ts | 152 ++++ .../src/ui/data-grid/nested/pager.ts | 130 ++++ .../src/ui/data-grid/nested/paging.ts | 109 +++ .../src/ui/data-grid/nested/popup.ts | 511 ++++++++++++++ .../src/ui/data-grid/nested/position.ts | 123 ++++ .../ui/data-grid/nested/remote-operations.ts | 112 +++ .../src/ui/data-grid/nested/row-dragging.ts | 250 +++++++ .../src/ui/data-grid/nested/scrolling.ts | 139 ++++ .../src/ui/data-grid/nested/search-panel.ts | 133 ++++ .../src/ui/data-grid/nested/search.ts | 105 +++ .../src/ui/data-grid/nested/selection.ts | 122 ++++ .../src/ui/data-grid/nested/show.ts | 146 ++++ .../nested/sort-by-group-summary-info-dxi.ts | 83 +++ .../src/ui/data-grid/nested/sorting.ts | 105 +++ .../src/ui/data-grid/nested/state-storing.ts | 113 +++ .../src/ui/data-grid/nested/summary.ts | 136 ++++ .../src/ui/data-grid/nested/tab-dxi.ts | 172 +++++ .../ui/data-grid/nested/tab-panel-options.ts | 453 ++++++++++++ .../src/ui/data-grid/nested/texts.ts | 368 ++++++++++ .../src/ui/data-grid/nested/to.ts | 105 +++ .../ui/data-grid/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/data-grid/nested/toolbar.ts | 101 +++ .../src/ui/data-grid/nested/total-item-dxi.ts | 141 ++++ .../data-grid/nested/validation-rule-dxi.ts | 147 ++++ .../src/ui/data-grid/nested/value-format.ts | 113 +++ .../src/ui/date-box/index.ts | 72 +- .../src/ui/date-box/nested/animation.ts | 81 +++ .../src/ui/date-box/nested/at.ts | 81 +++ .../src/ui/date-box/nested/boundary-offset.ts | 80 +++ .../src/ui/date-box/nested/button-dxi.ts | 84 +++ .../ui/date-box/nested/calendar-options.ts | 407 +++++++++++ .../src/ui/date-box/nested/collision.ts | 81 +++ .../src/ui/date-box/nested/display-format.ts | 113 +++ .../ui/date-box/nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/date-box/nested/from.ts | 105 +++ .../src/ui/date-box/nested/hide.ts | 146 ++++ .../src/ui/date-box/nested/index.ts | 18 + .../src/ui/date-box/nested/my.ts | 81 +++ .../src/ui/date-box/nested/ng-package.json | 5 + .../src/ui/date-box/nested/offset.ts | 80 +++ .../src/ui/date-box/nested/options.ts | 258 +++++++ .../src/ui/date-box/nested/position.ts | 123 ++++ .../src/ui/date-box/nested/show.ts | 146 ++++ .../src/ui/date-box/nested/to.ts | 105 +++ .../ui/date-box/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/date-range-box/index.ts | 72 +- .../src/ui/date-range-box/nested/animation.ts | 81 +++ .../src/ui/date-range-box/nested/at.ts | 81 +++ .../date-range-box/nested/boundary-offset.ts | 80 +++ .../ui/date-range-box/nested/button-dxi.ts | 84 +++ .../date-range-box/nested/calendar-options.ts | 407 +++++++++++ .../src/ui/date-range-box/nested/collision.ts | 81 +++ .../date-range-box/nested/display-format.ts | 113 +++ .../nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/date-range-box/nested/from.ts | 105 +++ .../src/ui/date-range-box/nested/hide.ts | 146 ++++ .../src/ui/date-range-box/nested/index.ts | 18 + .../src/ui/date-range-box/nested/my.ts | 81 +++ .../ui/date-range-box/nested/ng-package.json | 5 + .../src/ui/date-range-box/nested/offset.ts | 80 +++ .../src/ui/date-range-box/nested/options.ts | 258 +++++++ .../src/ui/date-range-box/nested/position.ts | 123 ++++ .../src/ui/date-range-box/nested/show.ts | 146 ++++ .../src/ui/date-range-box/nested/to.ts | 105 +++ .../date-range-box/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/defer-rendering/index.ts | 29 + .../ui/defer-rendering/nested/animation.ts | 146 ++++ .../src/ui/defer-rendering/nested/at.ts | 81 +++ .../defer-rendering/nested/boundary-offset.ts | 80 +++ .../ui/defer-rendering/nested/collision.ts | 81 +++ .../src/ui/defer-rendering/nested/from.ts | 105 +++ .../src/ui/defer-rendering/nested/index.ts | 10 + .../src/ui/defer-rendering/nested/my.ts | 81 +++ .../ui/defer-rendering/nested/ng-package.json | 5 + .../src/ui/defer-rendering/nested/offset.ts | 80 +++ .../src/ui/defer-rendering/nested/position.ts | 123 ++++ .../src/ui/defer-rendering/nested/to.ts | 105 +++ .../src/ui/diagram/index.ts | 84 ++- .../src/ui/diagram/nested/auto-layout.ts | 82 +++ .../src/ui/diagram/nested/command-dxi.ts | 112 +++ .../ui/diagram/nested/connection-point-dxi.ts | 74 ++ .../src/ui/diagram/nested/context-menu.ts | 93 +++ .../src/ui/diagram/nested/context-toolbox.ts | 113 +++ .../src/ui/diagram/nested/custom-shape-dxi.ts | 396 +++++++++++ .../diagram/nested/default-item-properties.ts | 137 ++++ .../src/ui/diagram/nested/edges.ts | 194 +++++ .../src/ui/diagram/nested/editing.ts | 136 ++++ .../src/ui/diagram/nested/export.ts | 72 ++ .../src/ui/diagram/nested/grid-size.ts | 93 +++ .../src/ui/diagram/nested/group-dxi.ts | 119 ++++ .../src/ui/diagram/nested/history-toolbar.ts | 93 +++ .../src/ui/diagram/nested/index.ts | 23 + .../src/ui/diagram/nested/item-dxi.ts | 116 +++ .../src/ui/diagram/nested/main-toolbar.ts | 93 +++ .../src/ui/diagram/nested/ng-package.json | 5 + .../src/ui/diagram/nested/nodes.ts | 228 ++++++ .../src/ui/diagram/nested/page-size.ts | 121 ++++ .../src/ui/diagram/nested/properties-panel.ts | 93 +++ .../src/ui/diagram/nested/tab-dxi.ts | 104 +++ .../src/ui/diagram/nested/toolbox.ts | 117 +++ .../src/ui/diagram/nested/view-toolbar.ts | 93 +++ .../src/ui/diagram/nested/zoom-level.ts | 93 +++ .../src/ui/draggable/index.ts | 5 + .../src/ui/draggable/nested/cursor-offset.ts | 80 +++ .../src/ui/draggable/nested/index.ts | 2 + .../src/ui/draggable/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/drawer/index.ts | 2 + .../src/ui/drop-down-box/index.ts | 85 ++- .../src/ui/drop-down-box/nested/animation.ts | 81 +++ .../src/ui/drop-down-box/nested/at.ts | 81 +++ .../drop-down-box/nested/boundary-offset.ts | 80 +++ .../src/ui/drop-down-box/nested/button-dxi.ts | 84 +++ .../src/ui/drop-down-box/nested/collision.ts | 81 +++ .../drop-down-box/nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/drop-down-box/nested/from.ts | 105 +++ .../src/ui/drop-down-box/nested/hide.ts | 146 ++++ .../src/ui/drop-down-box/nested/index.ts | 17 + .../src/ui/drop-down-box/nested/item-dxi.ts | 119 ++++ .../src/ui/drop-down-box/nested/my.ts | 81 +++ .../ui/drop-down-box/nested/ng-package.json | 5 + .../src/ui/drop-down-box/nested/offset.ts | 80 +++ .../src/ui/drop-down-box/nested/options.ts | 258 +++++++ .../src/ui/drop-down-box/nested/position.ts | 123 ++++ .../src/ui/drop-down-box/nested/show.ts | 146 ++++ .../src/ui/drop-down-box/nested/to.ts | 105 +++ .../drop-down-box/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/drop-down-button/index.ts | 63 +- .../ui/drop-down-button/nested/animation.ts | 81 +++ .../src/ui/drop-down-button/nested/at.ts | 81 +++ .../nested/boundary-offset.ts | 80 +++ .../ui/drop-down-button/nested/collision.ts | 81 +++ .../nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/drop-down-button/nested/from.ts | 105 +++ .../src/ui/drop-down-button/nested/hide.ts | 146 ++++ .../src/ui/drop-down-button/nested/index.ts | 15 + .../ui/drop-down-button/nested/item-dxi.ts | 144 ++++ .../src/ui/drop-down-button/nested/my.ts | 81 +++ .../drop-down-button/nested/ng-package.json | 5 + .../src/ui/drop-down-button/nested/offset.ts | 80 +++ .../ui/drop-down-button/nested/position.ts | 123 ++++ .../src/ui/drop-down-button/nested/show.ts | 146 ++++ .../src/ui/drop-down-button/nested/to.ts | 105 +++ .../nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/file-manager/index.ts | 32 + .../src/ui/file-manager/nested/column-dxi.ts | 147 ++++ .../ui/file-manager/nested/context-menu.ts | 85 +++ .../src/ui/file-manager/nested/details.ts | 85 +++ .../nested/file-selection-item-dxi.ts | 149 ++++ .../src/ui/file-manager/nested/index.ts | 11 + .../src/ui/file-manager/nested/item-dxi.ts | 200 ++++++ .../src/ui/file-manager/nested/item-view.ts | 97 +++ .../ui/file-manager/nested/ng-package.json | 5 + .../ui/file-manager/nested/notifications.ts | 80 +++ .../src/ui/file-manager/nested/permissions.ts | 120 ++++ .../src/ui/file-manager/nested/toolbar.ts | 102 +++ .../src/ui/file-manager/nested/upload.ts | 80 +++ .../src/ui/file-uploader/index.ts | 2 + .../src/ui/filter-builder/index.ts | 52 +- .../nested/custom-operation-dxi.ts | 123 ++++ .../src/ui/filter-builder/nested/field-dxi.ts | 167 +++++ .../nested/filter-operation-descriptions.ts | 168 +++++ .../src/ui/filter-builder/nested/format.ts | 113 +++ .../nested/group-operation-descriptions.ts | 96 +++ .../src/ui/filter-builder/nested/index.ts | 7 + .../src/ui/filter-builder/nested/lookup.ts | 98 +++ .../ui/filter-builder/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/form/index.ts | 39 +- .../src/ui/form/nested/button-options.ts | 258 +++++++ .../src/ui/form/nested/col-count-by-screen.ts | 96 +++ .../src/ui/form/nested/index.ts | 8 + .../src/ui/form/nested/item-dxi.ts | 368 ++++++++++ .../src/ui/form/nested/label.ts | 135 ++++ .../src/ui/form/nested/ng-package.json | 5 + .../src/ui/form/nested/tab-dxi.ts | 172 +++++ .../src/ui/form/nested/tab-panel-options.ts | 453 ++++++++++++ .../src/ui/form/nested/validation-rule-dxi.ts | 147 ++++ .../devextreme-angular/src/ui/funnel/index.ts | 59 ++ .../src/ui/funnel/nested/adaptive-layout.ts | 88 +++ .../src/ui/funnel/nested/border.ts | 113 +++ .../src/ui/funnel/nested/connector.ts | 96 +++ .../src/ui/funnel/nested/export.ts | 121 ++++ .../src/ui/funnel/nested/font.ts | 104 +++ .../src/ui/funnel/nested/format.ts | 113 +++ .../src/ui/funnel/nested/hatching.ts | 97 +++ .../src/ui/funnel/nested/hover-style.ts | 81 +++ .../src/ui/funnel/nested/index.ts | 20 + .../src/ui/funnel/nested/item.ts | 89 +++ .../src/ui/funnel/nested/label.ts | 171 +++++ .../src/ui/funnel/nested/legend.ts | 242 +++++++ .../src/ui/funnel/nested/loading-indicator.ts | 118 ++++ .../src/ui/funnel/nested/margin.ts | 96 +++ .../src/ui/funnel/nested/ng-package.json | 5 + .../src/ui/funnel/nested/selection-style.ts | 81 +++ .../src/ui/funnel/nested/shadow.ts | 104 +++ .../src/ui/funnel/nested/size.ts | 80 +++ .../src/ui/funnel/nested/subtitle.ts | 105 +++ .../src/ui/funnel/nested/title.ts | 138 ++++ .../src/ui/funnel/nested/tooltip.ts | 187 +++++ .../src/ui/gallery/index.ts | 21 +- .../src/ui/gallery/nested/index.ts | 2 + .../src/ui/gallery/nested/item-dxi.ts | 127 ++++ .../src/ui/gallery/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/gantt/index.ts | 91 ++- .../src/ui/gantt/nested/column-dxi.ts | 380 ++++++++++ .../src/ui/gantt/nested/context-menu.ts | 94 +++ .../src/ui/gantt/nested/dependencies.ts | 106 +++ .../src/ui/gantt/nested/editing.ts | 144 ++++ .../src/ui/gantt/nested/filter-row.ts | 121 ++++ .../src/ui/gantt/nested/format.ts | 113 +++ .../src/ui/gantt/nested/header-filter.ts | 157 +++++ .../src/ui/gantt/nested/index.ts | 20 + .../src/ui/gantt/nested/item-dxi.ts | 246 +++++++ .../src/ui/gantt/nested/ng-package.json | 5 + .../ui/gantt/nested/operation-descriptions.ts | 152 ++++ .../ui/gantt/nested/resource-assignments.ts | 98 +++ .../src/ui/gantt/nested/resources.ts | 98 +++ .../src/ui/gantt/nested/scale-type-range.ts | 81 +++ .../src/ui/gantt/nested/search.ts | 105 +++ .../src/ui/gantt/nested/sorting.ts | 105 +++ .../src/ui/gantt/nested/strip-line-dxi.ts | 90 +++ .../src/ui/gantt/nested/tasks.ts | 130 ++++ .../src/ui/gantt/nested/texts.ts | 88 +++ .../src/ui/gantt/nested/toolbar.ts | 85 +++ .../src/ui/gantt/nested/validation.ts | 88 +++ .../src/ui/html-editor/index.ts | 48 +- .../nested/file-uploader-options.ts | 592 ++++++++++++++++ .../src/ui/html-editor/nested/image-upload.ts | 118 ++++ .../src/ui/html-editor/nested/index.ts | 11 + .../src/ui/html-editor/nested/item-dxi.ts | 258 +++++++ .../ui/html-editor/nested/media-resizing.ts | 80 +++ .../src/ui/html-editor/nested/mention-dxi.ts | 132 ++++ .../src/ui/html-editor/nested/ng-package.json | 5 + .../src/ui/html-editor/nested/tab-dxi.ts | 67 ++ .../html-editor/nested/table-context-menu.ts | 93 +++ .../ui/html-editor/nested/table-resizing.ts | 88 +++ .../src/ui/html-editor/nested/toolbar.ts | 102 +++ .../src/ui/html-editor/nested/variables.ts | 82 +++ .../src/ui/linear-gauge/index.ts | 77 ++ .../src/ui/linear-gauge/nested/animation.ts | 89 +++ .../linear-gauge/nested/background-color.ts | 80 +++ .../src/ui/linear-gauge/nested/border.ts | 105 +++ .../src/ui/linear-gauge/nested/color.ts | 80 +++ .../src/ui/linear-gauge/nested/export.ts | 121 ++++ .../src/ui/linear-gauge/nested/font.ts | 104 +++ .../src/ui/linear-gauge/nested/format.ts | 113 +++ .../src/ui/linear-gauge/nested/geometry.ts | 73 ++ .../src/ui/linear-gauge/nested/index.ts | 26 + .../src/ui/linear-gauge/nested/label.ts | 122 ++++ .../linear-gauge/nested/loading-indicator.ts | 110 +++ .../src/ui/linear-gauge/nested/margin.ts | 96 +++ .../src/ui/linear-gauge/nested/minor-tick.ts | 104 +++ .../ui/linear-gauge/nested/ng-package.json | 5 + .../ui/linear-gauge/nested/range-container.ts | 142 ++++ .../src/ui/linear-gauge/nested/range-dxi.ts | 83 +++ .../src/ui/linear-gauge/nested/scale.ts | 171 +++++ .../src/ui/linear-gauge/nested/shadow.ts | 104 +++ .../src/ui/linear-gauge/nested/size.ts | 80 +++ .../src/ui/linear-gauge/nested/subtitle.ts | 105 +++ .../linear-gauge/nested/subvalue-indicator.ts | 219 ++++++ .../src/ui/linear-gauge/nested/text.ts | 98 +++ .../src/ui/linear-gauge/nested/tick.ts | 104 +++ .../src/ui/linear-gauge/nested/title.ts | 138 ++++ .../src/ui/linear-gauge/nested/tooltip.ts | 195 +++++ .../ui/linear-gauge/nested/value-indicator.ts | 219 ++++++ .../src/ui/linear-gauge/nested/width.ts | 80 +++ .../devextreme-angular/src/ui/list/index.ts | 55 +- .../src/ui/list/nested/button-dxi.ts | 84 +++ .../src/ui/list/nested/cursor-offset.ts | 80 +++ .../src/ui/list/nested/index.ts | 8 + .../src/ui/list/nested/item-dragging.ts | 315 +++++++++ .../src/ui/list/nested/item-dxi.ts | 151 ++++ .../src/ui/list/nested/menu-item-dxi.ts | 74 ++ .../src/ui/list/nested/ng-package.json | 5 + .../src/ui/list/nested/options.ts | 258 +++++++ .../ui/list/nested/search-editor-options.ts | 539 ++++++++++++++ .../src/ui/load-indicator/index.ts | 2 + .../src/ui/load-panel/index.ts | 35 + .../src/ui/load-panel/nested/animation.ts | 81 +++ .../src/ui/load-panel/nested/at.ts | 81 +++ .../ui/load-panel/nested/boundary-offset.ts | 80 +++ .../src/ui/load-panel/nested/collision.ts | 81 +++ .../src/ui/load-panel/nested/from.ts | 105 +++ .../src/ui/load-panel/nested/hide.ts | 146 ++++ .../src/ui/load-panel/nested/index.ts | 12 + .../src/ui/load-panel/nested/my.ts | 81 +++ .../src/ui/load-panel/nested/ng-package.json | 5 + .../src/ui/load-panel/nested/offset.ts | 80 +++ .../src/ui/load-panel/nested/position.ts | 123 ++++ .../src/ui/load-panel/nested/show.ts | 146 ++++ .../src/ui/load-panel/nested/to.ts | 105 +++ .../devextreme-angular/src/ui/lookup/index.ts | 69 +- .../src/ui/lookup/nested/animation.ts | 81 +++ .../src/ui/lookup/nested/at.ts | 81 +++ .../src/ui/lookup/nested/boundary-offset.ts | 80 +++ .../src/ui/lookup/nested/collision.ts | 81 +++ .../src/ui/lookup/nested/drop-down-options.ts | 440 ++++++++++++ .../src/ui/lookup/nested/from.ts | 105 +++ .../src/ui/lookup/nested/hide-event.ts | 80 +++ .../src/ui/lookup/nested/hide.ts | 146 ++++ .../src/ui/lookup/nested/index.ts | 17 + .../src/ui/lookup/nested/item-dxi.ts | 119 ++++ .../src/ui/lookup/nested/my.ts | 81 +++ .../src/ui/lookup/nested/ng-package.json | 5 + .../src/ui/lookup/nested/offset.ts | 80 +++ .../src/ui/lookup/nested/position.ts | 123 ++++ .../src/ui/lookup/nested/show-event.ts | 80 +++ .../src/ui/lookup/nested/show.ts | 146 ++++ .../src/ui/lookup/nested/to.ts | 105 +++ .../src/ui/lookup/nested/toolbar-item-dxi.ts | 186 +++++ .../devextreme-angular/src/ui/map/index.ts | 68 +- .../src/ui/map/nested/api-key.ts | 88 +++ .../src/ui/map/nested/center-dxi.ts | 74 ++ .../src/ui/map/nested/index.ts | 7 + .../src/ui/map/nested/location-dxi.ts | 74 ++ .../src/ui/map/nested/marker-dxi.ts | 102 +++ .../src/ui/map/nested/ng-package.json | 5 + .../src/ui/map/nested/route-dxi.ts | 111 +++ .../src/ui/map/nested/tooltip.ts | 80 +++ .../devextreme-angular/src/ui/menu/index.ts | 63 +- .../src/ui/menu/nested/animation.ts | 81 +++ .../src/ui/menu/nested/at.ts | 81 +++ .../src/ui/menu/nested/boundary-offset.ts | 80 +++ .../src/ui/menu/nested/collision.ts | 81 +++ .../src/ui/menu/nested/delay.ts | 80 +++ .../src/ui/menu/nested/from.ts | 105 +++ .../src/ui/menu/nested/hide.ts | 146 ++++ .../src/ui/menu/nested/index.ts | 16 + .../src/ui/menu/nested/item-dxi.ts | 166 +++++ .../src/ui/menu/nested/my.ts | 81 +++ .../src/ui/menu/nested/ng-package.json | 5 + .../src/ui/menu/nested/offset.ts | 80 +++ .../src/ui/menu/nested/position.ts | 123 ++++ .../ui/menu/nested/show-first-submenu-mode.ts | 81 +++ .../src/ui/menu/nested/show-submenu-mode.ts | 81 +++ .../src/ui/menu/nested/show.ts | 146 ++++ .../src/ui/menu/nested/to.ts | 105 +++ .../src/ui/multi-view/index.ts | 21 +- .../src/ui/multi-view/nested/index.ts | 2 + .../src/ui/multi-view/nested/item-dxi.ts | 111 +++ .../src/ui/multi-view/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/nested/label.ts | 33 +- .../src/ui/number-box/index.ts | 27 +- .../src/ui/number-box/nested/button-dxi.ts | 84 +++ .../src/ui/number-box/nested/format.ts | 113 +++ .../src/ui/number-box/nested/index.ts | 4 + .../src/ui/number-box/nested/ng-package.json | 5 + .../src/ui/number-box/nested/options.ts | 258 +++++++ .../src/ui/pie-chart/index.ts | 118 +++- .../ui/pie-chart/nested/adaptive-layout.ts | 88 +++ .../src/ui/pie-chart/nested/animation.ts | 97 +++ .../src/ui/pie-chart/nested/annotation-dxi.ts | 308 ++++++++ .../ui/pie-chart/nested/argument-format.ts | 113 +++ .../src/ui/pie-chart/nested/border.ts | 113 +++ .../src/ui/pie-chart/nested/color.ts | 80 +++ .../nested/common-annotation-settings.ts | 306 ++++++++ .../nested/common-series-settings.ts | 179 +++++ .../src/ui/pie-chart/nested/connector.ts | 88 +++ .../src/ui/pie-chart/nested/export.ts | 121 ++++ .../src/ui/pie-chart/nested/font.ts | 104 +++ .../src/ui/pie-chart/nested/format.ts | 113 +++ .../src/ui/pie-chart/nested/hatching.ts | 97 +++ .../src/ui/pie-chart/nested/hover-style.ts | 97 +++ .../src/ui/pie-chart/nested/image.ts | 88 +++ .../src/ui/pie-chart/nested/index.ts | 29 + .../src/ui/pie-chart/nested/label.ts | 178 +++++ .../src/ui/pie-chart/nested/legend.ts | 251 +++++++ .../ui/pie-chart/nested/loading-indicator.ts | 118 ++++ .../src/ui/pie-chart/nested/margin.ts | 96 +++ .../src/ui/pie-chart/nested/ng-package.json | 5 + .../ui/pie-chart/nested/selection-style.ts | 97 +++ .../src/ui/pie-chart/nested/series-dxi.ts | 189 +++++ .../ui/pie-chart/nested/series-template.ts | 80 +++ .../src/ui/pie-chart/nested/shadow.ts | 104 +++ .../src/ui/pie-chart/nested/size.ts | 80 +++ .../pie-chart/nested/small-values-grouping.ts | 97 +++ .../src/ui/pie-chart/nested/subtitle.ts | 105 +++ .../src/ui/pie-chart/nested/title.ts | 138 ++++ .../src/ui/pie-chart/nested/tooltip.ts | 211 ++++++ .../src/ui/pivot-grid-field-chooser/index.ts | 11 + .../nested/header-filter.ts | 129 ++++ .../pivot-grid-field-chooser/nested/index.ts | 4 + .../nested/ng-package.json | 5 + .../pivot-grid-field-chooser/nested/search.ts | 97 +++ .../pivot-grid-field-chooser/nested/texts.ts | 128 ++++ .../src/ui/pivot-grid/index.ts | 41 ++ .../src/ui/pivot-grid/nested/data-source.ts | 157 +++++ .../src/ui/pivot-grid/nested/export.ts | 72 ++ .../src/ui/pivot-grid/nested/field-chooser.ts | 138 ++++ .../src/ui/pivot-grid/nested/field-dxi.ts | 371 ++++++++++ .../src/ui/pivot-grid/nested/field-panel.ts | 120 ++++ .../src/ui/pivot-grid/nested/format.ts | 113 +++ .../src/ui/pivot-grid/nested/header-filter.ts | 129 ++++ .../src/ui/pivot-grid/nested/index.ts | 14 + .../src/ui/pivot-grid/nested/load-panel.ts | 136 ++++ .../src/ui/pivot-grid/nested/ng-package.json | 5 + .../src/ui/pivot-grid/nested/scrolling.ts | 81 +++ .../src/ui/pivot-grid/nested/search.ts | 97 +++ .../src/ui/pivot-grid/nested/state-storing.ts | 113 +++ .../src/ui/pivot-grid/nested/store.ts | 72 ++ .../src/ui/pivot-grid/nested/texts.ts | 248 +++++++ .../src/ui/polar-chart/index.ts | 181 ++++- .../ui/polar-chart/nested/adaptive-layout.ts | 88 +++ .../src/ui/polar-chart/nested/animation.ts | 97 +++ .../ui/polar-chart/nested/annotation-dxi.ts | 323 +++++++++ .../src/ui/polar-chart/nested/area.ts | 307 ++++++++ .../ui/polar-chart/nested/argument-axis.ts | 335 +++++++++ .../ui/polar-chart/nested/argument-format.ts | 113 +++ .../src/ui/polar-chart/nested/bar.ts | 307 ++++++++ .../src/ui/polar-chart/nested/border.ts | 113 +++ .../src/ui/polar-chart/nested/color.ts | 80 +++ .../nested/common-annotation-settings.ts | 321 +++++++++ .../nested/common-axis-settings.ts | 185 +++++ .../nested/common-series-settings.ts | 307 ++++++++ .../src/ui/polar-chart/nested/connector.ts | 88 +++ .../polar-chart/nested/constant-line-dxi.ts | 115 +++ .../polar-chart/nested/constant-line-style.ts | 97 +++ .../nested/data-prepare-settings.ts | 88 +++ .../src/ui/polar-chart/nested/export.ts | 121 ++++ .../src/ui/polar-chart/nested/font.ts | 104 +++ .../src/ui/polar-chart/nested/format.ts | 113 +++ .../src/ui/polar-chart/nested/grid.ts | 96 +++ .../src/ui/polar-chart/nested/hatching.ts | 97 +++ .../src/ui/polar-chart/nested/hover-style.ts | 121 ++++ .../src/ui/polar-chart/nested/image.ts | 88 +++ .../src/ui/polar-chart/nested/index.ts | 50 ++ .../src/ui/polar-chart/nested/label.ts | 194 +++++ .../src/ui/polar-chart/nested/legend.ts | 250 +++++++ .../src/ui/polar-chart/nested/line.ts | 307 ++++++++ .../polar-chart/nested/loading-indicator.ts | 118 ++++ .../src/ui/polar-chart/nested/margin.ts | 96 +++ .../nested/min-visual-range-length.ts | 136 ++++ .../src/ui/polar-chart/nested/minor-grid.ts | 96 +++ .../polar-chart/nested/minor-tick-interval.ts | 136 ++++ .../src/ui/polar-chart/nested/minor-tick.ts | 112 +++ .../src/ui/polar-chart/nested/ng-package.json | 5 + .../src/ui/polar-chart/nested/point.ts | 145 ++++ .../src/ui/polar-chart/nested/scatter.ts | 307 ++++++++ .../ui/polar-chart/nested/selection-style.ts | 121 ++++ .../src/ui/polar-chart/nested/series-dxi.ts | 277 ++++++++ .../ui/polar-chart/nested/series-template.ts | 80 +++ .../src/ui/polar-chart/nested/shadow.ts | 104 +++ .../src/ui/polar-chart/nested/size.ts | 80 +++ .../src/ui/polar-chart/nested/stackedbar.ts | 307 ++++++++ .../src/ui/polar-chart/nested/strip-dxi.ts | 91 +++ .../src/ui/polar-chart/nested/strip-style.ts | 73 ++ .../src/ui/polar-chart/nested/subtitle.ts | 105 +++ .../ui/polar-chart/nested/tick-interval.ts | 136 ++++ .../src/ui/polar-chart/nested/tick.ts | 112 +++ .../src/ui/polar-chart/nested/title.ts | 138 ++++ .../src/ui/polar-chart/nested/tooltip.ts | 211 ++++++ .../src/ui/polar-chart/nested/value-axis.ts | 373 ++++++++++ .../ui/polar-chart/nested/value-error-bar.ts | 137 ++++ .../src/ui/popover/index.ts | 54 +- .../src/ui/popover/nested/animation.ts | 81 +++ .../src/ui/popover/nested/at.ts | 81 +++ .../src/ui/popover/nested/boundary-offset.ts | 80 +++ .../src/ui/popover/nested/collision.ts | 81 +++ .../src/ui/popover/nested/from.ts | 105 +++ .../src/ui/popover/nested/hide-event.ts | 80 +++ .../src/ui/popover/nested/hide.ts | 146 ++++ .../src/ui/popover/nested/index.ts | 15 + .../src/ui/popover/nested/my.ts | 81 +++ .../src/ui/popover/nested/ng-package.json | 5 + .../src/ui/popover/nested/offset.ts | 80 +++ .../src/ui/popover/nested/position.ts | 123 ++++ .../src/ui/popover/nested/show-event.ts | 80 +++ .../src/ui/popover/nested/show.ts | 146 ++++ .../src/ui/popover/nested/to.ts | 105 +++ .../src/ui/popover/nested/toolbar-item-dxi.ts | 186 +++++ .../devextreme-angular/src/ui/popup/index.ts | 48 +- .../src/ui/popup/nested/animation.ts | 81 +++ .../src/ui/popup/nested/at.ts | 81 +++ .../src/ui/popup/nested/boundary-offset.ts | 80 +++ .../src/ui/popup/nested/collision.ts | 81 +++ .../src/ui/popup/nested/from.ts | 105 +++ .../src/ui/popup/nested/hide.ts | 146 ++++ .../src/ui/popup/nested/index.ts | 13 + .../src/ui/popup/nested/my.ts | 81 +++ .../src/ui/popup/nested/ng-package.json | 5 + .../src/ui/popup/nested/offset.ts | 80 +++ .../src/ui/popup/nested/position.ts | 123 ++++ .../src/ui/popup/nested/show.ts | 146 ++++ .../src/ui/popup/nested/to.ts | 105 +++ .../src/ui/popup/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/progress-bar/index.ts | 2 + .../src/ui/radio-group/index.ts | 21 +- .../src/ui/radio-group/nested/index.ts | 2 + .../src/ui/radio-group/nested/item-dxi.ts | 119 ++++ .../src/ui/radio-group/nested/ng-package.json | 5 + .../src/ui/range-selector/index.ts | 212 ++++++ .../nested/aggregation-interval.ts | 136 ++++ .../ui/range-selector/nested/aggregation.ts | 89 +++ .../src/ui/range-selector/nested/area.ts | 556 +++++++++++++++ .../range-selector/nested/argument-format.ts | 113 +++ .../ui/range-selector/nested/background.ts | 89 +++ .../src/ui/range-selector/nested/bar.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/behavior.ts | 122 ++++ .../src/ui/range-selector/nested/border.ts | 97 +++ .../src/ui/range-selector/nested/break-dxi.ts | 74 ++ .../ui/range-selector/nested/break-style.ts | 89 +++ .../src/ui/range-selector/nested/bubble.ts | 556 +++++++++++++++ .../ui/range-selector/nested/candlestick.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/chart.ts | 191 +++++ .../src/ui/range-selector/nested/color.ts | 80 +++ .../nested/common-series-settings.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/connector.ts | 88 +++ .../nested/data-prepare-settings.ts | 88 +++ .../src/ui/range-selector/nested/export.ts | 121 ++++ .../src/ui/range-selector/nested/font.ts | 104 +++ .../src/ui/range-selector/nested/format.ts | 113 +++ .../range-selector/nested/fullstackedarea.ts | 556 +++++++++++++++ .../range-selector/nested/fullstackedbar.ts | 556 +++++++++++++++ .../range-selector/nested/fullstackedline.ts | 556 +++++++++++++++ .../nested/fullstackedspline.ts | 556 +++++++++++++++ .../nested/fullstackedsplinearea.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/hatching.ts | 97 +++ .../src/ui/range-selector/nested/height.ts | 80 +++ .../ui/range-selector/nested/hover-style.ts | 121 ++++ .../src/ui/range-selector/nested/image.ts | 97 +++ .../src/ui/range-selector/nested/indent.ts | 80 +++ .../src/ui/range-selector/nested/index.ts | 71 ++ .../src/ui/range-selector/nested/label.ts | 203 ++++++ .../src/ui/range-selector/nested/line.ts | 556 +++++++++++++++ .../nested/loading-indicator.ts | 118 ++++ .../src/ui/range-selector/nested/margin.ts | 96 +++ .../src/ui/range-selector/nested/marker.ts | 113 +++ .../src/ui/range-selector/nested/max-range.ts | 136 ++++ .../src/ui/range-selector/nested/min-range.ts | 136 ++++ .../nested/minor-tick-interval.ts | 136 ++++ .../ui/range-selector/nested/minor-tick.ts | 96 +++ .../ui/range-selector/nested/ng-package.json | 5 + .../src/ui/range-selector/nested/point.ts | 145 ++++ .../src/ui/range-selector/nested/rangearea.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/rangebar.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/reduction.ts | 81 +++ .../src/ui/range-selector/nested/scale.ts | 319 +++++++++ .../src/ui/range-selector/nested/scatter.ts | 556 +++++++++++++++ .../range-selector/nested/selection-style.ts | 121 ++++ .../ui/range-selector/nested/series-dxi.ts | 382 ++++++++++ .../range-selector/nested/series-template.ts | 80 +++ .../src/ui/range-selector/nested/shutter.ts | 80 +++ .../src/ui/range-selector/nested/size.ts | 80 +++ .../ui/range-selector/nested/slider-handle.ts | 88 +++ .../ui/range-selector/nested/slider-marker.ts | 138 ++++ .../src/ui/range-selector/nested/spline.ts | 556 +++++++++++++++ .../ui/range-selector/nested/splinearea.ts | 556 +++++++++++++++ .../ui/range-selector/nested/stackedarea.ts | 556 +++++++++++++++ .../ui/range-selector/nested/stackedbar.ts | 556 +++++++++++++++ .../ui/range-selector/nested/stackedline.ts | 556 +++++++++++++++ .../ui/range-selector/nested/stackedspline.ts | 556 +++++++++++++++ .../nested/stackedsplinearea.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/steparea.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/stepline.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/stock.ts | 556 +++++++++++++++ .../src/ui/range-selector/nested/subtitle.ts | 105 +++ .../ui/range-selector/nested/tick-interval.ts | 136 ++++ .../src/ui/range-selector/nested/tick.ts | 88 +++ .../src/ui/range-selector/nested/title.ts | 138 ++++ .../src/ui/range-selector/nested/url.ts | 80 +++ .../ui/range-selector/nested/value-axis.ts | 114 +++ .../range-selector/nested/value-error-bar.ts | 137 ++++ .../src/ui/range-selector/nested/width.ts | 80 +++ .../src/ui/range-slider/index.ts | 11 + .../src/ui/range-slider/nested/format.ts | 113 +++ .../src/ui/range-slider/nested/index.ts | 4 + .../src/ui/range-slider/nested/label.ts | 90 +++ .../ui/range-slider/nested/ng-package.json | 5 + .../src/ui/range-slider/nested/tooltip.ts | 98 +++ .../src/ui/recurrence-editor/index.ts | 2 + .../src/ui/resizable/index.ts | 2 + .../src/ui/responsive-box/index.ts | 62 +- .../src/ui/responsive-box/nested/col-dxi.ts | 90 +++ .../src/ui/responsive-box/nested/index.ts | 5 + .../src/ui/responsive-box/nested/item-dxi.ts | 139 ++++ .../ui/responsive-box/nested/location-dxi.ts | 98 +++ .../ui/responsive-box/nested/ng-package.json | 5 + .../src/ui/responsive-box/nested/row-dxi.ts | 90 +++ .../devextreme-angular/src/ui/sankey/index.ts | 53 ++ .../src/ui/sankey/nested/adaptive-layout.ts | 88 +++ .../src/ui/sankey/nested/border.ts | 105 +++ .../src/ui/sankey/nested/export.ts | 121 ++++ .../src/ui/sankey/nested/font.ts | 104 +++ .../src/ui/sankey/nested/format.ts | 113 +++ .../src/ui/sankey/nested/hatching.ts | 97 +++ .../src/ui/sankey/nested/hover-style.ts | 97 +++ .../src/ui/sankey/nested/index.ts | 18 + .../src/ui/sankey/nested/label.ts | 137 ++++ .../src/ui/sankey/nested/link.ts | 106 +++ .../src/ui/sankey/nested/loading-indicator.ts | 118 ++++ .../src/ui/sankey/nested/margin.ts | 96 +++ .../src/ui/sankey/nested/ng-package.json | 5 + .../src/ui/sankey/nested/node.ts | 113 +++ .../src/ui/sankey/nested/shadow.ts | 104 +++ .../src/ui/sankey/nested/size.ts | 80 +++ .../src/ui/sankey/nested/subtitle.ts | 105 +++ .../src/ui/sankey/nested/title.ts | 138 ++++ .../src/ui/sankey/nested/tooltip.ts | 203 ++++++ .../src/ui/scheduler/index.ts | 49 +- .../scheduler/nested/appointment-dragging.ts | 144 ++++ .../src/ui/scheduler/nested/editing.ts | 112 +++ .../src/ui/scheduler/nested/index.ts | 6 + .../src/ui/scheduler/nested/ng-package.json | 5 + .../src/ui/scheduler/nested/resource-dxi.ts | 124 ++++ .../src/ui/scheduler/nested/scrolling.ts | 73 ++ .../src/ui/scheduler/nested/view-dxi.ts | 252 +++++++ .../src/ui/scroll-view/index.ts | 2 + .../src/ui/select-box/index.ts | 85 ++- .../src/ui/select-box/nested/animation.ts | 81 +++ .../src/ui/select-box/nested/at.ts | 81 +++ .../ui/select-box/nested/boundary-offset.ts | 80 +++ .../src/ui/select-box/nested/button-dxi.ts | 84 +++ .../src/ui/select-box/nested/collision.ts | 81 +++ .../ui/select-box/nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/select-box/nested/from.ts | 105 +++ .../src/ui/select-box/nested/hide.ts | 146 ++++ .../src/ui/select-box/nested/index.ts | 17 + .../src/ui/select-box/nested/item-dxi.ts | 119 ++++ .../src/ui/select-box/nested/my.ts | 81 +++ .../src/ui/select-box/nested/ng-package.json | 5 + .../src/ui/select-box/nested/offset.ts | 80 +++ .../src/ui/select-box/nested/options.ts | 258 +++++++ .../src/ui/select-box/nested/position.ts | 123 ++++ .../src/ui/select-box/nested/show.ts | 146 ++++ .../src/ui/select-box/nested/to.ts | 105 +++ .../ui/select-box/nested/toolbar-item-dxi.ts | 186 +++++ .../devextreme-angular/src/ui/slider/index.ts | 11 + .../src/ui/slider/nested/format.ts | 113 +++ .../src/ui/slider/nested/index.ts | 4 + .../src/ui/slider/nested/label.ts | 90 +++ .../src/ui/slider/nested/ng-package.json | 5 + .../src/ui/slider/nested/tooltip.ts | 98 +++ .../src/ui/sortable/index.ts | 5 + .../src/ui/sortable/nested/cursor-offset.ts | 80 +++ .../src/ui/sortable/nested/index.ts | 2 + .../src/ui/sortable/nested/ng-package.json | 5 + .../src/ui/sparkline/index.ts | 23 + .../src/ui/sparkline/nested/border.ts | 105 +++ .../src/ui/sparkline/nested/font.ts | 104 +++ .../src/ui/sparkline/nested/format.ts | 113 +++ .../src/ui/sparkline/nested/index.ts | 8 + .../src/ui/sparkline/nested/margin.ts | 96 +++ .../src/ui/sparkline/nested/ng-package.json | 5 + .../src/ui/sparkline/nested/shadow.ts | 104 +++ .../src/ui/sparkline/nested/size.ts | 80 +++ .../src/ui/sparkline/nested/tooltip.ts | 195 +++++ .../src/ui/speed-dial-action/index.ts | 2 + .../src/ui/splitter/index.ts | 24 +- .../src/ui/splitter/nested/index.ts | 3 + .../src/ui/splitter/nested/item-dxi.ts | 168 +++++ .../src/ui/splitter/nested/ng-package.json | 5 + .../src/ui/splitter/nested/splitter.ts | 293 ++++++++ .../devextreme-angular/src/ui/switch/index.ts | 2 + .../src/ui/tab-panel/index.ts | 21 +- .../src/ui/tab-panel/nested/index.ts | 2 + .../src/ui/tab-panel/nested/item-dxi.ts | 143 ++++ .../src/ui/tab-panel/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/tabs/index.ts | 21 +- .../src/ui/tabs/nested/index.ts | 2 + .../src/ui/tabs/nested/item-dxi.ts | 135 ++++ .../src/ui/tabs/nested/ng-package.json | 5 + .../src/ui/tag-box/index.ts | 85 ++- .../src/ui/tag-box/nested/animation.ts | 81 +++ .../src/ui/tag-box/nested/at.ts | 81 +++ .../src/ui/tag-box/nested/boundary-offset.ts | 80 +++ .../src/ui/tag-box/nested/button-dxi.ts | 84 +++ .../src/ui/tag-box/nested/collision.ts | 81 +++ .../ui/tag-box/nested/drop-down-options.ts | 511 ++++++++++++++ .../src/ui/tag-box/nested/from.ts | 105 +++ .../src/ui/tag-box/nested/hide.ts | 146 ++++ .../src/ui/tag-box/nested/index.ts | 17 + .../src/ui/tag-box/nested/item-dxi.ts | 119 ++++ .../src/ui/tag-box/nested/my.ts | 81 +++ .../src/ui/tag-box/nested/ng-package.json | 5 + .../src/ui/tag-box/nested/offset.ts | 80 +++ .../src/ui/tag-box/nested/options.ts | 258 +++++++ .../src/ui/tag-box/nested/position.ts | 123 ++++ .../src/ui/tag-box/nested/show.ts | 146 ++++ .../src/ui/tag-box/nested/to.ts | 105 +++ .../src/ui/tag-box/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/text-area/index.ts | 2 + .../src/ui/text-box/index.ts | 24 +- .../src/ui/text-box/nested/button-dxi.ts | 84 +++ .../src/ui/text-box/nested/index.ts | 3 + .../src/ui/text-box/nested/ng-package.json | 5 + .../src/ui/text-box/nested/options.ts | 258 +++++++ .../src/ui/tile-view/index.ts | 21 +- .../src/ui/tile-view/nested/index.ts | 2 + .../src/ui/tile-view/nested/item-dxi.ts | 135 ++++ .../src/ui/tile-view/nested/ng-package.json | 5 + .../devextreme-angular/src/ui/toast/index.ts | 35 + .../src/ui/toast/nested/animation.ts | 81 +++ .../src/ui/toast/nested/at.ts | 81 +++ .../src/ui/toast/nested/boundary-offset.ts | 80 +++ .../src/ui/toast/nested/collision.ts | 81 +++ .../src/ui/toast/nested/from.ts | 105 +++ .../src/ui/toast/nested/hide.ts | 146 ++++ .../src/ui/toast/nested/index.ts | 12 + .../src/ui/toast/nested/my.ts | 81 +++ .../src/ui/toast/nested/ng-package.json | 5 + .../src/ui/toast/nested/offset.ts | 80 +++ .../src/ui/toast/nested/position.ts | 123 ++++ .../src/ui/toast/nested/show.ts | 146 ++++ .../src/ui/toast/nested/to.ts | 105 +++ .../src/ui/toolbar/index.ts | 21 +- .../src/ui/toolbar/nested/index.ts | 2 + .../src/ui/toolbar/nested/item-dxi.ts | 177 +++++ .../src/ui/toolbar/nested/ng-package.json | 5 + .../src/ui/tooltip/index.ts | 41 ++ .../src/ui/tooltip/nested/animation.ts | 81 +++ .../src/ui/tooltip/nested/at.ts | 81 +++ .../src/ui/tooltip/nested/boundary-offset.ts | 80 +++ .../src/ui/tooltip/nested/collision.ts | 81 +++ .../src/ui/tooltip/nested/from.ts | 105 +++ .../src/ui/tooltip/nested/hide-event.ts | 80 +++ .../src/ui/tooltip/nested/hide.ts | 146 ++++ .../src/ui/tooltip/nested/index.ts | 14 + .../src/ui/tooltip/nested/my.ts | 81 +++ .../src/ui/tooltip/nested/ng-package.json | 5 + .../src/ui/tooltip/nested/offset.ts | 80 +++ .../src/ui/tooltip/nested/position.ts | 123 ++++ .../src/ui/tooltip/nested/show-event.ts | 80 +++ .../src/ui/tooltip/nested/show.ts | 146 ++++ .../src/ui/tooltip/nested/to.ts | 105 +++ .../src/ui/tree-list/index.ts | 186 ++++- .../src/ui/tree-list/nested/animation.ts | 81 +++ .../src/ui/tree-list/nested/at.ts | 81 +++ .../ui/tree-list/nested/boundary-offset.ts | 80 +++ .../src/ui/tree-list/nested/button-dxi.ts | 131 ++++ .../src/ui/tree-list/nested/button-options.ts | 258 +++++++ .../src/ui/tree-list/nested/change-dxi.ts | 99 +++ .../tree-list/nested/col-count-by-screen.ts | 96 +++ .../src/ui/tree-list/nested/collision.ts | 81 +++ .../src/ui/tree-list/nested/column-chooser.ts | 172 +++++ .../src/ui/tree-list/nested/column-dxi.ts | 603 ++++++++++++++++ .../src/ui/tree-list/nested/column-fixing.ts | 80 +++ .../src/ui/tree-list/nested/cursor-offset.ts | 80 +++ .../tree-list/nested/custom-operation-dxi.ts | 123 ++++ .../src/ui/tree-list/nested/editing.ts | 228 ++++++ .../src/ui/tree-list/nested/field-dxi.ts | 167 +++++ .../tree-list/nested/filter-builder-popup.ts | 511 ++++++++++++++ .../src/ui/tree-list/nested/filter-builder.ts | 315 +++++++++ .../nested/filter-operation-descriptions.ts | 168 +++++ .../src/ui/tree-list/nested/filter-panel.ts | 109 +++ .../src/ui/tree-list/nested/filter-row.ts | 137 ++++ .../src/ui/tree-list/nested/form-item.ts | 190 +++++ .../src/ui/tree-list/nested/form.ts | 411 +++++++++++ .../src/ui/tree-list/nested/format.ts | 113 +++ .../src/ui/tree-list/nested/from.ts | 105 +++ .../nested/group-operation-descriptions.ts | 96 +++ .../src/ui/tree-list/nested/header-filter.ts | 156 ++++ .../src/ui/tree-list/nested/hide.ts | 146 ++++ .../src/ui/tree-list/nested/index.ts | 56 ++ .../src/ui/tree-list/nested/item-dxi.ts | 418 +++++++++++ .../tree-list/nested/keyboard-navigation.ts | 97 +++ .../src/ui/tree-list/nested/label.ts | 135 ++++ .../src/ui/tree-list/nested/load-panel.ts | 137 ++++ .../src/ui/tree-list/nested/lookup.ts | 106 +++ .../src/ui/tree-list/nested/my.ts | 81 +++ .../src/ui/tree-list/nested/ng-package.json | 5 + .../src/ui/tree-list/nested/offset.ts | 80 +++ .../nested/operation-descriptions.ts | 152 ++++ .../src/ui/tree-list/nested/pager.ts | 130 ++++ .../src/ui/tree-list/nested/paging.ts | 109 +++ .../src/ui/tree-list/nested/popup.ts | 511 ++++++++++++++ .../src/ui/tree-list/nested/position.ts | 123 ++++ .../ui/tree-list/nested/remote-operations.ts | 88 +++ .../src/ui/tree-list/nested/row-dragging.ts | 250 +++++++ .../src/ui/tree-list/nested/scrolling.ts | 138 ++++ .../src/ui/tree-list/nested/search-panel.ts | 133 ++++ .../src/ui/tree-list/nested/search.ts | 105 +++ .../src/ui/tree-list/nested/selection.ts | 97 +++ .../src/ui/tree-list/nested/show.ts | 146 ++++ .../src/ui/tree-list/nested/sorting.ts | 105 +++ .../src/ui/tree-list/nested/state-storing.ts | 113 +++ .../src/ui/tree-list/nested/tab-dxi.ts | 172 +++++ .../ui/tree-list/nested/tab-panel-options.ts | 453 ++++++++++++ .../src/ui/tree-list/nested/texts.ts | 240 +++++++ .../src/ui/tree-list/nested/to.ts | 105 +++ .../ui/tree-list/nested/toolbar-item-dxi.ts | 186 +++++ .../src/ui/tree-list/nested/toolbar.ts | 101 +++ .../tree-list/nested/validation-rule-dxi.ts | 147 ++++ .../src/ui/tree-map/index.ts | 53 ++ .../src/ui/tree-map/nested/border.ts | 105 +++ .../src/ui/tree-map/nested/colorizer.ts | 114 +++ .../src/ui/tree-map/nested/export.ts | 121 ++++ .../src/ui/tree-map/nested/font.ts | 104 +++ .../src/ui/tree-map/nested/format.ts | 113 +++ .../src/ui/tree-map/nested/group.ts | 129 ++++ .../src/ui/tree-map/nested/hover-style.ts | 80 +++ .../src/ui/tree-map/nested/index.ts | 18 + .../src/ui/tree-map/nested/label.ts | 97 +++ .../ui/tree-map/nested/loading-indicator.ts | 118 ++++ .../src/ui/tree-map/nested/margin.ts | 96 +++ .../src/ui/tree-map/nested/ng-package.json | 5 + .../src/ui/tree-map/nested/selection-style.ts | 80 +++ .../src/ui/tree-map/nested/shadow.ts | 104 +++ .../src/ui/tree-map/nested/size.ts | 80 +++ .../src/ui/tree-map/nested/subtitle.ts | 105 +++ .../src/ui/tree-map/nested/tile.ts | 105 +++ .../src/ui/tree-map/nested/title.ts | 138 ++++ .../src/ui/tree-map/nested/tooltip.ts | 187 +++++ .../src/ui/tree-view/index.ts | 30 +- .../src/ui/tree-view/nested/button-dxi.ts | 84 +++ .../src/ui/tree-view/nested/index.ts | 5 + .../src/ui/tree-view/nested/item-dxi.ts | 166 +++++ .../src/ui/tree-view/nested/ng-package.json | 5 + .../src/ui/tree-view/nested/options.ts | 258 +++++++ .../tree-view/nested/search-editor-options.ts | 539 ++++++++++++++ .../src/ui/validation-group/index.ts | 2 + .../src/ui/validation-summary/index.ts | 21 +- .../src/ui/validation-summary/nested/index.ts | 2 + .../ui/validation-summary/nested/item-dxi.ts | 119 ++++ .../validation-summary/nested/ng-package.json | 5 + .../src/ui/validator/index.ts | 24 +- .../src/ui/validator/nested/adapter.ts | 112 +++ .../src/ui/validator/nested/index.ts | 3 + .../src/ui/validator/nested/ng-package.json | 5 + .../validator/nested/validation-rule-dxi.ts | 147 ++++ .../src/ui/vector-map/index.ts | 110 ++- .../ui/vector-map/nested/annotation-dxi.ts | 291 ++++++++ .../src/ui/vector-map/nested/background.ts | 80 +++ .../src/ui/vector-map/nested/border.ts | 113 +++ .../nested/common-annotation-settings.ts | 289 ++++++++ .../src/ui/vector-map/nested/control-bar.ts | 137 ++++ .../src/ui/vector-map/nested/export.ts | 121 ++++ .../src/ui/vector-map/nested/font.ts | 104 +++ .../src/ui/vector-map/nested/image.ts | 88 +++ .../src/ui/vector-map/nested/index.ts | 21 + .../src/ui/vector-map/nested/label.ts | 89 +++ .../src/ui/vector-map/nested/layer-dxi.ts | 295 ++++++++ .../src/ui/vector-map/nested/legend-dxi.ts | 261 +++++++ .../ui/vector-map/nested/loading-indicator.ts | 118 ++++ .../src/ui/vector-map/nested/margin.ts | 96 +++ .../src/ui/vector-map/nested/ng-package.json | 5 + .../src/ui/vector-map/nested/projection.ts | 88 +++ .../src/ui/vector-map/nested/shadow.ts | 104 +++ .../src/ui/vector-map/nested/size.ts | 80 +++ .../src/ui/vector-map/nested/source.ts | 80 +++ .../src/ui/vector-map/nested/subtitle.ts | 105 +++ .../src/ui/vector-map/nested/title.ts | 138 ++++ .../src/ui/vector-map/nested/tooltip.ts | 178 +++++ 1108 files changed, 147664 insertions(+), 181 deletions(-) create mode 100644 packages/devextreme-angular/src/ui/accordion/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/accordion/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/action-sheet/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/action-sheet/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/autocomplete/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/geometry.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/item-text-format.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/bar-gauge/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/box/nested/box.ts create mode 100644 packages/devextreme-angular/src/ui/box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/box/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/bullet/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/button-group/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/button-group/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/button-group/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/chart/nested/adaptive-layout.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/aggregation-interval.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/aggregation.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/annotation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/area.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/argument-format.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/background-color.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/bar.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/break-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/break-style.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/bubble.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/candlestick.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/color.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/common-annotation-settings.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/common-pane-settings.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/common-series-settings.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/connector.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/constant-line-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/constant-line-style.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/crosshair.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/data-prepare-settings.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/drag-box-style.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/fullstackedarea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/fullstackedbar.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/fullstackedline.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/fullstackedspline.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/fullstackedsplinearea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/grid.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/hatching.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/height.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/horizontal-line.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/image.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/legend.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/line.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/min-visual-range-length.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/minor-grid.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/minor-tick-interval.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/minor-tick.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/chart/nested/pane-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/point.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/rangearea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/rangebar.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/reduction.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/scatter.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/scroll-bar.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/selection-style.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/series-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/series-template.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/spline.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/splinearea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stackedarea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stackedbar.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stackedline.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stackedspline.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stackedsplinearea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/steparea.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stepline.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/stock.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/strip-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/strip-style.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/tick-interval.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/tick.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/url.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/value-error-bar.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/vertical-line.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/width.ts create mode 100644 packages/devextreme-angular/src/ui/chart/nested/zoom-and-pan.ts create mode 100644 packages/devextreme-angular/src/ui/chat/nested/author.ts create mode 100644 packages/devextreme-angular/src/ui/chat/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/chat/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/chat/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/chat/nested/user.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/background-color.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/color.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/geometry.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/minor-tick.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/range-container.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/range-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/subvalue-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/text.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/tick.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/circular-gauge/nested/value-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/color-box/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/delay.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/show-event.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/show-submenu-mode.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/context-menu/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/change-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/col-count-by-screen.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/column-chooser.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/column-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/column-fixing.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/cursor-offset.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/custom-operation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/editing.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/field-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/filter-builder.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/filter-operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/filter-panel.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/filter-row.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/form-item.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/form.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/group-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/group-operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/group-panel.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/grouping.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/header-filter.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/keyboard-navigation.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/lookup.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/master-detail.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/pager.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/paging.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/popup.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/remote-operations.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/row-dragging.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/scrolling.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/search-panel.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/search.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/selection.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/sort-by-group-summary-info-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/sorting.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/state-storing.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/summary.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/texts.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/total-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/validation-rule-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/data-grid/nested/value-format.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/display-format.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/date-box/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/display-format.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/date-range-box/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/defer-rendering/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/auto-layout.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/command-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/connection-point-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/context-menu.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/context-toolbox.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/custom-shape-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/default-item-properties.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/edges.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/editing.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/grid-size.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/group-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/history-toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/main-toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/nodes.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/page-size.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/properties-panel.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/tab-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/toolbox.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/view-toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/diagram/nested/zoom-level.ts create mode 100644 packages/devextreme-angular/src/ui/draggable/nested/cursor-offset.ts create mode 100644 packages/devextreme-angular/src/ui/draggable/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/draggable/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-box/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/drop-down-button/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/column-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/context-menu.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/details.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/file-selection-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/item-view.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/notifications.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/permissions.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/file-manager/nested/upload.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/custom-operation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/field-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/filter-operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/group-operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/lookup.ts create mode 100644 packages/devextreme-angular/src/ui/filter-builder/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/form/nested/button-options.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/col-count-by-screen.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/form/nested/tab-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts create mode 100644 packages/devextreme-angular/src/ui/form/nested/validation-rule-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/adaptive-layout.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/connector.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/hatching.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/item.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/legend.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/selection-style.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/funnel/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/gallery/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/gallery/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/gallery/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/column-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/context-menu.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/dependencies.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/editing.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/filter-row.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/header-filter.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/resource-assignments.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/resources.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/scale-type-range.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/search.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/sorting.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/strip-line-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/tasks.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/texts.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/gantt/nested/validation.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/image-upload.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/media-resizing.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/mention-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/tab-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/table-context-menu.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/table-resizing.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/html-editor/nested/variables.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/background-color.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/color.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/geometry.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/minor-tick.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/range-container.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/range-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/subvalue-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/text.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/tick.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/value-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/linear-gauge/nested/width.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/cursor-offset.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/item-dragging.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/menu-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/list/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/load-panel/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/hide-event.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/show-event.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/lookup/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/api-key.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/center-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/location-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/marker-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/map/nested/route-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/map/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/delay.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/menu/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/show-first-submenu-mode.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/show-submenu-mode.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/menu/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/multi-view/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/multi-view/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/multi-view/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/number-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/number-box/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/number-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/number-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/number-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/adaptive-layout.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/annotation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/argument-format.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/color.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/common-annotation-settings.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/common-series-settings.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/connector.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/hatching.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/image.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/selection-style.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/series-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/series-template.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/small-values-grouping.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/pie-chart/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/header-filter.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/search.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/texts.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/data-source.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/field-chooser.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/field-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/field-panel.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/header-filter.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/load-panel.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/scrolling.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/search.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/store.ts create mode 100644 packages/devextreme-angular/src/ui/pivot-grid/nested/texts.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/adaptive-layout.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/annotation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/area.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/argument-axis.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/argument-format.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/bar.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/color.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/common-annotation-settings.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/common-axis-settings.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/common-series-settings.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/connector.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-style.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/data-prepare-settings.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/grid.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/hatching.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/image.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/line.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/min-visual-range-length.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/minor-grid.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick-interval.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/point.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/scatter.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/selection-style.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/series-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/series-template.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/stackedbar.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/strip-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/strip-style.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/tick-interval.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/tick.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/value-axis.ts create mode 100644 packages/devextreme-angular/src/ui/polar-chart/nested/value-error-bar.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/hide-event.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/popover/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/show-event.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/popover/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/popup/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/popup/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/radio-group/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/radio-group/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/radio-group/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/aggregation-interval.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/aggregation.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/area.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/argument-format.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/background.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/bar.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/behavior.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/break-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/break-style.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/bubble.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/candlestick.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/chart.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/color.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/common-series-settings.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/connector.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/data-prepare-settings.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/fullstackedarea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/fullstackedbar.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/fullstackedline.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/fullstackedspline.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/fullstackedsplinearea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/hatching.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/height.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/image.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/indent.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/line.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/marker.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/max-range.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/min-range.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/minor-tick-interval.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/minor-tick.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/point.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/rangearea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/rangebar.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/reduction.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/scale.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/scatter.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/selection-style.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/series-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/series-template.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/shutter.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/slider-handle.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/slider-marker.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/spline.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/splinearea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stackedarea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stackedbar.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stackedline.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stackedspline.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stackedsplinearea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/steparea.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stepline.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/stock.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/tick-interval.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/tick.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/url.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/value-axis.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/value-error-bar.ts create mode 100644 packages/devextreme-angular/src/ui/range-selector/nested/width.ts create mode 100644 packages/devextreme-angular/src/ui/range-slider/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/range-slider/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/range-slider/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/range-slider/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/range-slider/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/responsive-box/nested/col-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/responsive-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/responsive-box/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/responsive-box/nested/location-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/responsive-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/responsive-box/nested/row-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/adaptive-layout.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/hatching.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/link.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/node.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/sankey/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/appointment-dragging.ts create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/editing.ts create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/resource-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/scrolling.ts create mode 100644 packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/select-box/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/slider/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/slider/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/slider/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/slider/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/slider/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/sortable/nested/cursor-offset.ts create mode 100644 packages/devextreme-angular/src/ui/sortable/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/sortable/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/sparkline/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/splitter/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/splitter/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/splitter/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/splitter/nested/splitter.ts create mode 100644 packages/devextreme-angular/src/ui/tab-panel/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tab-panel/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tab-panel/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tabs/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tabs/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tabs/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/tag-box/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/text-box/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/text-box/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/text-box/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/text-box/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/tile-view/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tile-view/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tile-view/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/toast/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/toast/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/toast/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/toolbar/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/toolbar/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/toolbar/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/hide-event.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/show-event.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/tooltip/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/animation.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/at.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/boundary-offset.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/change-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/col-count-by-screen.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/collision.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/column-chooser.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/column-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/column-fixing.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/cursor-offset.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/custom-operation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/editing.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/field-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/filter-builder.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/filter-operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/filter-panel.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/filter-row.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/form-item.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/form.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/from.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/group-operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/header-filter.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/hide.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/keyboard-navigation.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/lookup.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/my.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/offset.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/operation-descriptions.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/pager.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/paging.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/popup.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/position.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/remote-operations.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/row-dragging.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/scrolling.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/search-panel.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/search.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/selection.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/show.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/sorting.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/state-storing.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/texts.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/to.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/toolbar-item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/toolbar.ts create mode 100644 packages/devextreme-angular/src/ui/tree-list/nested/validation-rule-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/format.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/group.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/hover-style.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/selection-style.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/tile.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/tree-map/nested/tooltip.ts create mode 100644 packages/devextreme-angular/src/ui/tree-view/nested/button-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-view/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/tree-view/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/tree-view/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/tree-view/nested/options.ts create mode 100644 packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts create mode 100644 packages/devextreme-angular/src/ui/validation-summary/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/validation-summary/nested/item-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/validation-summary/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/validator/nested/adapter.ts create mode 100644 packages/devextreme-angular/src/ui/validator/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/validator/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/validator/nested/validation-rule-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/background.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/border.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/control-bar.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/export.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/font.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/image.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/index.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/label.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/loading-indicator.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/margin.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/ng-package.json create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/projection.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/shadow.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/size.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/source.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/title.ts create mode 100644 packages/devextreme-angular/src/ui/vector-map/nested/tooltip.ts diff --git a/packages/devextreme-angular/src/index.ts b/packages/devextreme-angular/src/index.ts index 5895c90ce3fe..9a2c7a1d805f 100644 --- a/packages/devextreme-angular/src/index.ts +++ b/packages/devextreme-angular/src/index.ts @@ -9,8 +9,8 @@ export { DxAutocompleteComponent, DxAutocompleteModule } from 'devextreme-angula export { DxBarGaugeComponent, DxBarGaugeModule } from 'devextreme-angular/ui/bar-gauge'; export { DxBoxComponent, DxBoxModule } from 'devextreme-angular/ui/box'; export { DxBulletComponent, DxBulletModule } from 'devextreme-angular/ui/bullet'; -export { DxButtonGroupComponent, DxButtonGroupModule } from 'devextreme-angular/ui/button-group'; export { DxButtonComponent, DxButtonModule } from 'devextreme-angular/ui/button'; +export { DxButtonGroupComponent, DxButtonGroupModule } from 'devextreme-angular/ui/button-group'; export { DxCalendarComponent, DxCalendarModule } from 'devextreme-angular/ui/calendar'; export { DxChartComponent, DxChartModule } from 'devextreme-angular/ui/chart'; export { DxChatComponent, DxChatModule } from 'devextreme-angular/ui/chat'; @@ -45,8 +45,8 @@ export { DxMenuComponent, DxMenuModule } from 'devextreme-angular/ui/menu'; export { DxMultiViewComponent, DxMultiViewModule } from 'devextreme-angular/ui/multi-view'; export { DxNumberBoxComponent, DxNumberBoxModule } from 'devextreme-angular/ui/number-box'; export { DxPieChartComponent, DxPieChartModule } from 'devextreme-angular/ui/pie-chart'; -export { DxPivotGridFieldChooserComponent, DxPivotGridFieldChooserModule } from 'devextreme-angular/ui/pivot-grid-field-chooser'; export { DxPivotGridComponent, DxPivotGridModule } from 'devextreme-angular/ui/pivot-grid'; +export { DxPivotGridFieldChooserComponent, DxPivotGridFieldChooserModule } from 'devextreme-angular/ui/pivot-grid-field-chooser'; export { DxPolarChartComponent, DxPolarChartModule } from 'devextreme-angular/ui/polar-chart'; export { DxPopoverComponent, DxPopoverModule } from 'devextreme-angular/ui/popover'; export { DxPopupComponent, DxPopupModule } from 'devextreme-angular/ui/popup'; diff --git a/packages/devextreme-angular/src/ui/accordion/index.ts b/packages/devextreme-angular/src/ui/accordion/index.ts index f1d80fe68f1d..91a8b5e57f08 100644 --- a/packages/devextreme-angular/src/ui/accordion/index.ts +++ b/packages/devextreme-angular/src/ui/accordion/index.ts @@ -42,8 +42,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/nested'; /** @@ -705,15 +708,27 @@ export class DxAccordionComponent extends DxComponent i - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiAccordionItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiAccordionItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -817,6 +832,7 @@ export class DxAccordionComponent extends DxComponent i @NgModule({ imports: [ DxiItemModule, + DxiAccordionItemModule, DxIntegrationModule, DxTemplateModule ], @@ -826,6 +842,7 @@ export class DxAccordionComponent extends DxComponent i exports: [ DxAccordionComponent, DxiItemModule, + DxiAccordionItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/accordion/nested/index.ts b/packages/devextreme-angular/src/ui/accordion/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/accordion/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts new file mode 100644 index 000000000000..6ec91cd04d73 --- /dev/null +++ b/packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts @@ -0,0 +1,143 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-accordion-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiAccordionItemComponent + ], + exports: [ + DxiAccordionItemComponent + ], +}) +export class DxiAccordionItemModule { } diff --git a/packages/devextreme-angular/src/ui/accordion/nested/ng-package.json b/packages/devextreme-angular/src/ui/accordion/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/accordion/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/action-sheet/index.ts b/packages/devextreme-angular/src/ui/action-sheet/index.ts index 1dc14e236360..7f7dcc11366d 100644 --- a/packages/devextreme-angular/src/ui/action-sheet/index.ts +++ b/packages/devextreme-angular/src/ui/action-sheet/index.ts @@ -44,8 +44,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/nested'; /** @@ -499,15 +502,27 @@ export class DxActionSheetComponent extends DxComponent - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiActionSheetItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiActionSheetItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -596,6 +611,7 @@ export class DxActionSheetComponent extends DxComponent @NgModule({ imports: [ DxiItemModule, + DxiActionSheetItemModule, DxIntegrationModule, DxTemplateModule ], @@ -605,6 +621,7 @@ export class DxActionSheetComponent extends DxComponent exports: [ DxActionSheetComponent, DxiItemModule, + DxiActionSheetItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/action-sheet/nested/index.ts b/packages/devextreme-angular/src/ui/action-sheet/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/action-sheet/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts new file mode 100644 index 000000000000..c8111696f049 --- /dev/null +++ b/packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-action-sheet-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiActionSheetItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): Function { + return this._getOption('onClick'); + } + set onClick(value: Function) { + this._setOption('onClick', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiActionSheetItemComponent + ], + exports: [ + DxiActionSheetItemComponent + ], +}) +export class DxiActionSheetItemModule { } diff --git a/packages/devextreme-angular/src/ui/action-sheet/nested/ng-package.json b/packages/devextreme-angular/src/ui/action-sheet/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/action-sheet/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/autocomplete/index.ts b/packages/devextreme-angular/src/ui/autocomplete/index.ts index bb22a38ccd46..12dd1c4feb09 100644 --- a/packages/devextreme-angular/src/ui/autocomplete/index.ts +++ b/packages/devextreme-angular/src/ui/autocomplete/index.ts @@ -63,12 +63,30 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiAutocompleteButtonModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteOptionsModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteDropDownOptionsModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteAnimationModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteHideModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteFromModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompletePositionModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteAtModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteBoundaryOffsetModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteCollisionModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteMyModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteOffsetModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteToModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxoAutocompleteShowModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxiAutocompleteToolbarItemModule } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxiAutocompleteItemModule } from 'devextreme-angular/ui/autocomplete/nested'; + import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiAutocompleteButtonComponent } from 'devextreme-angular/ui/autocomplete/nested'; +import { DxiAutocompleteItemComponent } from 'devextreme-angular/ui/autocomplete/nested'; @@ -1339,23 +1357,46 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiAutocompleteButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiAutocompleteButtonComponent'); this.setChildren('buttons', value); } - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiAutocompleteItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiAutocompleteItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1530,8 +1571,23 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiAutocompleteButtonModule, + DxoAutocompleteOptionsModule, + DxoAutocompleteDropDownOptionsModule, + DxoAutocompleteAnimationModule, + DxoAutocompleteHideModule, + DxoAutocompleteFromModule, + DxoAutocompletePositionModule, + DxoAutocompleteAtModule, + DxoAutocompleteBoundaryOffsetModule, + DxoAutocompleteCollisionModule, + DxoAutocompleteMyModule, + DxoAutocompleteOffsetModule, + DxoAutocompleteToModule, + DxoAutocompleteShowModule, + DxiAutocompleteToolbarItemModule, + DxiAutocompleteItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1554,8 +1610,23 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiAutocompleteButtonModule, + DxoAutocompleteOptionsModule, + DxoAutocompleteDropDownOptionsModule, + DxoAutocompleteAnimationModule, + DxoAutocompleteHideModule, + DxoAutocompleteFromModule, + DxoAutocompletePositionModule, + DxoAutocompleteAtModule, + DxoAutocompleteBoundaryOffsetModule, + DxoAutocompleteCollisionModule, + DxoAutocompleteMyModule, + DxoAutocompleteOffsetModule, + DxoAutocompleteToModule, + DxoAutocompleteShowModule, + DxiAutocompleteToolbarItemModule, + DxiAutocompleteItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/animation.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/animation.ts new file mode 100644 index 000000000000..05a49a13f7dd --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteAnimationComponent + ], + exports: [ + DxoAutocompleteAnimationComponent + ], +}) +export class DxoAutocompleteAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/at.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/at.ts new file mode 100644 index 000000000000..30b19f90408f --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteAtComponent + ], + exports: [ + DxoAutocompleteAtComponent + ], +}) +export class DxoAutocompleteAtModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/boundary-offset.ts new file mode 100644 index 000000000000..39e2c7af7052 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteBoundaryOffsetComponent + ], + exports: [ + DxoAutocompleteBoundaryOffsetComponent + ], +}) +export class DxoAutocompleteBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/button-dxi.ts new file mode 100644 index 000000000000..d710427d4509 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-autocomplete-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiAutocompleteButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiAutocompleteButtonComponent + ], + exports: [ + DxiAutocompleteButtonComponent + ], +}) +export class DxiAutocompleteButtonModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/collision.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/collision.ts new file mode 100644 index 000000000000..f5126f4c9957 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteCollisionComponent + ], + exports: [ + DxoAutocompleteCollisionComponent + ], +}) +export class DxoAutocompleteCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts new file mode 100644 index 000000000000..e57b6dab7501 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiAutocompleteToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-autocomplete-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiAutocompleteToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteDropDownOptionsComponent + ], + exports: [ + DxoAutocompleteDropDownOptionsComponent + ], +}) +export class DxoAutocompleteDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/from.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/from.ts new file mode 100644 index 000000000000..54ce1c662675 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteFromComponent + ], + exports: [ + DxoAutocompleteFromComponent + ], +}) +export class DxoAutocompleteFromModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/hide.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/hide.ts new file mode 100644 index 000000000000..2ee144866127 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteHideComponent + ], + exports: [ + DxoAutocompleteHideComponent + ], +}) +export class DxoAutocompleteHideModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/index.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/index.ts new file mode 100644 index 000000000000..5d8a4c3bbef5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/index.ts @@ -0,0 +1,17 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/item-dxi.ts new file mode 100644 index 000000000000..bb30b976a3ae --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-autocomplete-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiAutocompleteItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiAutocompleteItemComponent + ], + exports: [ + DxiAutocompleteItemComponent + ], +}) +export class DxiAutocompleteItemModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/my.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/my.ts new file mode 100644 index 000000000000..ea73cd894f80 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteMyComponent + ], + exports: [ + DxoAutocompleteMyComponent + ], +}) +export class DxoAutocompleteMyModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/ng-package.json b/packages/devextreme-angular/src/ui/autocomplete/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/offset.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/offset.ts new file mode 100644 index 000000000000..d74e8f0de47f --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteOffsetComponent + ], + exports: [ + DxoAutocompleteOffsetComponent + ], +}) +export class DxoAutocompleteOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts new file mode 100644 index 000000000000..cf7a889dfa46 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteOptionsComponent + ], + exports: [ + DxoAutocompleteOptionsComponent + ], +}) +export class DxoAutocompleteOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/position.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/position.ts new file mode 100644 index 000000000000..689cdf08af90 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompletePositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompletePositionComponent + ], + exports: [ + DxoAutocompletePositionComponent + ], +}) +export class DxoAutocompletePositionModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/show.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/show.ts new file mode 100644 index 000000000000..a900a31d35a1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteShowComponent + ], + exports: [ + DxoAutocompleteShowComponent + ], +}) +export class DxoAutocompleteShowModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/to.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/to.ts new file mode 100644 index 000000000000..64b733e9b604 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-autocomplete-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoAutocompleteToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoAutocompleteToComponent + ], + exports: [ + DxoAutocompleteToComponent + ], +}) +export class DxoAutocompleteToModule { } diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..cb4d356c0a13 --- /dev/null +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-autocomplete-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiAutocompleteToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiAutocompleteToolbarItemComponent + ], + exports: [ + DxiAutocompleteToolbarItemComponent + ], +}) +export class DxiAutocompleteToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/index.ts b/packages/devextreme-angular/src/ui/bar-gauge/index.ts index 400ea52f044a..34b500a50048 100644 --- a/packages/devextreme-angular/src/ui/bar-gauge/index.ts +++ b/packages/devextreme-angular/src/ui/bar-gauge/index.ts @@ -56,6 +56,23 @@ import { DxoSizeModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; +import { DxoBarGaugeAnimationModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeExportModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeGeometryModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeLabelModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeFontModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeFormatModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeLegendModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeBorderModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeItemTextFormatModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeMarginModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeTitleModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeSubtitleModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeLoadingIndicatorModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeSizeModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeTooltipModule } from 'devextreme-angular/ui/bar-gauge/nested'; +import { DxoBarGaugeShadowModule } from 'devextreme-angular/ui/bar-gauge/nested'; + @@ -702,6 +719,7 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -813,6 +831,22 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha DxoSizeModule, DxoTooltipModule, DxoShadowModule, + DxoBarGaugeAnimationModule, + DxoBarGaugeExportModule, + DxoBarGaugeGeometryModule, + DxoBarGaugeLabelModule, + DxoBarGaugeFontModule, + DxoBarGaugeFormatModule, + DxoBarGaugeLegendModule, + DxoBarGaugeBorderModule, + DxoBarGaugeItemTextFormatModule, + DxoBarGaugeMarginModule, + DxoBarGaugeTitleModule, + DxoBarGaugeSubtitleModule, + DxoBarGaugeLoadingIndicatorModule, + DxoBarGaugeSizeModule, + DxoBarGaugeTooltipModule, + DxoBarGaugeShadowModule, DxIntegrationModule, DxTemplateModule ], @@ -837,6 +871,22 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha DxoSizeModule, DxoTooltipModule, DxoShadowModule, + DxoBarGaugeAnimationModule, + DxoBarGaugeExportModule, + DxoBarGaugeGeometryModule, + DxoBarGaugeLabelModule, + DxoBarGaugeFontModule, + DxoBarGaugeFormatModule, + DxoBarGaugeLegendModule, + DxoBarGaugeBorderModule, + DxoBarGaugeItemTextFormatModule, + DxoBarGaugeMarginModule, + DxoBarGaugeTitleModule, + DxoBarGaugeSubtitleModule, + DxoBarGaugeLoadingIndicatorModule, + DxoBarGaugeSizeModule, + DxoBarGaugeTooltipModule, + DxoBarGaugeShadowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/animation.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/animation.ts new file mode 100644 index 000000000000..4a300b312310 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/animation.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationEaseMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): AnimationEaseMode { + return this._getOption('easing'); + } + set easing(value: AnimationEaseMode) { + this._setOption('easing', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeAnimationComponent + ], + exports: [ + DxoBarGaugeAnimationComponent + ], +}) +export class DxoBarGaugeAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/border.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/border.ts new file mode 100644 index 000000000000..f2b4ed36d416 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/border.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeBorderComponent + ], + exports: [ + DxoBarGaugeBorderComponent + ], +}) +export class DxoBarGaugeBorderModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/export.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/export.ts new file mode 100644 index 000000000000..ecff09d1ad64 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeExportComponent + ], + exports: [ + DxoBarGaugeExportComponent + ], +}) +export class DxoBarGaugeExportModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/font.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/font.ts new file mode 100644 index 000000000000..a8b7a6fc1629 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeFontComponent + ], + exports: [ + DxoBarGaugeFontComponent + ], +}) +export class DxoBarGaugeFontModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/format.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/format.ts new file mode 100644 index 000000000000..f21453788735 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeFormatComponent + ], + exports: [ + DxoBarGaugeFormatComponent + ], +}) +export class DxoBarGaugeFormatModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/geometry.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/geometry.ts new file mode 100644 index 000000000000..0385ac9c2e32 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/geometry.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-geometry', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeGeometryComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get endAngle(): number { + return this._getOption('endAngle'); + } + set endAngle(value: number) { + this._setOption('endAngle', value); + } + + @Input() + get startAngle(): number { + return this._getOption('startAngle'); + } + set startAngle(value: number) { + this._setOption('startAngle', value); + } + + + protected get _optionPath() { + return 'geometry'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeGeometryComponent + ], + exports: [ + DxoBarGaugeGeometryComponent + ], +}) +export class DxoBarGaugeGeometryModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/index.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/index.ts new file mode 100644 index 000000000000..5636a693bb79 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/index.ts @@ -0,0 +1,17 @@ +export * from './animation'; +export * from './border'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './geometry'; +export * from './item-text-format'; +export * from './label'; +export * from './legend'; +export * from './loading-indicator'; +export * from './margin'; +export * from './shadow'; +export * from './size'; +export * from './subtitle'; +export * from './title'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/item-text-format.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/item-text-format.ts new file mode 100644 index 000000000000..dd0985908a31 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/item-text-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-item-text-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeItemTextFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'itemTextFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeItemTextFormatComponent + ], + exports: [ + DxoBarGaugeItemTextFormatComponent + ], +}) +export class DxoBarGaugeItemTextFormatModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/label.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/label.ts new file mode 100644 index 000000000000..1f16912dc2e1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/label.ts @@ -0,0 +1,122 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get connectorColor(): string | undefined { + return this._getOption('connectorColor'); + } + set connectorColor(value: string | undefined) { + this._setOption('connectorColor', value); + } + + @Input() + get connectorWidth(): number { + return this._getOption('connectorWidth'); + } + set connectorWidth(value: number) { + this._setOption('connectorWidth', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get indent(): number { + return this._getOption('indent'); + } + set indent(value: number) { + this._setOption('indent', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeLabelComponent + ], + exports: [ + DxoBarGaugeLabelComponent + ], +}) +export class DxoBarGaugeLabelModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts new file mode 100644 index 000000000000..8bdaa56ca3b0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts @@ -0,0 +1,251 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Orientation, Position, VerticalEdge } from 'devextreme/common'; +import { DashStyle, Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-legend', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeLegendComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get columnCount(): number { + return this._getOption('columnCount'); + } + set columnCount(value: number) { + this._setOption('columnCount', value); + } + + @Input() + get columnItemSpacing(): number { + return this._getOption('columnItemSpacing'); + } + set columnItemSpacing(value: number) { + this._setOption('columnItemSpacing', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeItems(): Function { + return this._getOption('customizeItems'); + } + set customizeItems(value: Function) { + this._setOption('customizeItems', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get itemsAlignment(): HorizontalAlignment | undefined { + return this._getOption('itemsAlignment'); + } + set itemsAlignment(value: HorizontalAlignment | undefined) { + this._setOption('itemsAlignment', value); + } + + @Input() + get itemTextFormat(): Format | string | undefined { + return this._getOption('itemTextFormat'); + } + set itemTextFormat(value: Format | string | undefined) { + this._setOption('itemTextFormat', value); + } + + @Input() + get itemTextPosition(): Position | undefined { + return this._getOption('itemTextPosition'); + } + set itemTextPosition(value: Position | undefined) { + this._setOption('itemTextPosition', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get markerSize(): number { + return this._getOption('markerSize'); + } + set markerSize(value: number) { + this._setOption('markerSize', value); + } + + @Input() + get markerTemplate(): any | undefined { + return this._getOption('markerTemplate'); + } + set markerTemplate(value: any | undefined) { + this._setOption('markerTemplate', value); + } + + @Input() + get orientation(): Orientation | undefined { + return this._getOption('orientation'); + } + set orientation(value: Orientation | undefined) { + this._setOption('orientation', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get rowCount(): number { + return this._getOption('rowCount'); + } + set rowCount(value: number) { + this._setOption('rowCount', value); + } + + @Input() + get rowItemSpacing(): number { + return this._getOption('rowItemSpacing'); + } + set rowItemSpacing(value: number) { + this._setOption('rowItemSpacing', value); + } + + @Input() + get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } { + return this._getOption('title'); + } + set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) { + this._setOption('title', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'legend'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeLegendComponent + ], + exports: [ + DxoBarGaugeLegendComponent + ], +}) +export class DxoBarGaugeLegendModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/loading-indicator.ts new file mode 100644 index 000000000000..3f17ec222dc1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/loading-indicator.ts @@ -0,0 +1,110 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeLoadingIndicatorComponent + ], + exports: [ + DxoBarGaugeLoadingIndicatorComponent + ], +}) +export class DxoBarGaugeLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/margin.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/margin.ts new file mode 100644 index 000000000000..92b1742e6482 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeMarginComponent + ], + exports: [ + DxoBarGaugeMarginComponent + ], +}) +export class DxoBarGaugeMarginModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/ng-package.json b/packages/devextreme-angular/src/ui/bar-gauge/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/shadow.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/shadow.ts new file mode 100644 index 000000000000..08eea73c145b --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeShadowComponent + ], + exports: [ + DxoBarGaugeShadowComponent + ], +}) +export class DxoBarGaugeShadowModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/size.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/size.ts new file mode 100644 index 000000000000..959e415f6c63 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeSizeComponent + ], + exports: [ + DxoBarGaugeSizeComponent + ], +}) +export class DxoBarGaugeSizeModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts new file mode 100644 index 000000000000..e5a2ab144566 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeSubtitleComponent + ], + exports: [ + DxoBarGaugeSubtitleComponent + ], +}) +export class DxoBarGaugeSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts new file mode 100644 index 000000000000..da39031ec2b8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment | undefined { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment | undefined) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): { bottom?: number, left?: number, right?: number, top?: number } | number { + return this._getOption('margin'); + } + set margin(value: { bottom?: number, left?: number, right?: number, top?: number } | number) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeTitleComponent + ], + exports: [ + DxoBarGaugeTitleComponent + ], +}) +export class DxoBarGaugeTitleModule { } diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/tooltip.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/tooltip.ts new file mode 100644 index 000000000000..52bd2598a2b3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/tooltip.ts @@ -0,0 +1,195 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bar-gauge-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBarGaugeTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBarGaugeTooltipComponent + ], + exports: [ + DxoBarGaugeTooltipComponent + ], +}) +export class DxoBarGaugeTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/box/index.ts b/packages/devextreme-angular/src/ui/box/index.ts index e459dbc19cec..a7496a85b610 100644 --- a/packages/devextreme-angular/src/ui/box/index.ts +++ b/packages/devextreme-angular/src/ui/box/index.ts @@ -43,8 +43,12 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; import { DxoBoxModule } from 'devextreme-angular/ui/nested'; +import { DxiBoxItemModule } from 'devextreme-angular/ui/box/nested'; +import { DxoBoxBoxModule } from 'devextreme-angular/ui/box/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiBoxItemComponent } from 'devextreme-angular/ui/box/nested'; /** @@ -410,15 +414,27 @@ export class DxBoxComponent extends DxComponent impleme - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiBoxItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiBoxItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -503,6 +519,8 @@ export class DxBoxComponent extends DxComponent impleme imports: [ DxiItemModule, DxoBoxModule, + DxiBoxItemModule, + DxoBoxBoxModule, DxIntegrationModule, DxTemplateModule ], @@ -513,6 +531,8 @@ export class DxBoxComponent extends DxComponent impleme DxBoxComponent, DxiItemModule, DxoBoxModule, + DxiBoxItemModule, + DxoBoxBoxModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/box/nested/box.ts b/packages/devextreme-angular/src/ui/box/nested/box.ts new file mode 100644 index 000000000000..96620334b84f --- /dev/null +++ b/packages/devextreme-angular/src/ui/box/nested/box.ts @@ -0,0 +1,268 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { BoxDirection, ContentReadyEvent, CrosswiseDistribution, DisposingEvent, Distribution, dxBoxItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, Properties as dxBoxOptions } from 'devextreme/ui/box'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiBoxItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-box-box', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBoxBoxComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get align(): Distribution { + return this._getOption('align'); + } + set align(value: Distribution) { + this._setOption('align', value); + } + + @Input() + get crossAlign(): CrosswiseDistribution { + return this._getOption('crossAlign'); + } + set crossAlign(value: CrosswiseDistribution) { + this._setOption('crossAlign', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get direction(): BoxDirection { + return this._getOption('direction'); + } + set direction(value: BoxDirection) { + this._setOption('direction', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get itemHoldTimeout(): number { + return this._getOption('itemHoldTimeout'); + } + set itemHoldTimeout(value: number) { + this._setOption('itemHoldTimeout', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemHold(): ((e: ItemHoldEvent) => void) { + return this._getOption('onItemHold'); + } + set onItemHold(value: ((e: ItemHoldEvent) => void)) { + this._setOption('onItemHold', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + protected get _optionPath() { + return 'box'; + } + + + @ContentChildren(forwardRef(() => DxiBoxItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'itemsChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBoxBoxComponent + ], + exports: [ + DxoBoxBoxComponent + ], +}) +export class DxoBoxBoxModule { } diff --git a/packages/devextreme-angular/src/ui/box/nested/index.ts b/packages/devextreme-angular/src/ui/box/nested/index.ts new file mode 100644 index 000000000000..c6b1babae973 --- /dev/null +++ b/packages/devextreme-angular/src/ui/box/nested/index.ts @@ -0,0 +1,3 @@ +export * from './box'; +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/box/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/box/nested/item-dxi.ts new file mode 100644 index 000000000000..71609f3a21bf --- /dev/null +++ b/packages/devextreme-angular/src/ui/box/nested/item-dxi.ts @@ -0,0 +1,152 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { Properties as dxBoxOptions } from 'devextreme/ui/box'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-box-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiBoxItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get baseSize(): number | string { + return this._getOption('baseSize'); + } + set baseSize(value: number | string) { + this._setOption('baseSize', value); + } + + @Input() + get box(): dxBoxOptions | undefined { + return this._getOption('box'); + } + set box(value: dxBoxOptions | undefined) { + this._setOption('box', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get ratio(): number { + return this._getOption('ratio'); + } + set ratio(value: number) { + this._setOption('ratio', value); + } + + @Input() + get shrink(): number { + return this._getOption('shrink'); + } + set shrink(value: number) { + this._setOption('shrink', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiBoxItemComponent + ], + exports: [ + DxiBoxItemComponent + ], +}) +export class DxiBoxItemModule { } diff --git a/packages/devextreme-angular/src/ui/box/nested/ng-package.json b/packages/devextreme-angular/src/ui/box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/bullet/index.ts b/packages/devextreme-angular/src/ui/bullet/index.ts index 40fd03611cf3..ca8b76d0a0b9 100644 --- a/packages/devextreme-angular/src/ui/bullet/index.ts +++ b/packages/devextreme-angular/src/ui/bullet/index.ts @@ -42,6 +42,14 @@ import { DxoFontModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; +import { DxoBulletMarginModule } from 'devextreme-angular/ui/bullet/nested'; +import { DxoBulletSizeModule } from 'devextreme-angular/ui/bullet/nested'; +import { DxoBulletTooltipModule } from 'devextreme-angular/ui/bullet/nested'; +import { DxoBulletBorderModule } from 'devextreme-angular/ui/bullet/nested'; +import { DxoBulletFontModule } from 'devextreme-angular/ui/bullet/nested'; +import { DxoBulletFormatModule } from 'devextreme-angular/ui/bullet/nested'; +import { DxoBulletShadowModule } from 'devextreme-angular/ui/bullet/nested'; + @@ -487,6 +495,7 @@ export class DxBulletComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -548,6 +557,13 @@ export class DxBulletComponent extends DxComponent implements OnDestroy { DxoFontModule, DxoFormatModule, DxoShadowModule, + DxoBulletMarginModule, + DxoBulletSizeModule, + DxoBulletTooltipModule, + DxoBulletBorderModule, + DxoBulletFontModule, + DxoBulletFormatModule, + DxoBulletShadowModule, DxIntegrationModule, DxTemplateModule ], @@ -563,6 +579,13 @@ export class DxBulletComponent extends DxComponent implements OnDestroy { DxoFontModule, DxoFormatModule, DxoShadowModule, + DxoBulletMarginModule, + DxoBulletSizeModule, + DxoBulletTooltipModule, + DxoBulletBorderModule, + DxoBulletFontModule, + DxoBulletFormatModule, + DxoBulletShadowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/bullet/nested/border.ts b/packages/devextreme-angular/src/ui/bullet/nested/border.ts new file mode 100644 index 000000000000..0df0303591fd --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/border.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletBorderComponent + ], + exports: [ + DxoBulletBorderComponent + ], +}) +export class DxoBulletBorderModule { } diff --git a/packages/devextreme-angular/src/ui/bullet/nested/font.ts b/packages/devextreme-angular/src/ui/bullet/nested/font.ts new file mode 100644 index 000000000000..fed81f6e9638 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletFontComponent + ], + exports: [ + DxoBulletFontComponent + ], +}) +export class DxoBulletFontModule { } diff --git a/packages/devextreme-angular/src/ui/bullet/nested/format.ts b/packages/devextreme-angular/src/ui/bullet/nested/format.ts new file mode 100644 index 000000000000..3ee24587f934 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletFormatComponent + ], + exports: [ + DxoBulletFormatComponent + ], +}) +export class DxoBulletFormatModule { } diff --git a/packages/devextreme-angular/src/ui/bullet/nested/index.ts b/packages/devextreme-angular/src/ui/bullet/nested/index.ts new file mode 100644 index 000000000000..fc8dc7470507 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/index.ts @@ -0,0 +1,8 @@ +export * from './border'; +export * from './font'; +export * from './format'; +export * from './margin'; +export * from './shadow'; +export * from './size'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/bullet/nested/margin.ts b/packages/devextreme-angular/src/ui/bullet/nested/margin.ts new file mode 100644 index 000000000000..24b9339502d8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletMarginComponent + ], + exports: [ + DxoBulletMarginComponent + ], +}) +export class DxoBulletMarginModule { } diff --git a/packages/devextreme-angular/src/ui/bullet/nested/ng-package.json b/packages/devextreme-angular/src/ui/bullet/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/bullet/nested/shadow.ts b/packages/devextreme-angular/src/ui/bullet/nested/shadow.ts new file mode 100644 index 000000000000..1833ea2b1f8d --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletShadowComponent + ], + exports: [ + DxoBulletShadowComponent + ], +}) +export class DxoBulletShadowModule { } diff --git a/packages/devextreme-angular/src/ui/bullet/nested/size.ts b/packages/devextreme-angular/src/ui/bullet/nested/size.ts new file mode 100644 index 000000000000..9e0375b4276b --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletSizeComponent + ], + exports: [ + DxoBulletSizeComponent + ], +}) +export class DxoBulletSizeModule { } diff --git a/packages/devextreme-angular/src/ui/bullet/nested/tooltip.ts b/packages/devextreme-angular/src/ui/bullet/nested/tooltip.ts new file mode 100644 index 000000000000..91fb88a63a8a --- /dev/null +++ b/packages/devextreme-angular/src/ui/bullet/nested/tooltip.ts @@ -0,0 +1,195 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-bullet-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoBulletTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoBulletTooltipComponent + ], + exports: [ + DxoBulletTooltipComponent + ], +}) +export class DxoBulletTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/button-group/index.ts b/packages/devextreme-angular/src/ui/button-group/index.ts index 560521f2375b..ed53a5db908e 100644 --- a/packages/devextreme-angular/src/ui/button-group/index.ts +++ b/packages/devextreme-angular/src/ui/button-group/index.ts @@ -40,8 +40,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiButtonGroupItemModule } from 'devextreme-angular/ui/button-group/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiButtonGroupItemComponent } from 'devextreme-angular/ui/button-group/nested'; /** @@ -491,15 +494,27 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiButtonGroupItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiButtonGroupItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -588,6 +603,7 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On @NgModule({ imports: [ DxiItemModule, + DxiButtonGroupItemModule, DxIntegrationModule, DxTemplateModule ], @@ -597,6 +613,7 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On exports: [ DxButtonGroupComponent, DxiItemModule, + DxiButtonGroupItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/button-group/nested/index.ts b/packages/devextreme-angular/src/ui/button-group/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/button-group/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/button-group/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/button-group/nested/item-dxi.ts new file mode 100644 index 000000000000..04d00efa10e0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/button-group/nested/item-dxi.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-button-group-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiButtonGroupItemComponent extends CollectionNestedOption { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get hint(): string { + return this._getOption('hint'); + } + set hint(value: string) { + this._setOption('hint', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiButtonGroupItemComponent + ], + exports: [ + DxiButtonGroupItemComponent + ], +}) +export class DxiButtonGroupItemModule { } diff --git a/packages/devextreme-angular/src/ui/button-group/nested/ng-package.json b/packages/devextreme-angular/src/ui/button-group/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/button-group/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/button/index.ts b/packages/devextreme-angular/src/ui/button/index.ts index 8540f30d59d3..50a9c2a75e8a 100644 --- a/packages/devextreme-angular/src/ui/button/index.ts +++ b/packages/devextreme-angular/src/ui/button/index.ts @@ -36,6 +36,7 @@ import { + /** * [descr:dxButton] @@ -477,6 +478,7 @@ export class DxButtonComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/calendar/index.ts b/packages/devextreme-angular/src/ui/calendar/index.ts index 11f478f0c7c7..ef0b5136e73f 100644 --- a/packages/devextreme-angular/src/ui/calendar/index.ts +++ b/packages/devextreme-angular/src/ui/calendar/index.ts @@ -47,6 +47,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxCalendarComponent), @@ -837,6 +838,7 @@ export class DxCalendarComponent extends DxComponent implements OnDestroy, Contr + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/chart/index.ts b/packages/devextreme-angular/src/ui/chart/index.ts index 3ec87177e902..5b4c074e2bbb 100644 --- a/packages/devextreme-angular/src/ui/chart/index.ts +++ b/packages/devextreme-angular/src/ui/chart/index.ts @@ -129,11 +129,100 @@ import { DxiValueAxisModule } from 'devextreme-angular/ui/nested'; import { DxoZoomAndPanModule } from 'devextreme-angular/ui/nested'; import { DxoDragBoxStyleModule } from 'devextreme-angular/ui/nested'; +import { DxoChartAdaptiveLayoutModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartAnimationModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartAnnotationModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartBorderModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFontModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartImageModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartShadowModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartArgumentAxisModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartAggregationIntervalModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartBreakModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartBreakStyleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartConstantLineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartLabelModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartConstantLineStyleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartGridModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFormatModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartMinorGridModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartMinorTickModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartMinorTickIntervalModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartMinVisualRangeLengthModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartStripModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStripStyleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartTickModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartTickIntervalModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartTitleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartCommonAnnotationSettingsModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartCommonAxisSettingsModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartCommonPaneSettingsModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartBackgroundColorModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartCommonSeriesSettingsModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartAggregationModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartAreaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartHoverStyleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartHatchingModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartConnectorModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartPointModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartHeightModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartUrlModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartWidthModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSelectionStyleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartReductionModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartValueErrorBarModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartBarModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartBubbleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartCandlestickModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartColorModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFullstackedareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFullstackedbarModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFullstackedlineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFullstackedsplineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartFullstackedsplineareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartArgumentFormatModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartLineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartRangeareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartRangebarModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartScatterModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSplineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSplineareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStackedareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStackedbarModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStackedlineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStackedsplineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStackedsplineareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStepareaModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSteplineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartStockModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartCrosshairModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartHorizontalLineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartVerticalLineModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartDataPrepareSettingsModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartExportModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartLegendModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartMarginModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSubtitleModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartLoadingIndicatorModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartPaneModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartScrollBarModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartSeriesModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSeriesTemplateModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartSizeModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartTooltipModule } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartValueAxisModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartZoomAndPanModule } from 'devextreme-angular/ui/chart/nested'; +import { DxoChartDragBoxStyleModule } from 'devextreme-angular/ui/chart/nested'; + import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested'; import { DxiPaneComponent } from 'devextreme-angular/ui/nested'; import { DxiSeriesComponent } from 'devextreme-angular/ui/nested'; import { DxiValueAxisComponent } from 'devextreme-angular/ui/nested'; +import { DxiChartAnnotationComponent } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartPaneComponent } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartSeriesComponent } from 'devextreme-angular/ui/chart/nested'; +import { DxiChartValueAxisComponent } from 'devextreme-angular/ui/chart/nested'; /** @@ -1344,39 +1433,84 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange - @ContentChildren(DxiAnnotationComponent) - get annotationsChildren(): QueryList { + @ContentChildren(DxiChartAnnotationComponent) + get annotationsChildren(): QueryList { return this._getOption('annotations'); } set annotationsChildren(value) { + this.setContentChildren('annotations', value, 'DxiChartAnnotationComponent'); this.setChildren('annotations', value); } - @ContentChildren(DxiPaneComponent) - get panesChildren(): QueryList { + @ContentChildren(DxiChartPaneComponent) + get panesChildren(): QueryList { return this._getOption('panes'); } set panesChildren(value) { + this.setContentChildren('panes', value, 'DxiChartPaneComponent'); this.setChildren('panes', value); } - @ContentChildren(DxiSeriesComponent) - get seriesChildren(): QueryList { + @ContentChildren(DxiChartSeriesComponent) + get seriesChildren(): QueryList { return this._getOption('series'); } set seriesChildren(value) { + this.setContentChildren('series', value, 'DxiChartSeriesComponent'); this.setChildren('series', value); } - @ContentChildren(DxiValueAxisComponent) - get valueAxisChildren(): QueryList { + @ContentChildren(DxiChartValueAxisComponent) + get valueAxisChildren(): QueryList { return this._getOption('valueAxis'); } set valueAxisChildren(value) { + this.setContentChildren('valueAxis', value, 'DxiChartValueAxisComponent'); this.setChildren('valueAxis', value); } + @ContentChildren(DxiAnnotationComponent) + get annotationsLegacyChildren(): QueryList { + return this._getOption('annotations'); + } + set annotationsLegacyChildren(value) { + if (this.checkContentChildren('annotations', value, 'DxiAnnotationComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiPaneComponent) + get panesLegacyChildren(): QueryList { + return this._getOption('panes'); + } + set panesLegacyChildren(value) { + if (this.checkContentChildren('panes', value, 'DxiPaneComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiSeriesComponent) + get seriesLegacyChildren(): QueryList { + return this._getOption('series'); + } + set seriesLegacyChildren(value) { + if (this.checkContentChildren('series', value, 'DxiSeriesComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiValueAxisComponent) + get valueAxisLegacyChildren(): QueryList { + return this._getOption('valueAxis'); + } + set valueAxisLegacyChildren(value) { + if (this.checkContentChildren('valueAxis', value, 'DxiValueAxisComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1601,6 +1735,90 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange DxiValueAxisModule, DxoZoomAndPanModule, DxoDragBoxStyleModule, + DxoChartAdaptiveLayoutModule, + DxoChartAnimationModule, + DxiChartAnnotationModule, + DxoChartBorderModule, + DxoChartFontModule, + DxoChartImageModule, + DxoChartShadowModule, + DxoChartArgumentAxisModule, + DxoChartAggregationIntervalModule, + DxiChartBreakModule, + DxoChartBreakStyleModule, + DxiChartConstantLineModule, + DxoChartLabelModule, + DxoChartConstantLineStyleModule, + DxoChartGridModule, + DxoChartFormatModule, + DxoChartMinorGridModule, + DxoChartMinorTickModule, + DxoChartMinorTickIntervalModule, + DxoChartMinVisualRangeLengthModule, + DxiChartStripModule, + DxoChartStripStyleModule, + DxoChartTickModule, + DxoChartTickIntervalModule, + DxoChartTitleModule, + DxoChartCommonAnnotationSettingsModule, + DxoChartCommonAxisSettingsModule, + DxoChartCommonPaneSettingsModule, + DxoChartBackgroundColorModule, + DxoChartCommonSeriesSettingsModule, + DxoChartAggregationModule, + DxoChartAreaModule, + DxoChartHoverStyleModule, + DxoChartHatchingModule, + DxoChartConnectorModule, + DxoChartPointModule, + DxoChartHeightModule, + DxoChartUrlModule, + DxoChartWidthModule, + DxoChartSelectionStyleModule, + DxoChartReductionModule, + DxoChartValueErrorBarModule, + DxoChartBarModule, + DxoChartBubbleModule, + DxoChartCandlestickModule, + DxoChartColorModule, + DxoChartFullstackedareaModule, + DxoChartFullstackedbarModule, + DxoChartFullstackedlineModule, + DxoChartFullstackedsplineModule, + DxoChartFullstackedsplineareaModule, + DxoChartArgumentFormatModule, + DxoChartLineModule, + DxoChartRangeareaModule, + DxoChartRangebarModule, + DxoChartScatterModule, + DxoChartSplineModule, + DxoChartSplineareaModule, + DxoChartStackedareaModule, + DxoChartStackedbarModule, + DxoChartStackedlineModule, + DxoChartStackedsplineModule, + DxoChartStackedsplineareaModule, + DxoChartStepareaModule, + DxoChartSteplineModule, + DxoChartStockModule, + DxoChartCrosshairModule, + DxoChartHorizontalLineModule, + DxoChartVerticalLineModule, + DxoChartDataPrepareSettingsModule, + DxoChartExportModule, + DxoChartLegendModule, + DxoChartMarginModule, + DxoChartSubtitleModule, + DxoChartLoadingIndicatorModule, + DxiChartPaneModule, + DxoChartScrollBarModule, + DxiChartSeriesModule, + DxoChartSeriesTemplateModule, + DxoChartSizeModule, + DxoChartTooltipModule, + DxiChartValueAxisModule, + DxoChartZoomAndPanModule, + DxoChartDragBoxStyleModule, DxIntegrationModule, DxTemplateModule ], @@ -1693,6 +1911,90 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange DxiValueAxisModule, DxoZoomAndPanModule, DxoDragBoxStyleModule, + DxoChartAdaptiveLayoutModule, + DxoChartAnimationModule, + DxiChartAnnotationModule, + DxoChartBorderModule, + DxoChartFontModule, + DxoChartImageModule, + DxoChartShadowModule, + DxoChartArgumentAxisModule, + DxoChartAggregationIntervalModule, + DxiChartBreakModule, + DxoChartBreakStyleModule, + DxiChartConstantLineModule, + DxoChartLabelModule, + DxoChartConstantLineStyleModule, + DxoChartGridModule, + DxoChartFormatModule, + DxoChartMinorGridModule, + DxoChartMinorTickModule, + DxoChartMinorTickIntervalModule, + DxoChartMinVisualRangeLengthModule, + DxiChartStripModule, + DxoChartStripStyleModule, + DxoChartTickModule, + DxoChartTickIntervalModule, + DxoChartTitleModule, + DxoChartCommonAnnotationSettingsModule, + DxoChartCommonAxisSettingsModule, + DxoChartCommonPaneSettingsModule, + DxoChartBackgroundColorModule, + DxoChartCommonSeriesSettingsModule, + DxoChartAggregationModule, + DxoChartAreaModule, + DxoChartHoverStyleModule, + DxoChartHatchingModule, + DxoChartConnectorModule, + DxoChartPointModule, + DxoChartHeightModule, + DxoChartUrlModule, + DxoChartWidthModule, + DxoChartSelectionStyleModule, + DxoChartReductionModule, + DxoChartValueErrorBarModule, + DxoChartBarModule, + DxoChartBubbleModule, + DxoChartCandlestickModule, + DxoChartColorModule, + DxoChartFullstackedareaModule, + DxoChartFullstackedbarModule, + DxoChartFullstackedlineModule, + DxoChartFullstackedsplineModule, + DxoChartFullstackedsplineareaModule, + DxoChartArgumentFormatModule, + DxoChartLineModule, + DxoChartRangeareaModule, + DxoChartRangebarModule, + DxoChartScatterModule, + DxoChartSplineModule, + DxoChartSplineareaModule, + DxoChartStackedareaModule, + DxoChartStackedbarModule, + DxoChartStackedlineModule, + DxoChartStackedsplineModule, + DxoChartStackedsplineareaModule, + DxoChartStepareaModule, + DxoChartSteplineModule, + DxoChartStockModule, + DxoChartCrosshairModule, + DxoChartHorizontalLineModule, + DxoChartVerticalLineModule, + DxoChartDataPrepareSettingsModule, + DxoChartExportModule, + DxoChartLegendModule, + DxoChartMarginModule, + DxoChartSubtitleModule, + DxoChartLoadingIndicatorModule, + DxiChartPaneModule, + DxoChartScrollBarModule, + DxiChartSeriesModule, + DxoChartSeriesTemplateModule, + DxoChartSizeModule, + DxoChartTooltipModule, + DxiChartValueAxisModule, + DxoChartZoomAndPanModule, + DxoChartDragBoxStyleModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/chart/nested/adaptive-layout.ts b/packages/devextreme-angular/src/ui/chart/nested/adaptive-layout.ts new file mode 100644 index 000000000000..e9ec5997ca3d --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/adaptive-layout.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-adaptive-layout', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartAdaptiveLayoutComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get keepLabels(): boolean { + return this._getOption('keepLabels'); + } + set keepLabels(value: boolean) { + this._setOption('keepLabels', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'adaptiveLayout'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartAdaptiveLayoutComponent + ], + exports: [ + DxoChartAdaptiveLayoutComponent + ], +}) +export class DxoChartAdaptiveLayoutModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/aggregation-interval.ts b/packages/devextreme-angular/src/ui/chart/nested/aggregation-interval.ts new file mode 100644 index 000000000000..adf9255c4912 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/aggregation-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-aggregation-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartAggregationIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'aggregationInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartAggregationIntervalComponent + ], + exports: [ + DxoChartAggregationIntervalComponent + ], +}) +export class DxoChartAggregationIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/aggregation.ts b/packages/devextreme-angular/src/ui/chart/nested/aggregation.ts new file mode 100644 index 000000000000..8d0d8c522b87 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/aggregation.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartSeriesAggregationMethod } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-aggregation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartAggregationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get calculate(): Function | undefined { + return this._getOption('calculate'); + } + set calculate(value: Function | undefined) { + this._setOption('calculate', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get method(): ChartSeriesAggregationMethod { + return this._getOption('method'); + } + set method(value: ChartSeriesAggregationMethod) { + this._setOption('method', value); + } + + + protected get _optionPath() { + return 'aggregation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartAggregationComponent + ], + exports: [ + DxoChartAggregationComponent + ], +}) +export class DxoChartAggregationModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/animation.ts b/packages/devextreme-angular/src/ui/chart/nested/animation.ts new file mode 100644 index 000000000000..73d33e2f832f --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/animation.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationEaseMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): AnimationEaseMode { + return this._getOption('easing'); + } + set easing(value: AnimationEaseMode) { + this._setOption('easing', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get maxPointCountSupported(): number { + return this._getOption('maxPointCountSupported'); + } + set maxPointCountSupported(value: number) { + this._setOption('maxPointCountSupported', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartAnimationComponent + ], + exports: [ + DxoChartAnimationComponent + ], +}) +export class DxoChartAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/annotation-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/annotation-dxi.ts new file mode 100644 index 000000000000..29d4ec745460 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/annotation-dxi.ts @@ -0,0 +1,315 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chart-annotation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartAnnotationComponent extends CollectionNestedOption { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get argument(): Date | number | string | undefined { + return this._getOption('argument'); + } + set argument(value: Date | number | string | undefined) { + this._setOption('argument', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get series(): string | undefined { + return this._getOption('series'); + } + set series(value: string | undefined) { + this._setOption('series', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): Date | number | string | undefined { + return this._getOption('value'); + } + set value(value: Date | number | string | undefined) { + this._setOption('value', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'annotations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartAnnotationComponent + ], + exports: [ + DxiChartAnnotationComponent + ], +}) +export class DxiChartAnnotationModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/area.ts b/packages/devextreme-angular/src/ui/chart/nested/area.ts new file mode 100644 index 000000000000..24a2123e6009 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/area.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-area', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartAreaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'area'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartAreaComponent + ], + exports: [ + DxoChartAreaComponent + ], +}) +export class DxoChartAreaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts b/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts new file mode 100644 index 000000000000..fa21d7c2ccd5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts @@ -0,0 +1,519 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { HorizontalAlignment, Position, VerticalAlignment } from 'devextreme/common'; +import { ArgumentAxisHoverMode, AxisScaleType, ChartsAxisLabelOverlap, ChartsDataType, DashStyle, DiscreteAxisDivisionMode, Font, RelativePosition, ScaleBreak, ScaleBreakLineStyle, TextOverflow, TimeInterval, VisualRange, VisualRangeUpdateMode, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { AggregatedPointsPosition, ChartLabelDisplayMode } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiChartBreakComponent } from './break-dxi'; +import { DxiChartConstantLineComponent } from './constant-line-dxi'; +import { DxiChartStripComponent } from './strip-dxi'; + + +@Component({ + selector: 'dxo-chart-argument-axis', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartArgumentAxisComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregateByCategory(): boolean { + return this._getOption('aggregateByCategory'); + } + set aggregateByCategory(value: boolean) { + this._setOption('aggregateByCategory', value); + } + + @Input() + get aggregatedPointsPosition(): AggregatedPointsPosition { + return this._getOption('aggregatedPointsPosition'); + } + set aggregatedPointsPosition(value: AggregatedPointsPosition) { + this._setOption('aggregatedPointsPosition', value); + } + + @Input() + get aggregationGroupWidth(): number | undefined { + return this._getOption('aggregationGroupWidth'); + } + set aggregationGroupWidth(value: number | undefined) { + this._setOption('aggregationGroupWidth', value); + } + + @Input() + get aggregationInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('aggregationInterval'); + } + set aggregationInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('aggregationInterval', value); + } + + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get argumentType(): ChartsDataType | undefined { + return this._getOption('argumentType'); + } + set argumentType(value: ChartsDataType | undefined) { + this._setOption('argumentType', value); + } + + @Input() + get axisDivisionFactor(): number { + return this._getOption('axisDivisionFactor'); + } + set axisDivisionFactor(value: number) { + this._setOption('axisDivisionFactor', value); + } + + @Input() + get breaks(): Array { + return this._getOption('breaks'); + } + set breaks(value: Array) { + this._setOption('breaks', value); + } + + @Input() + get breakStyle(): { color?: string, line?: ScaleBreakLineStyle, width?: number } { + return this._getOption('breakStyle'); + } + set breakStyle(value: { color?: string, line?: ScaleBreakLineStyle, width?: number }) { + this._setOption('breakStyle', value); + } + + @Input() + get categories(): Array { + return this._getOption('categories'); + } + set categories(value: Array) { + this._setOption('categories', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get constantLines(): Array { + return this._getOption('constantLines'); + } + set constantLines(value: Array) { + this._setOption('constantLines', value); + } + + @Input() + get constantLineStyle(): { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number } { + return this._getOption('constantLineStyle'); + } + set constantLineStyle(value: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }) { + this._setOption('constantLineStyle', value); + } + + @Input() + get customPosition(): Date | number | string | undefined { + return this._getOption('customPosition'); + } + set customPosition(value: Date | number | string | undefined) { + this._setOption('customPosition', value); + } + + @Input() + get customPositionAxis(): string | undefined { + return this._getOption('customPositionAxis'); + } + set customPositionAxis(value: string | undefined) { + this._setOption('customPositionAxis', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean) { + this._setOption('endOnTick', value); + } + + @Input() + get grid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('grid'); + } + set grid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('grid', value); + } + + @Input() + get holidays(): Array { + return this._getOption('holidays'); + } + set holidays(value: Array) { + this._setOption('holidays', value); + } + + @Input() + get hoverMode(): ArgumentAxisHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: ArgumentAxisHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment | undefined, customizeHint?: Function, customizeText?: Function, displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: RelativePosition | Position, rotationAngle?: number, staggeringSpacing?: number, template?: any | undefined, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment | undefined, customizeHint?: Function, customizeText?: Function, displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: RelativePosition | Position, rotationAngle?: number, staggeringSpacing?: number, template?: any | undefined, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }) { + this._setOption('label', value); + } + + @Input() + get linearThreshold(): number | undefined { + return this._getOption('linearThreshold'); + } + set linearThreshold(value: number | undefined) { + this._setOption('linearThreshold', value); + } + + @Input() + get logarithmBase(): number { + return this._getOption('logarithmBase'); + } + set logarithmBase(value: number) { + this._setOption('logarithmBase', value); + } + + @Input() + get maxValueMargin(): number | undefined { + return this._getOption('maxValueMargin'); + } + set maxValueMargin(value: number | undefined) { + this._setOption('maxValueMargin', value); + } + + @Input() + get minorGrid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('minorGrid'); + } + set minorGrid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('minorGrid', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickCount(): number | undefined { + return this._getOption('minorTickCount'); + } + set minorTickCount(value: number | undefined) { + this._setOption('minorTickCount', value); + } + + @Input() + get minorTickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minorTickInterval', value); + } + + @Input() + get minValueMargin(): number | undefined { + return this._getOption('minValueMargin'); + } + set minValueMargin(value: number | undefined) { + this._setOption('minValueMargin', value); + } + + @Input() + get minVisualRangeLength(): TimeInterval | number | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minVisualRangeLength'); + } + set minVisualRangeLength(value: TimeInterval | number | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minVisualRangeLength', value); + } + + @Input() + get offset(): number | undefined { + return this._getOption('offset'); + } + set offset(value: number | undefined) { + this._setOption('offset', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get placeholderSize(): number { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number) { + this._setOption('placeholderSize', value); + } + + @Input() + get position(): Position { + return this._getOption('position'); + } + set position(value: Position) { + this._setOption('position', value); + } + + @Input() + get singleWorkdays(): Array { + return this._getOption('singleWorkdays'); + } + set singleWorkdays(value: Array) { + this._setOption('singleWorkdays', value); + } + + @Input() + get strips(): Array { + return this._getOption('strips'); + } + set strips(value: Array) { + this._setOption('strips', value); + } + + @Input() + get stripStyle(): { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number } { + return this._getOption('stripStyle'); + } + set stripStyle(value: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }) { + this._setOption('stripStyle', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('tickInterval'); + } + set tickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('tickInterval', value); + } + + @Input() + get title(): string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('title'); + } + set title(value: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('title', value); + } + + @Input() + get type(): AxisScaleType | undefined { + return this._getOption('type'); + } + set type(value: AxisScaleType | undefined) { + this._setOption('type', value); + } + + @Input() + get valueMarginsEnabled(): boolean { + return this._getOption('valueMarginsEnabled'); + } + set valueMarginsEnabled(value: boolean) { + this._setOption('valueMarginsEnabled', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visualRange(): VisualRange | Array { + return this._getOption('visualRange'); + } + set visualRange(value: VisualRange | Array) { + this._setOption('visualRange', value); + } + + @Input() + get visualRangeUpdateMode(): VisualRangeUpdateMode { + return this._getOption('visualRangeUpdateMode'); + } + set visualRangeUpdateMode(value: VisualRangeUpdateMode) { + this._setOption('visualRangeUpdateMode', value); + } + + @Input() + get wholeRange(): VisualRange | undefined | Array { + return this._getOption('wholeRange'); + } + set wholeRange(value: VisualRange | undefined | Array) { + this._setOption('wholeRange', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get workdaysOnly(): boolean { + return this._getOption('workdaysOnly'); + } + set workdaysOnly(value: boolean) { + this._setOption('workdaysOnly', value); + } + + @Input() + get workWeek(): Array { + return this._getOption('workWeek'); + } + set workWeek(value: Array) { + this._setOption('workWeek', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() categoriesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visualRangeChange: EventEmitter>; + protected get _optionPath() { + return 'argumentAxis'; + } + + + @ContentChildren(forwardRef(() => DxiChartBreakComponent)) + get breaksChildren(): QueryList { + return this._getOption('breaks'); + } + set breaksChildren(value) { + this.setChildren('breaks', value); + } + + @ContentChildren(forwardRef(() => DxiChartConstantLineComponent)) + get constantLinesChildren(): QueryList { + return this._getOption('constantLines'); + } + set constantLinesChildren(value) { + this.setChildren('constantLines', value); + } + + @ContentChildren(forwardRef(() => DxiChartStripComponent)) + get stripsChildren(): QueryList { + return this._getOption('strips'); + } + set stripsChildren(value) { + this.setChildren('strips', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'categoriesChange' }, + { emit: 'visualRangeChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartArgumentAxisComponent + ], + exports: [ + DxoChartArgumentAxisComponent + ], +}) +export class DxoChartArgumentAxisModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/argument-format.ts b/packages/devextreme-angular/src/ui/chart/nested/argument-format.ts new file mode 100644 index 000000000000..fb04bff3e3e6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/argument-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-argument-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartArgumentFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'argumentFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartArgumentFormatComponent + ], + exports: [ + DxoChartArgumentFormatComponent + ], +}) +export class DxoChartArgumentFormatModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/background-color.ts b/packages/devextreme-angular/src/ui/chart/nested/background-color.ts new file mode 100644 index 000000000000..352a25d693d4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/background-color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-background-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartBackgroundColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'backgroundColor'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartBackgroundColorComponent + ], + exports: [ + DxoChartBackgroundColorComponent + ], +}) +export class DxoChartBackgroundColorModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/bar.ts b/packages/devextreme-angular/src/ui/chart/nested/bar.ts new file mode 100644 index 000000000000..92c178dbcdf2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/bar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'bar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartBarComponent + ], + exports: [ + DxoChartBarComponent + ], +}) +export class DxoChartBarModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/border.ts b/packages/devextreme-angular/src/ui/chart/nested/border.ts new file mode 100644 index 000000000000..415065088774 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/border.ts @@ -0,0 +1,145 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle | undefined { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle | undefined) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get bottom(): boolean { + return this._getOption('bottom'); + } + set bottom(value: boolean) { + this._setOption('bottom', value); + } + + @Input() + get left(): boolean { + return this._getOption('left'); + } + set left(value: boolean) { + this._setOption('left', value); + } + + @Input() + get right(): boolean { + return this._getOption('right'); + } + set right(value: boolean) { + this._setOption('right', value); + } + + @Input() + get top(): boolean { + return this._getOption('top'); + } + set top(value: boolean) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartBorderComponent + ], + exports: [ + DxoChartBorderComponent + ], +}) +export class DxoChartBorderModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/break-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/break-dxi.ts new file mode 100644 index 000000000000..189267144659 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/break-dxi.ts @@ -0,0 +1,74 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chart-break', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartBreakComponent extends CollectionNestedOption { + @Input() + get endValue(): Date | number | string | undefined { + return this._getOption('endValue'); + } + set endValue(value: Date | number | string | undefined) { + this._setOption('endValue', value); + } + + @Input() + get startValue(): Date | number | string | undefined { + return this._getOption('startValue'); + } + set startValue(value: Date | number | string | undefined) { + this._setOption('startValue', value); + } + + + protected get _optionPath() { + return 'breaks'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartBreakComponent + ], + exports: [ + DxiChartBreakComponent + ], +}) +export class DxiChartBreakModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/break-style.ts b/packages/devextreme-angular/src/ui/chart/nested/break-style.ts new file mode 100644 index 000000000000..d0e03dc16b0f --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/break-style.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ScaleBreakLineStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-break-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartBreakStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get line(): ScaleBreakLineStyle { + return this._getOption('line'); + } + set line(value: ScaleBreakLineStyle) { + this._setOption('line', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'breakStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartBreakStyleComponent + ], + exports: [ + DxoChartBreakStyleComponent + ], +}) +export class DxoChartBreakStyleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/bubble.ts b/packages/devextreme-angular/src/ui/chart/nested/bubble.ts new file mode 100644 index 000000000000..f70b278a9bbf --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/bubble.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-bubble', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartBubbleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'bubble'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartBubbleComponent + ], + exports: [ + DxoChartBubbleComponent + ], +}) +export class DxoChartBubbleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/candlestick.ts b/packages/devextreme-angular/src/ui/chart/nested/candlestick.ts new file mode 100644 index 000000000000..183c542df7e3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/candlestick.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-candlestick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartCandlestickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'candlestick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartCandlestickComponent + ], + exports: [ + DxoChartCandlestickComponent + ], +}) +export class DxoChartCandlestickModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/color.ts b/packages/devextreme-angular/src/ui/chart/nested/color.ts new file mode 100644 index 000000000000..04417ebcd6e2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'color'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartColorComponent + ], + exports: [ + DxoChartColorComponent + ], +}) +export class DxoChartColorModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/common-annotation-settings.ts b/packages/devextreme-angular/src/ui/chart/nested/common-annotation-settings.ts new file mode 100644 index 000000000000..40af8e524a7e --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/common-annotation-settings.ts @@ -0,0 +1,313 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-common-annotation-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartCommonAnnotationSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get argument(): Date | number | string | undefined { + return this._getOption('argument'); + } + set argument(value: Date | number | string | undefined) { + this._setOption('argument', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get series(): string | undefined { + return this._getOption('series'); + } + set series(value: string | undefined) { + this._setOption('series', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): Date | number | string | undefined { + return this._getOption('value'); + } + set value(value: Date | number | string | undefined) { + this._setOption('value', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'commonAnnotationSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartCommonAnnotationSettingsComponent + ], + exports: [ + DxoChartCommonAnnotationSettingsComponent + ], +}) +export class DxoChartCommonAnnotationSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts b/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts new file mode 100644 index 000000000000..beeb35ff9914 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts @@ -0,0 +1,243 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Position, VerticalAlignment } from 'devextreme/common'; +import { ChartsAxisLabelOverlap, DashStyle, DiscreteAxisDivisionMode, Font, RelativePosition, ScaleBreakLineStyle, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { AggregatedPointsPosition, ChartLabelDisplayMode } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-common-axis-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartCommonAxisSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregatedPointsPosition(): AggregatedPointsPosition { + return this._getOption('aggregatedPointsPosition'); + } + set aggregatedPointsPosition(value: AggregatedPointsPosition) { + this._setOption('aggregatedPointsPosition', value); + } + + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get breakStyle(): { color?: string, line?: ScaleBreakLineStyle, width?: number } { + return this._getOption('breakStyle'); + } + set breakStyle(value: { color?: string, line?: ScaleBreakLineStyle, width?: number }) { + this._setOption('breakStyle', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get constantLineStyle(): { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number } { + return this._getOption('constantLineStyle'); + } + set constantLineStyle(value: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }) { + this._setOption('constantLineStyle', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean | undefined { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean | undefined) { + this._setOption('endOnTick', value); + } + + @Input() + get grid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('grid'); + } + set grid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('grid', value); + } + + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: RelativePosition | Position, rotationAngle?: number, staggeringSpacing?: number, template?: any | undefined, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: RelativePosition | Position, rotationAngle?: number, staggeringSpacing?: number, template?: any | undefined, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }) { + this._setOption('label', value); + } + + @Input() + get maxValueMargin(): number | undefined { + return this._getOption('maxValueMargin'); + } + set maxValueMargin(value: number | undefined) { + this._setOption('maxValueMargin', value); + } + + @Input() + get minorGrid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('minorGrid'); + } + set minorGrid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('minorGrid', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minValueMargin(): number | undefined { + return this._getOption('minValueMargin'); + } + set minValueMargin(value: number | undefined) { + this._setOption('minValueMargin', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get placeholderSize(): number { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number) { + this._setOption('placeholderSize', value); + } + + @Input() + get stripStyle(): { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number } { + return this._getOption('stripStyle'); + } + set stripStyle(value: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }) { + this._setOption('stripStyle', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get title(): { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('title'); + } + set title(value: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('title', value); + } + + @Input() + get valueMarginsEnabled(): boolean { + return this._getOption('valueMarginsEnabled'); + } + set valueMarginsEnabled(value: boolean) { + this._setOption('valueMarginsEnabled', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'commonAxisSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartCommonAxisSettingsComponent + ], + exports: [ + DxoChartCommonAxisSettingsComponent + ], +}) +export class DxoChartCommonAxisSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/common-pane-settings.ts b/packages/devextreme-angular/src/ui/chart/nested/common-pane-settings.ts new file mode 100644 index 000000000000..540450581899 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/common-pane-settings.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-common-pane-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartCommonPaneSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): ChartsColor | string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: ChartsColor | string) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { bottom?: boolean, color?: string, dashStyle?: DashStyle, left?: boolean, opacity?: number | undefined, right?: boolean, top?: boolean, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { bottom?: boolean, color?: string, dashStyle?: DashStyle, left?: boolean, opacity?: number | undefined, right?: boolean, top?: boolean, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + + protected get _optionPath() { + return 'commonPaneSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartCommonPaneSettingsComponent + ], + exports: [ + DxoChartCommonPaneSettingsComponent + ], +}) +export class DxoChartCommonPaneSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/common-series-settings.ts b/packages/devextreme-angular/src/ui/chart/nested/common-series-settings.ts new file mode 100644 index 000000000000..555687d2d5f4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/common-series-settings.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-common-series-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartCommonSeriesSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'commonSeriesSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartCommonSeriesSettingsComponent + ], + exports: [ + DxoChartCommonSeriesSettingsComponent + ], +}) +export class DxoChartCommonSeriesSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/connector.ts b/packages/devextreme-angular/src/ui/chart/nested/connector.ts new file mode 100644 index 000000000000..91ef332644f9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/connector.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-connector', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartConnectorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'connector'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartConnectorComponent + ], + exports: [ + DxoChartConnectorComponent + ], +}) +export class DxoChartConnectorModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/constant-line-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/constant-line-dxi.ts new file mode 100644 index 000000000000..29d76fac77ab --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/constant-line-dxi.ts @@ -0,0 +1,132 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { DashStyle, Font, RelativePosition } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chart-constant-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartConstantLineComponent extends CollectionNestedOption { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get displayBehindSeries(): boolean { + return this._getOption('displayBehindSeries'); + } + set displayBehindSeries(value: boolean) { + this._setOption('displayBehindSeries', value); + } + + @Input() + get extendAxis(): boolean { + return this._getOption('extendAxis'); + } + set extendAxis(value: boolean) { + this._setOption('extendAxis', value); + } + + @Input() + get label(): { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get value(): Date | number | string | undefined { + return this._getOption('value'); + } + set value(value: Date | number | string | undefined) { + this._setOption('value', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'constantLines'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartConstantLineComponent + ], + exports: [ + DxiChartConstantLineComponent + ], +}) +export class DxiChartConstantLineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/constant-line-style.ts b/packages/devextreme-angular/src/ui/chart/nested/constant-line-style.ts new file mode 100644 index 000000000000..80ec44e851ef --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/constant-line-style.ts @@ -0,0 +1,114 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { DashStyle, Font, RelativePosition } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-constant-line-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartConstantLineStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get label(): { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean } | { font?: Font, position?: RelativePosition, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean } | { font?: Font, position?: RelativePosition, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'constantLineStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartConstantLineStyleComponent + ], + exports: [ + DxoChartConstantLineStyleComponent + ], +}) +export class DxoChartConstantLineStyleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/crosshair.ts b/packages/devextreme-angular/src/ui/chart/nested/crosshair.ts new file mode 100644 index 000000000000..4ee04755aba4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/crosshair.ts @@ -0,0 +1,130 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-crosshair', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartCrosshairComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get horizontalLine(): boolean | { color?: string, dashStyle?: DashStyle, label?: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('horizontalLine'); + } + set horizontalLine(value: boolean | { color?: string, dashStyle?: DashStyle, label?: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('horizontalLine', value); + } + + @Input() + get label(): { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get verticalLine(): boolean | { color?: string, dashStyle?: DashStyle, label?: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('verticalLine'); + } + set verticalLine(value: boolean | { color?: string, dashStyle?: DashStyle, label?: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('verticalLine', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'crosshair'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartCrosshairComponent + ], + exports: [ + DxoChartCrosshairComponent + ], +}) +export class DxoChartCrosshairModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/data-prepare-settings.ts b/packages/devextreme-angular/src/ui/chart/nested/data-prepare-settings.ts new file mode 100644 index 000000000000..0a8e3a6b8e6d --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/data-prepare-settings.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-data-prepare-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartDataPrepareSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get checkTypeForAllData(): boolean { + return this._getOption('checkTypeForAllData'); + } + set checkTypeForAllData(value: boolean) { + this._setOption('checkTypeForAllData', value); + } + + @Input() + get convertToAxisDataType(): boolean { + return this._getOption('convertToAxisDataType'); + } + set convertToAxisDataType(value: boolean) { + this._setOption('convertToAxisDataType', value); + } + + @Input() + get sortingMethod(): boolean | Function { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: boolean | Function) { + this._setOption('sortingMethod', value); + } + + + protected get _optionPath() { + return 'dataPrepareSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartDataPrepareSettingsComponent + ], + exports: [ + DxoChartDataPrepareSettingsComponent + ], +}) +export class DxoChartDataPrepareSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/drag-box-style.ts b/packages/devextreme-angular/src/ui/chart/nested/drag-box-style.ts new file mode 100644 index 000000000000..e90b5e57c7d4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/drag-box-style.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-drag-box-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartDragBoxStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'dragBoxStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartDragBoxStyleComponent + ], + exports: [ + DxoChartDragBoxStyleComponent + ], +}) +export class DxoChartDragBoxStyleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/export.ts b/packages/devextreme-angular/src/ui/chart/nested/export.ts new file mode 100644 index 000000000000..ce73cd17776f --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartExportComponent + ], + exports: [ + DxoChartExportComponent + ], +}) +export class DxoChartExportModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/font.ts b/packages/devextreme-angular/src/ui/chart/nested/font.ts new file mode 100644 index 000000000000..c0b8e72fd864 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFontComponent + ], + exports: [ + DxoChartFontComponent + ], +}) +export class DxoChartFontModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/format.ts b/packages/devextreme-angular/src/ui/chart/nested/format.ts new file mode 100644 index 000000000000..bba595a23e7d --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFormatComponent + ], + exports: [ + DxoChartFormatComponent + ], +}) +export class DxoChartFormatModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/fullstackedarea.ts b/packages/devextreme-angular/src/ui/chart/nested/fullstackedarea.ts new file mode 100644 index 000000000000..a8c7e4947b74 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/fullstackedarea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-fullstackedarea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFullstackedareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedarea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFullstackedareaComponent + ], + exports: [ + DxoChartFullstackedareaComponent + ], +}) +export class DxoChartFullstackedareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/fullstackedbar.ts b/packages/devextreme-angular/src/ui/chart/nested/fullstackedbar.ts new file mode 100644 index 000000000000..2de1b0d67db0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/fullstackedbar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-fullstackedbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFullstackedbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedbar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFullstackedbarComponent + ], + exports: [ + DxoChartFullstackedbarComponent + ], +}) +export class DxoChartFullstackedbarModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/fullstackedline.ts b/packages/devextreme-angular/src/ui/chart/nested/fullstackedline.ts new file mode 100644 index 000000000000..0893fd9a8468 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/fullstackedline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-fullstackedline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFullstackedlineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFullstackedlineComponent + ], + exports: [ + DxoChartFullstackedlineComponent + ], +}) +export class DxoChartFullstackedlineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/fullstackedspline.ts b/packages/devextreme-angular/src/ui/chart/nested/fullstackedspline.ts new file mode 100644 index 000000000000..c1f85547aa54 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/fullstackedspline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-fullstackedspline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFullstackedsplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedspline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFullstackedsplineComponent + ], + exports: [ + DxoChartFullstackedsplineComponent + ], +}) +export class DxoChartFullstackedsplineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/fullstackedsplinearea.ts b/packages/devextreme-angular/src/ui/chart/nested/fullstackedsplinearea.ts new file mode 100644 index 000000000000..9c6cf737ec93 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/fullstackedsplinearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-fullstackedsplinearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartFullstackedsplineareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedsplinearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartFullstackedsplineareaComponent + ], + exports: [ + DxoChartFullstackedsplineareaComponent + ], +}) +export class DxoChartFullstackedsplineareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/grid.ts b/packages/devextreme-angular/src/ui/chart/nested/grid.ts new file mode 100644 index 000000000000..0d2907739afc --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/grid.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-grid', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartGridComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'grid'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartGridComponent + ], + exports: [ + DxoChartGridComponent + ], +}) +export class DxoChartGridModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/hatching.ts b/packages/devextreme-angular/src/ui/chart/nested/hatching.ts new file mode 100644 index 000000000000..3d491798b0db --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/hatching.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-hatching', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartHatchingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get direction(): HatchDirection { + return this._getOption('direction'); + } + set direction(value: HatchDirection) { + this._setOption('direction', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get step(): number { + return this._getOption('step'); + } + set step(value: number) { + this._setOption('step', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'hatching'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartHatchingComponent + ], + exports: [ + DxoChartHatchingComponent + ], +}) +export class DxoChartHatchingModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/height.ts b/packages/devextreme-angular/src/ui/chart/nested/height.ts new file mode 100644 index 000000000000..33eab4095c67 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/height.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-height', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartHeightComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get rangeMaxPoint(): number | undefined { + return this._getOption('rangeMaxPoint'); + } + set rangeMaxPoint(value: number | undefined) { + this._setOption('rangeMaxPoint', value); + } + + @Input() + get rangeMinPoint(): number | undefined { + return this._getOption('rangeMinPoint'); + } + set rangeMinPoint(value: number | undefined) { + this._setOption('rangeMinPoint', value); + } + + + protected get _optionPath() { + return 'height'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartHeightComponent + ], + exports: [ + DxoChartHeightComponent + ], +}) +export class DxoChartHeightModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/horizontal-line.ts b/packages/devextreme-angular/src/ui/chart/nested/horizontal-line.ts new file mode 100644 index 000000000000..64131dec389c --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/horizontal-line.ts @@ -0,0 +1,114 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-horizontal-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartHorizontalLineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get label(): { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'horizontalLine'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartHorizontalLineComponent + ], + exports: [ + DxoChartHorizontalLineComponent + ], +}) +export class DxoChartHorizontalLineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/hover-style.ts b/packages/devextreme-angular/src/ui/chart/nested/hover-style.ts new file mode 100644 index 000000000000..7ecbe135331b --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/hover-style.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } | { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } | { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get size(): number | undefined { + return this._getOption('size'); + } + set size(value: number | undefined) { + this._setOption('size', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartHoverStyleComponent + ], + exports: [ + DxoChartHoverStyleComponent + ], +}) +export class DxoChartHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/image.ts b/packages/devextreme-angular/src/ui/chart/nested/image.ts new file mode 100644 index 000000000000..77c5f6f3a758 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/image.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-image', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartImageComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } { + return this._getOption('height'); + } + set height(value: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }) { + this._setOption('height', value); + } + + @Input() + get url(): string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined } { + return this._getOption('url'); + } + set url(value: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }) { + this._setOption('url', value); + } + + @Input() + get width(): number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } { + return this._getOption('width'); + } + set width(value: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'image'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartImageComponent + ], + exports: [ + DxoChartImageComponent + ], +}) +export class DxoChartImageModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/index.ts b/packages/devextreme-angular/src/ui/chart/nested/index.ts new file mode 100644 index 000000000000..8adb354e58ad --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/index.ts @@ -0,0 +1,85 @@ +export * from './adaptive-layout'; +export * from './aggregation-interval'; +export * from './aggregation'; +export * from './animation'; +export * from './annotation-dxi'; +export * from './area'; +export * from './argument-axis'; +export * from './argument-format'; +export * from './background-color'; +export * from './bar'; +export * from './border'; +export * from './break-dxi'; +export * from './break-style'; +export * from './bubble'; +export * from './candlestick'; +export * from './color'; +export * from './common-annotation-settings'; +export * from './common-axis-settings'; +export * from './common-pane-settings'; +export * from './common-series-settings'; +export * from './connector'; +export * from './constant-line-dxi'; +export * from './constant-line-style'; +export * from './crosshair'; +export * from './data-prepare-settings'; +export * from './drag-box-style'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './fullstackedarea'; +export * from './fullstackedbar'; +export * from './fullstackedline'; +export * from './fullstackedspline'; +export * from './fullstackedsplinearea'; +export * from './grid'; +export * from './hatching'; +export * from './height'; +export * from './horizontal-line'; +export * from './hover-style'; +export * from './image'; +export * from './label'; +export * from './legend'; +export * from './line'; +export * from './loading-indicator'; +export * from './margin'; +export * from './min-visual-range-length'; +export * from './minor-grid'; +export * from './minor-tick-interval'; +export * from './minor-tick'; +export * from './pane-dxi'; +export * from './point'; +export * from './rangearea'; +export * from './rangebar'; +export * from './reduction'; +export * from './scatter'; +export * from './scroll-bar'; +export * from './selection-style'; +export * from './series-dxi'; +export * from './series-template'; +export * from './shadow'; +export * from './size'; +export * from './spline'; +export * from './splinearea'; +export * from './stackedarea'; +export * from './stackedbar'; +export * from './stackedline'; +export * from './stackedspline'; +export * from './stackedsplinearea'; +export * from './steparea'; +export * from './stepline'; +export * from './stock'; +export * from './strip-dxi'; +export * from './strip-style'; +export * from './subtitle'; +export * from './tick-interval'; +export * from './tick'; +export * from './title'; +export * from './tooltip'; +export * from './url'; +export * from './value-axis-dxi'; +export * from './value-error-bar'; +export * from './vertical-line'; +export * from './width'; +export * from './zoom-and-pan'; + diff --git a/packages/devextreme-angular/src/ui/chart/nested/label.ts b/packages/devextreme-angular/src/ui/chart/nested/label.ts new file mode 100644 index 000000000000..b3783e58a33a --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/label.ts @@ -0,0 +1,297 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { HorizontalAlignment, Position, VerticalAlignment } from 'devextreme/common'; +import { ChartsAxisLabelOverlap, DashStyle, Font, RelativePosition, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartLabelDisplayMode } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-label', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoChartLabelComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get position(): RelativePosition | Position { + return this._getOption('position'); + } + set position(value: RelativePosition | Position) { + this._setOption('position', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get alignment(): HorizontalAlignment | undefined { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment | undefined) { + this._setOption('alignment', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get displayMode(): ChartLabelDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: ChartLabelDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get indentFromAxis(): number { + return this._getOption('indentFromAxis'); + } + set indentFromAxis(value: number) { + this._setOption('indentFromAxis', value); + } + + @Input() + get overlappingBehavior(): ChartsAxisLabelOverlap { + return this._getOption('overlappingBehavior'); + } + set overlappingBehavior(value: ChartsAxisLabelOverlap) { + this._setOption('overlappingBehavior', value); + } + + @Input() + get rotationAngle(): number { + return this._getOption('rotationAngle'); + } + set rotationAngle(value: number) { + this._setOption('rotationAngle', value); + } + + @Input() + get staggeringSpacing(): number { + return this._getOption('staggeringSpacing'); + } + set staggeringSpacing(value: number) { + this._setOption('staggeringSpacing', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get connector(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('connector'); + } + set connector(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('connector', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get horizontalOffset(): number { + return this._getOption('horizontalOffset'); + } + set horizontalOffset(value: number) { + this._setOption('horizontalOffset', value); + } + + @Input() + get showForZeroValues(): boolean { + return this._getOption('showForZeroValues'); + } + set showForZeroValues(value: boolean) { + this._setOption('showForZeroValues', value); + } + + @Input() + get verticalOffset(): number { + return this._getOption('verticalOffset'); + } + set verticalOffset(value: number) { + this._setOption('verticalOffset', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartLabelComponent + ], + exports: [ + DxoChartLabelComponent + ], +}) +export class DxoChartLabelModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/legend.ts b/packages/devextreme-angular/src/ui/chart/nested/legend.ts new file mode 100644 index 000000000000..d1ade3764d30 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/legend.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Orientation, Position, VerticalEdge } from 'devextreme/common'; +import { DashStyle, Font, LegendHoverMode, RelativePosition } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-legend', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartLegendComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get columnCount(): number { + return this._getOption('columnCount'); + } + set columnCount(value: number) { + this._setOption('columnCount', value); + } + + @Input() + get columnItemSpacing(): number { + return this._getOption('columnItemSpacing'); + } + set columnItemSpacing(value: number) { + this._setOption('columnItemSpacing', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeItems(): Function { + return this._getOption('customizeItems'); + } + set customizeItems(value: Function) { + this._setOption('customizeItems', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get hoverMode(): LegendHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: LegendHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get itemsAlignment(): HorizontalAlignment | undefined { + return this._getOption('itemsAlignment'); + } + set itemsAlignment(value: HorizontalAlignment | undefined) { + this._setOption('itemsAlignment', value); + } + + @Input() + get itemTextPosition(): Position | undefined { + return this._getOption('itemTextPosition'); + } + set itemTextPosition(value: Position | undefined) { + this._setOption('itemTextPosition', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get markerSize(): number { + return this._getOption('markerSize'); + } + set markerSize(value: number) { + this._setOption('markerSize', value); + } + + @Input() + get markerTemplate(): any | undefined { + return this._getOption('markerTemplate'); + } + set markerTemplate(value: any | undefined) { + this._setOption('markerTemplate', value); + } + + @Input() + get orientation(): Orientation | undefined { + return this._getOption('orientation'); + } + set orientation(value: Orientation | undefined) { + this._setOption('orientation', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get position(): RelativePosition { + return this._getOption('position'); + } + set position(value: RelativePosition) { + this._setOption('position', value); + } + + @Input() + get rowCount(): number { + return this._getOption('rowCount'); + } + set rowCount(value: number) { + this._setOption('rowCount', value); + } + + @Input() + get rowItemSpacing(): number { + return this._getOption('rowItemSpacing'); + } + set rowItemSpacing(value: number) { + this._setOption('rowItemSpacing', value); + } + + @Input() + get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } { + return this._getOption('title'); + } + set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) { + this._setOption('title', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'legend'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartLegendComponent + ], + exports: [ + DxoChartLegendComponent + ], +}) +export class DxoChartLegendModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/line.ts b/packages/devextreme-angular/src/ui/chart/nested/line.ts new file mode 100644 index 000000000000..79d4261f1eb5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/line.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartLineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'line'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartLineComponent + ], + exports: [ + DxoChartLineComponent + ], +}) +export class DxoChartLineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/chart/nested/loading-indicator.ts new file mode 100644 index 000000000000..4faac425bb9b --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartLoadingIndicatorComponent + ], + exports: [ + DxoChartLoadingIndicatorComponent + ], +}) +export class DxoChartLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/margin.ts b/packages/devextreme-angular/src/ui/chart/nested/margin.ts new file mode 100644 index 000000000000..841e73af0260 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartMarginComponent + ], + exports: [ + DxoChartMarginComponent + ], +}) +export class DxoChartMarginModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/min-visual-range-length.ts b/packages/devextreme-angular/src/ui/chart/nested/min-visual-range-length.ts new file mode 100644 index 000000000000..8c67630a8f7a --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/min-visual-range-length.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-min-visual-range-length', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartMinVisualRangeLengthComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'minVisualRangeLength'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartMinVisualRangeLengthComponent + ], + exports: [ + DxoChartMinVisualRangeLengthComponent + ], +}) +export class DxoChartMinVisualRangeLengthModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/minor-grid.ts b/packages/devextreme-angular/src/ui/chart/nested/minor-grid.ts new file mode 100644 index 000000000000..a001f2df89a3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/minor-grid.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-minor-grid', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartMinorGridComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorGrid'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartMinorGridComponent + ], + exports: [ + DxoChartMinorGridComponent + ], +}) +export class DxoChartMinorGridModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/minor-tick-interval.ts b/packages/devextreme-angular/src/ui/chart/nested/minor-tick-interval.ts new file mode 100644 index 000000000000..a373d9a98a3d --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/minor-tick-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-minor-tick-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartMinorTickIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'minorTickInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartMinorTickIntervalComponent + ], + exports: [ + DxoChartMinorTickIntervalComponent + ], +}) +export class DxoChartMinorTickIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/minor-tick.ts b/packages/devextreme-angular/src/ui/chart/nested/minor-tick.ts new file mode 100644 index 000000000000..b86b33f83cc8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/minor-tick.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-minor-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartMinorTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get shift(): number { + return this._getOption('shift'); + } + set shift(value: number) { + this._setOption('shift', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorTick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartMinorTickComponent + ], + exports: [ + DxoChartMinorTickComponent + ], +}) +export class DxoChartMinorTickModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/ng-package.json b/packages/devextreme-angular/src/ui/chart/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/chart/nested/pane-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/pane-dxi.ts new file mode 100644 index 000000000000..81729cf7d542 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/pane-dxi.ts @@ -0,0 +1,91 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chart-pane', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartPaneComponent extends CollectionNestedOption { + @Input() + get backgroundColor(): ChartsColor | string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: ChartsColor | string) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { bottom?: boolean, color?: string, dashStyle?: DashStyle, left?: boolean, opacity?: number | undefined, right?: boolean, top?: boolean, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { bottom?: boolean, color?: string, dashStyle?: DashStyle, left?: boolean, opacity?: number | undefined, right?: boolean, top?: boolean, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'panes'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartPaneComponent + ], + exports: [ + DxiChartPaneComponent + ], +}) +export class DxiChartPaneModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/point.ts b/packages/devextreme-angular/src/ui/chart/nested/point.ts new file mode 100644 index 000000000000..cf3ad37e6588 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/point.ts @@ -0,0 +1,145 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, PointInteractionMode, PointSymbol } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-point', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartPointComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hoverMode(): PointInteractionMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: PointInteractionMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }) { + this._setOption('hoverStyle', value); + } + + @Input() + get image(): string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } } { + return this._getOption('image'); + } + set image(value: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }) { + this._setOption('image', value); + } + + @Input() + get selectionMode(): PointInteractionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: PointInteractionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }) { + this._setOption('selectionStyle', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get symbol(): PointSymbol { + return this._getOption('symbol'); + } + set symbol(value: PointSymbol) { + this._setOption('symbol', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'point'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartPointComponent + ], + exports: [ + DxoChartPointComponent + ], +}) +export class DxoChartPointModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/rangearea.ts b/packages/devextreme-angular/src/ui/chart/nested/rangearea.ts new file mode 100644 index 000000000000..f8d8a1fec28f --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/rangearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-rangearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartRangeareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'rangearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartRangeareaComponent + ], + exports: [ + DxoChartRangeareaComponent + ], +}) +export class DxoChartRangeareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/rangebar.ts b/packages/devextreme-angular/src/ui/chart/nested/rangebar.ts new file mode 100644 index 000000000000..968dbdbe73b0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/rangebar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-rangebar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartRangebarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'rangebar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartRangebarComponent + ], + exports: [ + DxoChartRangebarComponent + ], +}) +export class DxoChartRangebarModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/reduction.ts b/packages/devextreme-angular/src/ui/chart/nested/reduction.ts new file mode 100644 index 000000000000..6440a5d9cd2f --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/reduction.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-reduction', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartReductionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get level(): FinancialChartReductionLevel { + return this._getOption('level'); + } + set level(value: FinancialChartReductionLevel) { + this._setOption('level', value); + } + + + protected get _optionPath() { + return 'reduction'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartReductionComponent + ], + exports: [ + DxoChartReductionComponent + ], +}) +export class DxoChartReductionModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/scatter.ts b/packages/devextreme-angular/src/ui/chart/nested/scatter.ts new file mode 100644 index 000000000000..9188450fe1a2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/scatter.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-scatter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartScatterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'scatter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartScatterComponent + ], + exports: [ + DxoChartScatterComponent + ], +}) +export class DxoChartScatterModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/scroll-bar.ts b/packages/devextreme-angular/src/ui/chart/nested/scroll-bar.ts new file mode 100644 index 000000000000..6017b8bb3aef --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/scroll-bar.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Position } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-scroll-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartScrollBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get position(): Position { + return this._getOption('position'); + } + set position(value: Position) { + this._setOption('position', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'scrollBar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartScrollBarComponent + ], + exports: [ + DxoChartScrollBarComponent + ], +}) +export class DxoChartScrollBarModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/selection-style.ts b/packages/devextreme-angular/src/ui/chart/nested/selection-style.ts new file mode 100644 index 000000000000..07baf8a681cf --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/selection-style.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-selection-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSelectionStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean, width?: number } | { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean, width?: number } | { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get size(): number | undefined { + return this._getOption('size'); + } + set size(value: number | undefined) { + this._setOption('size', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'selectionStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSelectionStyleComponent + ], + exports: [ + DxoChartSelectionStyleComponent + ], +}) +export class DxoChartSelectionStyleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/series-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/series-dxi.ts new file mode 100644 index 000000000000..571696821007 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/series-dxi.ts @@ -0,0 +1,382 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chart-series', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartSeriesComponent extends CollectionNestedOption { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get tag(): any | undefined { + return this._getOption('tag'); + } + set tag(value: any | undefined) { + this._setOption('tag', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'series'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartSeriesComponent + ], + exports: [ + DxiChartSeriesComponent + ], +}) +export class DxiChartSeriesModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/series-template.ts b/packages/devextreme-angular/src/ui/chart/nested/series-template.ts new file mode 100644 index 000000000000..e0550461bb20 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/series-template.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-series-template', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSeriesTemplateComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeSeries(): Function { + return this._getOption('customizeSeries'); + } + set customizeSeries(value: Function) { + this._setOption('customizeSeries', value); + } + + @Input() + get nameField(): string { + return this._getOption('nameField'); + } + set nameField(value: string) { + this._setOption('nameField', value); + } + + + protected get _optionPath() { + return 'seriesTemplate'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSeriesTemplateComponent + ], + exports: [ + DxoChartSeriesTemplateComponent + ], +}) +export class DxoChartSeriesTemplateModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/shadow.ts b/packages/devextreme-angular/src/ui/chart/nested/shadow.ts new file mode 100644 index 000000000000..f829b68e67c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartShadowComponent + ], + exports: [ + DxoChartShadowComponent + ], +}) +export class DxoChartShadowModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/size.ts b/packages/devextreme-angular/src/ui/chart/nested/size.ts new file mode 100644 index 000000000000..654b45f8363a --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSizeComponent + ], + exports: [ + DxoChartSizeComponent + ], +}) +export class DxoChartSizeModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/spline.ts b/packages/devextreme-angular/src/ui/chart/nested/spline.ts new file mode 100644 index 000000000000..ff05c2b4b92a --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/spline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-spline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'spline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSplineComponent + ], + exports: [ + DxoChartSplineComponent + ], +}) +export class DxoChartSplineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/splinearea.ts b/packages/devextreme-angular/src/ui/chart/nested/splinearea.ts new file mode 100644 index 000000000000..4cb064961046 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/splinearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-splinearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSplineareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'splinearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSplineareaComponent + ], + exports: [ + DxoChartSplineareaComponent + ], +}) +export class DxoChartSplineareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stackedarea.ts b/packages/devextreme-angular/src/ui/chart/nested/stackedarea.ts new file mode 100644 index 000000000000..a6c29a18bd31 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stackedarea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stackedarea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStackedareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedarea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStackedareaComponent + ], + exports: [ + DxoChartStackedareaComponent + ], +}) +export class DxoChartStackedareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stackedbar.ts b/packages/devextreme-angular/src/ui/chart/nested/stackedbar.ts new file mode 100644 index 000000000000..edfd201adb37 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stackedbar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stackedbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStackedbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedbar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStackedbarComponent + ], + exports: [ + DxoChartStackedbarComponent + ], +}) +export class DxoChartStackedbarModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stackedline.ts b/packages/devextreme-angular/src/ui/chart/nested/stackedline.ts new file mode 100644 index 000000000000..f0dd7c49504d --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stackedline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stackedline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStackedlineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStackedlineComponent + ], + exports: [ + DxoChartStackedlineComponent + ], +}) +export class DxoChartStackedlineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stackedspline.ts b/packages/devextreme-angular/src/ui/chart/nested/stackedspline.ts new file mode 100644 index 000000000000..d60ee179ddc2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stackedspline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stackedspline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStackedsplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedspline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStackedsplineComponent + ], + exports: [ + DxoChartStackedsplineComponent + ], +}) +export class DxoChartStackedsplineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stackedsplinearea.ts b/packages/devextreme-angular/src/ui/chart/nested/stackedsplinearea.ts new file mode 100644 index 000000000000..c532fdf87b0e --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stackedsplinearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stackedsplinearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStackedsplineareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedsplinearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStackedsplineareaComponent + ], + exports: [ + DxoChartStackedsplineareaComponent + ], +}) +export class DxoChartStackedsplineareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/steparea.ts b/packages/devextreme-angular/src/ui/chart/nested/steparea.ts new file mode 100644 index 000000000000..07b3f2a4fca9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/steparea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-steparea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStepareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'steparea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStepareaComponent + ], + exports: [ + DxoChartStepareaComponent + ], +}) +export class DxoChartStepareaModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stepline.ts b/packages/devextreme-angular/src/ui/chart/nested/stepline.ts new file mode 100644 index 000000000000..f3ebe9372ace --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stepline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stepline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSteplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stepline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSteplineComponent + ], + exports: [ + DxoChartSteplineComponent + ], +}) +export class DxoChartSteplineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/stock.ts b/packages/devextreme-angular/src/ui/chart/nested/stock.ts new file mode 100644 index 000000000000..b48fec518f20 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/stock.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-stock', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStockComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stock'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStockComponent + ], + exports: [ + DxoChartStockComponent + ], +}) +export class DxoChartStockModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/strip-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/strip-dxi.ts new file mode 100644 index 000000000000..e7f99b291bda --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/strip-dxi.ts @@ -0,0 +1,108 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chart-strip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartStripComponent extends CollectionNestedOption { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get endValue(): Date | number | string | undefined { + return this._getOption('endValue'); + } + set endValue(value: Date | number | string | undefined) { + this._setOption('endValue', value); + } + + @Input() + get label(): { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment } { + return this._getOption('label'); + } + set label(value: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }) { + this._setOption('label', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get startValue(): Date | number | string | undefined { + return this._getOption('startValue'); + } + set startValue(value: Date | number | string | undefined) { + this._setOption('startValue', value); + } + + + protected get _optionPath() { + return 'strips'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartStripComponent + ], + exports: [ + DxiChartStripComponent + ], +}) +export class DxiChartStripModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/strip-style.ts b/packages/devextreme-angular/src/ui/chart/nested/strip-style.ts new file mode 100644 index 000000000000..9cfc626f6be7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/strip-style.ts @@ -0,0 +1,90 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-strip-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartStripStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get label(): { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment } { + return this._getOption('label'); + } + set label(value: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }) { + this._setOption('label', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + + protected get _optionPath() { + return 'stripStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartStripStyleComponent + ], + exports: [ + DxoChartStripStyleComponent + ], +}) +export class DxoChartStripStyleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts b/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts new file mode 100644 index 000000000000..d4ff3420ba4b --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartSubtitleComponent + ], + exports: [ + DxoChartSubtitleComponent + ], +}) +export class DxoChartSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/tick-interval.ts b/packages/devextreme-angular/src/ui/chart/nested/tick-interval.ts new file mode 100644 index 000000000000..cddccb0cf1e1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/tick-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-tick-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartTickIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'tickInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartTickIntervalComponent + ], + exports: [ + DxoChartTickIntervalComponent + ], +}) +export class DxoChartTickIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/tick.ts b/packages/devextreme-angular/src/ui/chart/nested/tick.ts new file mode 100644 index 000000000000..bc04fac8f1bd --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/tick.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get shift(): number { + return this._getOption('shift'); + } + set shift(value: number) { + this._setOption('shift', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'tick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartTickComponent + ], + exports: [ + DxoChartTickComponent + ], +}) +export class DxoChartTickModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/title.ts b/packages/devextreme-angular/src/ui/chart/nested/title.ts new file mode 100644 index 000000000000..c21cf534a3b9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/title.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get alignment(): HorizontalAlignment { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment) { + this._setOption('alignment', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment | undefined { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment | undefined) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartTitleComponent + ], + exports: [ + DxoChartTitleComponent + ], +}) +export class DxoChartTitleModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/tooltip.ts b/packages/devextreme-angular/src/ui/chart/nested/tooltip.ts new file mode 100644 index 000000000000..be9adcab2dc6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/tooltip.ts @@ -0,0 +1,220 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; +import { ChartTooltipLocation } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get location(): ChartTooltipLocation { + return this._getOption('location'); + } + set location(value: ChartTooltipLocation) { + this._setOption('location', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get shared(): boolean { + return this._getOption('shared'); + } + set shared(value: boolean) { + this._setOption('shared', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartTooltipComponent + ], + exports: [ + DxoChartTooltipComponent + ], +}) +export class DxoChartTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/url.ts b/packages/devextreme-angular/src/ui/chart/nested/url.ts new file mode 100644 index 000000000000..a2e8a4b4f601 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/url.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-url', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartUrlComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get rangeMaxPoint(): string | undefined { + return this._getOption('rangeMaxPoint'); + } + set rangeMaxPoint(value: string | undefined) { + this._setOption('rangeMaxPoint', value); + } + + @Input() + get rangeMinPoint(): string | undefined { + return this._getOption('rangeMinPoint'); + } + set rangeMinPoint(value: string | undefined) { + this._setOption('rangeMinPoint', value); + } + + + protected get _optionPath() { + return 'url'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartUrlComponent + ], + exports: [ + DxoChartUrlComponent + ], +}) +export class DxoChartUrlModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts new file mode 100644 index 000000000000..822a33e1a815 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts @@ -0,0 +1,497 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { HorizontalAlignment, Position, VerticalAlignment } from 'devextreme/common'; +import { AxisScaleType, ChartsAxisLabelOverlap, ChartsDataType, DashStyle, DiscreteAxisDivisionMode, Font, RelativePosition, ScaleBreak, ScaleBreakLineStyle, TextOverflow, TimeInterval, VisualRange, VisualRangeUpdateMode, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { AggregatedPointsPosition, ChartLabelDisplayMode } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiChartBreakComponent } from './break-dxi'; +import { DxiChartConstantLineComponent } from './constant-line-dxi'; +import { DxiChartStripComponent } from './strip-dxi'; + + +@Component({ + selector: 'dxi-chart-value-axis', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChartValueAxisComponent extends CollectionNestedOption { + @Input() + get aggregatedPointsPosition(): AggregatedPointsPosition { + return this._getOption('aggregatedPointsPosition'); + } + set aggregatedPointsPosition(value: AggregatedPointsPosition) { + this._setOption('aggregatedPointsPosition', value); + } + + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get autoBreaksEnabled(): boolean { + return this._getOption('autoBreaksEnabled'); + } + set autoBreaksEnabled(value: boolean) { + this._setOption('autoBreaksEnabled', value); + } + + @Input() + get axisDivisionFactor(): number { + return this._getOption('axisDivisionFactor'); + } + set axisDivisionFactor(value: number) { + this._setOption('axisDivisionFactor', value); + } + + @Input() + get breaks(): Array { + return this._getOption('breaks'); + } + set breaks(value: Array) { + this._setOption('breaks', value); + } + + @Input() + get breakStyle(): { color?: string, line?: ScaleBreakLineStyle, width?: number } { + return this._getOption('breakStyle'); + } + set breakStyle(value: { color?: string, line?: ScaleBreakLineStyle, width?: number }) { + this._setOption('breakStyle', value); + } + + @Input() + get categories(): Array { + return this._getOption('categories'); + } + set categories(value: Array) { + this._setOption('categories', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get constantLines(): Array { + return this._getOption('constantLines'); + } + set constantLines(value: Array) { + this._setOption('constantLines', value); + } + + @Input() + get constantLineStyle(): { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number } { + return this._getOption('constantLineStyle'); + } + set constantLineStyle(value: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }) { + this._setOption('constantLineStyle', value); + } + + @Input() + get customPosition(): Date | number | string | undefined { + return this._getOption('customPosition'); + } + set customPosition(value: Date | number | string | undefined) { + this._setOption('customPosition', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean | undefined { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean | undefined) { + this._setOption('endOnTick', value); + } + + @Input() + get grid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('grid'); + } + set grid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('grid', value); + } + + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment | undefined, customizeHint?: Function, customizeText?: Function, displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: RelativePosition | Position, rotationAngle?: number, staggeringSpacing?: number, template?: any | undefined, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment | undefined, customizeHint?: Function, customizeText?: Function, displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: RelativePosition | Position, rotationAngle?: number, staggeringSpacing?: number, template?: any | undefined, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }) { + this._setOption('label', value); + } + + @Input() + get linearThreshold(): number | undefined { + return this._getOption('linearThreshold'); + } + set linearThreshold(value: number | undefined) { + this._setOption('linearThreshold', value); + } + + @Input() + get logarithmBase(): number { + return this._getOption('logarithmBase'); + } + set logarithmBase(value: number) { + this._setOption('logarithmBase', value); + } + + @Input() + get maxAutoBreakCount(): number { + return this._getOption('maxAutoBreakCount'); + } + set maxAutoBreakCount(value: number) { + this._setOption('maxAutoBreakCount', value); + } + + @Input() + get maxValueMargin(): number | undefined { + return this._getOption('maxValueMargin'); + } + set maxValueMargin(value: number | undefined) { + this._setOption('maxValueMargin', value); + } + + @Input() + get minorGrid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('minorGrid'); + } + set minorGrid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('minorGrid', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickCount(): number | undefined { + return this._getOption('minorTickCount'); + } + set minorTickCount(value: number | undefined) { + this._setOption('minorTickCount', value); + } + + @Input() + get minorTickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minorTickInterval', value); + } + + @Input() + get minValueMargin(): number | undefined { + return this._getOption('minValueMargin'); + } + set minValueMargin(value: number | undefined) { + this._setOption('minValueMargin', value); + } + + @Input() + get minVisualRangeLength(): TimeInterval | number | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minVisualRangeLength'); + } + set minVisualRangeLength(value: TimeInterval | number | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minVisualRangeLength', value); + } + + @Input() + get multipleAxesSpacing(): number { + return this._getOption('multipleAxesSpacing'); + } + set multipleAxesSpacing(value: number) { + this._setOption('multipleAxesSpacing', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get offset(): number | undefined { + return this._getOption('offset'); + } + set offset(value: number | undefined) { + this._setOption('offset', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get pane(): string | undefined { + return this._getOption('pane'); + } + set pane(value: string | undefined) { + this._setOption('pane', value); + } + + @Input() + get placeholderSize(): number { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number) { + this._setOption('placeholderSize', value); + } + + @Input() + get position(): Position { + return this._getOption('position'); + } + set position(value: Position) { + this._setOption('position', value); + } + + @Input() + get showZero(): boolean | undefined { + return this._getOption('showZero'); + } + set showZero(value: boolean | undefined) { + this._setOption('showZero', value); + } + + @Input() + get strips(): Array { + return this._getOption('strips'); + } + set strips(value: Array) { + this._setOption('strips', value); + } + + @Input() + get stripStyle(): { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number } { + return this._getOption('stripStyle'); + } + set stripStyle(value: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }) { + this._setOption('stripStyle', value); + } + + @Input() + get synchronizedValue(): number | undefined { + return this._getOption('synchronizedValue'); + } + set synchronizedValue(value: number | undefined) { + this._setOption('synchronizedValue', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('tickInterval'); + } + set tickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('tickInterval', value); + } + + @Input() + get title(): string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('title'); + } + set title(value: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('title', value); + } + + @Input() + get type(): AxisScaleType | undefined { + return this._getOption('type'); + } + set type(value: AxisScaleType | undefined) { + this._setOption('type', value); + } + + @Input() + get valueMarginsEnabled(): boolean { + return this._getOption('valueMarginsEnabled'); + } + set valueMarginsEnabled(value: boolean) { + this._setOption('valueMarginsEnabled', value); + } + + @Input() + get valueType(): ChartsDataType | undefined { + return this._getOption('valueType'); + } + set valueType(value: ChartsDataType | undefined) { + this._setOption('valueType', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visualRange(): VisualRange | Array { + return this._getOption('visualRange'); + } + set visualRange(value: VisualRange | Array) { + this._setOption('visualRange', value); + } + + @Input() + get visualRangeUpdateMode(): VisualRangeUpdateMode { + return this._getOption('visualRangeUpdateMode'); + } + set visualRangeUpdateMode(value: VisualRangeUpdateMode) { + this._setOption('visualRangeUpdateMode', value); + } + + @Input() + get wholeRange(): VisualRange | undefined | Array { + return this._getOption('wholeRange'); + } + set wholeRange(value: VisualRange | undefined | Array) { + this._setOption('wholeRange', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() categoriesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visualRangeChange: EventEmitter>; + protected get _optionPath() { + return 'valueAxis'; + } + + + @ContentChildren(forwardRef(() => DxiChartBreakComponent)) + get breaksChildren(): QueryList { + return this._getOption('breaks'); + } + set breaksChildren(value) { + this.setChildren('breaks', value); + } + + @ContentChildren(forwardRef(() => DxiChartConstantLineComponent)) + get constantLinesChildren(): QueryList { + return this._getOption('constantLines'); + } + set constantLinesChildren(value) { + this.setChildren('constantLines', value); + } + + @ContentChildren(forwardRef(() => DxiChartStripComponent)) + get stripsChildren(): QueryList { + return this._getOption('strips'); + } + set stripsChildren(value) { + this.setChildren('strips', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'categoriesChange' }, + { emit: 'visualRangeChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChartValueAxisComponent + ], + exports: [ + DxiChartValueAxisComponent + ], +}) +export class DxiChartValueAxisModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/value-error-bar.ts b/packages/devextreme-angular/src/ui/chart/nested/value-error-bar.ts new file mode 100644 index 000000000000..10ef5eba62f0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/value-error-bar.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-value-error-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartValueErrorBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get displayMode(): ValueErrorBarDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: ValueErrorBarDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get edgeLength(): number { + return this._getOption('edgeLength'); + } + set edgeLength(value: number) { + this._setOption('edgeLength', value); + } + + @Input() + get highValueField(): string | undefined { + return this._getOption('highValueField'); + } + set highValueField(value: string | undefined) { + this._setOption('highValueField', value); + } + + @Input() + get lineWidth(): number { + return this._getOption('lineWidth'); + } + set lineWidth(value: number) { + this._setOption('lineWidth', value); + } + + @Input() + get lowValueField(): string | undefined { + return this._getOption('lowValueField'); + } + set lowValueField(value: string | undefined) { + this._setOption('lowValueField', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get type(): ValueErrorBarType | undefined { + return this._getOption('type'); + } + set type(value: ValueErrorBarType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): number { + return this._getOption('value'); + } + set value(value: number) { + this._setOption('value', value); + } + + + protected get _optionPath() { + return 'valueErrorBar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartValueErrorBarComponent + ], + exports: [ + DxoChartValueErrorBarComponent + ], +}) +export class DxoChartValueErrorBarModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/vertical-line.ts b/packages/devextreme-angular/src/ui/chart/nested/vertical-line.ts new file mode 100644 index 000000000000..7b7ac04afb7d --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/vertical-line.ts @@ -0,0 +1,114 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-vertical-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartVerticalLineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get label(): { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { backgroundColor?: string, customizeText?: Function, font?: Font, format?: Format | string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'verticalLine'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartVerticalLineComponent + ], + exports: [ + DxoChartVerticalLineComponent + ], +}) +export class DxoChartVerticalLineModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/width.ts b/packages/devextreme-angular/src/ui/chart/nested/width.ts new file mode 100644 index 000000000000..114746775107 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/width.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-width', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartWidthComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get rangeMaxPoint(): number | undefined { + return this._getOption('rangeMaxPoint'); + } + set rangeMaxPoint(value: number | undefined) { + this._setOption('rangeMaxPoint', value); + } + + @Input() + get rangeMinPoint(): number | undefined { + return this._getOption('rangeMinPoint'); + } + set rangeMinPoint(value: number | undefined) { + this._setOption('rangeMinPoint', value); + } + + + protected get _optionPath() { + return 'width'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartWidthComponent + ], + exports: [ + DxoChartWidthComponent + ], +}) +export class DxoChartWidthModule { } diff --git a/packages/devextreme-angular/src/ui/chart/nested/zoom-and-pan.ts b/packages/devextreme-angular/src/ui/chart/nested/zoom-and-pan.ts new file mode 100644 index 000000000000..df4e78b55a21 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chart/nested/zoom-and-pan.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartZoomAndPanMode, EventKeyModifier } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chart-zoom-and-pan', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChartZoomAndPanComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowMouseWheel(): boolean { + return this._getOption('allowMouseWheel'); + } + set allowMouseWheel(value: boolean) { + this._setOption('allowMouseWheel', value); + } + + @Input() + get allowTouchGestures(): boolean { + return this._getOption('allowTouchGestures'); + } + set allowTouchGestures(value: boolean) { + this._setOption('allowTouchGestures', value); + } + + @Input() + get argumentAxis(): ChartZoomAndPanMode { + return this._getOption('argumentAxis'); + } + set argumentAxis(value: ChartZoomAndPanMode) { + this._setOption('argumentAxis', value); + } + + @Input() + get dragBoxStyle(): { color?: string | undefined, opacity?: number | undefined } { + return this._getOption('dragBoxStyle'); + } + set dragBoxStyle(value: { color?: string | undefined, opacity?: number | undefined }) { + this._setOption('dragBoxStyle', value); + } + + @Input() + get dragToZoom(): boolean { + return this._getOption('dragToZoom'); + } + set dragToZoom(value: boolean) { + this._setOption('dragToZoom', value); + } + + @Input() + get panKey(): EventKeyModifier { + return this._getOption('panKey'); + } + set panKey(value: EventKeyModifier) { + this._setOption('panKey', value); + } + + @Input() + get valueAxis(): ChartZoomAndPanMode { + return this._getOption('valueAxis'); + } + set valueAxis(value: ChartZoomAndPanMode) { + this._setOption('valueAxis', value); + } + + + protected get _optionPath() { + return 'zoomAndPan'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChartZoomAndPanComponent + ], + exports: [ + DxoChartZoomAndPanComponent + ], +}) +export class DxoChartZoomAndPanModule { } diff --git a/packages/devextreme-angular/src/ui/chat/index.ts b/packages/devextreme-angular/src/ui/chat/index.ts index e5d571d69498..2f76a1ee14bd 100644 --- a/packages/devextreme-angular/src/ui/chat/index.ts +++ b/packages/devextreme-angular/src/ui/chat/index.ts @@ -41,8 +41,13 @@ import { DxiItemModule } from 'devextreme-angular/ui/nested'; import { DxoAuthorModule } from 'devextreme-angular/ui/nested'; import { DxoUserModule } from 'devextreme-angular/ui/nested'; +import { DxiChatItemModule } from 'devextreme-angular/ui/chat/nested'; +import { DxoChatAuthorModule } from 'devextreme-angular/ui/chat/nested'; +import { DxoChatUserModule } from 'devextreme-angular/ui/chat/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiChatItemComponent } from 'devextreme-angular/ui/chat/nested'; /** @@ -296,15 +301,27 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiChatItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiChatItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -380,6 +397,9 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges DxiItemModule, DxoAuthorModule, DxoUserModule, + DxiChatItemModule, + DxoChatAuthorModule, + DxoChatUserModule, DxIntegrationModule, DxTemplateModule ], @@ -391,6 +411,9 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges DxiItemModule, DxoAuthorModule, DxoUserModule, + DxiChatItemModule, + DxoChatAuthorModule, + DxoChatUserModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/chat/nested/author.ts b/packages/devextreme-angular/src/ui/chat/nested/author.ts new file mode 100644 index 000000000000..55e3c7996ea8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chat/nested/author.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chat-author', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChatAuthorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get avatarUrl(): string { + return this._getOption('avatarUrl'); + } + set avatarUrl(value: string) { + this._setOption('avatarUrl', value); + } + + @Input() + get id(): number | string { + return this._getOption('id'); + } + set id(value: number | string) { + this._setOption('id', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'author'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChatAuthorComponent + ], + exports: [ + DxoChatAuthorComponent + ], +}) +export class DxoChatAuthorModule { } diff --git a/packages/devextreme-angular/src/ui/chat/nested/index.ts b/packages/devextreme-angular/src/ui/chat/nested/index.ts new file mode 100644 index 000000000000..4484a9761ed1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chat/nested/index.ts @@ -0,0 +1,4 @@ +export * from './author'; +export * from './item-dxi'; +export * from './user'; + diff --git a/packages/devextreme-angular/src/ui/chat/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/chat/nested/item-dxi.ts new file mode 100644 index 000000000000..10bfc5fbca89 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chat/nested/item-dxi.ts @@ -0,0 +1,91 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { User } from 'devextreme/ui/chat'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-chat-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiChatItemComponent extends CollectionNestedOption { + @Input() + get author(): User | undefined { + return this._getOption('author'); + } + set author(value: User | undefined) { + this._setOption('author', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get timestamp(): string { + return this._getOption('timestamp'); + } + set timestamp(value: string) { + this._setOption('timestamp', value); + } + + @Input() + get typing(): boolean { + return this._getOption('typing'); + } + set typing(value: boolean) { + this._setOption('typing', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiChatItemComponent + ], + exports: [ + DxiChatItemComponent + ], +}) +export class DxiChatItemModule { } diff --git a/packages/devextreme-angular/src/ui/chat/nested/ng-package.json b/packages/devextreme-angular/src/ui/chat/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chat/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/chat/nested/user.ts b/packages/devextreme-angular/src/ui/chat/nested/user.ts new file mode 100644 index 000000000000..8194c81a91a6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/chat/nested/user.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-chat-user', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoChatUserComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get avatarUrl(): string { + return this._getOption('avatarUrl'); + } + set avatarUrl(value: string) { + this._setOption('avatarUrl', value); + } + + @Input() + get id(): number | string { + return this._getOption('id'); + } + set id(value: number | string) { + this._setOption('id', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'user'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoChatUserComponent + ], + exports: [ + DxoChatUserComponent + ], +}) +export class DxoChatUserModule { } diff --git a/packages/devextreme-angular/src/ui/check-box/index.ts b/packages/devextreme-angular/src/ui/check-box/index.ts index c33d0794fe0e..a2d035426144 100644 --- a/packages/devextreme-angular/src/ui/check-box/index.ts +++ b/packages/devextreme-angular/src/ui/check-box/index.ts @@ -47,6 +47,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxCheckBoxComponent), @@ -625,6 +626,7 @@ export class DxCheckBoxComponent extends DxComponent implements OnDestroy, Contr + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/circular-gauge/index.ts b/packages/devextreme-angular/src/ui/circular-gauge/index.ts index a14f7dea19c6..a148037199c3 100644 --- a/packages/devextreme-angular/src/ui/circular-gauge/index.ts +++ b/packages/devextreme-angular/src/ui/circular-gauge/index.ts @@ -65,6 +65,31 @@ import { DxoBorderModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; import { DxoValueIndicatorModule } from 'devextreme-angular/ui/nested'; +import { DxoCircularGaugeAnimationModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeExportModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeGeometryModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeLoadingIndicatorModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeFontModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeMarginModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeRangeContainerModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeBackgroundColorModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxiCircularGaugeRangeModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeColorModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeScaleModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeLabelModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeFormatModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeMinorTickModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeTickModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeSizeModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeSubvalueIndicatorModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeTextModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeTitleModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeSubtitleModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeTooltipModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeBorderModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeShadowModule } from 'devextreme-angular/ui/circular-gauge/nested'; +import { DxoCircularGaugeValueIndicatorModule } from 'devextreme-angular/ui/circular-gauge/nested'; + @@ -611,6 +636,7 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy, + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -723,6 +749,30 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy, DxoBorderModule, DxoShadowModule, DxoValueIndicatorModule, + DxoCircularGaugeAnimationModule, + DxoCircularGaugeExportModule, + DxoCircularGaugeGeometryModule, + DxoCircularGaugeLoadingIndicatorModule, + DxoCircularGaugeFontModule, + DxoCircularGaugeMarginModule, + DxoCircularGaugeRangeContainerModule, + DxoCircularGaugeBackgroundColorModule, + DxiCircularGaugeRangeModule, + DxoCircularGaugeColorModule, + DxoCircularGaugeScaleModule, + DxoCircularGaugeLabelModule, + DxoCircularGaugeFormatModule, + DxoCircularGaugeMinorTickModule, + DxoCircularGaugeTickModule, + DxoCircularGaugeSizeModule, + DxoCircularGaugeSubvalueIndicatorModule, + DxoCircularGaugeTextModule, + DxoCircularGaugeTitleModule, + DxoCircularGaugeSubtitleModule, + DxoCircularGaugeTooltipModule, + DxoCircularGaugeBorderModule, + DxoCircularGaugeShadowModule, + DxoCircularGaugeValueIndicatorModule, DxIntegrationModule, DxTemplateModule ], @@ -755,6 +805,30 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy, DxoBorderModule, DxoShadowModule, DxoValueIndicatorModule, + DxoCircularGaugeAnimationModule, + DxoCircularGaugeExportModule, + DxoCircularGaugeGeometryModule, + DxoCircularGaugeLoadingIndicatorModule, + DxoCircularGaugeFontModule, + DxoCircularGaugeMarginModule, + DxoCircularGaugeRangeContainerModule, + DxoCircularGaugeBackgroundColorModule, + DxiCircularGaugeRangeModule, + DxoCircularGaugeColorModule, + DxoCircularGaugeScaleModule, + DxoCircularGaugeLabelModule, + DxoCircularGaugeFormatModule, + DxoCircularGaugeMinorTickModule, + DxoCircularGaugeTickModule, + DxoCircularGaugeSizeModule, + DxoCircularGaugeSubvalueIndicatorModule, + DxoCircularGaugeTextModule, + DxoCircularGaugeTitleModule, + DxoCircularGaugeSubtitleModule, + DxoCircularGaugeTooltipModule, + DxoCircularGaugeBorderModule, + DxoCircularGaugeShadowModule, + DxoCircularGaugeValueIndicatorModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/animation.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/animation.ts new file mode 100644 index 000000000000..abf332815cff --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/animation.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationEaseMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): AnimationEaseMode { + return this._getOption('easing'); + } + set easing(value: AnimationEaseMode) { + this._setOption('easing', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeAnimationComponent + ], + exports: [ + DxoCircularGaugeAnimationComponent + ], +}) +export class DxoCircularGaugeAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/background-color.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/background-color.ts new file mode 100644 index 000000000000..98f8bcbdb074 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/background-color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-background-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeBackgroundColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'backgroundColor'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeBackgroundColorComponent + ], + exports: [ + DxoCircularGaugeBackgroundColorComponent + ], +}) +export class DxoCircularGaugeBackgroundColorModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/border.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/border.ts new file mode 100644 index 000000000000..2af582a8bbc3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/border.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeBorderComponent + ], + exports: [ + DxoCircularGaugeBorderComponent + ], +}) +export class DxoCircularGaugeBorderModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/color.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/color.ts new file mode 100644 index 000000000000..ba8d3e2e6b86 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'color'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeColorComponent + ], + exports: [ + DxoCircularGaugeColorComponent + ], +}) +export class DxoCircularGaugeColorModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/export.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/export.ts new file mode 100644 index 000000000000..ef723c2d9ccf --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeExportComponent + ], + exports: [ + DxoCircularGaugeExportComponent + ], +}) +export class DxoCircularGaugeExportModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/font.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/font.ts new file mode 100644 index 000000000000..b58ce95ba236 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeFontComponent + ], + exports: [ + DxoCircularGaugeFontComponent + ], +}) +export class DxoCircularGaugeFontModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/format.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/format.ts new file mode 100644 index 000000000000..99fba08db67a --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeFormatComponent + ], + exports: [ + DxoCircularGaugeFormatComponent + ], +}) +export class DxoCircularGaugeFormatModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/geometry.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/geometry.ts new file mode 100644 index 000000000000..2b8d74c2ad8d --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/geometry.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-geometry', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeGeometryComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get endAngle(): number { + return this._getOption('endAngle'); + } + set endAngle(value: number) { + this._setOption('endAngle', value); + } + + @Input() + get startAngle(): number { + return this._getOption('startAngle'); + } + set startAngle(value: number) { + this._setOption('startAngle', value); + } + + + protected get _optionPath() { + return 'geometry'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeGeometryComponent + ], + exports: [ + DxoCircularGaugeGeometryComponent + ], +}) +export class DxoCircularGaugeGeometryModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/index.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/index.ts new file mode 100644 index 000000000000..7659f47bbf9d --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/index.ts @@ -0,0 +1,25 @@ +export * from './animation'; +export * from './background-color'; +export * from './border'; +export * from './color'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './geometry'; +export * from './label'; +export * from './loading-indicator'; +export * from './margin'; +export * from './minor-tick'; +export * from './range-container'; +export * from './range-dxi'; +export * from './scale'; +export * from './shadow'; +export * from './size'; +export * from './subtitle'; +export * from './subvalue-indicator'; +export * from './text'; +export * from './tick'; +export * from './title'; +export * from './tooltip'; +export * from './value-indicator'; + diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/label.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/label.ts new file mode 100644 index 000000000000..62fab7435102 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/label.ts @@ -0,0 +1,131 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, LabelOverlap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { CircularGaugeLabelOverlap } from 'devextreme/viz/circular_gauge'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get hideFirstOrLast(): CircularGaugeLabelOverlap { + return this._getOption('hideFirstOrLast'); + } + set hideFirstOrLast(value: CircularGaugeLabelOverlap) { + this._setOption('hideFirstOrLast', value); + } + + @Input() + get indentFromTick(): number { + return this._getOption('indentFromTick'); + } + set indentFromTick(value: number) { + this._setOption('indentFromTick', value); + } + + @Input() + get overlappingBehavior(): LabelOverlap { + return this._getOption('overlappingBehavior'); + } + set overlappingBehavior(value: LabelOverlap) { + this._setOption('overlappingBehavior', value); + } + + @Input() + get useRangeColors(): boolean { + return this._getOption('useRangeColors'); + } + set useRangeColors(value: boolean) { + this._setOption('useRangeColors', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeLabelComponent + ], + exports: [ + DxoCircularGaugeLabelComponent + ], +}) +export class DxoCircularGaugeLabelModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/loading-indicator.ts new file mode 100644 index 000000000000..e38b1e490a36 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/loading-indicator.ts @@ -0,0 +1,110 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeLoadingIndicatorComponent + ], + exports: [ + DxoCircularGaugeLoadingIndicatorComponent + ], +}) +export class DxoCircularGaugeLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/margin.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/margin.ts new file mode 100644 index 000000000000..d3a24a4952a3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeMarginComponent + ], + exports: [ + DxoCircularGaugeMarginComponent + ], +}) +export class DxoCircularGaugeMarginModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/minor-tick.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/minor-tick.ts new file mode 100644 index 000000000000..28ce66666f62 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/minor-tick.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-minor-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeMinorTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorTick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeMinorTickComponent + ], + exports: [ + DxoCircularGaugeMinorTickComponent + ], +}) +export class DxoCircularGaugeMinorTickModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/ng-package.json b/packages/devextreme-angular/src/ui/circular-gauge/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/range-container.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/range-container.ts new file mode 100644 index 000000000000..c164a16bcd97 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/range-container.ts @@ -0,0 +1,134 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ChartsColor, Palette, PaletteExtensionMode } from 'devextreme/common/charts'; +import { CircularGaugeElementOrientation } from 'devextreme/viz/circular_gauge'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiCircularGaugeRangeComponent } from './range-dxi'; + + +@Component({ + selector: 'dxo-circular-gauge-range-container', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeRangeContainerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): ChartsColor | string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: ChartsColor | string) { + this._setOption('backgroundColor', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get orientation(): CircularGaugeElementOrientation { + return this._getOption('orientation'); + } + set orientation(value: CircularGaugeElementOrientation) { + this._setOption('orientation', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get paletteExtensionMode(): PaletteExtensionMode { + return this._getOption('paletteExtensionMode'); + } + set paletteExtensionMode(value: PaletteExtensionMode) { + this._setOption('paletteExtensionMode', value); + } + + @Input() + get ranges(): Array { + return this._getOption('ranges'); + } + set ranges(value: Array) { + this._setOption('ranges', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'rangeContainer'; + } + + + @ContentChildren(forwardRef(() => DxiCircularGaugeRangeComponent)) + get rangesChildren(): QueryList { + return this._getOption('ranges'); + } + set rangesChildren(value) { + this.setChildren('ranges', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeRangeContainerComponent + ], + exports: [ + DxoCircularGaugeRangeContainerComponent + ], +}) +export class DxoCircularGaugeRangeContainerModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/range-dxi.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/range-dxi.ts new file mode 100644 index 000000000000..40629991d51b --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/range-dxi.ts @@ -0,0 +1,83 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-circular-gauge-range', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiCircularGaugeRangeComponent extends CollectionNestedOption { + @Input() + get color(): ChartsColor | string { + return this._getOption('color'); + } + set color(value: ChartsColor | string) { + this._setOption('color', value); + } + + @Input() + get endValue(): number { + return this._getOption('endValue'); + } + set endValue(value: number) { + this._setOption('endValue', value); + } + + @Input() + get startValue(): number { + return this._getOption('startValue'); + } + set startValue(value: number) { + this._setOption('startValue', value); + } + + + protected get _optionPath() { + return 'ranges'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiCircularGaugeRangeComponent + ], + exports: [ + DxiCircularGaugeRangeComponent + ], +}) +export class DxiCircularGaugeRangeModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts new file mode 100644 index 000000000000..3f4747a40ffd --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts @@ -0,0 +1,163 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, LabelOverlap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { CircularGaugeElementOrientation, CircularGaugeLabelOverlap } from 'devextreme/viz/circular_gauge'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-scale', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeScaleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get customMinorTicks(): Array { + return this._getOption('customMinorTicks'); + } + set customMinorTicks(value: Array) { + this._setOption('customMinorTicks', value); + } + + @Input() + get customTicks(): Array { + return this._getOption('customTicks'); + } + set customTicks(value: Array) { + this._setOption('customTicks', value); + } + + @Input() + get endValue(): number { + return this._getOption('endValue'); + } + set endValue(value: number) { + this._setOption('endValue', value); + } + + @Input() + get label(): { customizeText?: Function, font?: Font, format?: Format | string | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { customizeText?: Function, font?: Font, format?: Format | string | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickInterval(): number | undefined { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: number | undefined) { + this._setOption('minorTickInterval', value); + } + + @Input() + get orientation(): CircularGaugeElementOrientation { + return this._getOption('orientation'); + } + set orientation(value: CircularGaugeElementOrientation) { + this._setOption('orientation', value); + } + + @Input() + get scaleDivisionFactor(): number { + return this._getOption('scaleDivisionFactor'); + } + set scaleDivisionFactor(value: number) { + this._setOption('scaleDivisionFactor', value); + } + + @Input() + get startValue(): number { + return this._getOption('startValue'); + } + set startValue(value: number) { + this._setOption('startValue', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): number | undefined { + return this._getOption('tickInterval'); + } + set tickInterval(value: number | undefined) { + this._setOption('tickInterval', value); + } + + + protected get _optionPath() { + return 'scale'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeScaleComponent + ], + exports: [ + DxoCircularGaugeScaleComponent + ], +}) +export class DxoCircularGaugeScaleModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/shadow.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/shadow.ts new file mode 100644 index 000000000000..dc509b1085c1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeShadowComponent + ], + exports: [ + DxoCircularGaugeShadowComponent + ], +}) +export class DxoCircularGaugeShadowModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/size.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/size.ts new file mode 100644 index 000000000000..71129a8c98e3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeSizeComponent + ], + exports: [ + DxoCircularGaugeSizeComponent + ], +}) +export class DxoCircularGaugeSizeModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts new file mode 100644 index 000000000000..ac1e1cf507a0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeSubtitleComponent + ], + exports: [ + DxoCircularGaugeSubtitleComponent + ], +}) +export class DxoCircularGaugeSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/subvalue-indicator.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/subvalue-indicator.ts new file mode 100644 index 000000000000..6105bb807dc4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/subvalue-indicator.ts @@ -0,0 +1,219 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalEdge, VerticalEdge } from 'devextreme/common'; +import { ChartsColor, Font, Palette } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-subvalue-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeSubvalueIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get baseValue(): number | undefined { + return this._getOption('baseValue'); + } + set baseValue(value: number | undefined) { + this._setOption('baseValue', value); + } + + @Input() + get beginAdaptingAtRadius(): number { + return this._getOption('beginAdaptingAtRadius'); + } + set beginAdaptingAtRadius(value: number) { + this._setOption('beginAdaptingAtRadius', value); + } + + @Input() + get color(): ChartsColor | string { + return this._getOption('color'); + } + set color(value: ChartsColor | string) { + this._setOption('color', value); + } + + @Input() + get horizontalOrientation(): HorizontalEdge { + return this._getOption('horizontalOrientation'); + } + set horizontalOrientation(value: HorizontalEdge) { + this._setOption('horizontalOrientation', value); + } + + @Input() + get indentFromCenter(): number { + return this._getOption('indentFromCenter'); + } + set indentFromCenter(value: number) { + this._setOption('indentFromCenter', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get secondColor(): string { + return this._getOption('secondColor'); + } + set secondColor(value: string) { + this._setOption('secondColor', value); + } + + @Input() + get secondFraction(): number { + return this._getOption('secondFraction'); + } + set secondFraction(value: number) { + this._setOption('secondFraction', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get spindleGapSize(): number { + return this._getOption('spindleGapSize'); + } + set spindleGapSize(value: number) { + this._setOption('spindleGapSize', value); + } + + @Input() + get spindleSize(): number { + return this._getOption('spindleSize'); + } + set spindleSize(value: number) { + this._setOption('spindleSize', value); + } + + @Input() + get text(): { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number } { + return this._getOption('text'); + } + set text(value: { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number }) { + this._setOption('text', value); + } + + @Input() + get type(): string { + return this._getOption('type'); + } + set type(value: string) { + this._setOption('type', value); + } + + @Input() + get verticalOrientation(): VerticalEdge { + return this._getOption('verticalOrientation'); + } + set verticalOrientation(value: VerticalEdge) { + this._setOption('verticalOrientation', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'subvalueIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeSubvalueIndicatorComponent + ], + exports: [ + DxoCircularGaugeSubvalueIndicatorComponent + ], +}) +export class DxoCircularGaugeSubvalueIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/text.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/text.ts new file mode 100644 index 000000000000..d24a38d40929 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/text.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-text', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeTextComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeText(): Function | undefined { + return this._getOption('customizeText'); + } + set customizeText(value: Function | undefined) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get indent(): number { + return this._getOption('indent'); + } + set indent(value: number) { + this._setOption('indent', value); + } + + + protected get _optionPath() { + return 'text'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeTextComponent + ], + exports: [ + DxoCircularGaugeTextComponent + ], +}) +export class DxoCircularGaugeTextModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/tick.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/tick.ts new file mode 100644 index 000000000000..030ae23fd4e8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/tick.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'tick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeTickComponent + ], + exports: [ + DxoCircularGaugeTickComponent + ], +}) +export class DxoCircularGaugeTickModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts new file mode 100644 index 000000000000..a9ab1fce83c0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeTitleComponent + ], + exports: [ + DxoCircularGaugeTitleComponent + ], +}) +export class DxoCircularGaugeTitleModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/tooltip.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/tooltip.ts new file mode 100644 index 000000000000..d56cf5b76391 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/tooltip.ts @@ -0,0 +1,195 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeTooltipComponent + ], + exports: [ + DxoCircularGaugeTooltipComponent + ], +}) +export class DxoCircularGaugeTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/value-indicator.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/value-indicator.ts new file mode 100644 index 000000000000..81ad4bda6511 --- /dev/null +++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/value-indicator.ts @@ -0,0 +1,219 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalEdge, VerticalEdge } from 'devextreme/common'; +import { ChartsColor, Font, Palette } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-circular-gauge-value-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoCircularGaugeValueIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get baseValue(): number | undefined { + return this._getOption('baseValue'); + } + set baseValue(value: number | undefined) { + this._setOption('baseValue', value); + } + + @Input() + get beginAdaptingAtRadius(): number { + return this._getOption('beginAdaptingAtRadius'); + } + set beginAdaptingAtRadius(value: number) { + this._setOption('beginAdaptingAtRadius', value); + } + + @Input() + get color(): ChartsColor | string { + return this._getOption('color'); + } + set color(value: ChartsColor | string) { + this._setOption('color', value); + } + + @Input() + get horizontalOrientation(): HorizontalEdge { + return this._getOption('horizontalOrientation'); + } + set horizontalOrientation(value: HorizontalEdge) { + this._setOption('horizontalOrientation', value); + } + + @Input() + get indentFromCenter(): number { + return this._getOption('indentFromCenter'); + } + set indentFromCenter(value: number) { + this._setOption('indentFromCenter', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get secondColor(): string { + return this._getOption('secondColor'); + } + set secondColor(value: string) { + this._setOption('secondColor', value); + } + + @Input() + get secondFraction(): number { + return this._getOption('secondFraction'); + } + set secondFraction(value: number) { + this._setOption('secondFraction', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get spindleGapSize(): number { + return this._getOption('spindleGapSize'); + } + set spindleGapSize(value: number) { + this._setOption('spindleGapSize', value); + } + + @Input() + get spindleSize(): number { + return this._getOption('spindleSize'); + } + set spindleSize(value: number) { + this._setOption('spindleSize', value); + } + + @Input() + get text(): { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number } { + return this._getOption('text'); + } + set text(value: { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number }) { + this._setOption('text', value); + } + + @Input() + get type(): string { + return this._getOption('type'); + } + set type(value: string) { + this._setOption('type', value); + } + + @Input() + get verticalOrientation(): VerticalEdge { + return this._getOption('verticalOrientation'); + } + set verticalOrientation(value: VerticalEdge) { + this._setOption('verticalOrientation', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'valueIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoCircularGaugeValueIndicatorComponent + ], + exports: [ + DxoCircularGaugeValueIndicatorComponent + ], +}) +export class DxoCircularGaugeValueIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/index.ts b/packages/devextreme-angular/src/ui/color-box/index.ts index 004a03c6d08f..f504dfd5083a 100644 --- a/packages/devextreme-angular/src/ui/color-box/index.ts +++ b/packages/devextreme-angular/src/ui/color-box/index.ts @@ -60,10 +60,26 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; + +import { DxiColorBoxButtonModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxOptionsModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxDropDownOptionsModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxAnimationModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxHideModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxFromModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxPositionModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxAtModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxBoundaryOffsetModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxCollisionModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxMyModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxOffsetModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxToModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxoColorBoxShowModule } from 'devextreme-angular/ui/color-box/nested'; +import { DxiColorBoxToolbarItemModule } from 'devextreme-angular/ui/color-box/nested'; import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; +import { DxiColorBoxButtonComponent } from 'devextreme-angular/ui/color-box/nested'; @@ -1090,15 +1106,27 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiColorBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiColorBoxButtonComponent'); this.setChildren('buttons', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1253,7 +1281,21 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxiColorBoxButtonModule, + DxoColorBoxOptionsModule, + DxoColorBoxDropDownOptionsModule, + DxoColorBoxAnimationModule, + DxoColorBoxHideModule, + DxoColorBoxFromModule, + DxoColorBoxPositionModule, + DxoColorBoxAtModule, + DxoColorBoxBoundaryOffsetModule, + DxoColorBoxCollisionModule, + DxoColorBoxMyModule, + DxoColorBoxOffsetModule, + DxoColorBoxToModule, + DxoColorBoxShowModule, + DxiColorBoxToolbarItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1276,7 +1318,21 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxiColorBoxButtonModule, + DxoColorBoxOptionsModule, + DxoColorBoxDropDownOptionsModule, + DxoColorBoxAnimationModule, + DxoColorBoxHideModule, + DxoColorBoxFromModule, + DxoColorBoxPositionModule, + DxoColorBoxAtModule, + DxoColorBoxBoundaryOffsetModule, + DxoColorBoxCollisionModule, + DxoColorBoxMyModule, + DxoColorBoxOffsetModule, + DxoColorBoxToModule, + DxoColorBoxShowModule, + DxiColorBoxToolbarItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/color-box/nested/animation.ts b/packages/devextreme-angular/src/ui/color-box/nested/animation.ts new file mode 100644 index 000000000000..17e6fdaf455f --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxAnimationComponent + ], + exports: [ + DxoColorBoxAnimationComponent + ], +}) +export class DxoColorBoxAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/at.ts b/packages/devextreme-angular/src/ui/color-box/nested/at.ts new file mode 100644 index 000000000000..c2cb84c8b0ad --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxAtComponent + ], + exports: [ + DxoColorBoxAtComponent + ], +}) +export class DxoColorBoxAtModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/color-box/nested/boundary-offset.ts new file mode 100644 index 000000000000..87133c3ff31e --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxBoundaryOffsetComponent + ], + exports: [ + DxoColorBoxBoundaryOffsetComponent + ], +}) +export class DxoColorBoxBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/color-box/nested/button-dxi.ts new file mode 100644 index 000000000000..fc65a5644dfa --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-color-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiColorBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiColorBoxButtonComponent + ], + exports: [ + DxiColorBoxButtonComponent + ], +}) +export class DxiColorBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/collision.ts b/packages/devextreme-angular/src/ui/color-box/nested/collision.ts new file mode 100644 index 000000000000..6b91b5e9a69f --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxCollisionComponent + ], + exports: [ + DxoColorBoxCollisionComponent + ], +}) +export class DxoColorBoxCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts new file mode 100644 index 000000000000..2279919233d6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiColorBoxToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-color-box-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiColorBoxToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxDropDownOptionsComponent + ], + exports: [ + DxoColorBoxDropDownOptionsComponent + ], +}) +export class DxoColorBoxDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/from.ts b/packages/devextreme-angular/src/ui/color-box/nested/from.ts new file mode 100644 index 000000000000..153eca2035c8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxFromComponent + ], + exports: [ + DxoColorBoxFromComponent + ], +}) +export class DxoColorBoxFromModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/hide.ts b/packages/devextreme-angular/src/ui/color-box/nested/hide.ts new file mode 100644 index 000000000000..07aef846a774 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxHideComponent + ], + exports: [ + DxoColorBoxHideComponent + ], +}) +export class DxoColorBoxHideModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/index.ts b/packages/devextreme-angular/src/ui/color-box/nested/index.ts new file mode 100644 index 000000000000..a5926253bf21 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/index.ts @@ -0,0 +1,16 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/color-box/nested/my.ts b/packages/devextreme-angular/src/ui/color-box/nested/my.ts new file mode 100644 index 000000000000..05273c1b51c2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxMyComponent + ], + exports: [ + DxoColorBoxMyComponent + ], +}) +export class DxoColorBoxMyModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/color-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/color-box/nested/offset.ts b/packages/devextreme-angular/src/ui/color-box/nested/offset.ts new file mode 100644 index 000000000000..b124aa87faea --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxOffsetComponent + ], + exports: [ + DxoColorBoxOffsetComponent + ], +}) +export class DxoColorBoxOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/options.ts b/packages/devextreme-angular/src/ui/color-box/nested/options.ts new file mode 100644 index 000000000000..9e50a15e6849 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxOptionsComponent + ], + exports: [ + DxoColorBoxOptionsComponent + ], +}) +export class DxoColorBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/position.ts b/packages/devextreme-angular/src/ui/color-box/nested/position.ts new file mode 100644 index 000000000000..22cb204d33c9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxPositionComponent + ], + exports: [ + DxoColorBoxPositionComponent + ], +}) +export class DxoColorBoxPositionModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/show.ts b/packages/devextreme-angular/src/ui/color-box/nested/show.ts new file mode 100644 index 000000000000..449c50ff1b3d --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxShowComponent + ], + exports: [ + DxoColorBoxShowComponent + ], +}) +export class DxoColorBoxShowModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/to.ts b/packages/devextreme-angular/src/ui/color-box/nested/to.ts new file mode 100644 index 000000000000..a7b9b3051f3f --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-color-box-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoColorBoxToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoColorBoxToComponent + ], + exports: [ + DxoColorBoxToComponent + ], +}) +export class DxoColorBoxToModule { } diff --git a/packages/devextreme-angular/src/ui/color-box/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/color-box/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..c12b5e64c961 --- /dev/null +++ b/packages/devextreme-angular/src/ui/color-box/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-color-box-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiColorBoxToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiColorBoxToolbarItemComponent + ], + exports: [ + DxiColorBoxToolbarItemComponent + ], +}) +export class DxiColorBoxToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/index.ts b/packages/devextreme-angular/src/ui/context-menu/index.ts index 6493581eaf36..565383d6b45c 100644 --- a/packages/devextreme-angular/src/ui/context-menu/index.ts +++ b/packages/devextreme-angular/src/ui/context-menu/index.ts @@ -60,8 +60,25 @@ import { DxoShowEventModule } from 'devextreme-angular/ui/nested'; import { DxoShowSubmenuModeModule } from 'devextreme-angular/ui/nested'; import { DxoDelayModule } from 'devextreme-angular/ui/nested'; +import { DxoContextMenuAnimationModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuHideModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuFromModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuPositionModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuAtModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuBoundaryOffsetModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuCollisionModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuMyModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuOffsetModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuToModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuShowModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxiContextMenuItemModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuShowEventModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuShowSubmenuModeModule } from 'devextreme-angular/ui/context-menu/nested'; +import { DxoContextMenuDelayModule } from 'devextreme-angular/ui/context-menu/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiContextMenuItemComponent } from 'devextreme-angular/ui/context-menu/nested'; /** @@ -809,15 +826,27 @@ export class DxContextMenuComponent extends DxComponent implements O - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiContextMenuItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiContextMenuItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -937,6 +966,21 @@ export class DxContextMenuComponent extends DxComponent implements O DxoShowEventModule, DxoShowSubmenuModeModule, DxoDelayModule, + DxoContextMenuAnimationModule, + DxoContextMenuHideModule, + DxoContextMenuFromModule, + DxoContextMenuPositionModule, + DxoContextMenuAtModule, + DxoContextMenuBoundaryOffsetModule, + DxoContextMenuCollisionModule, + DxoContextMenuMyModule, + DxoContextMenuOffsetModule, + DxoContextMenuToModule, + DxoContextMenuShowModule, + DxiContextMenuItemModule, + DxoContextMenuShowEventModule, + DxoContextMenuShowSubmenuModeModule, + DxoContextMenuDelayModule, DxIntegrationModule, DxTemplateModule ], @@ -960,6 +1004,21 @@ export class DxContextMenuComponent extends DxComponent implements O DxoShowEventModule, DxoShowSubmenuModeModule, DxoDelayModule, + DxoContextMenuAnimationModule, + DxoContextMenuHideModule, + DxoContextMenuFromModule, + DxoContextMenuPositionModule, + DxoContextMenuAtModule, + DxoContextMenuBoundaryOffsetModule, + DxoContextMenuCollisionModule, + DxoContextMenuMyModule, + DxoContextMenuOffsetModule, + DxoContextMenuToModule, + DxoContextMenuShowModule, + DxiContextMenuItemModule, + DxoContextMenuShowEventModule, + DxoContextMenuShowSubmenuModeModule, + DxoContextMenuDelayModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/animation.ts b/packages/devextreme-angular/src/ui/context-menu/nested/animation.ts new file mode 100644 index 000000000000..3a4b35d6ae27 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuAnimationComponent + ], + exports: [ + DxoContextMenuAnimationComponent + ], +}) +export class DxoContextMenuAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/at.ts b/packages/devextreme-angular/src/ui/context-menu/nested/at.ts new file mode 100644 index 000000000000..dd1be1fdf42f --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuAtComponent + ], + exports: [ + DxoContextMenuAtComponent + ], +}) +export class DxoContextMenuAtModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/context-menu/nested/boundary-offset.ts new file mode 100644 index 000000000000..6fa00f94342b --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuBoundaryOffsetComponent + ], + exports: [ + DxoContextMenuBoundaryOffsetComponent + ], +}) +export class DxoContextMenuBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/collision.ts b/packages/devextreme-angular/src/ui/context-menu/nested/collision.ts new file mode 100644 index 000000000000..5a545dec5ade --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuCollisionComponent + ], + exports: [ + DxoContextMenuCollisionComponent + ], +}) +export class DxoContextMenuCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/delay.ts b/packages/devextreme-angular/src/ui/context-menu/nested/delay.ts new file mode 100644 index 000000000000..c2e7d6d0524b --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/delay.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-delay', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuDelayComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): number { + return this._getOption('hide'); + } + set hide(value: number) { + this._setOption('hide', value); + } + + @Input() + get show(): number { + return this._getOption('show'); + } + set show(value: number) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'delay'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuDelayComponent + ], + exports: [ + DxoContextMenuDelayComponent + ], +}) +export class DxoContextMenuDelayModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/from.ts b/packages/devextreme-angular/src/ui/context-menu/nested/from.ts new file mode 100644 index 000000000000..a843a8b291c0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuFromComponent + ], + exports: [ + DxoContextMenuFromComponent + ], +}) +export class DxoContextMenuFromModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/hide.ts b/packages/devextreme-angular/src/ui/context-menu/nested/hide.ts new file mode 100644 index 000000000000..6d39630c9f1c --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuHideComponent + ], + exports: [ + DxoContextMenuHideComponent + ], +}) +export class DxoContextMenuHideModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/index.ts b/packages/devextreme-angular/src/ui/context-menu/nested/index.ts new file mode 100644 index 000000000000..de069267b8f4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/index.ts @@ -0,0 +1,16 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './delay'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show-event'; +export * from './show-submenu-mode'; +export * from './show'; +export * from './to'; + diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/context-menu/nested/item-dxi.ts new file mode 100644 index 000000000000..fa8404142d60 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/item-dxi.ts @@ -0,0 +1,150 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxContextMenuItem } from 'devextreme/ui/context_menu'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-context-menu-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiContextMenuItemComponent extends CollectionNestedOption { + @Input() + get beginGroup(): boolean { + return this._getOption('beginGroup'); + } + set beginGroup(value: boolean) { + this._setOption('beginGroup', value); + } + + @Input() + get closeMenuOnClick(): boolean { + return this._getOption('closeMenuOnClick'); + } + set closeMenuOnClick(value: boolean) { + this._setOption('closeMenuOnClick', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get selectable(): boolean { + return this._getOption('selectable'); + } + set selectable(value: boolean) { + this._setOption('selectable', value); + } + + @Input() + get selected(): boolean { + return this._getOption('selected'); + } + set selected(value: boolean) { + this._setOption('selected', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiContextMenuItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiContextMenuItemComponent + ], + exports: [ + DxiContextMenuItemComponent + ], +}) +export class DxiContextMenuItemModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/my.ts b/packages/devextreme-angular/src/ui/context-menu/nested/my.ts new file mode 100644 index 000000000000..9935d652d63a --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuMyComponent + ], + exports: [ + DxoContextMenuMyComponent + ], +}) +export class DxoContextMenuMyModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/ng-package.json b/packages/devextreme-angular/src/ui/context-menu/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/offset.ts b/packages/devextreme-angular/src/ui/context-menu/nested/offset.ts new file mode 100644 index 000000000000..834f596f288f --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuOffsetComponent + ], + exports: [ + DxoContextMenuOffsetComponent + ], +}) +export class DxoContextMenuOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/position.ts b/packages/devextreme-angular/src/ui/context-menu/nested/position.ts new file mode 100644 index 000000000000..460c52b51486 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuPositionComponent + ], + exports: [ + DxoContextMenuPositionComponent + ], +}) +export class DxoContextMenuPositionModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/show-event.ts b/packages/devextreme-angular/src/ui/context-menu/nested/show-event.ts new file mode 100644 index 000000000000..f18249459581 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/show-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-show-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuShowEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuShowEventComponent + ], + exports: [ + DxoContextMenuShowEventComponent + ], +}) +export class DxoContextMenuShowEventModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/show-submenu-mode.ts b/packages/devextreme-angular/src/ui/context-menu/nested/show-submenu-mode.ts new file mode 100644 index 000000000000..fd748d77ed35 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/show-submenu-mode.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SubmenuShowMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-show-submenu-mode', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuShowSubmenuModeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | { hide?: number, show?: number } { + return this._getOption('delay'); + } + set delay(value: number | { hide?: number, show?: number }) { + this._setOption('delay', value); + } + + @Input() + get name(): SubmenuShowMode { + return this._getOption('name'); + } + set name(value: SubmenuShowMode) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showSubmenuMode'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuShowSubmenuModeComponent + ], + exports: [ + DxoContextMenuShowSubmenuModeComponent + ], +}) +export class DxoContextMenuShowSubmenuModeModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/show.ts b/packages/devextreme-angular/src/ui/context-menu/nested/show.ts new file mode 100644 index 000000000000..e85170b98bce --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuShowComponent + ], + exports: [ + DxoContextMenuShowComponent + ], +}) +export class DxoContextMenuShowModule { } diff --git a/packages/devextreme-angular/src/ui/context-menu/nested/to.ts b/packages/devextreme-angular/src/ui/context-menu/nested/to.ts new file mode 100644 index 000000000000..2a62ccce7f31 --- /dev/null +++ b/packages/devextreme-angular/src/ui/context-menu/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-context-menu-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoContextMenuToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoContextMenuToComponent + ], + exports: [ + DxoContextMenuToComponent + ], +}) +export class DxoContextMenuToModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index 271be1ca9ba5..811896c9a4d7 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/index.ts @@ -81,7 +81,6 @@ import { DxoHideModule } from 'devextreme-angular/ui/nested'; import { DxoFromModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxoExportModule } from 'devextreme-angular/ui/nested'; import { DxoFilterBuilderModule } from 'devextreme-angular/ui/nested'; import { DxiCustomOperationModule } from 'devextreme-angular/ui/nested'; @@ -113,9 +112,76 @@ import { DxoValueFormatModule } from 'devextreme-angular/ui/nested'; import { DxiTotalItemModule } from 'devextreme-angular/ui/nested'; import { DxoToolbarModule } from 'devextreme-angular/ui/nested'; +import { DxoDataGridColumnChooserModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridPositionModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridAtModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridBoundaryOffsetModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridCollisionModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridMyModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridOffsetModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridSearchModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridSelectionModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridColumnFixingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridTextsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridColumnModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridButtonModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridHeaderFilterModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridLookupModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFormatModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFormItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridLabelModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridValidationRuleModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridEditingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridChangeModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFormModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridColCountByScreenModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridTabPanelOptionsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridTabModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridButtonOptionsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridPopupModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridAnimationModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridHideModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFromModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridToModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridShowModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridToolbarItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridExportModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFilterBuilderModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridCustomOperationModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridFieldModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFilterOperationDescriptionsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridGroupOperationDescriptionsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFilterBuilderPopupModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFilterPanelModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridFilterRowModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridOperationDescriptionsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridGroupingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridGroupPanelModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridKeyboardNavigationModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridLoadPanelModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridMasterDetailModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridPagerModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridPagingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridRemoteOperationsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridRowDraggingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridCursorOffsetModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridScrollingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridSearchPanelModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridSortByGroupSummaryInfoModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridSortingModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridStateStoringModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridSummaryModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridGroupItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridValueFormatModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridTotalItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridToolbarModule } from 'devextreme-angular/ui/data-grid/nested'; + import { DxiColumnComponent } from 'devextreme-angular/ui/nested'; import { DxiSortByGroupSummaryInfoComponent } from 'devextreme-angular/ui/nested'; +import { DxiDataGridColumnComponent } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridSortByGroupSummaryInfoComponent } from 'devextreme-angular/ui/data-grid/nested'; /** @@ -1967,23 +2033,46 @@ export class DxDataGridComponent extends DxComponent - @ContentChildren(DxiColumnComponent) - get columnsChildren(): QueryList { + @ContentChildren(DxiDataGridColumnComponent) + get columnsChildren(): QueryList { return this._getOption('columns'); } set columnsChildren(value) { + this.setContentChildren('columns', value, 'DxiDataGridColumnComponent'); this.setChildren('columns', value); } - @ContentChildren(DxiSortByGroupSummaryInfoComponent) - get sortByGroupSummaryInfoChildren(): QueryList { + @ContentChildren(DxiDataGridSortByGroupSummaryInfoComponent) + get sortByGroupSummaryInfoChildren(): QueryList { return this._getOption('sortByGroupSummaryInfo'); } set sortByGroupSummaryInfoChildren(value) { + this.setContentChildren('sortByGroupSummaryInfo', value, 'DxiDataGridSortByGroupSummaryInfoComponent'); this.setChildren('sortByGroupSummaryInfo', value); } + @ContentChildren(DxiColumnComponent) + get columnsLegacyChildren(): QueryList { + return this._getOption('columns'); + } + set columnsLegacyChildren(value) { + if (this.checkContentChildren('columns', value, 'DxiColumnComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiSortByGroupSummaryInfoComponent) + get sortByGroupSummaryInfoLegacyChildren(): QueryList { + return this._getOption('sortByGroupSummaryInfo'); + } + set sortByGroupSummaryInfoLegacyChildren(value) { + if (this.checkContentChildren('sortByGroupSummaryInfo', value, 'DxiSortByGroupSummaryInfoComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -2199,7 +2288,6 @@ export class DxDataGridComponent extends DxComponent DxoFromModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxoExportModule, DxoFilterBuilderModule, DxiCustomOperationModule, @@ -2230,6 +2318,70 @@ export class DxDataGridComponent extends DxComponent DxoValueFormatModule, DxiTotalItemModule, DxoToolbarModule, + DxoDataGridColumnChooserModule, + DxoDataGridPositionModule, + DxoDataGridAtModule, + DxoDataGridBoundaryOffsetModule, + DxoDataGridCollisionModule, + DxoDataGridMyModule, + DxoDataGridOffsetModule, + DxoDataGridSearchModule, + DxoDataGridSelectionModule, + DxoDataGridColumnFixingModule, + DxoDataGridTextsModule, + DxiDataGridColumnModule, + DxiDataGridButtonModule, + DxoDataGridHeaderFilterModule, + DxoDataGridLookupModule, + DxoDataGridFormatModule, + DxoDataGridFormItemModule, + DxoDataGridLabelModule, + DxiDataGridValidationRuleModule, + DxoDataGridEditingModule, + DxiDataGridChangeModule, + DxoDataGridFormModule, + DxoDataGridColCountByScreenModule, + DxiDataGridItemModule, + DxoDataGridTabPanelOptionsModule, + DxiDataGridTabModule, + DxoDataGridButtonOptionsModule, + DxoDataGridPopupModule, + DxoDataGridAnimationModule, + DxoDataGridHideModule, + DxoDataGridFromModule, + DxoDataGridToModule, + DxoDataGridShowModule, + DxiDataGridToolbarItemModule, + DxoDataGridExportModule, + DxoDataGridFilterBuilderModule, + DxiDataGridCustomOperationModule, + DxiDataGridFieldModule, + DxoDataGridFilterOperationDescriptionsModule, + DxoDataGridGroupOperationDescriptionsModule, + DxoDataGridFilterBuilderPopupModule, + DxoDataGridFilterPanelModule, + DxoDataGridFilterRowModule, + DxoDataGridOperationDescriptionsModule, + DxoDataGridGroupingModule, + DxoDataGridGroupPanelModule, + DxoDataGridKeyboardNavigationModule, + DxoDataGridLoadPanelModule, + DxoDataGridMasterDetailModule, + DxoDataGridPagerModule, + DxoDataGridPagingModule, + DxoDataGridRemoteOperationsModule, + DxoDataGridRowDraggingModule, + DxoDataGridCursorOffsetModule, + DxoDataGridScrollingModule, + DxoDataGridSearchPanelModule, + DxiDataGridSortByGroupSummaryInfoModule, + DxoDataGridSortingModule, + DxoDataGridStateStoringModule, + DxoDataGridSummaryModule, + DxiDataGridGroupItemModule, + DxoDataGridValueFormatModule, + DxiDataGridTotalItemModule, + DxoDataGridToolbarModule, DxIntegrationModule, DxTemplateModule ], @@ -2271,7 +2423,6 @@ export class DxDataGridComponent extends DxComponent DxoFromModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxoExportModule, DxoFilterBuilderModule, DxiCustomOperationModule, @@ -2302,6 +2453,70 @@ export class DxDataGridComponent extends DxComponent DxoValueFormatModule, DxiTotalItemModule, DxoToolbarModule, + DxoDataGridColumnChooserModule, + DxoDataGridPositionModule, + DxoDataGridAtModule, + DxoDataGridBoundaryOffsetModule, + DxoDataGridCollisionModule, + DxoDataGridMyModule, + DxoDataGridOffsetModule, + DxoDataGridSearchModule, + DxoDataGridSelectionModule, + DxoDataGridColumnFixingModule, + DxoDataGridTextsModule, + DxiDataGridColumnModule, + DxiDataGridButtonModule, + DxoDataGridHeaderFilterModule, + DxoDataGridLookupModule, + DxoDataGridFormatModule, + DxoDataGridFormItemModule, + DxoDataGridLabelModule, + DxiDataGridValidationRuleModule, + DxoDataGridEditingModule, + DxiDataGridChangeModule, + DxoDataGridFormModule, + DxoDataGridColCountByScreenModule, + DxiDataGridItemModule, + DxoDataGridTabPanelOptionsModule, + DxiDataGridTabModule, + DxoDataGridButtonOptionsModule, + DxoDataGridPopupModule, + DxoDataGridAnimationModule, + DxoDataGridHideModule, + DxoDataGridFromModule, + DxoDataGridToModule, + DxoDataGridShowModule, + DxiDataGridToolbarItemModule, + DxoDataGridExportModule, + DxoDataGridFilterBuilderModule, + DxiDataGridCustomOperationModule, + DxiDataGridFieldModule, + DxoDataGridFilterOperationDescriptionsModule, + DxoDataGridGroupOperationDescriptionsModule, + DxoDataGridFilterBuilderPopupModule, + DxoDataGridFilterPanelModule, + DxoDataGridFilterRowModule, + DxoDataGridOperationDescriptionsModule, + DxoDataGridGroupingModule, + DxoDataGridGroupPanelModule, + DxoDataGridKeyboardNavigationModule, + DxoDataGridLoadPanelModule, + DxoDataGridMasterDetailModule, + DxoDataGridPagerModule, + DxoDataGridPagingModule, + DxoDataGridRemoteOperationsModule, + DxoDataGridRowDraggingModule, + DxoDataGridCursorOffsetModule, + DxoDataGridScrollingModule, + DxoDataGridSearchPanelModule, + DxiDataGridSortByGroupSummaryInfoModule, + DxoDataGridSortingModule, + DxoDataGridStateStoringModule, + DxoDataGridSummaryModule, + DxiDataGridGroupItemModule, + DxoDataGridValueFormatModule, + DxiDataGridTotalItemModule, + DxoDataGridToolbarModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/animation.ts b/packages/devextreme-angular/src/ui/data-grid/nested/animation.ts new file mode 100644 index 000000000000..0e47d8ab5bf9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridAnimationComponent + ], + exports: [ + DxoDataGridAnimationComponent + ], +}) +export class DxoDataGridAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/at.ts b/packages/devextreme-angular/src/ui/data-grid/nested/at.ts new file mode 100644 index 000000000000..7febd86c92c2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridAtComponent + ], + exports: [ + DxoDataGridAtComponent + ], +}) +export class DxoDataGridAtModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/data-grid/nested/boundary-offset.ts new file mode 100644 index 000000000000..8987e8e8d86a --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridBoundaryOffsetComponent + ], + exports: [ + DxoDataGridBoundaryOffsetComponent + ], +}) +export class DxoDataGridBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/button-dxi.ts new file mode 100644 index 000000000000..64511ba8fb93 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/button-dxi.ts @@ -0,0 +1,131 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ColumnButtonClickEvent, DataGridPredefinedColumnButton } from 'devextreme/ui/data_grid'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridButtonComponent extends CollectionNestedOption { + @Input() + get cssClass(): string { + return this._getOption('cssClass'); + } + set cssClass(value: string) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean | Function { + return this._getOption('disabled'); + } + set disabled(value: boolean | Function) { + this._setOption('disabled', value); + } + + @Input() + get hint(): string { + return this._getOption('hint'); + } + set hint(value: string) { + this._setOption('hint', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get name(): DataGridPredefinedColumnButton | string { + return this._getOption('name'); + } + set name(value: DataGridPredefinedColumnButton | string) { + this._setOption('name', value); + } + + @Input() + get onClick(): ((e: ColumnButtonClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ColumnButtonClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean | Function { + return this._getOption('visible'); + } + set visible(value: boolean | Function) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridButtonComponent + ], + exports: [ + DxiDataGridButtonComponent + ], +}) +export class DxiDataGridButtonModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts new file mode 100644 index 000000000000..a7ed278f4f14 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-button-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridButtonOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'buttonOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridButtonOptionsComponent + ], + exports: [ + DxoDataGridButtonOptionsComponent + ], +}) +export class DxoDataGridButtonOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/change-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/change-dxi.ts new file mode 100644 index 000000000000..322751930d4f --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/change-dxi.ts @@ -0,0 +1,99 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataChangeType } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-change', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridChangeComponent extends CollectionNestedOption { + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get insertAfterKey(): any { + return this._getOption('insertAfterKey'); + } + set insertAfterKey(value: any) { + this._setOption('insertAfterKey', value); + } + + @Input() + get insertBeforeKey(): any { + return this._getOption('insertBeforeKey'); + } + set insertBeforeKey(value: any) { + this._setOption('insertBeforeKey', value); + } + + @Input() + get key(): any { + return this._getOption('key'); + } + set key(value: any) { + this._setOption('key', value); + } + + @Input() + get type(): DataChangeType { + return this._getOption('type'); + } + set type(value: DataChangeType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'changes'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridChangeComponent + ], + exports: [ + DxiDataGridChangeComponent + ], +}) +export class DxiDataGridChangeModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/col-count-by-screen.ts b/packages/devextreme-angular/src/ui/data-grid/nested/col-count-by-screen.ts new file mode 100644 index 000000000000..5ffbff4b73cb --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/col-count-by-screen.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-col-count-by-screen', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridColCountByScreenComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get lg(): number | undefined { + return this._getOption('lg'); + } + set lg(value: number | undefined) { + this._setOption('lg', value); + } + + @Input() + get md(): number | undefined { + return this._getOption('md'); + } + set md(value: number | undefined) { + this._setOption('md', value); + } + + @Input() + get sm(): number | undefined { + return this._getOption('sm'); + } + set sm(value: number | undefined) { + this._setOption('sm', value); + } + + @Input() + get xs(): number | undefined { + return this._getOption('xs'); + } + set xs(value: number | undefined) { + this._setOption('xs', value); + } + + + protected get _optionPath() { + return 'colCountByScreen'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridColCountByScreenComponent + ], + exports: [ + DxoDataGridColCountByScreenComponent + ], +}) +export class DxoDataGridColCountByScreenModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/collision.ts b/packages/devextreme-angular/src/ui/data-grid/nested/collision.ts new file mode 100644 index 000000000000..b9d4a89d65ff --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridCollisionComponent + ], + exports: [ + DxoDataGridCollisionComponent + ], +}) +export class DxoDataGridCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/column-chooser.ts b/packages/devextreme-angular/src/ui/data-grid/nested/column-chooser.ts new file mode 100644 index 000000000000..46df0a45e7b4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/column-chooser.ts @@ -0,0 +1,172 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; +import { SortOrder } from 'devextreme/common'; +import { ColumnChooserMode, ColumnChooserSearchConfig, ColumnChooserSelectionConfig } from 'devextreme/common/grids'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-column-chooser', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridColumnChooserComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get emptyPanelText(): string { + return this._getOption('emptyPanelText'); + } + set emptyPanelText(value: string) { + this._setOption('emptyPanelText', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get height(): number | string { + return this._getOption('height'); + } + set height(value: number | string) { + this._setOption('height', value); + } + + @Input() + get mode(): ColumnChooserMode { + return this._getOption('mode'); + } + set mode(value: ColumnChooserMode) { + this._setOption('mode', value); + } + + @Input() + get position(): PositionConfig | undefined { + return this._getOption('position'); + } + set position(value: PositionConfig | undefined) { + this._setOption('position', value); + } + + @Input() + get search(): ColumnChooserSearchConfig { + return this._getOption('search'); + } + set search(value: ColumnChooserSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get selection(): ColumnChooserSelectionConfig { + return this._getOption('selection'); + } + set selection(value: ColumnChooserSelectionConfig) { + this._setOption('selection', value); + } + + @Input() + get sortOrder(): SortOrder | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get width(): number | string { + return this._getOption('width'); + } + set width(value: number | string) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'columnChooser'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridColumnChooserComponent + ], + exports: [ + DxoDataGridColumnChooserComponent + ], +}) +export class DxoDataGridColumnChooserModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/column-dxi.ts new file mode 100644 index 000000000000..375d0252621b --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/column-dxi.ts @@ -0,0 +1,667 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AsyncRule, CompareRule, CustomRule, DataType, EmailRule, HorizontalAlignment, HorizontalEdge, NumericRule, PatternRule, RangeRule, RequiredRule, SearchMode, SortOrder, StringLengthRule } from 'devextreme/common'; +import { ColumnHeaderFilterSearchConfig, FilterOperation, FilterType, HeaderFilterGroupInterval, SelectedFilterOperation } from 'devextreme/common/grids'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { Format } from 'devextreme/localization'; +import { DataGridCommandColumnType, DataGridPredefinedColumnButton, dxDataGridColumn, dxDataGridColumnButton } from 'devextreme/ui/data_grid'; +import { SimpleItem } from 'devextreme/ui/form'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDataGridButtonComponent } from './button-dxi'; +import { DxiDataGridValidationRuleComponent } from './validation-rule-dxi'; + + +@Component({ + selector: 'dxi-data-grid-column', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridColumnComponent extends CollectionNestedOption { + @Input() + get alignment(): HorizontalAlignment | string | undefined { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment | string | undefined) { + this._setOption('alignment', value); + } + + @Input() + get allowEditing(): boolean { + return this._getOption('allowEditing'); + } + set allowEditing(value: boolean) { + this._setOption('allowEditing', value); + } + + @Input() + get allowExporting(): boolean { + return this._getOption('allowExporting'); + } + set allowExporting(value: boolean) { + this._setOption('allowExporting', value); + } + + @Input() + get allowFiltering(): boolean { + return this._getOption('allowFiltering'); + } + set allowFiltering(value: boolean) { + this._setOption('allowFiltering', value); + } + + @Input() + get allowFixing(): boolean { + return this._getOption('allowFixing'); + } + set allowFixing(value: boolean) { + this._setOption('allowFixing', value); + } + + @Input() + get allowGrouping(): boolean { + return this._getOption('allowGrouping'); + } + set allowGrouping(value: boolean) { + this._setOption('allowGrouping', value); + } + + @Input() + get allowHeaderFiltering(): boolean { + return this._getOption('allowHeaderFiltering'); + } + set allowHeaderFiltering(value: boolean) { + this._setOption('allowHeaderFiltering', value); + } + + @Input() + get allowHiding(): boolean { + return this._getOption('allowHiding'); + } + set allowHiding(value: boolean) { + this._setOption('allowHiding', value); + } + + @Input() + get allowReordering(): boolean { + return this._getOption('allowReordering'); + } + set allowReordering(value: boolean) { + this._setOption('allowReordering', value); + } + + @Input() + get allowResizing(): boolean { + return this._getOption('allowResizing'); + } + set allowResizing(value: boolean) { + this._setOption('allowResizing', value); + } + + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get allowSorting(): boolean { + return this._getOption('allowSorting'); + } + set allowSorting(value: boolean) { + this._setOption('allowSorting', value); + } + + @Input() + get autoExpandGroup(): boolean { + return this._getOption('autoExpandGroup'); + } + set autoExpandGroup(value: boolean) { + this._setOption('autoExpandGroup', value); + } + + @Input() + get buttons(): Array { + return this._getOption('buttons'); + } + set buttons(value: Array) { + this._setOption('buttons', value); + } + + @Input() + get calculateCellValue(): Function { + return this._getOption('calculateCellValue'); + } + set calculateCellValue(value: Function) { + this._setOption('calculateCellValue', value); + } + + @Input() + get calculateDisplayValue(): Function | string { + return this._getOption('calculateDisplayValue'); + } + set calculateDisplayValue(value: Function | string) { + this._setOption('calculateDisplayValue', value); + } + + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get calculateGroupValue(): Function | string { + return this._getOption('calculateGroupValue'); + } + set calculateGroupValue(value: Function | string) { + this._setOption('calculateGroupValue', value); + } + + @Input() + get calculateSortValue(): Function | string { + return this._getOption('calculateSortValue'); + } + set calculateSortValue(value: Function | string) { + this._setOption('calculateSortValue', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get cellTemplate(): any { + return this._getOption('cellTemplate'); + } + set cellTemplate(value: any) { + this._setOption('cellTemplate', value); + } + + @Input() + get columns(): Array { + return this._getOption('columns'); + } + set columns(value: Array) { + this._setOption('columns', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType | undefined { + return this._getOption('dataType'); + } + set dataType(value: DataType | undefined) { + this._setOption('dataType', value); + } + + @Input() + get editCellTemplate(): any { + return this._getOption('editCellTemplate'); + } + set editCellTemplate(value: any) { + this._setOption('editCellTemplate', value); + } + + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get encodeHtml(): boolean { + return this._getOption('encodeHtml'); + } + set encodeHtml(value: boolean) { + this._setOption('encodeHtml', value); + } + + @Input() + get falseText(): string { + return this._getOption('falseText'); + } + set falseText(value: string) { + this._setOption('falseText', value); + } + + @Input() + get filterOperations(): Array { + return this._getOption('filterOperations'); + } + set filterOperations(value: Array) { + this._setOption('filterOperations', value); + } + + @Input() + get filterType(): FilterType { + return this._getOption('filterType'); + } + set filterType(value: FilterType) { + this._setOption('filterType', value); + } + + @Input() + get filterValue(): any | undefined { + return this._getOption('filterValue'); + } + set filterValue(value: any | undefined) { + this._setOption('filterValue', value); + } + + @Input() + get filterValues(): Array { + return this._getOption('filterValues'); + } + set filterValues(value: Array) { + this._setOption('filterValues', value); + } + + @Input() + get fixed(): boolean { + return this._getOption('fixed'); + } + set fixed(value: boolean) { + this._setOption('fixed', value); + } + + @Input() + get fixedPosition(): HorizontalEdge | undefined { + return this._getOption('fixedPosition'); + } + set fixedPosition(value: HorizontalEdge | undefined) { + this._setOption('fixedPosition', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get formItem(): SimpleItem { + return this._getOption('formItem'); + } + set formItem(value: SimpleItem) { + this._setOption('formItem', value); + } + + @Input() + get groupCellTemplate(): any { + return this._getOption('groupCellTemplate'); + } + set groupCellTemplate(value: any) { + this._setOption('groupCellTemplate', value); + } + + @Input() + get groupIndex(): number | undefined { + return this._getOption('groupIndex'); + } + set groupIndex(value: number | undefined) { + this._setOption('groupIndex', value); + } + + @Input() + get headerCellTemplate(): any { + return this._getOption('headerCellTemplate'); + } + set headerCellTemplate(value: any) { + this._setOption('headerCellTemplate', value); + } + + @Input() + get headerFilter(): { allowSearch?: boolean, allowSelectAll?: boolean, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, groupInterval?: HeaderFilterGroupInterval | number | undefined, height?: number | string | undefined, search?: ColumnHeaderFilterSearchConfig, searchMode?: SearchMode, width?: number | string | undefined } { + return this._getOption('headerFilter'); + } + set headerFilter(value: { allowSearch?: boolean, allowSelectAll?: boolean, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, groupInterval?: HeaderFilterGroupInterval | number | undefined, height?: number | string | undefined, search?: ColumnHeaderFilterSearchConfig, searchMode?: SearchMode, width?: number | string | undefined }) { + this._setOption('headerFilter', value); + } + + @Input() + get hidingPriority(): number | undefined { + return this._getOption('hidingPriority'); + } + set hidingPriority(value: number | undefined) { + this._setOption('hidingPriority', value); + } + + @Input() + get isBand(): boolean | undefined { + return this._getOption('isBand'); + } + set isBand(value: boolean | undefined) { + this._setOption('isBand', value); + } + + @Input() + get lookup(): { allowClearing?: boolean, calculateCellValue?: Function, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: string | undefined } { + return this._getOption('lookup'); + } + set lookup(value: { allowClearing?: boolean, calculateCellValue?: Function, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: string | undefined }) { + this._setOption('lookup', value); + } + + @Input() + get minWidth(): number | undefined { + return this._getOption('minWidth'); + } + set minWidth(value: number | undefined) { + this._setOption('minWidth', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get ownerBand(): number | undefined { + return this._getOption('ownerBand'); + } + set ownerBand(value: number | undefined) { + this._setOption('ownerBand', value); + } + + @Input() + get renderAsync(): boolean { + return this._getOption('renderAsync'); + } + set renderAsync(value: boolean) { + this._setOption('renderAsync', value); + } + + @Input() + get selectedFilterOperation(): SelectedFilterOperation | undefined { + return this._getOption('selectedFilterOperation'); + } + set selectedFilterOperation(value: SelectedFilterOperation | undefined) { + this._setOption('selectedFilterOperation', value); + } + + @Input() + get setCellValue(): Function { + return this._getOption('setCellValue'); + } + set setCellValue(value: Function) { + this._setOption('setCellValue', value); + } + + @Input() + get showEditorAlways(): boolean { + return this._getOption('showEditorAlways'); + } + set showEditorAlways(value: boolean) { + this._setOption('showEditorAlways', value); + } + + @Input() + get showInColumnChooser(): boolean { + return this._getOption('showInColumnChooser'); + } + set showInColumnChooser(value: boolean) { + this._setOption('showInColumnChooser', value); + } + + @Input() + get showWhenGrouped(): boolean { + return this._getOption('showWhenGrouped'); + } + set showWhenGrouped(value: boolean) { + this._setOption('showWhenGrouped', value); + } + + @Input() + get sortIndex(): number | undefined { + return this._getOption('sortIndex'); + } + set sortIndex(value: number | undefined) { + this._setOption('sortIndex', value); + } + + @Input() + get sortingMethod(): Function | undefined { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: Function | undefined) { + this._setOption('sortingMethod', value); + } + + @Input() + get sortOrder(): SortOrder | string | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | string | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get trueText(): string { + return this._getOption('trueText'); + } + set trueText(value: string) { + this._setOption('trueText', value); + } + + @Input() + get type(): DataGridCommandColumnType { + return this._getOption('type'); + } + set type(value: DataGridCommandColumnType) { + this._setOption('type', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterValueChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterValuesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() groupIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedFilterOperationChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() sortIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() sortOrderChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleIndexChange: EventEmitter; + protected get _optionPath() { + return 'columns'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridButtonComponent)) + get buttonsChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsChildren(value) { + this.setChildren('buttons', value); + } + + @ContentChildren(forwardRef(() => DxiDataGridColumnComponent)) + get columnsChildren(): QueryList { + return this._getOption('columns'); + } + set columnsChildren(value) { + this.setChildren('columns', value); + } + + @ContentChildren(forwardRef(() => DxiDataGridValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'filterValueChange' }, + { emit: 'filterValuesChange' }, + { emit: 'groupIndexChange' }, + { emit: 'selectedFilterOperationChange' }, + { emit: 'sortIndexChange' }, + { emit: 'sortOrderChange' }, + { emit: 'visibleChange' }, + { emit: 'visibleIndexChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridColumnComponent + ], + exports: [ + DxiDataGridColumnComponent + ], +}) +export class DxiDataGridColumnModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/column-fixing.ts b/packages/devextreme-angular/src/ui/data-grid/nested/column-fixing.ts new file mode 100644 index 000000000000..adabb32da4c9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/column-fixing.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-column-fixing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridColumnFixingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get texts(): { fix?: string, leftPosition?: string, rightPosition?: string, unfix?: string } { + return this._getOption('texts'); + } + set texts(value: { fix?: string, leftPosition?: string, rightPosition?: string, unfix?: string }) { + this._setOption('texts', value); + } + + + protected get _optionPath() { + return 'columnFixing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridColumnFixingComponent + ], + exports: [ + DxoDataGridColumnFixingComponent + ], +}) +export class DxoDataGridColumnFixingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/cursor-offset.ts b/packages/devextreme-angular/src/ui/data-grid/nested/cursor-offset.ts new file mode 100644 index 000000000000..71b279c3b328 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/cursor-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-cursor-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridCursorOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'cursorOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridCursorOffsetComponent + ], + exports: [ + DxoDataGridCursorOffsetComponent + ], +}) +export class DxoDataGridCursorOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/custom-operation-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/custom-operation-dxi.ts new file mode 100644 index 000000000000..1df1f44ce958 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/custom-operation-dxi.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-custom-operation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridCustomOperationComponent extends CollectionNestedOption { + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataTypes(): any | undefined | Array { + return this._getOption('dataTypes'); + } + set dataTypes(value: any | undefined | Array) { + this._setOption('dataTypes', value); + } + + @Input() + get editorTemplate(): any { + return this._getOption('editorTemplate'); + } + set editorTemplate(value: any) { + this._setOption('editorTemplate', value); + } + + @Input() + get hasValue(): boolean { + return this._getOption('hasValue'); + } + set hasValue(value: boolean) { + this._setOption('hasValue', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'customOperations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridCustomOperationComponent + ], + exports: [ + DxiDataGridCustomOperationComponent + ], +}) +export class DxiDataGridCustomOperationModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/editing.ts b/packages/devextreme-angular/src/ui/data-grid/nested/editing.ts new file mode 100644 index 000000000000..907006be2835 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/editing.ts @@ -0,0 +1,236 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { DataChange, GridsEditMode, GridsEditRefreshMode, NewRowPosition, StartEditAction } from 'devextreme/common/grids'; +import { Properties as dxFormOptions } from 'devextreme/ui/form'; +import { Properties as dxPopupOptions } from 'devextreme/ui/popup'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridChangeComponent } from './change-dxi'; + + +@Component({ + selector: 'dxo-data-grid-editing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridEditingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowAdding(): boolean { + return this._getOption('allowAdding'); + } + set allowAdding(value: boolean) { + this._setOption('allowAdding', value); + } + + @Input() + get allowDeleting(): boolean | Function { + return this._getOption('allowDeleting'); + } + set allowDeleting(value: boolean | Function) { + this._setOption('allowDeleting', value); + } + + @Input() + get allowUpdating(): boolean | Function { + return this._getOption('allowUpdating'); + } + set allowUpdating(value: boolean | Function) { + this._setOption('allowUpdating', value); + } + + @Input() + get changes(): Array { + return this._getOption('changes'); + } + set changes(value: Array) { + this._setOption('changes', value); + } + + @Input() + get confirmDelete(): boolean { + return this._getOption('confirmDelete'); + } + set confirmDelete(value: boolean) { + this._setOption('confirmDelete', value); + } + + @Input() + get editColumnName(): string { + return this._getOption('editColumnName'); + } + set editColumnName(value: string) { + this._setOption('editColumnName', value); + } + + @Input() + get editRowKey(): any { + return this._getOption('editRowKey'); + } + set editRowKey(value: any) { + this._setOption('editRowKey', value); + } + + @Input() + get form(): dxFormOptions { + return this._getOption('form'); + } + set form(value: dxFormOptions) { + this._setOption('form', value); + } + + @Input() + get mode(): GridsEditMode { + return this._getOption('mode'); + } + set mode(value: GridsEditMode) { + this._setOption('mode', value); + } + + @Input() + get newRowPosition(): NewRowPosition { + return this._getOption('newRowPosition'); + } + set newRowPosition(value: NewRowPosition) { + this._setOption('newRowPosition', value); + } + + @Input() + get popup(): dxPopupOptions { + return this._getOption('popup'); + } + set popup(value: dxPopupOptions) { + this._setOption('popup', value); + } + + @Input() + get refreshMode(): GridsEditRefreshMode { + return this._getOption('refreshMode'); + } + set refreshMode(value: GridsEditRefreshMode) { + this._setOption('refreshMode', value); + } + + @Input() + get selectTextOnEditStart(): boolean { + return this._getOption('selectTextOnEditStart'); + } + set selectTextOnEditStart(value: boolean) { + this._setOption('selectTextOnEditStart', value); + } + + @Input() + get startEditAction(): StartEditAction { + return this._getOption('startEditAction'); + } + set startEditAction(value: StartEditAction) { + this._setOption('startEditAction', value); + } + + @Input() + get texts(): { addRow?: string, cancelAllChanges?: string, cancelRowChanges?: string, confirmDeleteMessage?: string, confirmDeleteTitle?: string, deleteRow?: string, editRow?: string, saveAllChanges?: string, saveRowChanges?: string, undeleteRow?: string, validationCancelChanges?: string } { + return this._getOption('texts'); + } + set texts(value: { addRow?: string, cancelAllChanges?: string, cancelRowChanges?: string, confirmDeleteMessage?: string, confirmDeleteTitle?: string, deleteRow?: string, editRow?: string, saveAllChanges?: string, saveRowChanges?: string, undeleteRow?: string, validationCancelChanges?: string }) { + this._setOption('texts', value); + } + + @Input() + get useIcons(): boolean { + return this._getOption('useIcons'); + } + set useIcons(value: boolean) { + this._setOption('useIcons', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() changesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() editColumnNameChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() editRowKeyChange: EventEmitter; + protected get _optionPath() { + return 'editing'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridChangeComponent)) + get changesChildren(): QueryList { + return this._getOption('changes'); + } + set changesChildren(value) { + this.setChildren('changes', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'changesChange' }, + { emit: 'editColumnNameChange' }, + { emit: 'editRowKeyChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridEditingComponent + ], + exports: [ + DxoDataGridEditingComponent + ], +}) +export class DxoDataGridEditingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/export.ts b/packages/devextreme-angular/src/ui/data-grid/nested/export.ts new file mode 100644 index 000000000000..8fff754bd7ca --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/export.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataGridExportFormat } from 'devextreme/ui/data_grid'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowExportSelectedData(): boolean { + return this._getOption('allowExportSelectedData'); + } + set allowExportSelectedData(value: boolean) { + this._setOption('allowExportSelectedData', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get formats(): Array { + return this._getOption('formats'); + } + set formats(value: Array) { + this._setOption('formats', value); + } + + @Input() + get texts(): { exportAll?: string, exportSelectedRows?: string, exportTo?: string } { + return this._getOption('texts'); + } + set texts(value: { exportAll?: string, exportSelectedRows?: string, exportTo?: string }) { + this._setOption('texts', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridExportComponent + ], + exports: [ + DxoDataGridExportComponent + ], +}) +export class DxoDataGridExportModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/field-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/field-dxi.ts new file mode 100644 index 000000000000..01c6fa13a426 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/field-dxi.ts @@ -0,0 +1,167 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { Format } from 'devextreme/localization'; +import { FilterBuilderOperation } from 'devextreme/ui/filter_builder'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-field', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridFieldComponent extends CollectionNestedOption { + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType { + return this._getOption('dataType'); + } + set dataType(value: DataType) { + this._setOption('dataType', value); + } + + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get editorTemplate(): any { + return this._getOption('editorTemplate'); + } + set editorTemplate(value: any) { + this._setOption('editorTemplate', value); + } + + @Input() + get falseText(): string { + return this._getOption('falseText'); + } + set falseText(value: string) { + this._setOption('falseText', value); + } + + @Input() + get filterOperations(): Array { + return this._getOption('filterOperations'); + } + set filterOperations(value: Array) { + this._setOption('filterOperations', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get lookup(): { allowClearing?: boolean, dataSource?: Store | DataSourceOptions | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: Function | string | undefined } { + return this._getOption('lookup'); + } + set lookup(value: { allowClearing?: boolean, dataSource?: Store | DataSourceOptions | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: Function | string | undefined }) { + this._setOption('lookup', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get trueText(): string { + return this._getOption('trueText'); + } + set trueText(value: string) { + this._setOption('trueText', value); + } + + + protected get _optionPath() { + return 'fields'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridFieldComponent + ], + exports: [ + DxiDataGridFieldComponent + ], +}) +export class DxiDataGridFieldModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts new file mode 100644 index 000000000000..ccd7eb5f442d --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-data-grid-filter-builder-popup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFilterBuilderPopupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'filterBuilderPopup'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFilterBuilderPopupComponent + ], + exports: [ + DxoDataGridFilterBuilderPopupComponent + ], +}) +export class DxoDataGridFilterBuilderPopupModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder.ts new file mode 100644 index 000000000000..43bb6300ad9e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder.ts @@ -0,0 +1,315 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ContentReadyEvent, DisposingEvent, dxFilterBuilderCustomOperation, dxFilterBuilderField, EditorPreparedEvent, EditorPreparingEvent, GroupOperation, InitializedEvent, OptionChangedEvent, ValueChangedEvent } from 'devextreme/ui/filter_builder'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridCustomOperationComponent } from './custom-operation-dxi'; +import { DxiDataGridFieldComponent } from './field-dxi'; + + +@Component({ + selector: 'dxo-data-grid-filter-builder', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFilterBuilderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get allowHierarchicalFields(): boolean { + return this._getOption('allowHierarchicalFields'); + } + set allowHierarchicalFields(value: boolean) { + this._setOption('allowHierarchicalFields', value); + } + + @Input() + get customOperations(): Array { + return this._getOption('customOperations'); + } + set customOperations(value: Array) { + this._setOption('customOperations', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get fields(): Array { + return this._getOption('fields'); + } + set fields(value: Array) { + this._setOption('fields', value); + } + + @Input() + get filterOperationDescriptions(): { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, isBlank?: string, isNotBlank?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string } { + return this._getOption('filterOperationDescriptions'); + } + set filterOperationDescriptions(value: { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, isBlank?: string, isNotBlank?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string }) { + this._setOption('filterOperationDescriptions', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get groupOperationDescriptions(): { and?: string, notAnd?: string, notOr?: string, or?: string } { + return this._getOption('groupOperationDescriptions'); + } + set groupOperationDescriptions(value: { and?: string, notAnd?: string, notOr?: string, or?: string }) { + this._setOption('groupOperationDescriptions', value); + } + + @Input() + get groupOperations(): any | Array { + return this._getOption('groupOperations'); + } + set groupOperations(value: any | Array) { + this._setOption('groupOperations', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxGroupLevel(): number | undefined { + return this._getOption('maxGroupLevel'); + } + set maxGroupLevel(value: number | undefined) { + this._setOption('maxGroupLevel', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onEditorPrepared(): ((e: EditorPreparedEvent) => void) { + return this._getOption('onEditorPrepared'); + } + set onEditorPrepared(value: ((e: EditorPreparedEvent) => void)) { + this._setOption('onEditorPrepared', value); + } + + @Input() + get onEditorPreparing(): ((e: EditorPreparingEvent) => void) { + return this._getOption('onEditorPreparing'); + } + set onEditorPreparing(value: ((e: EditorPreparingEvent) => void)) { + this._setOption('onEditorPreparing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get value(): any { + return this._getOption('value'); + } + set value(value: any) { + this._setOption('value', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter; + protected get _optionPath() { + return 'filterBuilder'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridCustomOperationComponent)) + get customOperationsChildren(): QueryList { + return this._getOption('customOperations'); + } + set customOperationsChildren(value) { + this.setChildren('customOperations', value); + } + + @ContentChildren(forwardRef(() => DxiDataGridFieldComponent)) + get fieldsChildren(): QueryList { + return this._getOption('fields'); + } + set fieldsChildren(value) { + this.setChildren('fields', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFilterBuilderComponent + ], + exports: [ + DxoDataGridFilterBuilderComponent + ], +}) +export class DxoDataGridFilterBuilderModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-operation-descriptions.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-operation-descriptions.ts new file mode 100644 index 000000000000..739a33963f0d --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-operation-descriptions.ts @@ -0,0 +1,168 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-filter-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFilterOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get between(): string { + return this._getOption('between'); + } + set between(value: string) { + this._setOption('between', value); + } + + @Input() + get contains(): string { + return this._getOption('contains'); + } + set contains(value: string) { + this._setOption('contains', value); + } + + @Input() + get endsWith(): string { + return this._getOption('endsWith'); + } + set endsWith(value: string) { + this._setOption('endsWith', value); + } + + @Input() + get equal(): string { + return this._getOption('equal'); + } + set equal(value: string) { + this._setOption('equal', value); + } + + @Input() + get greaterThan(): string { + return this._getOption('greaterThan'); + } + set greaterThan(value: string) { + this._setOption('greaterThan', value); + } + + @Input() + get greaterThanOrEqual(): string { + return this._getOption('greaterThanOrEqual'); + } + set greaterThanOrEqual(value: string) { + this._setOption('greaterThanOrEqual', value); + } + + @Input() + get isBlank(): string { + return this._getOption('isBlank'); + } + set isBlank(value: string) { + this._setOption('isBlank', value); + } + + @Input() + get isNotBlank(): string { + return this._getOption('isNotBlank'); + } + set isNotBlank(value: string) { + this._setOption('isNotBlank', value); + } + + @Input() + get lessThan(): string { + return this._getOption('lessThan'); + } + set lessThan(value: string) { + this._setOption('lessThan', value); + } + + @Input() + get lessThanOrEqual(): string { + return this._getOption('lessThanOrEqual'); + } + set lessThanOrEqual(value: string) { + this._setOption('lessThanOrEqual', value); + } + + @Input() + get notContains(): string { + return this._getOption('notContains'); + } + set notContains(value: string) { + this._setOption('notContains', value); + } + + @Input() + get notEqual(): string { + return this._getOption('notEqual'); + } + set notEqual(value: string) { + this._setOption('notEqual', value); + } + + @Input() + get startsWith(): string { + return this._getOption('startsWith'); + } + set startsWith(value: string) { + this._setOption('startsWith', value); + } + + + protected get _optionPath() { + return 'filterOperationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFilterOperationDescriptionsComponent + ], + exports: [ + DxoDataGridFilterOperationDescriptionsComponent + ], +}) +export class DxoDataGridFilterOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-panel.ts new file mode 100644 index 000000000000..59506eca673e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-panel.ts @@ -0,0 +1,109 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-filter-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFilterPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get filterEnabled(): boolean { + return this._getOption('filterEnabled'); + } + set filterEnabled(value: boolean) { + this._setOption('filterEnabled', value); + } + + @Input() + get texts(): { clearFilter?: string, createFilter?: string, filterEnabledHint?: string } { + return this._getOption('texts'); + } + set texts(value: { clearFilter?: string, createFilter?: string, filterEnabledHint?: string }) { + this._setOption('texts', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterEnabledChange: EventEmitter; + protected get _optionPath() { + return 'filterPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'filterEnabledChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFilterPanelComponent + ], + exports: [ + DxoDataGridFilterPanelComponent + ], +}) +export class DxoDataGridFilterPanelModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-row.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-row.ts new file mode 100644 index 000000000000..f876ec8b7434 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-row.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ApplyFilterMode } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-filter-row', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFilterRowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get applyFilter(): ApplyFilterMode { + return this._getOption('applyFilter'); + } + set applyFilter(value: ApplyFilterMode) { + this._setOption('applyFilter', value); + } + + @Input() + get applyFilterText(): string { + return this._getOption('applyFilterText'); + } + set applyFilterText(value: string) { + this._setOption('applyFilterText', value); + } + + @Input() + get betweenEndText(): string { + return this._getOption('betweenEndText'); + } + set betweenEndText(value: string) { + this._setOption('betweenEndText', value); + } + + @Input() + get betweenStartText(): string { + return this._getOption('betweenStartText'); + } + set betweenStartText(value: string) { + this._setOption('betweenStartText', value); + } + + @Input() + get operationDescriptions(): { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string } { + return this._getOption('operationDescriptions'); + } + set operationDescriptions(value: { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string }) { + this._setOption('operationDescriptions', value); + } + + @Input() + get resetOperationText(): string { + return this._getOption('resetOperationText'); + } + set resetOperationText(value: string) { + this._setOption('resetOperationText', value); + } + + @Input() + get showAllText(): string { + return this._getOption('showAllText'); + } + set showAllText(value: string) { + this._setOption('showAllText', value); + } + + @Input() + get showOperationChooser(): boolean { + return this._getOption('showOperationChooser'); + } + set showOperationChooser(value: boolean) { + this._setOption('showOperationChooser', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'filterRow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFilterRowComponent + ], + exports: [ + DxoDataGridFilterRowComponent + ], +}) +export class DxoDataGridFilterRowModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/form-item.ts b/packages/devextreme-angular/src/ui/data-grid/nested/form-item.ts new file mode 100644 index 000000000000..fcc292c13626 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/form-item.ts @@ -0,0 +1,190 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AsyncRule, CompareRule, CustomRule, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, StringLengthRule } from 'devextreme/common'; +import { FormItemComponent, FormItemType, LabelLocation } from 'devextreme/ui/form'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridValidationRuleComponent } from './validation-rule-dxi'; + + +@Component({ + selector: 'dxo-data-grid-form-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFormItemComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'formItem'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFormItemComponent + ], + exports: [ + DxoDataGridFormItemComponent + ], +}) +export class DxoDataGridFormItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/form.ts b/packages/devextreme-angular/src/ui/data-grid/nested/form.ts new file mode 100644 index 000000000000..2344c0f0235a --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/form.ts @@ -0,0 +1,411 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; +import { ButtonItem, ContentReadyEvent, DisposingEvent, EditorEnterKeyEvent, EmptyItem, FieldDataChangedEvent, FormLabelMode, GroupItem, InitializedEvent, LabelLocation, OptionChangedEvent, SimpleItem, TabbedItem } from 'devextreme/ui/form'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-data-grid-form', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFormComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get alignItemLabelsInAllGroups(): boolean { + return this._getOption('alignItemLabelsInAllGroups'); + } + set alignItemLabelsInAllGroups(value: boolean) { + this._setOption('alignItemLabelsInAllGroups', value); + } + + @Input() + get colCount(): Mode | number { + return this._getOption('colCount'); + } + set colCount(value: Mode | number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get customizeItem(): Function { + return this._getOption('customizeItem'); + } + set customizeItem(value: Function) { + this._setOption('customizeItem', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get formData(): any { + return this._getOption('formData'); + } + set formData(value: any) { + this._setOption('formData', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get labelLocation(): LabelLocation { + return this._getOption('labelLocation'); + } + set labelLocation(value: LabelLocation) { + this._setOption('labelLocation', value); + } + + @Input() + get labelMode(): FormLabelMode { + return this._getOption('labelMode'); + } + set labelMode(value: FormLabelMode) { + this._setOption('labelMode', value); + } + + @Input() + get minColWidth(): number { + return this._getOption('minColWidth'); + } + set minColWidth(value: number) { + this._setOption('minColWidth', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) { + return this._getOption('onEditorEnterKey'); + } + set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void)) { + this._setOption('onEditorEnterKey', value); + } + + @Input() + get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) { + return this._getOption('onFieldDataChanged'); + } + set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void)) { + this._setOption('onFieldDataChanged', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get optionalMark(): string { + return this._getOption('optionalMark'); + } + set optionalMark(value: string) { + this._setOption('optionalMark', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get requiredMark(): string { + return this._getOption('requiredMark'); + } + set requiredMark(value: string) { + this._setOption('requiredMark', value); + } + + @Input() + get requiredMessage(): string { + return this._getOption('requiredMessage'); + } + set requiredMessage(value: string) { + this._setOption('requiredMessage', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get screenByWidth(): Function { + return this._getOption('screenByWidth'); + } + set screenByWidth(value: Function) { + this._setOption('screenByWidth', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get showColonAfterLabel(): boolean { + return this._getOption('showColonAfterLabel'); + } + set showColonAfterLabel(value: boolean) { + this._setOption('showColonAfterLabel', value); + } + + @Input() + get showOptionalMark(): boolean { + return this._getOption('showOptionalMark'); + } + set showOptionalMark(value: boolean) { + this._setOption('showOptionalMark', value); + } + + @Input() + get showRequiredMark(): boolean { + return this._getOption('showRequiredMark'); + } + set showRequiredMark(value: boolean) { + this._setOption('showRequiredMark', value); + } + + @Input() + get showValidationSummary(): boolean { + return this._getOption('showValidationSummary'); + } + set showValidationSummary(value: boolean) { + this._setOption('showValidationSummary', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() formDataChange: EventEmitter; + protected get _optionPath() { + return 'form'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'formDataChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFormComponent + ], + exports: [ + DxoDataGridFormComponent + ], +}) +export class DxoDataGridFormModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/format.ts b/packages/devextreme-angular/src/ui/data-grid/nested/format.ts new file mode 100644 index 000000000000..b2fd7e680858 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFormatComponent + ], + exports: [ + DxoDataGridFormatComponent + ], +}) +export class DxoDataGridFormatModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/from.ts b/packages/devextreme-angular/src/ui/data-grid/nested/from.ts new file mode 100644 index 000000000000..35ac8347631e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridFromComponent + ], + exports: [ + DxoDataGridFromComponent + ], +}) +export class DxoDataGridFromModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/group-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/group-item-dxi.ts new file mode 100644 index 000000000000..c83ab5b4ca47 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/group-item-dxi.ts @@ -0,0 +1,140 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SummaryType } from 'devextreme/common/grids'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-group-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridGroupItemComponent extends CollectionNestedOption { + @Input() + get alignByColumn(): boolean { + return this._getOption('alignByColumn'); + } + set alignByColumn(value: boolean) { + this._setOption('alignByColumn', value); + } + + @Input() + get column(): string | undefined { + return this._getOption('column'); + } + set column(value: string | undefined) { + this._setOption('column', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get showInColumn(): string | undefined { + return this._getOption('showInColumn'); + } + set showInColumn(value: string | undefined) { + this._setOption('showInColumn', value); + } + + @Input() + get showInGroupFooter(): boolean { + return this._getOption('showInGroupFooter'); + } + set showInGroupFooter(value: boolean) { + this._setOption('showInGroupFooter', value); + } + + @Input() + get skipEmptyValues(): boolean { + return this._getOption('skipEmptyValues'); + } + set skipEmptyValues(value: boolean) { + this._setOption('skipEmptyValues', value); + } + + @Input() + get summaryType(): SummaryType | string | undefined { + return this._getOption('summaryType'); + } + set summaryType(value: SummaryType | string | undefined) { + this._setOption('summaryType', value); + } + + @Input() + get valueFormat(): Format | string | undefined { + return this._getOption('valueFormat'); + } + set valueFormat(value: Format | string | undefined) { + this._setOption('valueFormat', value); + } + + + protected get _optionPath() { + return 'groupItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridGroupItemComponent + ], + exports: [ + DxiDataGridGroupItemComponent + ], +}) +export class DxiDataGridGroupItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/group-operation-descriptions.ts b/packages/devextreme-angular/src/ui/data-grid/nested/group-operation-descriptions.ts new file mode 100644 index 000000000000..112feb96ac6b --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/group-operation-descriptions.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-group-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridGroupOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get and(): string { + return this._getOption('and'); + } + set and(value: string) { + this._setOption('and', value); + } + + @Input() + get notAnd(): string { + return this._getOption('notAnd'); + } + set notAnd(value: string) { + this._setOption('notAnd', value); + } + + @Input() + get notOr(): string { + return this._getOption('notOr'); + } + set notOr(value: string) { + this._setOption('notOr', value); + } + + @Input() + get or(): string { + return this._getOption('or'); + } + set or(value: string) { + this._setOption('or', value); + } + + + protected get _optionPath() { + return 'groupOperationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridGroupOperationDescriptionsComponent + ], + exports: [ + DxoDataGridGroupOperationDescriptionsComponent + ], +}) +export class DxoDataGridGroupOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/group-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/group-panel.ts new file mode 100644 index 000000000000..df4125b608f9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/group-panel.ts @@ -0,0 +1,102 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-group-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridGroupPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowColumnDragging(): boolean { + return this._getOption('allowColumnDragging'); + } + set allowColumnDragging(value: boolean) { + this._setOption('allowColumnDragging', value); + } + + @Input() + get emptyPanelText(): string { + return this._getOption('emptyPanelText'); + } + set emptyPanelText(value: string) { + this._setOption('emptyPanelText', value); + } + + @Input() + get visible(): Mode | boolean { + return this._getOption('visible'); + } + set visible(value: Mode | boolean) { + this._setOption('visible', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + protected get _optionPath() { + return 'groupPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'visibleChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridGroupPanelComponent + ], + exports: [ + DxoDataGridGroupPanelComponent + ], +}) +export class DxoDataGridGroupPanelModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/grouping.ts b/packages/devextreme-angular/src/ui/data-grid/nested/grouping.ts new file mode 100644 index 000000000000..9ca13a437d45 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/grouping.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { GroupExpandMode } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-grouping', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridGroupingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowCollapsing(): boolean { + return this._getOption('allowCollapsing'); + } + set allowCollapsing(value: boolean) { + this._setOption('allowCollapsing', value); + } + + @Input() + get autoExpandAll(): boolean { + return this._getOption('autoExpandAll'); + } + set autoExpandAll(value: boolean) { + this._setOption('autoExpandAll', value); + } + + @Input() + get contextMenuEnabled(): boolean { + return this._getOption('contextMenuEnabled'); + } + set contextMenuEnabled(value: boolean) { + this._setOption('contextMenuEnabled', value); + } + + @Input() + get expandMode(): GroupExpandMode { + return this._getOption('expandMode'); + } + set expandMode(value: GroupExpandMode) { + this._setOption('expandMode', value); + } + + @Input() + get texts(): { groupByThisColumn?: string, groupContinuedMessage?: string, groupContinuesMessage?: string, ungroup?: string, ungroupAll?: string } { + return this._getOption('texts'); + } + set texts(value: { groupByThisColumn?: string, groupContinuedMessage?: string, groupContinuesMessage?: string, ungroup?: string, ungroupAll?: string }) { + this._setOption('texts', value); + } + + + protected get _optionPath() { + return 'grouping'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridGroupingComponent + ], + exports: [ + DxoDataGridGroupingComponent + ], +}) +export class DxoDataGridGroupingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/header-filter.ts b/packages/devextreme-angular/src/ui/data-grid/nested/header-filter.ts new file mode 100644 index 000000000000..1b775e5563a5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/header-filter.ts @@ -0,0 +1,156 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; +import { ColumnHeaderFilterSearchConfig, HeaderFilterGroupInterval, HeaderFilterSearchConfig } from 'devextreme/common/grids'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-header-filter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridHeaderFilterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get dataSource(): Store | DataSourceOptions | Function | null | undefined | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSourceOptions | Function | null | undefined | Array) { + this._setOption('dataSource', value); + } + + @Input() + get groupInterval(): HeaderFilterGroupInterval | number | undefined { + return this._getOption('groupInterval'); + } + set groupInterval(value: HeaderFilterGroupInterval | number | undefined) { + this._setOption('groupInterval', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get search(): ColumnHeaderFilterSearchConfig | HeaderFilterSearchConfig { + return this._getOption('search'); + } + set search(value: ColumnHeaderFilterSearchConfig | HeaderFilterSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchMode(): SearchMode { + return this._getOption('searchMode'); + } + set searchMode(value: SearchMode) { + this._setOption('searchMode', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get texts(): { cancel?: string, emptyValue?: string, ok?: string } { + return this._getOption('texts'); + } + set texts(value: { cancel?: string, emptyValue?: string, ok?: string }) { + this._setOption('texts', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'headerFilter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridHeaderFilterComponent + ], + exports: [ + DxoDataGridHeaderFilterComponent + ], +}) +export class DxoDataGridHeaderFilterModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/hide.ts b/packages/devextreme-angular/src/ui/data-grid/nested/hide.ts new file mode 100644 index 000000000000..2b0aeae0cea5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridHideComponent + ], + exports: [ + DxoDataGridHideComponent + ], +}) +export class DxoDataGridHideModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/index.ts b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts new file mode 100644 index 000000000000..feb3985c8d0e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts @@ -0,0 +1,65 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './button-options'; +export * from './change-dxi'; +export * from './col-count-by-screen'; +export * from './collision'; +export * from './column-chooser'; +export * from './column-dxi'; +export * from './column-fixing'; +export * from './cursor-offset'; +export * from './custom-operation-dxi'; +export * from './editing'; +export * from './export'; +export * from './field-dxi'; +export * from './filter-builder-popup'; +export * from './filter-builder'; +export * from './filter-operation-descriptions'; +export * from './filter-panel'; +export * from './filter-row'; +export * from './form-item'; +export * from './form'; +export * from './format'; +export * from './from'; +export * from './group-item-dxi'; +export * from './group-operation-descriptions'; +export * from './group-panel'; +export * from './grouping'; +export * from './header-filter'; +export * from './hide'; +export * from './item-dxi'; +export * from './keyboard-navigation'; +export * from './label'; +export * from './load-panel'; +export * from './lookup'; +export * from './master-detail'; +export * from './my'; +export * from './offset'; +export * from './operation-descriptions'; +export * from './pager'; +export * from './paging'; +export * from './popup'; +export * from './position'; +export * from './remote-operations'; +export * from './row-dragging'; +export * from './scrolling'; +export * from './search-panel'; +export * from './search'; +export * from './selection'; +export * from './show'; +export * from './sort-by-group-summary-info-dxi'; +export * from './sorting'; +export * from './state-storing'; +export * from './summary'; +export * from './tab-dxi'; +export * from './tab-panel-options'; +export * from './texts'; +export * from './to'; +export * from './toolbar-item-dxi'; +export * from './toolbar'; +export * from './total-item-dxi'; +export * from './validation-rule-dxi'; +export * from './value-format'; + diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts new file mode 100644 index 000000000000..d5aff3d97b5f --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts @@ -0,0 +1,418 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { AsyncRule, CompareRule, CustomRule, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, StringLengthRule, ToolbarItemComponent, ToolbarItemLocation, VerticalAlignment } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; +import { DataGridPredefinedToolbarItem } from 'devextreme/ui/data_grid'; +import { ButtonItem, EmptyItem, FormItemComponent, FormItemType, GroupItem, LabelLocation, SimpleItem, TabbedItem } from 'devextreme/ui/form'; +import { Properties as dxTabPanelOptions } from 'devextreme/ui/tab_panel'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDataGridValidationRuleComponent } from './validation-rule-dxi'; +import { DxiDataGridTabComponent } from './tab-dxi'; + + +@Component({ + selector: 'dxi-data-grid-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDataGridItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined | DataGridPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: string | undefined | DataGridPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get captionTemplate(): any { + return this._getOption('captionTemplate'); + } + set captionTemplate(value: any) { + this._setOption('captionTemplate', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): Array, tabTemplate?: any | undefined, template?: any | undefined, title?: string | undefined }> { + return this._getOption('tabs'); + } + set tabs(value: Array, tabTemplate?: any | undefined, template?: any | undefined, title?: string | undefined }>) { + this._setOption('tabs', value); + } + + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + @ContentChildren(forwardRef(() => DxiDataGridItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + @ContentChildren(forwardRef(() => DxiDataGridTabComponent)) + get tabsChildren(): QueryList { + return this._getOption('tabs'); + } + set tabsChildren(value) { + this.setChildren('tabs', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridItemComponent + ], + exports: [ + DxiDataGridItemComponent + ], +}) +export class DxiDataGridItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/keyboard-navigation.ts b/packages/devextreme-angular/src/ui/data-grid/nested/keyboard-navigation.ts new file mode 100644 index 000000000000..2b874b74bf79 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/keyboard-navigation.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { EnterKeyAction, EnterKeyDirection } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-keyboard-navigation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridKeyboardNavigationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editOnKeyPress(): boolean { + return this._getOption('editOnKeyPress'); + } + set editOnKeyPress(value: boolean) { + this._setOption('editOnKeyPress', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get enterKeyAction(): EnterKeyAction { + return this._getOption('enterKeyAction'); + } + set enterKeyAction(value: EnterKeyAction) { + this._setOption('enterKeyAction', value); + } + + @Input() + get enterKeyDirection(): EnterKeyDirection { + return this._getOption('enterKeyDirection'); + } + set enterKeyDirection(value: EnterKeyDirection) { + this._setOption('enterKeyDirection', value); + } + + + protected get _optionPath() { + return 'keyboardNavigation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridKeyboardNavigationComponent + ], + exports: [ + DxoDataGridKeyboardNavigationComponent + ], +}) +export class DxoDataGridKeyboardNavigationModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/label.ts b/packages/devextreme-angular/src/ui/data-grid/nested/label.ts new file mode 100644 index 000000000000..d3b614648058 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/label.ts @@ -0,0 +1,135 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { HorizontalAlignment } from 'devextreme/common'; +import { LabelLocation } from 'devextreme/ui/form'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-label', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoDataGridLabelComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get alignment(): HorizontalAlignment { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment) { + this._setOption('alignment', value); + } + + @Input() + get location(): LabelLocation { + return this._getOption('location'); + } + set location(value: LabelLocation) { + this._setOption('location', value); + } + + @Input() + get showColon(): boolean { + return this._getOption('showColon'); + } + set showColon(value: boolean) { + this._setOption('showColon', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridLabelComponent + ], + exports: [ + DxoDataGridLabelComponent + ], +}) +export class DxoDataGridLabelModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts new file mode 100644 index 000000000000..970924adad6c --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/load-panel.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-load-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridLoadPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): Mode | boolean { + return this._getOption('enabled'); + } + set enabled(value: Mode | boolean) { + this._setOption('enabled', value); + } + + @Input() + get height(): number | string { + return this._getOption('height'); + } + set height(value: number | string) { + this._setOption('height', value); + } + + @Input() + get indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showIndicator(): boolean { + return this._getOption('showIndicator'); + } + set showIndicator(value: boolean) { + this._setOption('showIndicator', value); + } + + @Input() + get showPane(): boolean { + return this._getOption('showPane'); + } + set showPane(value: boolean) { + this._setOption('showPane', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get width(): number | string { + return this._getOption('width'); + } + set width(value: number | string) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'loadPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridLoadPanelComponent + ], + exports: [ + DxoDataGridLoadPanelComponent + ], +}) +export class DxoDataGridLoadPanelModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/lookup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/lookup.ts new file mode 100644 index 000000000000..26aa9fe93e22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/lookup.ts @@ -0,0 +1,106 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-lookup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridLookupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowClearing(): boolean { + return this._getOption('allowClearing'); + } + set allowClearing(value: boolean) { + this._setOption('allowClearing', value); + } + + @Input() + get calculateCellValue(): Function { + return this._getOption('calculateCellValue'); + } + set calculateCellValue(value: Function) { + this._setOption('calculateCellValue', value); + } + + @Input() + get dataSource(): Store | DataSourceOptions | Function | null | undefined | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSourceOptions | Function | null | undefined | Array) { + this._setOption('dataSource', value); + } + + @Input() + get displayExpr(): Function | string | undefined { + return this._getOption('displayExpr'); + } + set displayExpr(value: Function | string | undefined) { + this._setOption('displayExpr', value); + } + + @Input() + get valueExpr(): string | undefined | Function { + return this._getOption('valueExpr'); + } + set valueExpr(value: string | undefined | Function) { + this._setOption('valueExpr', value); + } + + + protected get _optionPath() { + return 'lookup'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridLookupComponent + ], + exports: [ + DxoDataGridLookupComponent + ], +}) +export class DxoDataGridLookupModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/master-detail.ts b/packages/devextreme-angular/src/ui/data-grid/nested/master-detail.ts new file mode 100644 index 000000000000..03e635b75aa7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/master-detail.ts @@ -0,0 +1,109 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-master-detail', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoDataGridMasterDetailComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get autoExpandAll(): boolean { + return this._getOption('autoExpandAll'); + } + set autoExpandAll(value: boolean) { + this._setOption('autoExpandAll', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + + protected get _optionPath() { + return 'masterDetail'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridMasterDetailComponent + ], + exports: [ + DxoDataGridMasterDetailComponent + ], +}) +export class DxoDataGridMasterDetailModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/my.ts b/packages/devextreme-angular/src/ui/data-grid/nested/my.ts new file mode 100644 index 000000000000..7e681557f948 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridMyComponent + ], + exports: [ + DxoDataGridMyComponent + ], +}) +export class DxoDataGridMyModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/ng-package.json b/packages/devextreme-angular/src/ui/data-grid/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/offset.ts b/packages/devextreme-angular/src/ui/data-grid/nested/offset.ts new file mode 100644 index 000000000000..c52521266b00 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridOffsetComponent + ], + exports: [ + DxoDataGridOffsetComponent + ], +}) +export class DxoDataGridOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/operation-descriptions.ts b/packages/devextreme-angular/src/ui/data-grid/nested/operation-descriptions.ts new file mode 100644 index 000000000000..03b14f181b1e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/operation-descriptions.ts @@ -0,0 +1,152 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get between(): string { + return this._getOption('between'); + } + set between(value: string) { + this._setOption('between', value); + } + + @Input() + get contains(): string { + return this._getOption('contains'); + } + set contains(value: string) { + this._setOption('contains', value); + } + + @Input() + get endsWith(): string { + return this._getOption('endsWith'); + } + set endsWith(value: string) { + this._setOption('endsWith', value); + } + + @Input() + get equal(): string { + return this._getOption('equal'); + } + set equal(value: string) { + this._setOption('equal', value); + } + + @Input() + get greaterThan(): string { + return this._getOption('greaterThan'); + } + set greaterThan(value: string) { + this._setOption('greaterThan', value); + } + + @Input() + get greaterThanOrEqual(): string { + return this._getOption('greaterThanOrEqual'); + } + set greaterThanOrEqual(value: string) { + this._setOption('greaterThanOrEqual', value); + } + + @Input() + get lessThan(): string { + return this._getOption('lessThan'); + } + set lessThan(value: string) { + this._setOption('lessThan', value); + } + + @Input() + get lessThanOrEqual(): string { + return this._getOption('lessThanOrEqual'); + } + set lessThanOrEqual(value: string) { + this._setOption('lessThanOrEqual', value); + } + + @Input() + get notContains(): string { + return this._getOption('notContains'); + } + set notContains(value: string) { + this._setOption('notContains', value); + } + + @Input() + get notEqual(): string { + return this._getOption('notEqual'); + } + set notEqual(value: string) { + this._setOption('notEqual', value); + } + + @Input() + get startsWith(): string { + return this._getOption('startsWith'); + } + set startsWith(value: string) { + this._setOption('startsWith', value); + } + + + protected get _optionPath() { + return 'operationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridOperationDescriptionsComponent + ], + exports: [ + DxoDataGridOperationDescriptionsComponent + ], +}) +export class DxoDataGridOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/pager.ts b/packages/devextreme-angular/src/ui/data-grid/nested/pager.ts new file mode 100644 index 000000000000..9a07d8340370 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/pager.ts @@ -0,0 +1,130 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; +import { PagerDisplayMode, PagerPageSize } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-pager', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridPagerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowedPageSizes(): Mode | Array { + return this._getOption('allowedPageSizes'); + } + set allowedPageSizes(value: Mode | Array) { + this._setOption('allowedPageSizes', value); + } + + @Input() + get displayMode(): PagerDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: PagerDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get infoText(): string { + return this._getOption('infoText'); + } + set infoText(value: string) { + this._setOption('infoText', value); + } + + @Input() + get label(): string { + return this._getOption('label'); + } + set label(value: string) { + this._setOption('label', value); + } + + @Input() + get showInfo(): boolean { + return this._getOption('showInfo'); + } + set showInfo(value: boolean) { + this._setOption('showInfo', value); + } + + @Input() + get showNavigationButtons(): boolean { + return this._getOption('showNavigationButtons'); + } + set showNavigationButtons(value: boolean) { + this._setOption('showNavigationButtons', value); + } + + @Input() + get showPageSizeSelector(): boolean { + return this._getOption('showPageSizeSelector'); + } + set showPageSizeSelector(value: boolean) { + this._setOption('showPageSizeSelector', value); + } + + @Input() + get visible(): Mode | boolean { + return this._getOption('visible'); + } + set visible(value: Mode | boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'pager'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridPagerComponent + ], + exports: [ + DxoDataGridPagerComponent + ], +}) +export class DxoDataGridPagerModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/paging.ts b/packages/devextreme-angular/src/ui/data-grid/nested/paging.ts new file mode 100644 index 000000000000..7deb438a273a --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/paging.ts @@ -0,0 +1,109 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-paging', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridPagingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get pageIndex(): number { + return this._getOption('pageIndex'); + } + set pageIndex(value: number) { + this._setOption('pageIndex', value); + } + + @Input() + get pageSize(): number { + return this._getOption('pageSize'); + } + set pageSize(value: number) { + this._setOption('pageSize', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() pageIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() pageSizeChange: EventEmitter; + protected get _optionPath() { + return 'paging'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'pageIndexChange' }, + { emit: 'pageSizeChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridPagingComponent + ], + exports: [ + DxoDataGridPagingComponent + ], +}) +export class DxoDataGridPagingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts new file mode 100644 index 000000000000..dba9c0bda3b0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-data-grid-popup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'popup'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridPopupComponent + ], + exports: [ + DxoDataGridPopupComponent + ], +}) +export class DxoDataGridPopupModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/position.ts b/packages/devextreme-angular/src/ui/data-grid/nested/position.ts new file mode 100644 index 000000000000..4dfa5e875005 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridPositionComponent + ], + exports: [ + DxoDataGridPositionComponent + ], +}) +export class DxoDataGridPositionModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/remote-operations.ts b/packages/devextreme-angular/src/ui/data-grid/nested/remote-operations.ts new file mode 100644 index 000000000000..48d3da99811d --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/remote-operations.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-remote-operations', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridRemoteOperationsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get filtering(): boolean { + return this._getOption('filtering'); + } + set filtering(value: boolean) { + this._setOption('filtering', value); + } + + @Input() + get grouping(): boolean { + return this._getOption('grouping'); + } + set grouping(value: boolean) { + this._setOption('grouping', value); + } + + @Input() + get groupPaging(): boolean { + return this._getOption('groupPaging'); + } + set groupPaging(value: boolean) { + this._setOption('groupPaging', value); + } + + @Input() + get paging(): boolean { + return this._getOption('paging'); + } + set paging(value: boolean) { + this._setOption('paging', value); + } + + @Input() + get sorting(): boolean { + return this._getOption('sorting'); + } + set sorting(value: boolean) { + this._setOption('sorting', value); + } + + @Input() + get summary(): boolean { + return this._getOption('summary'); + } + set summary(value: boolean) { + this._setOption('summary', value); + } + + + protected get _optionPath() { + return 'remoteOperations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridRemoteOperationsComponent + ], + exports: [ + DxoDataGridRemoteOperationsComponent + ], +}) +export class DxoDataGridRemoteOperationsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/row-dragging.ts b/packages/devextreme-angular/src/ui/data-grid/nested/row-dragging.ts new file mode 100644 index 000000000000..8ec50551e82a --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/row-dragging.ts @@ -0,0 +1,250 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DragDirection, DragHighlight } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-row-dragging', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridRowDraggingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDropInsideItem(): boolean { + return this._getOption('allowDropInsideItem'); + } + set allowDropInsideItem(value: boolean) { + this._setOption('allowDropInsideItem', value); + } + + @Input() + get allowReordering(): boolean { + return this._getOption('allowReordering'); + } + set allowReordering(value: boolean) { + this._setOption('allowReordering', value); + } + + @Input() + get autoScroll(): boolean { + return this._getOption('autoScroll'); + } + set autoScroll(value: boolean) { + this._setOption('autoScroll', value); + } + + @Input() + get boundary(): UserDefinedElement | string | undefined { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | undefined) { + this._setOption('boundary', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get cursorOffset(): string | { x?: number, y?: number } { + return this._getOption('cursorOffset'); + } + set cursorOffset(value: string | { x?: number, y?: number }) { + this._setOption('cursorOffset', value); + } + + @Input() + get data(): any | undefined { + return this._getOption('data'); + } + set data(value: any | undefined) { + this._setOption('data', value); + } + + @Input() + get dragDirection(): DragDirection { + return this._getOption('dragDirection'); + } + set dragDirection(value: DragDirection) { + this._setOption('dragDirection', value); + } + + @Input() + get dragTemplate(): any | undefined { + return this._getOption('dragTemplate'); + } + set dragTemplate(value: any | undefined) { + this._setOption('dragTemplate', value); + } + + @Input() + get dropFeedbackMode(): DragHighlight { + return this._getOption('dropFeedbackMode'); + } + set dropFeedbackMode(value: DragHighlight) { + this._setOption('dropFeedbackMode', value); + } + + @Input() + get filter(): string { + return this._getOption('filter'); + } + set filter(value: string) { + this._setOption('filter', value); + } + + @Input() + get group(): string | undefined { + return this._getOption('group'); + } + set group(value: string | undefined) { + this._setOption('group', value); + } + + @Input() + get handle(): string { + return this._getOption('handle'); + } + set handle(value: string) { + this._setOption('handle', value); + } + + @Input() + get onAdd(): Function { + return this._getOption('onAdd'); + } + set onAdd(value: Function) { + this._setOption('onAdd', value); + } + + @Input() + get onDragChange(): Function { + return this._getOption('onDragChange'); + } + set onDragChange(value: Function) { + this._setOption('onDragChange', value); + } + + @Input() + get onDragEnd(): Function { + return this._getOption('onDragEnd'); + } + set onDragEnd(value: Function) { + this._setOption('onDragEnd', value); + } + + @Input() + get onDragMove(): Function { + return this._getOption('onDragMove'); + } + set onDragMove(value: Function) { + this._setOption('onDragMove', value); + } + + @Input() + get onDragStart(): Function { + return this._getOption('onDragStart'); + } + set onDragStart(value: Function) { + this._setOption('onDragStart', value); + } + + @Input() + get onRemove(): Function { + return this._getOption('onRemove'); + } + set onRemove(value: Function) { + this._setOption('onRemove', value); + } + + @Input() + get onReorder(): Function { + return this._getOption('onReorder'); + } + set onReorder(value: Function) { + this._setOption('onReorder', value); + } + + @Input() + get scrollSensitivity(): number { + return this._getOption('scrollSensitivity'); + } + set scrollSensitivity(value: number) { + this._setOption('scrollSensitivity', value); + } + + @Input() + get scrollSpeed(): number { + return this._getOption('scrollSpeed'); + } + set scrollSpeed(value: number) { + this._setOption('scrollSpeed', value); + } + + @Input() + get showDragIcons(): boolean { + return this._getOption('showDragIcons'); + } + set showDragIcons(value: boolean) { + this._setOption('showDragIcons', value); + } + + + protected get _optionPath() { + return 'rowDragging'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridRowDraggingComponent + ], + exports: [ + DxoDataGridRowDraggingComponent + ], +}) +export class DxoDataGridRowDraggingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/scrolling.ts b/packages/devextreme-angular/src/ui/data-grid/nested/scrolling.ts new file mode 100644 index 000000000000..7dacf31f0fcc --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/scrolling.ts @@ -0,0 +1,139 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode, ScrollbarMode } from 'devextreme/common'; +import { DataRenderMode } from 'devextreme/common/grids'; +import { DataGridScrollMode } from 'devextreme/ui/data_grid'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-scrolling', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridScrollingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get columnRenderingMode(): DataRenderMode { + return this._getOption('columnRenderingMode'); + } + set columnRenderingMode(value: DataRenderMode) { + this._setOption('columnRenderingMode', value); + } + + @Input() + get mode(): DataGridScrollMode { + return this._getOption('mode'); + } + set mode(value: DataGridScrollMode) { + this._setOption('mode', value); + } + + @Input() + get preloadEnabled(): boolean { + return this._getOption('preloadEnabled'); + } + set preloadEnabled(value: boolean) { + this._setOption('preloadEnabled', value); + } + + @Input() + get renderAsync(): boolean | undefined { + return this._getOption('renderAsync'); + } + set renderAsync(value: boolean | undefined) { + this._setOption('renderAsync', value); + } + + @Input() + get rowRenderingMode(): DataRenderMode { + return this._getOption('rowRenderingMode'); + } + set rowRenderingMode(value: DataRenderMode) { + this._setOption('rowRenderingMode', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollByThumb(): boolean { + return this._getOption('scrollByThumb'); + } + set scrollByThumb(value: boolean) { + this._setOption('scrollByThumb', value); + } + + @Input() + get showScrollbar(): ScrollbarMode { + return this._getOption('showScrollbar'); + } + set showScrollbar(value: ScrollbarMode) { + this._setOption('showScrollbar', value); + } + + @Input() + get useNative(): Mode | boolean { + return this._getOption('useNative'); + } + set useNative(value: Mode | boolean) { + this._setOption('useNative', value); + } + + + protected get _optionPath() { + return 'scrolling'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridScrollingComponent + ], + exports: [ + DxoDataGridScrollingComponent + ], +}) +export class DxoDataGridScrollingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/search-panel.ts b/packages/devextreme-angular/src/ui/data-grid/nested/search-panel.ts new file mode 100644 index 000000000000..2e1268cf24e0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/search-panel.ts @@ -0,0 +1,133 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-search-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridSearchPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get highlightCaseSensitive(): boolean { + return this._getOption('highlightCaseSensitive'); + } + set highlightCaseSensitive(value: boolean) { + this._setOption('highlightCaseSensitive', value); + } + + @Input() + get highlightSearchText(): boolean { + return this._getOption('highlightSearchText'); + } + set highlightSearchText(value: boolean) { + this._setOption('highlightSearchText', value); + } + + @Input() + get placeholder(): string { + return this._getOption('placeholder'); + } + set placeholder(value: string) { + this._setOption('placeholder', value); + } + + @Input() + get searchVisibleColumnsOnly(): boolean { + return this._getOption('searchVisibleColumnsOnly'); + } + set searchVisibleColumnsOnly(value: boolean) { + this._setOption('searchVisibleColumnsOnly', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | string { + return this._getOption('width'); + } + set width(value: number | string) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() textChange: EventEmitter; + protected get _optionPath() { + return 'searchPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'textChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridSearchPanelComponent + ], + exports: [ + DxoDataGridSearchPanelComponent + ], +}) +export class DxoDataGridSearchPanelModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/search.ts b/packages/devextreme-angular/src/ui/data-grid/nested/search.ts new file mode 100644 index 000000000000..c48269dc60cd --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/search.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-search', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridSearchComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get timeout(): number { + return this._getOption('timeout'); + } + set timeout(value: number) { + this._setOption('timeout', value); + } + + @Input() + get mode(): SearchMode { + return this._getOption('mode'); + } + set mode(value: SearchMode) { + this._setOption('mode', value); + } + + @Input() + get searchExpr(): Function | string | undefined | Array { + return this._getOption('searchExpr'); + } + set searchExpr(value: Function | string | undefined | Array) { + this._setOption('searchExpr', value); + } + + + protected get _optionPath() { + return 'search'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridSearchComponent + ], + exports: [ + DxoDataGridSearchComponent + ], +}) +export class DxoDataGridSearchModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/selection.ts b/packages/devextreme-angular/src/ui/data-grid/nested/selection.ts new file mode 100644 index 000000000000..cc2a974da338 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/selection.ts @@ -0,0 +1,122 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SelectAllMode, SingleMultipleOrNone } from 'devextreme/common'; +import { SelectionColumnDisplayMode } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-selection', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridSelectionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get recursive(): boolean { + return this._getOption('recursive'); + } + set recursive(value: boolean) { + this._setOption('recursive', value); + } + + @Input() + get selectByClick(): boolean { + return this._getOption('selectByClick'); + } + set selectByClick(value: boolean) { + this._setOption('selectByClick', value); + } + + @Input() + get deferred(): boolean { + return this._getOption('deferred'); + } + set deferred(value: boolean) { + this._setOption('deferred', value); + } + + @Input() + get mode(): SingleMultipleOrNone { + return this._getOption('mode'); + } + set mode(value: SingleMultipleOrNone) { + this._setOption('mode', value); + } + + @Input() + get selectAllMode(): SelectAllMode { + return this._getOption('selectAllMode'); + } + set selectAllMode(value: SelectAllMode) { + this._setOption('selectAllMode', value); + } + + @Input() + get showCheckBoxesMode(): SelectionColumnDisplayMode { + return this._getOption('showCheckBoxesMode'); + } + set showCheckBoxesMode(value: SelectionColumnDisplayMode) { + this._setOption('showCheckBoxesMode', value); + } + + + protected get _optionPath() { + return 'selection'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridSelectionComponent + ], + exports: [ + DxoDataGridSelectionComponent + ], +}) +export class DxoDataGridSelectionModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/show.ts b/packages/devextreme-angular/src/ui/data-grid/nested/show.ts new file mode 100644 index 000000000000..ccea2eef0e03 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridShowComponent + ], + exports: [ + DxoDataGridShowComponent + ], +}) +export class DxoDataGridShowModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/sort-by-group-summary-info-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/sort-by-group-summary-info-dxi.ts new file mode 100644 index 000000000000..e30ee33b8c8b --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/sort-by-group-summary-info-dxi.ts @@ -0,0 +1,83 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SortOrder } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-sort-by-group-summary-info', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridSortByGroupSummaryInfoComponent extends CollectionNestedOption { + @Input() + get groupColumn(): string | undefined { + return this._getOption('groupColumn'); + } + set groupColumn(value: string | undefined) { + this._setOption('groupColumn', value); + } + + @Input() + get sortOrder(): SortOrder | string | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | string | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get summaryItem(): number | string | undefined { + return this._getOption('summaryItem'); + } + set summaryItem(value: number | string | undefined) { + this._setOption('summaryItem', value); + } + + + protected get _optionPath() { + return 'sortByGroupSummaryInfo'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridSortByGroupSummaryInfoComponent + ], + exports: [ + DxiDataGridSortByGroupSummaryInfoComponent + ], +}) +export class DxiDataGridSortByGroupSummaryInfoModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/sorting.ts b/packages/devextreme-angular/src/ui/data-grid/nested/sorting.ts new file mode 100644 index 000000000000..fccc64078f1c --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/sorting.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SingleMultipleOrNone } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-sorting', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridSortingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get ascendingText(): string { + return this._getOption('ascendingText'); + } + set ascendingText(value: string) { + this._setOption('ascendingText', value); + } + + @Input() + get clearText(): string { + return this._getOption('clearText'); + } + set clearText(value: string) { + this._setOption('clearText', value); + } + + @Input() + get descendingText(): string { + return this._getOption('descendingText'); + } + set descendingText(value: string) { + this._setOption('descendingText', value); + } + + @Input() + get mode(): SingleMultipleOrNone { + return this._getOption('mode'); + } + set mode(value: SingleMultipleOrNone) { + this._setOption('mode', value); + } + + @Input() + get showSortIndexes(): boolean { + return this._getOption('showSortIndexes'); + } + set showSortIndexes(value: boolean) { + this._setOption('showSortIndexes', value); + } + + + protected get _optionPath() { + return 'sorting'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridSortingComponent + ], + exports: [ + DxoDataGridSortingComponent + ], +}) +export class DxoDataGridSortingModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/state-storing.ts b/packages/devextreme-angular/src/ui/data-grid/nested/state-storing.ts new file mode 100644 index 000000000000..213f9ab04b97 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/state-storing.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { StateStoreType } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-state-storing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridStateStoringComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customLoad(): Function { + return this._getOption('customLoad'); + } + set customLoad(value: Function) { + this._setOption('customLoad', value); + } + + @Input() + get customSave(): Function { + return this._getOption('customSave'); + } + set customSave(value: Function) { + this._setOption('customSave', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get savingTimeout(): number { + return this._getOption('savingTimeout'); + } + set savingTimeout(value: number) { + this._setOption('savingTimeout', value); + } + + @Input() + get storageKey(): string { + return this._getOption('storageKey'); + } + set storageKey(value: string) { + this._setOption('storageKey', value); + } + + @Input() + get type(): StateStoreType { + return this._getOption('type'); + } + set type(value: StateStoreType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'stateStoring'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridStateStoringComponent + ], + exports: [ + DxoDataGridStateStoringComponent + ], +}) +export class DxoDataGridStateStoringModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/summary.ts b/packages/devextreme-angular/src/ui/data-grid/nested/summary.ts new file mode 100644 index 000000000000..b8638b46f205 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/summary.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { SummaryType } from 'devextreme/common/grids'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridGroupItemComponent } from './group-item-dxi'; +import { DxiDataGridTotalItemComponent } from './total-item-dxi'; + + +@Component({ + selector: 'dxo-data-grid-summary', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridSummaryComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get calculateCustomSummary(): Function { + return this._getOption('calculateCustomSummary'); + } + set calculateCustomSummary(value: Function) { + this._setOption('calculateCustomSummary', value); + } + + @Input() + get groupItems(): Array { + return this._getOption('groupItems'); + } + set groupItems(value: Array) { + this._setOption('groupItems', value); + } + + @Input() + get recalculateWhileEditing(): boolean { + return this._getOption('recalculateWhileEditing'); + } + set recalculateWhileEditing(value: boolean) { + this._setOption('recalculateWhileEditing', value); + } + + @Input() + get skipEmptyValues(): boolean { + return this._getOption('skipEmptyValues'); + } + set skipEmptyValues(value: boolean) { + this._setOption('skipEmptyValues', value); + } + + @Input() + get texts(): { avg?: string, avgOtherColumn?: string, count?: string, max?: string, maxOtherColumn?: string, min?: string, minOtherColumn?: string, sum?: string, sumOtherColumn?: string } { + return this._getOption('texts'); + } + set texts(value: { avg?: string, avgOtherColumn?: string, count?: string, max?: string, maxOtherColumn?: string, min?: string, minOtherColumn?: string, sum?: string, sumOtherColumn?: string }) { + this._setOption('texts', value); + } + + @Input() + get totalItems(): Array { + return this._getOption('totalItems'); + } + set totalItems(value: Array) { + this._setOption('totalItems', value); + } + + + protected get _optionPath() { + return 'summary'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridGroupItemComponent)) + get groupItemsChildren(): QueryList { + return this._getOption('groupItems'); + } + set groupItemsChildren(value) { + this.setChildren('groupItems', value); + } + + @ContentChildren(forwardRef(() => DxiDataGridTotalItemComponent)) + get totalItemsChildren(): QueryList { + return this._getOption('totalItems'); + } + set totalItemsChildren(value) { + this.setChildren('totalItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridSummaryComponent + ], + exports: [ + DxoDataGridSummaryComponent + ], +}) +export class DxoDataGridSummaryModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts new file mode 100644 index 000000000000..4246c7d90d4f --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts @@ -0,0 +1,172 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ButtonItem, EmptyItem, GroupItem, SimpleItem, TabbedItem } from 'devextreme/ui/form'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDataGridItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxi-data-grid-tab', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDataGridTabComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get badge(): string | undefined { + return this._getOption('badge'); + } + set badge(value: string | undefined) { + this._setOption('badge', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabTemplate(): any | undefined { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any | undefined) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get title(): string | undefined { + return this._getOption('title'); + } + set title(value: string | undefined) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridTabComponent + ], + exports: [ + DxiDataGridTabComponent + ], +}) +export class DxiDataGridTabModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts new file mode 100644 index 000000000000..ab5bda20cf49 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts @@ -0,0 +1,453 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-data-grid-tab-panel-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridTabPanelOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get animationEnabled(): boolean { + return this._getOption('animationEnabled'); + } + set animationEnabled(value: boolean) { + this._setOption('animationEnabled', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get iconPosition(): TabsIconPosition { + return this._getOption('iconPosition'); + } + set iconPosition(value: TabsIconPosition) { + this._setOption('iconPosition', value); + } + + @Input() + get itemHoldTimeout(): number { + return this._getOption('itemHoldTimeout'); + } + set itemHoldTimeout(value: number) { + this._setOption('itemHoldTimeout', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get itemTitleTemplate(): any { + return this._getOption('itemTitleTemplate'); + } + set itemTitleTemplate(value: any) { + this._setOption('itemTitleTemplate', value); + } + + @Input() + get loop(): boolean { + return this._getOption('loop'); + } + set loop(value: boolean) { + this._setOption('loop', value); + } + + @Input() + get noDataText(): string { + return this._getOption('noDataText'); + } + set noDataText(value: string) { + this._setOption('noDataText', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemHold(): ((e: ItemHoldEvent) => void) { + return this._getOption('onItemHold'); + } + set onItemHold(value: ((e: ItemHoldEvent) => void)) { + this._setOption('onItemHold', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onSelectionChanged(): ((e: SelectionChangedEvent) => void) { + return this._getOption('onSelectionChanged'); + } + set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) { + this._setOption('onSelectionChanged', value); + } + + @Input() + get onTitleClick(): ((e: TitleClickEvent) => void) { + return this._getOption('onTitleClick'); + } + set onTitleClick(value: ((e: TitleClickEvent) => void)) { + this._setOption('onTitleClick', value); + } + + @Input() + get onTitleHold(): ((e: TitleHoldEvent) => void) { + return this._getOption('onTitleHold'); + } + set onTitleHold(value: ((e: TitleHoldEvent) => void)) { + this._setOption('onTitleHold', value); + } + + @Input() + get onTitleRendered(): ((e: TitleRenderedEvent) => void) { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) { + this._setOption('onTitleRendered', value); + } + + @Input() + get repaintChangesOnly(): boolean { + return this._getOption('repaintChangesOnly'); + } + set repaintChangesOnly(value: boolean) { + this._setOption('repaintChangesOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get selectedIndex(): number { + return this._getOption('selectedIndex'); + } + set selectedIndex(value: number) { + this._setOption('selectedIndex', value); + } + + @Input() + get selectedItem(): any { + return this._getOption('selectedItem'); + } + set selectedItem(value: any) { + this._setOption('selectedItem', value); + } + + @Input() + get showNavButtons(): boolean { + return this._getOption('showNavButtons'); + } + set showNavButtons(value: boolean) { + this._setOption('showNavButtons', value); + } + + @Input() + get stylingMode(): TabsStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: TabsStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get swipeEnabled(): boolean { + return this._getOption('swipeEnabled'); + } + set swipeEnabled(value: boolean) { + this._setOption('swipeEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get tabsPosition(): Position { + return this._getOption('tabsPosition'); + } + set tabsPosition(value: Position) { + this._setOption('tabsPosition', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedItemChange: EventEmitter; + protected get _optionPath() { + return 'tabPanelOptions'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'itemsChange' }, + { emit: 'selectedIndexChange' }, + { emit: 'selectedItemChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridTabPanelOptionsComponent + ], + exports: [ + DxoDataGridTabPanelOptionsComponent + ], +}) +export class DxoDataGridTabPanelOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/texts.ts b/packages/devextreme-angular/src/ui/data-grid/nested/texts.ts new file mode 100644 index 000000000000..0fec83d2f221 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/texts.ts @@ -0,0 +1,368 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-texts', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridTextsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get fix(): string { + return this._getOption('fix'); + } + set fix(value: string) { + this._setOption('fix', value); + } + + @Input() + get leftPosition(): string { + return this._getOption('leftPosition'); + } + set leftPosition(value: string) { + this._setOption('leftPosition', value); + } + + @Input() + get rightPosition(): string { + return this._getOption('rightPosition'); + } + set rightPosition(value: string) { + this._setOption('rightPosition', value); + } + + @Input() + get unfix(): string { + return this._getOption('unfix'); + } + set unfix(value: string) { + this._setOption('unfix', value); + } + + @Input() + get addRow(): string { + return this._getOption('addRow'); + } + set addRow(value: string) { + this._setOption('addRow', value); + } + + @Input() + get cancelAllChanges(): string { + return this._getOption('cancelAllChanges'); + } + set cancelAllChanges(value: string) { + this._setOption('cancelAllChanges', value); + } + + @Input() + get cancelRowChanges(): string { + return this._getOption('cancelRowChanges'); + } + set cancelRowChanges(value: string) { + this._setOption('cancelRowChanges', value); + } + + @Input() + get confirmDeleteMessage(): string { + return this._getOption('confirmDeleteMessage'); + } + set confirmDeleteMessage(value: string) { + this._setOption('confirmDeleteMessage', value); + } + + @Input() + get confirmDeleteTitle(): string { + return this._getOption('confirmDeleteTitle'); + } + set confirmDeleteTitle(value: string) { + this._setOption('confirmDeleteTitle', value); + } + + @Input() + get deleteRow(): string { + return this._getOption('deleteRow'); + } + set deleteRow(value: string) { + this._setOption('deleteRow', value); + } + + @Input() + get editRow(): string { + return this._getOption('editRow'); + } + set editRow(value: string) { + this._setOption('editRow', value); + } + + @Input() + get saveAllChanges(): string { + return this._getOption('saveAllChanges'); + } + set saveAllChanges(value: string) { + this._setOption('saveAllChanges', value); + } + + @Input() + get saveRowChanges(): string { + return this._getOption('saveRowChanges'); + } + set saveRowChanges(value: string) { + this._setOption('saveRowChanges', value); + } + + @Input() + get undeleteRow(): string { + return this._getOption('undeleteRow'); + } + set undeleteRow(value: string) { + this._setOption('undeleteRow', value); + } + + @Input() + get validationCancelChanges(): string { + return this._getOption('validationCancelChanges'); + } + set validationCancelChanges(value: string) { + this._setOption('validationCancelChanges', value); + } + + @Input() + get exportAll(): string { + return this._getOption('exportAll'); + } + set exportAll(value: string) { + this._setOption('exportAll', value); + } + + @Input() + get exportSelectedRows(): string { + return this._getOption('exportSelectedRows'); + } + set exportSelectedRows(value: string) { + this._setOption('exportSelectedRows', value); + } + + @Input() + get exportTo(): string { + return this._getOption('exportTo'); + } + set exportTo(value: string) { + this._setOption('exportTo', value); + } + + @Input() + get clearFilter(): string { + return this._getOption('clearFilter'); + } + set clearFilter(value: string) { + this._setOption('clearFilter', value); + } + + @Input() + get createFilter(): string { + return this._getOption('createFilter'); + } + set createFilter(value: string) { + this._setOption('createFilter', value); + } + + @Input() + get filterEnabledHint(): string { + return this._getOption('filterEnabledHint'); + } + set filterEnabledHint(value: string) { + this._setOption('filterEnabledHint', value); + } + + @Input() + get groupByThisColumn(): string { + return this._getOption('groupByThisColumn'); + } + set groupByThisColumn(value: string) { + this._setOption('groupByThisColumn', value); + } + + @Input() + get groupContinuedMessage(): string { + return this._getOption('groupContinuedMessage'); + } + set groupContinuedMessage(value: string) { + this._setOption('groupContinuedMessage', value); + } + + @Input() + get groupContinuesMessage(): string { + return this._getOption('groupContinuesMessage'); + } + set groupContinuesMessage(value: string) { + this._setOption('groupContinuesMessage', value); + } + + @Input() + get ungroup(): string { + return this._getOption('ungroup'); + } + set ungroup(value: string) { + this._setOption('ungroup', value); + } + + @Input() + get ungroupAll(): string { + return this._getOption('ungroupAll'); + } + set ungroupAll(value: string) { + this._setOption('ungroupAll', value); + } + + @Input() + get cancel(): string { + return this._getOption('cancel'); + } + set cancel(value: string) { + this._setOption('cancel', value); + } + + @Input() + get emptyValue(): string { + return this._getOption('emptyValue'); + } + set emptyValue(value: string) { + this._setOption('emptyValue', value); + } + + @Input() + get ok(): string { + return this._getOption('ok'); + } + set ok(value: string) { + this._setOption('ok', value); + } + + @Input() + get avg(): string { + return this._getOption('avg'); + } + set avg(value: string) { + this._setOption('avg', value); + } + + @Input() + get avgOtherColumn(): string { + return this._getOption('avgOtherColumn'); + } + set avgOtherColumn(value: string) { + this._setOption('avgOtherColumn', value); + } + + @Input() + get count(): string { + return this._getOption('count'); + } + set count(value: string) { + this._setOption('count', value); + } + + @Input() + get max(): string { + return this._getOption('max'); + } + set max(value: string) { + this._setOption('max', value); + } + + @Input() + get maxOtherColumn(): string { + return this._getOption('maxOtherColumn'); + } + set maxOtherColumn(value: string) { + this._setOption('maxOtherColumn', value); + } + + @Input() + get min(): string { + return this._getOption('min'); + } + set min(value: string) { + this._setOption('min', value); + } + + @Input() + get minOtherColumn(): string { + return this._getOption('minOtherColumn'); + } + set minOtherColumn(value: string) { + this._setOption('minOtherColumn', value); + } + + @Input() + get sum(): string { + return this._getOption('sum'); + } + set sum(value: string) { + this._setOption('sum', value); + } + + @Input() + get sumOtherColumn(): string { + return this._getOption('sumOtherColumn'); + } + set sumOtherColumn(value: string) { + this._setOption('sumOtherColumn', value); + } + + + protected get _optionPath() { + return 'texts'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridTextsComponent + ], + exports: [ + DxoDataGridTextsComponent + ], +}) +export class DxoDataGridTextsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/to.ts b/packages/devextreme-angular/src/ui/data-grid/nested/to.ts new file mode 100644 index 000000000000..ee98029726ab --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridToComponent + ], + exports: [ + DxoDataGridToComponent + ], +}) +export class DxoDataGridToModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..8585f5028ed4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDataGridToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridToolbarItemComponent + ], + exports: [ + DxiDataGridToolbarItemComponent + ], +}) +export class DxiDataGridToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/toolbar.ts b/packages/devextreme-angular/src/ui/data-grid/nested/toolbar.ts new file mode 100644 index 000000000000..86df9a467a2a --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/toolbar.ts @@ -0,0 +1,101 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { DataGridPredefinedToolbarItem, dxDataGridToolbarItem } from 'devextreme/ui/data_grid'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDataGridItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-data-grid-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get visible(): boolean | undefined { + return this._getOption('visible'); + } + set visible(value: boolean | undefined) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'toolbar'; + } + + + @ContentChildren(forwardRef(() => DxiDataGridItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridToolbarComponent + ], + exports: [ + DxoDataGridToolbarComponent + ], +}) +export class DxoDataGridToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/total-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/total-item-dxi.ts new file mode 100644 index 000000000000..92ceabd74f4e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/total-item-dxi.ts @@ -0,0 +1,141 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { SummaryType } from 'devextreme/common/grids'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-total-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridTotalItemComponent extends CollectionNestedOption { + @Input() + get alignment(): HorizontalAlignment | undefined { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment | undefined) { + this._setOption('alignment', value); + } + + @Input() + get column(): string | undefined { + return this._getOption('column'); + } + set column(value: string | undefined) { + this._setOption('column', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get showInColumn(): string | undefined { + return this._getOption('showInColumn'); + } + set showInColumn(value: string | undefined) { + this._setOption('showInColumn', value); + } + + @Input() + get skipEmptyValues(): boolean { + return this._getOption('skipEmptyValues'); + } + set skipEmptyValues(value: boolean) { + this._setOption('skipEmptyValues', value); + } + + @Input() + get summaryType(): SummaryType | string | undefined { + return this._getOption('summaryType'); + } + set summaryType(value: SummaryType | string | undefined) { + this._setOption('summaryType', value); + } + + @Input() + get valueFormat(): Format | string | undefined { + return this._getOption('valueFormat'); + } + set valueFormat(value: Format | string | undefined) { + this._setOption('valueFormat', value); + } + + + protected get _optionPath() { + return 'totalItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridTotalItemComponent + ], + exports: [ + DxiDataGridTotalItemComponent + ], +}) +export class DxiDataGridTotalItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/validation-rule-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/validation-rule-dxi.ts new file mode 100644 index 000000000000..327368232002 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/validation-rule-dxi.ts @@ -0,0 +1,147 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ComparisonOperator, ValidationRuleType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-data-grid-validation-rule', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDataGridValidationRuleComponent extends CollectionNestedOption { + @Input() + get message(): string { + return this._getOption('message'); + } + set message(value: string) { + this._setOption('message', value); + } + + @Input() + get trim(): boolean { + return this._getOption('trim'); + } + set trim(value: boolean) { + this._setOption('trim', value); + } + + @Input() + get type(): ValidationRuleType { + return this._getOption('type'); + } + set type(value: ValidationRuleType) { + this._setOption('type', value); + } + + @Input() + get ignoreEmptyValue(): boolean { + return this._getOption('ignoreEmptyValue'); + } + set ignoreEmptyValue(value: boolean) { + this._setOption('ignoreEmptyValue', value); + } + + @Input() + get max(): Date | number | string { + return this._getOption('max'); + } + set max(value: Date | number | string) { + this._setOption('max', value); + } + + @Input() + get min(): Date | number | string { + return this._getOption('min'); + } + set min(value: Date | number | string) { + this._setOption('min', value); + } + + @Input() + get reevaluate(): boolean { + return this._getOption('reevaluate'); + } + set reevaluate(value: boolean) { + this._setOption('reevaluate', value); + } + + @Input() + get validationCallback(): Function { + return this._getOption('validationCallback'); + } + set validationCallback(value: Function) { + this._setOption('validationCallback', value); + } + + @Input() + get comparisonTarget(): Function { + return this._getOption('comparisonTarget'); + } + set comparisonTarget(value: Function) { + this._setOption('comparisonTarget', value); + } + + @Input() + get comparisonType(): ComparisonOperator { + return this._getOption('comparisonType'); + } + set comparisonType(value: ComparisonOperator) { + this._setOption('comparisonType', value); + } + + @Input() + get pattern(): RegExp | string { + return this._getOption('pattern'); + } + set pattern(value: RegExp | string) { + this._setOption('pattern', value); + } + + + protected get _optionPath() { + return 'validationRules'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDataGridValidationRuleComponent + ], + exports: [ + DxiDataGridValidationRuleComponent + ], +}) +export class DxiDataGridValidationRuleModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/value-format.ts b/packages/devextreme-angular/src/ui/data-grid/nested/value-format.ts new file mode 100644 index 000000000000..f8da3a117dd3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/value-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-value-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDataGridValueFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'valueFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDataGridValueFormatComponent + ], + exports: [ + DxoDataGridValueFormatComponent + ], +}) +export class DxoDataGridValueFormatModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/index.ts b/packages/devextreme-angular/src/ui/date-box/index.ts index fc79f99dc18c..455ef4092d94 100644 --- a/packages/devextreme-angular/src/ui/date-box/index.ts +++ b/packages/devextreme-angular/src/ui/date-box/index.ts @@ -64,10 +64,28 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; + +import { DxiDateBoxButtonModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxOptionsModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxCalendarOptionsModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxDisplayFormatModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxDropDownOptionsModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxAnimationModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxHideModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxFromModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxPositionModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxAtModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxBoundaryOffsetModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxCollisionModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxMyModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxOffsetModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxToModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxoDateBoxShowModule } from 'devextreme-angular/ui/date-box/nested'; +import { DxiDateBoxToolbarItemModule } from 'devextreme-angular/ui/date-box/nested'; import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; +import { DxiDateBoxButtonComponent } from 'devextreme-angular/ui/date-box/nested'; @@ -1402,15 +1420,27 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiDateBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiDateBoxButtonComponent'); this.setChildren('buttons', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1585,7 +1615,23 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxiDateBoxButtonModule, + DxoDateBoxOptionsModule, + DxoDateBoxCalendarOptionsModule, + DxoDateBoxDisplayFormatModule, + DxoDateBoxDropDownOptionsModule, + DxoDateBoxAnimationModule, + DxoDateBoxHideModule, + DxoDateBoxFromModule, + DxoDateBoxPositionModule, + DxoDateBoxAtModule, + DxoDateBoxBoundaryOffsetModule, + DxoDateBoxCollisionModule, + DxoDateBoxMyModule, + DxoDateBoxOffsetModule, + DxoDateBoxToModule, + DxoDateBoxShowModule, + DxiDateBoxToolbarItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1610,7 +1656,23 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxiDateBoxButtonModule, + DxoDateBoxOptionsModule, + DxoDateBoxCalendarOptionsModule, + DxoDateBoxDisplayFormatModule, + DxoDateBoxDropDownOptionsModule, + DxoDateBoxAnimationModule, + DxoDateBoxHideModule, + DxoDateBoxFromModule, + DxoDateBoxPositionModule, + DxoDateBoxAtModule, + DxoDateBoxBoundaryOffsetModule, + DxoDateBoxCollisionModule, + DxoDateBoxMyModule, + DxoDateBoxOffsetModule, + DxoDateBoxToModule, + DxoDateBoxShowModule, + DxiDateBoxToolbarItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/date-box/nested/animation.ts b/packages/devextreme-angular/src/ui/date-box/nested/animation.ts new file mode 100644 index 000000000000..44b52ee168a3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxAnimationComponent + ], + exports: [ + DxoDateBoxAnimationComponent + ], +}) +export class DxoDateBoxAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/at.ts b/packages/devextreme-angular/src/ui/date-box/nested/at.ts new file mode 100644 index 000000000000..f36d0a52b6a8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxAtComponent + ], + exports: [ + DxoDateBoxAtComponent + ], +}) +export class DxoDateBoxAtModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/date-box/nested/boundary-offset.ts new file mode 100644 index 000000000000..a8df79fce375 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxBoundaryOffsetComponent + ], + exports: [ + DxoDateBoxBoundaryOffsetComponent + ], +}) +export class DxoDateBoxBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/date-box/nested/button-dxi.ts new file mode 100644 index 000000000000..ad19fe3cb145 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-date-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDateBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDateBoxButtonComponent + ], + exports: [ + DxiDateBoxButtonComponent + ], +}) +export class DxiDateBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts b/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts new file mode 100644 index 000000000000..2f6f505c283b --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts @@ -0,0 +1,407 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { FirstDayOfWeek, Position, ValidationMessageMode, ValidationStatus } from 'devextreme/common'; +import { CalendarSelectionMode, CalendarZoomLevel, DisposingEvent, InitializedEvent, OptionChangedEvent, ValueChangedEvent, WeekNumberRule } from 'devextreme/ui/calendar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-calendar-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxCalendarOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get cellTemplate(): any { + return this._getOption('cellTemplate'); + } + set cellTemplate(value: any) { + this._setOption('cellTemplate', value); + } + + @Input() + get dateSerializationFormat(): string | undefined { + return this._getOption('dateSerializationFormat'); + } + set dateSerializationFormat(value: string | undefined) { + this._setOption('dateSerializationFormat', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get disabledDates(): Function | Array { + return this._getOption('disabledDates'); + } + set disabledDates(value: Function | Array) { + this._setOption('disabledDates', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get firstDayOfWeek(): FirstDayOfWeek | undefined { + return this._getOption('firstDayOfWeek'); + } + set firstDayOfWeek(value: FirstDayOfWeek | undefined) { + this._setOption('firstDayOfWeek', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get isValid(): boolean { + return this._getOption('isValid'); + } + set isValid(value: boolean) { + this._setOption('isValid', value); + } + + @Input() + get max(): Date | number | string { + return this._getOption('max'); + } + set max(value: Date | number | string) { + this._setOption('max', value); + } + + @Input() + get maxZoomLevel(): CalendarZoomLevel { + return this._getOption('maxZoomLevel'); + } + set maxZoomLevel(value: CalendarZoomLevel) { + this._setOption('maxZoomLevel', value); + } + + @Input() + get min(): Date | number | string { + return this._getOption('min'); + } + set min(value: Date | number | string) { + this._setOption('min', value); + } + + @Input() + get minZoomLevel(): CalendarZoomLevel { + return this._getOption('minZoomLevel'); + } + set minZoomLevel(value: CalendarZoomLevel) { + this._setOption('minZoomLevel', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get selectionMode(): CalendarSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: CalendarSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectWeekOnClick(): boolean { + return this._getOption('selectWeekOnClick'); + } + set selectWeekOnClick(value: boolean) { + this._setOption('selectWeekOnClick', value); + } + + @Input() + get showTodayButton(): boolean { + return this._getOption('showTodayButton'); + } + set showTodayButton(value: boolean) { + this._setOption('showTodayButton', value); + } + + @Input() + get showWeekNumbers(): boolean { + return this._getOption('showWeekNumbers'); + } + set showWeekNumbers(value: boolean) { + this._setOption('showWeekNumbers', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get validationError(): any { + return this._getOption('validationError'); + } + set validationError(value: any) { + this._setOption('validationError', value); + } + + @Input() + get validationErrors(): Array { + return this._getOption('validationErrors'); + } + set validationErrors(value: Array) { + this._setOption('validationErrors', value); + } + + @Input() + get validationMessageMode(): ValidationMessageMode { + return this._getOption('validationMessageMode'); + } + set validationMessageMode(value: ValidationMessageMode) { + this._setOption('validationMessageMode', value); + } + + @Input() + get validationMessagePosition(): Position { + return this._getOption('validationMessagePosition'); + } + set validationMessagePosition(value: Position) { + this._setOption('validationMessagePosition', value); + } + + @Input() + get validationStatus(): ValidationStatus { + return this._getOption('validationStatus'); + } + set validationStatus(value: ValidationStatus) { + this._setOption('validationStatus', value); + } + + @Input() + get value(): Date | number | string | Array { + return this._getOption('value'); + } + set value(value: Date | number | string | Array) { + this._setOption('value', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get weekNumberRule(): WeekNumberRule { + return this._getOption('weekNumberRule'); + } + set weekNumberRule(value: WeekNumberRule) { + this._setOption('weekNumberRule', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + @Input() + get zoomLevel(): CalendarZoomLevel { + return this._getOption('zoomLevel'); + } + set zoomLevel(value: CalendarZoomLevel) { + this._setOption('zoomLevel', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() zoomLevelChange: EventEmitter; + protected get _optionPath() { + return 'calendarOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' }, + { emit: 'zoomLevelChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxCalendarOptionsComponent + ], + exports: [ + DxoDateBoxCalendarOptionsComponent + ], +}) +export class DxoDateBoxCalendarOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/collision.ts b/packages/devextreme-angular/src/ui/date-box/nested/collision.ts new file mode 100644 index 000000000000..9fc9e5a49952 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxCollisionComponent + ], + exports: [ + DxoDateBoxCollisionComponent + ], +}) +export class DxoDateBoxCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/display-format.ts b/packages/devextreme-angular/src/ui/date-box/nested/display-format.ts new file mode 100644 index 000000000000..abc62ae1d51a --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/display-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-display-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxDisplayFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'displayFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxDisplayFormatComponent + ], + exports: [ + DxoDateBoxDisplayFormatComponent + ], +}) +export class DxoDateBoxDisplayFormatModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts new file mode 100644 index 000000000000..c5667afdccbe --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDateBoxToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-date-box-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiDateBoxToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxDropDownOptionsComponent + ], + exports: [ + DxoDateBoxDropDownOptionsComponent + ], +}) +export class DxoDateBoxDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/from.ts b/packages/devextreme-angular/src/ui/date-box/nested/from.ts new file mode 100644 index 000000000000..14f8a16f2eab --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxFromComponent + ], + exports: [ + DxoDateBoxFromComponent + ], +}) +export class DxoDateBoxFromModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/hide.ts b/packages/devextreme-angular/src/ui/date-box/nested/hide.ts new file mode 100644 index 000000000000..82112e42d1a9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxHideComponent + ], + exports: [ + DxoDateBoxHideComponent + ], +}) +export class DxoDateBoxHideModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/index.ts b/packages/devextreme-angular/src/ui/date-box/nested/index.ts new file mode 100644 index 000000000000..b46b27cddb69 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/index.ts @@ -0,0 +1,18 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './calendar-options'; +export * from './collision'; +export * from './display-format'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/date-box/nested/my.ts b/packages/devextreme-angular/src/ui/date-box/nested/my.ts new file mode 100644 index 000000000000..4ed16e18082f --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxMyComponent + ], + exports: [ + DxoDateBoxMyComponent + ], +}) +export class DxoDateBoxMyModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/date-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/date-box/nested/offset.ts b/packages/devextreme-angular/src/ui/date-box/nested/offset.ts new file mode 100644 index 000000000000..256b4f4b11db --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxOffsetComponent + ], + exports: [ + DxoDateBoxOffsetComponent + ], +}) +export class DxoDateBoxOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/options.ts b/packages/devextreme-angular/src/ui/date-box/nested/options.ts new file mode 100644 index 000000000000..c7c75e3417d1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxOptionsComponent + ], + exports: [ + DxoDateBoxOptionsComponent + ], +}) +export class DxoDateBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/position.ts b/packages/devextreme-angular/src/ui/date-box/nested/position.ts new file mode 100644 index 000000000000..8db961410dcf --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxPositionComponent + ], + exports: [ + DxoDateBoxPositionComponent + ], +}) +export class DxoDateBoxPositionModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/show.ts b/packages/devextreme-angular/src/ui/date-box/nested/show.ts new file mode 100644 index 000000000000..436c5182c955 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxShowComponent + ], + exports: [ + DxoDateBoxShowComponent + ], +}) +export class DxoDateBoxShowModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/to.ts b/packages/devextreme-angular/src/ui/date-box/nested/to.ts new file mode 100644 index 000000000000..d354fb9adeff --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-box-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateBoxToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateBoxToComponent + ], + exports: [ + DxoDateBoxToComponent + ], +}) +export class DxoDateBoxToModule { } diff --git a/packages/devextreme-angular/src/ui/date-box/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/date-box/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..9aeedf1f2e3a --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-box/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-date-box-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDateBoxToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDateBoxToolbarItemComponent + ], + exports: [ + DxiDateBoxToolbarItemComponent + ], +}) +export class DxiDateBoxToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/index.ts b/packages/devextreme-angular/src/ui/date-range-box/index.ts index 759bd45649c2..18d786189103 100644 --- a/packages/devextreme-angular/src/ui/date-range-box/index.ts +++ b/packages/devextreme-angular/src/ui/date-range-box/index.ts @@ -64,10 +64,28 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; + +import { DxiDateRangeBoxButtonModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxOptionsModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxCalendarOptionsModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxDisplayFormatModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxDropDownOptionsModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxAnimationModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxHideModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxFromModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxPositionModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxAtModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxBoundaryOffsetModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxCollisionModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxMyModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxOffsetModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxToModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxoDateRangeBoxShowModule } from 'devextreme-angular/ui/date-range-box/nested'; +import { DxiDateRangeBoxToolbarItemModule } from 'devextreme-angular/ui/date-range-box/nested'; import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; +import { DxiDateRangeBoxButtonComponent } from 'devextreme-angular/ui/date-range-box/nested'; @@ -1482,15 +1500,27 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiDateRangeBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiDateRangeBoxButtonComponent'); this.setChildren('buttons', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1669,7 +1699,23 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxiDateRangeBoxButtonModule, + DxoDateRangeBoxOptionsModule, + DxoDateRangeBoxCalendarOptionsModule, + DxoDateRangeBoxDisplayFormatModule, + DxoDateRangeBoxDropDownOptionsModule, + DxoDateRangeBoxAnimationModule, + DxoDateRangeBoxHideModule, + DxoDateRangeBoxFromModule, + DxoDateRangeBoxPositionModule, + DxoDateRangeBoxAtModule, + DxoDateRangeBoxBoundaryOffsetModule, + DxoDateRangeBoxCollisionModule, + DxoDateRangeBoxMyModule, + DxoDateRangeBoxOffsetModule, + DxoDateRangeBoxToModule, + DxoDateRangeBoxShowModule, + DxiDateRangeBoxToolbarItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1694,7 +1740,23 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxiDateRangeBoxButtonModule, + DxoDateRangeBoxOptionsModule, + DxoDateRangeBoxCalendarOptionsModule, + DxoDateRangeBoxDisplayFormatModule, + DxoDateRangeBoxDropDownOptionsModule, + DxoDateRangeBoxAnimationModule, + DxoDateRangeBoxHideModule, + DxoDateRangeBoxFromModule, + DxoDateRangeBoxPositionModule, + DxoDateRangeBoxAtModule, + DxoDateRangeBoxBoundaryOffsetModule, + DxoDateRangeBoxCollisionModule, + DxoDateRangeBoxMyModule, + DxoDateRangeBoxOffsetModule, + DxoDateRangeBoxToModule, + DxoDateRangeBoxShowModule, + DxiDateRangeBoxToolbarItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/animation.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/animation.ts new file mode 100644 index 000000000000..3f73fa4bd6b3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxAnimationComponent + ], + exports: [ + DxoDateRangeBoxAnimationComponent + ], +}) +export class DxoDateRangeBoxAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/at.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/at.ts new file mode 100644 index 000000000000..0d1020d6d25e --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxAtComponent + ], + exports: [ + DxoDateRangeBoxAtComponent + ], +}) +export class DxoDateRangeBoxAtModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/boundary-offset.ts new file mode 100644 index 000000000000..9f867d1b059c --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxBoundaryOffsetComponent + ], + exports: [ + DxoDateRangeBoxBoundaryOffsetComponent + ], +}) +export class DxoDateRangeBoxBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/button-dxi.ts new file mode 100644 index 000000000000..1c5c00c1af28 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-date-range-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDateRangeBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDateRangeBoxButtonComponent + ], + exports: [ + DxiDateRangeBoxButtonComponent + ], +}) +export class DxiDateRangeBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts new file mode 100644 index 000000000000..6602989fef0e --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts @@ -0,0 +1,407 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { FirstDayOfWeek, Position, ValidationMessageMode, ValidationStatus } from 'devextreme/common'; +import { CalendarSelectionMode, CalendarZoomLevel, DisposingEvent, InitializedEvent, OptionChangedEvent, ValueChangedEvent, WeekNumberRule } from 'devextreme/ui/calendar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-calendar-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxCalendarOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get cellTemplate(): any { + return this._getOption('cellTemplate'); + } + set cellTemplate(value: any) { + this._setOption('cellTemplate', value); + } + + @Input() + get dateSerializationFormat(): string | undefined { + return this._getOption('dateSerializationFormat'); + } + set dateSerializationFormat(value: string | undefined) { + this._setOption('dateSerializationFormat', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get disabledDates(): Function | Array { + return this._getOption('disabledDates'); + } + set disabledDates(value: Function | Array) { + this._setOption('disabledDates', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get firstDayOfWeek(): FirstDayOfWeek | undefined { + return this._getOption('firstDayOfWeek'); + } + set firstDayOfWeek(value: FirstDayOfWeek | undefined) { + this._setOption('firstDayOfWeek', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get isValid(): boolean { + return this._getOption('isValid'); + } + set isValid(value: boolean) { + this._setOption('isValid', value); + } + + @Input() + get max(): Date | number | string { + return this._getOption('max'); + } + set max(value: Date | number | string) { + this._setOption('max', value); + } + + @Input() + get maxZoomLevel(): CalendarZoomLevel { + return this._getOption('maxZoomLevel'); + } + set maxZoomLevel(value: CalendarZoomLevel) { + this._setOption('maxZoomLevel', value); + } + + @Input() + get min(): Date | number | string { + return this._getOption('min'); + } + set min(value: Date | number | string) { + this._setOption('min', value); + } + + @Input() + get minZoomLevel(): CalendarZoomLevel { + return this._getOption('minZoomLevel'); + } + set minZoomLevel(value: CalendarZoomLevel) { + this._setOption('minZoomLevel', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get selectionMode(): CalendarSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: CalendarSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectWeekOnClick(): boolean { + return this._getOption('selectWeekOnClick'); + } + set selectWeekOnClick(value: boolean) { + this._setOption('selectWeekOnClick', value); + } + + @Input() + get showTodayButton(): boolean { + return this._getOption('showTodayButton'); + } + set showTodayButton(value: boolean) { + this._setOption('showTodayButton', value); + } + + @Input() + get showWeekNumbers(): boolean { + return this._getOption('showWeekNumbers'); + } + set showWeekNumbers(value: boolean) { + this._setOption('showWeekNumbers', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get validationError(): any { + return this._getOption('validationError'); + } + set validationError(value: any) { + this._setOption('validationError', value); + } + + @Input() + get validationErrors(): Array { + return this._getOption('validationErrors'); + } + set validationErrors(value: Array) { + this._setOption('validationErrors', value); + } + + @Input() + get validationMessageMode(): ValidationMessageMode { + return this._getOption('validationMessageMode'); + } + set validationMessageMode(value: ValidationMessageMode) { + this._setOption('validationMessageMode', value); + } + + @Input() + get validationMessagePosition(): Position { + return this._getOption('validationMessagePosition'); + } + set validationMessagePosition(value: Position) { + this._setOption('validationMessagePosition', value); + } + + @Input() + get validationStatus(): ValidationStatus { + return this._getOption('validationStatus'); + } + set validationStatus(value: ValidationStatus) { + this._setOption('validationStatus', value); + } + + @Input() + get value(): Date | number | string | Array { + return this._getOption('value'); + } + set value(value: Date | number | string | Array) { + this._setOption('value', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get weekNumberRule(): WeekNumberRule { + return this._getOption('weekNumberRule'); + } + set weekNumberRule(value: WeekNumberRule) { + this._setOption('weekNumberRule', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + @Input() + get zoomLevel(): CalendarZoomLevel { + return this._getOption('zoomLevel'); + } + set zoomLevel(value: CalendarZoomLevel) { + this._setOption('zoomLevel', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() zoomLevelChange: EventEmitter; + protected get _optionPath() { + return 'calendarOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' }, + { emit: 'zoomLevelChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxCalendarOptionsComponent + ], + exports: [ + DxoDateRangeBoxCalendarOptionsComponent + ], +}) +export class DxoDateRangeBoxCalendarOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/collision.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/collision.ts new file mode 100644 index 000000000000..1ff952ce579b --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxCollisionComponent + ], + exports: [ + DxoDateRangeBoxCollisionComponent + ], +}) +export class DxoDateRangeBoxCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/display-format.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/display-format.ts new file mode 100644 index 000000000000..7c56e33f0561 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/display-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-display-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxDisplayFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'displayFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxDisplayFormatComponent + ], + exports: [ + DxoDateRangeBoxDisplayFormatComponent + ], +}) +export class DxoDateRangeBoxDisplayFormatModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts new file mode 100644 index 000000000000..45688319909d --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDateRangeBoxToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-date-range-box-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiDateRangeBoxToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxDropDownOptionsComponent + ], + exports: [ + DxoDateRangeBoxDropDownOptionsComponent + ], +}) +export class DxoDateRangeBoxDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/from.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/from.ts new file mode 100644 index 000000000000..0207d77f4b67 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxFromComponent + ], + exports: [ + DxoDateRangeBoxFromComponent + ], +}) +export class DxoDateRangeBoxFromModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/hide.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/hide.ts new file mode 100644 index 000000000000..5bf3b5d5c9d9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxHideComponent + ], + exports: [ + DxoDateRangeBoxHideComponent + ], +}) +export class DxoDateRangeBoxHideModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/index.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/index.ts new file mode 100644 index 000000000000..b46b27cddb69 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/index.ts @@ -0,0 +1,18 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './calendar-options'; +export * from './collision'; +export * from './display-format'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/my.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/my.ts new file mode 100644 index 000000000000..ffefc604a1fe --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxMyComponent + ], + exports: [ + DxoDateRangeBoxMyComponent + ], +}) +export class DxoDateRangeBoxMyModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/date-range-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/offset.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/offset.ts new file mode 100644 index 000000000000..d81ccb704ee1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxOffsetComponent + ], + exports: [ + DxoDateRangeBoxOffsetComponent + ], +}) +export class DxoDateRangeBoxOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts new file mode 100644 index 000000000000..84a734ef94de --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxOptionsComponent + ], + exports: [ + DxoDateRangeBoxOptionsComponent + ], +}) +export class DxoDateRangeBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/position.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/position.ts new file mode 100644 index 000000000000..48a39bdbd4d2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxPositionComponent + ], + exports: [ + DxoDateRangeBoxPositionComponent + ], +}) +export class DxoDateRangeBoxPositionModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/show.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/show.ts new file mode 100644 index 000000000000..fc5ec9ba5b96 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxShowComponent + ], + exports: [ + DxoDateRangeBoxShowComponent + ], +}) +export class DxoDateRangeBoxShowModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/to.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/to.ts new file mode 100644 index 000000000000..b8d6422ac390 --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-date-range-box-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDateRangeBoxToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDateRangeBoxToComponent + ], + exports: [ + DxoDateRangeBoxToComponent + ], +}) +export class DxoDateRangeBoxToModule { } diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..30a593fbfbfb --- /dev/null +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-date-range-box-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDateRangeBoxToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDateRangeBoxToolbarItemComponent + ], + exports: [ + DxiDateRangeBoxToolbarItemComponent + ], +}) +export class DxiDateRangeBoxToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/index.ts b/packages/devextreme-angular/src/ui/defer-rendering/index.ts index 2564061ea20d..c2b2b86d1fd9 100644 --- a/packages/devextreme-angular/src/ui/defer-rendering/index.ts +++ b/packages/devextreme-angular/src/ui/defer-rendering/index.ts @@ -43,6 +43,16 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; +import { DxoDeferRenderingAnimationModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingFromModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingPositionModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingAtModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingBoundaryOffsetModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingCollisionModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingMyModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingOffsetModule } from 'devextreme-angular/ui/defer-rendering/nested'; +import { DxoDeferRenderingToModule } from 'devextreme-angular/ui/defer-rendering/nested'; + @@ -435,6 +445,7 @@ export class DxDeferRenderingComponent extends DxComponent implements OnDestroy + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -493,6 +504,15 @@ export class DxDeferRenderingComponent extends DxComponent implements OnDestroy DxoMyModule, DxoOffsetModule, DxoToModule, + DxoDeferRenderingAnimationModule, + DxoDeferRenderingFromModule, + DxoDeferRenderingPositionModule, + DxoDeferRenderingAtModule, + DxoDeferRenderingBoundaryOffsetModule, + DxoDeferRenderingCollisionModule, + DxoDeferRenderingMyModule, + DxoDeferRenderingOffsetModule, + DxoDeferRenderingToModule, DxIntegrationModule, DxTemplateModule ], @@ -510,6 +530,15 @@ export class DxDeferRenderingComponent extends DxComponent implements OnDestroy DxoMyModule, DxoOffsetModule, DxoToModule, + DxoDeferRenderingAnimationModule, + DxoDeferRenderingFromModule, + DxoDeferRenderingPositionModule, + DxoDeferRenderingAtModule, + DxoDeferRenderingBoundaryOffsetModule, + DxoDeferRenderingCollisionModule, + DxoDeferRenderingMyModule, + DxoDeferRenderingOffsetModule, + DxoDeferRenderingToModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/animation.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/animation.ts new file mode 100644 index 000000000000..4965c61d13a4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/animation.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingAnimationComponent + ], + exports: [ + DxoDeferRenderingAnimationComponent + ], +}) +export class DxoDeferRenderingAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/at.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/at.ts new file mode 100644 index 000000000000..1bf8b3dce298 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingAtComponent + ], + exports: [ + DxoDeferRenderingAtComponent + ], +}) +export class DxoDeferRenderingAtModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/boundary-offset.ts new file mode 100644 index 000000000000..dca32c865c3f --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingBoundaryOffsetComponent + ], + exports: [ + DxoDeferRenderingBoundaryOffsetComponent + ], +}) +export class DxoDeferRenderingBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/collision.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/collision.ts new file mode 100644 index 000000000000..85417424ea71 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingCollisionComponent + ], + exports: [ + DxoDeferRenderingCollisionComponent + ], +}) +export class DxoDeferRenderingCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/from.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/from.ts new file mode 100644 index 000000000000..ed0b403192c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingFromComponent + ], + exports: [ + DxoDeferRenderingFromComponent + ], +}) +export class DxoDeferRenderingFromModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/index.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/index.ts new file mode 100644 index 000000000000..663ae32258ba --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/index.ts @@ -0,0 +1,10 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './from'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './to'; + diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/my.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/my.ts new file mode 100644 index 000000000000..7b773cce8f37 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingMyComponent + ], + exports: [ + DxoDeferRenderingMyComponent + ], +}) +export class DxoDeferRenderingMyModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/ng-package.json b/packages/devextreme-angular/src/ui/defer-rendering/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/offset.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/offset.ts new file mode 100644 index 000000000000..f66e93c3c79e --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingOffsetComponent + ], + exports: [ + DxoDeferRenderingOffsetComponent + ], +}) +export class DxoDeferRenderingOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/position.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/position.ts new file mode 100644 index 000000000000..3e47170e19ea --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingPositionComponent + ], + exports: [ + DxoDeferRenderingPositionComponent + ], +}) +export class DxoDeferRenderingPositionModule { } diff --git a/packages/devextreme-angular/src/ui/defer-rendering/nested/to.ts b/packages/devextreme-angular/src/ui/defer-rendering/nested/to.ts new file mode 100644 index 000000000000..045b06934978 --- /dev/null +++ b/packages/devextreme-angular/src/ui/defer-rendering/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-defer-rendering-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDeferRenderingToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDeferRenderingToComponent + ], + exports: [ + DxoDeferRenderingToComponent + ], +}) +export class DxoDeferRenderingToModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/index.ts b/packages/devextreme-angular/src/ui/diagram/index.ts index 72bb981edf07..3f7c47cc9348 100644 --- a/packages/devextreme-angular/src/ui/diagram/index.ts +++ b/packages/devextreme-angular/src/ui/diagram/index.ts @@ -63,8 +63,32 @@ import { DxoToolboxModule } from 'devextreme-angular/ui/nested'; import { DxoViewToolbarModule } from 'devextreme-angular/ui/nested'; import { DxoZoomLevelModule } from 'devextreme-angular/ui/nested'; +import { DxoDiagramContextMenuModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxiDiagramCommandModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxiDiagramItemModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramContextToolboxModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxiDiagramCustomShapeModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxiDiagramConnectionPointModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramDefaultItemPropertiesModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramEdgesModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramEditingModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramExportModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramGridSizeModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramHistoryToolbarModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramMainToolbarModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramNodesModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramAutoLayoutModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramPageSizeModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramPropertiesPanelModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxiDiagramTabModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxiDiagramGroupModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramToolboxModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramViewToolbarModule } from 'devextreme-angular/ui/diagram/nested'; +import { DxoDiagramZoomLevelModule } from 'devextreme-angular/ui/diagram/nested'; + import { DxiCustomShapeComponent } from 'devextreme-angular/ui/nested'; +import { DxiDiagramCustomShapeComponent } from 'devextreme-angular/ui/diagram/nested'; /** @@ -886,15 +910,27 @@ export class DxDiagramComponent extends DxComponent implements OnDestroy, OnChan - @ContentChildren(DxiCustomShapeComponent) - get customShapesChildren(): QueryList { + @ContentChildren(DxiDiagramCustomShapeComponent) + get customShapesChildren(): QueryList { return this._getOption('customShapes'); } set customShapesChildren(value) { + this.setContentChildren('customShapes', value, 'DxiDiagramCustomShapeComponent'); this.setChildren('customShapes', value); } + @ContentChildren(DxiCustomShapeComponent) + get customShapesLegacyChildren(): QueryList { + return this._getOption('customShapes'); + } + set customShapesLegacyChildren(value) { + if (this.checkContentChildren('customShapes', value, 'DxiCustomShapeComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1021,6 +1057,28 @@ export class DxDiagramComponent extends DxComponent implements OnDestroy, OnChan DxoToolboxModule, DxoViewToolbarModule, DxoZoomLevelModule, + DxoDiagramContextMenuModule, + DxiDiagramCommandModule, + DxiDiagramItemModule, + DxoDiagramContextToolboxModule, + DxiDiagramCustomShapeModule, + DxiDiagramConnectionPointModule, + DxoDiagramDefaultItemPropertiesModule, + DxoDiagramEdgesModule, + DxoDiagramEditingModule, + DxoDiagramExportModule, + DxoDiagramGridSizeModule, + DxoDiagramHistoryToolbarModule, + DxoDiagramMainToolbarModule, + DxoDiagramNodesModule, + DxoDiagramAutoLayoutModule, + DxoDiagramPageSizeModule, + DxoDiagramPropertiesPanelModule, + DxiDiagramTabModule, + DxiDiagramGroupModule, + DxoDiagramToolboxModule, + DxoDiagramViewToolbarModule, + DxoDiagramZoomLevelModule, DxIntegrationModule, DxTemplateModule ], @@ -1051,6 +1109,28 @@ export class DxDiagramComponent extends DxComponent implements OnDestroy, OnChan DxoToolboxModule, DxoViewToolbarModule, DxoZoomLevelModule, + DxoDiagramContextMenuModule, + DxiDiagramCommandModule, + DxiDiagramItemModule, + DxoDiagramContextToolboxModule, + DxiDiagramCustomShapeModule, + DxiDiagramConnectionPointModule, + DxoDiagramDefaultItemPropertiesModule, + DxoDiagramEdgesModule, + DxoDiagramEditingModule, + DxoDiagramExportModule, + DxoDiagramGridSizeModule, + DxoDiagramHistoryToolbarModule, + DxoDiagramMainToolbarModule, + DxoDiagramNodesModule, + DxoDiagramAutoLayoutModule, + DxoDiagramPageSizeModule, + DxoDiagramPropertiesPanelModule, + DxiDiagramTabModule, + DxiDiagramGroupModule, + DxoDiagramToolboxModule, + DxoDiagramViewToolbarModule, + DxoDiagramZoomLevelModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/diagram/nested/auto-layout.ts b/packages/devextreme-angular/src/ui/diagram/nested/auto-layout.ts new file mode 100644 index 000000000000..c62d3164b497 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/auto-layout.ts @@ -0,0 +1,82 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Orientation } from 'devextreme/common'; +import { DataLayoutType } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-auto-layout', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramAutoLayoutComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get orientation(): Orientation { + return this._getOption('orientation'); + } + set orientation(value: Orientation) { + this._setOption('orientation', value); + } + + @Input() + get type(): DataLayoutType { + return this._getOption('type'); + } + set type(value: DataLayoutType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'autoLayout'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramAutoLayoutComponent + ], + exports: [ + DxoDiagramAutoLayoutComponent + ], +}) +export class DxoDiagramAutoLayoutModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/command-dxi.ts b/packages/devextreme-angular/src/ui/diagram/nested/command-dxi.ts new file mode 100644 index 000000000000..846470314f1a --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/command-dxi.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ToolbarItemLocation } from 'devextreme/common'; +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDiagramItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxi-diagram-command', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDiagramCommandComponent extends CollectionNestedOption { + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get name(): Command | string { + return this._getOption('name'); + } + set name(value: Command | string) { + this._setOption('name', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + protected get _optionPath() { + return 'commands'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDiagramCommandComponent + ], + exports: [ + DxiDiagramCommandComponent + ], +}) +export class DxiDiagramCommandModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/connection-point-dxi.ts b/packages/devextreme-angular/src/ui/diagram/nested/connection-point-dxi.ts new file mode 100644 index 000000000000..87d1e0a98ebf --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/connection-point-dxi.ts @@ -0,0 +1,74 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-diagram-connection-point', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDiagramConnectionPointComponent extends CollectionNestedOption { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'connectionPoints'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDiagramConnectionPointComponent + ], + exports: [ + DxiDiagramConnectionPointComponent + ], +}) +export class DxiDiagramConnectionPointModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/context-menu.ts b/packages/devextreme-angular/src/ui/diagram/nested/context-menu.ts new file mode 100644 index 000000000000..a4c5a01c62ec --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/context-menu.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramCommandComponent } from './command-dxi'; + + +@Component({ + selector: 'dxo-diagram-context-menu', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramContextMenuComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get commands(): Array { + return this._getOption('commands'); + } + set commands(value: Array) { + this._setOption('commands', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'contextMenu'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramCommandComponent)) + get commandsChildren(): QueryList { + return this._getOption('commands'); + } + set commandsChildren(value) { + this.setChildren('commands', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramContextMenuComponent + ], + exports: [ + DxoDiagramContextMenuComponent + ], +}) +export class DxoDiagramContextMenuModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/context-toolbox.ts b/packages/devextreme-angular/src/ui/diagram/nested/context-toolbox.ts new file mode 100644 index 000000000000..6a7c5fcb7a4a --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/context-toolbox.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ShapeCategory, ShapeType, ToolboxDisplayMode } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-context-toolbox', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramContextToolboxComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get category(): ShapeCategory | string { + return this._getOption('category'); + } + set category(value: ShapeCategory | string) { + this._setOption('category', value); + } + + @Input() + get displayMode(): ToolboxDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: ToolboxDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get shapeIconsPerRow(): number { + return this._getOption('shapeIconsPerRow'); + } + set shapeIconsPerRow(value: number) { + this._setOption('shapeIconsPerRow', value); + } + + @Input() + get shapes(): Array { + return this._getOption('shapes'); + } + set shapes(value: Array) { + this._setOption('shapes', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'contextToolbox'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramContextToolboxComponent + ], + exports: [ + DxoDiagramContextToolboxComponent + ], +}) +export class DxoDiagramContextToolboxModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/custom-shape-dxi.ts b/packages/devextreme-angular/src/ui/diagram/nested/custom-shape-dxi.ts new file mode 100644 index 000000000000..a47e237769d7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/custom-shape-dxi.ts @@ -0,0 +1,396 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ShapeType } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDiagramConnectionPointComponent } from './connection-point-dxi'; + + +@Component({ + selector: 'dxi-diagram-custom-shape', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDiagramCustomShapeComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get allowEditImage(): boolean { + return this._getOption('allowEditImage'); + } + set allowEditImage(value: boolean) { + this._setOption('allowEditImage', value); + } + + @Input() + get allowEditText(): boolean { + return this._getOption('allowEditText'); + } + set allowEditText(value: boolean) { + this._setOption('allowEditText', value); + } + + @Input() + get allowResize(): boolean { + return this._getOption('allowResize'); + } + set allowResize(value: boolean) { + this._setOption('allowResize', value); + } + + @Input() + get backgroundImageHeight(): number { + return this._getOption('backgroundImageHeight'); + } + set backgroundImageHeight(value: number) { + this._setOption('backgroundImageHeight', value); + } + + @Input() + get backgroundImageLeft(): number { + return this._getOption('backgroundImageLeft'); + } + set backgroundImageLeft(value: number) { + this._setOption('backgroundImageLeft', value); + } + + @Input() + get backgroundImageToolboxUrl(): string { + return this._getOption('backgroundImageToolboxUrl'); + } + set backgroundImageToolboxUrl(value: string) { + this._setOption('backgroundImageToolboxUrl', value); + } + + @Input() + get backgroundImageTop(): number { + return this._getOption('backgroundImageTop'); + } + set backgroundImageTop(value: number) { + this._setOption('backgroundImageTop', value); + } + + @Input() + get backgroundImageUrl(): string { + return this._getOption('backgroundImageUrl'); + } + set backgroundImageUrl(value: string) { + this._setOption('backgroundImageUrl', value); + } + + @Input() + get backgroundImageWidth(): number { + return this._getOption('backgroundImageWidth'); + } + set backgroundImageWidth(value: number) { + this._setOption('backgroundImageWidth', value); + } + + @Input() + get baseType(): ShapeType | string { + return this._getOption('baseType'); + } + set baseType(value: ShapeType | string) { + this._setOption('baseType', value); + } + + @Input() + get category(): string { + return this._getOption('category'); + } + set category(value: string) { + this._setOption('category', value); + } + + @Input() + get connectionPoints(): Array { + return this._getOption('connectionPoints'); + } + set connectionPoints(value: Array) { + this._setOption('connectionPoints', value); + } + + @Input() + get defaultHeight(): number { + return this._getOption('defaultHeight'); + } + set defaultHeight(value: number) { + this._setOption('defaultHeight', value); + } + + @Input() + get defaultImageUrl(): string { + return this._getOption('defaultImageUrl'); + } + set defaultImageUrl(value: string) { + this._setOption('defaultImageUrl', value); + } + + @Input() + get defaultText(): string { + return this._getOption('defaultText'); + } + set defaultText(value: string) { + this._setOption('defaultText', value); + } + + @Input() + get defaultWidth(): number { + return this._getOption('defaultWidth'); + } + set defaultWidth(value: number) { + this._setOption('defaultWidth', value); + } + + @Input() + get imageHeight(): number { + return this._getOption('imageHeight'); + } + set imageHeight(value: number) { + this._setOption('imageHeight', value); + } + + @Input() + get imageLeft(): number { + return this._getOption('imageLeft'); + } + set imageLeft(value: number) { + this._setOption('imageLeft', value); + } + + @Input() + get imageTop(): number { + return this._getOption('imageTop'); + } + set imageTop(value: number) { + this._setOption('imageTop', value); + } + + @Input() + get imageWidth(): number { + return this._getOption('imageWidth'); + } + set imageWidth(value: number) { + this._setOption('imageWidth', value); + } + + @Input() + get keepRatioOnAutoSize(): boolean { + return this._getOption('keepRatioOnAutoSize'); + } + set keepRatioOnAutoSize(value: boolean) { + this._setOption('keepRatioOnAutoSize', value); + } + + @Input() + get maxHeight(): number { + return this._getOption('maxHeight'); + } + set maxHeight(value: number) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number { + return this._getOption('maxWidth'); + } + set maxWidth(value: number) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number { + return this._getOption('minHeight'); + } + set minHeight(value: number) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number { + return this._getOption('minWidth'); + } + set minWidth(value: number) { + this._setOption('minWidth', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get templateHeight(): number { + return this._getOption('templateHeight'); + } + set templateHeight(value: number) { + this._setOption('templateHeight', value); + } + + @Input() + get templateLeft(): number { + return this._getOption('templateLeft'); + } + set templateLeft(value: number) { + this._setOption('templateLeft', value); + } + + @Input() + get templateTop(): number { + return this._getOption('templateTop'); + } + set templateTop(value: number) { + this._setOption('templateTop', value); + } + + @Input() + get templateWidth(): number { + return this._getOption('templateWidth'); + } + set templateWidth(value: number) { + this._setOption('templateWidth', value); + } + + @Input() + get textHeight(): number { + return this._getOption('textHeight'); + } + set textHeight(value: number) { + this._setOption('textHeight', value); + } + + @Input() + get textLeft(): number { + return this._getOption('textLeft'); + } + set textLeft(value: number) { + this._setOption('textLeft', value); + } + + @Input() + get textTop(): number { + return this._getOption('textTop'); + } + set textTop(value: number) { + this._setOption('textTop', value); + } + + @Input() + get textWidth(): number { + return this._getOption('textWidth'); + } + set textWidth(value: number) { + this._setOption('textWidth', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get toolboxTemplate(): any { + return this._getOption('toolboxTemplate'); + } + set toolboxTemplate(value: any) { + this._setOption('toolboxTemplate', value); + } + + @Input() + get toolboxWidthToHeightRatio(): number { + return this._getOption('toolboxWidthToHeightRatio'); + } + set toolboxWidthToHeightRatio(value: number) { + this._setOption('toolboxWidthToHeightRatio', value); + } + + @Input() + get type(): string { + return this._getOption('type'); + } + set type(value: string) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'customShapes'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramConnectionPointComponent)) + get connectionPointsChildren(): QueryList { + return this._getOption('connectionPoints'); + } + set connectionPointsChildren(value) { + this.setChildren('connectionPoints', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDiagramCustomShapeComponent + ], + exports: [ + DxiDiagramCustomShapeComponent + ], +}) +export class DxiDiagramCustomShapeModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/default-item-properties.ts b/packages/devextreme-angular/src/ui/diagram/nested/default-item-properties.ts new file mode 100644 index 000000000000..529b44e9393b --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/default-item-properties.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ConnectorLineEnd, ConnectorLineType } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-default-item-properties', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramDefaultItemPropertiesComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get connectorLineEnd(): ConnectorLineEnd { + return this._getOption('connectorLineEnd'); + } + set connectorLineEnd(value: ConnectorLineEnd) { + this._setOption('connectorLineEnd', value); + } + + @Input() + get connectorLineStart(): ConnectorLineEnd { + return this._getOption('connectorLineStart'); + } + set connectorLineStart(value: ConnectorLineEnd) { + this._setOption('connectorLineStart', value); + } + + @Input() + get connectorLineType(): ConnectorLineType { + return this._getOption('connectorLineType'); + } + set connectorLineType(value: ConnectorLineType) { + this._setOption('connectorLineType', value); + } + + @Input() + get shapeMaxHeight(): number | undefined { + return this._getOption('shapeMaxHeight'); + } + set shapeMaxHeight(value: number | undefined) { + this._setOption('shapeMaxHeight', value); + } + + @Input() + get shapeMaxWidth(): number | undefined { + return this._getOption('shapeMaxWidth'); + } + set shapeMaxWidth(value: number | undefined) { + this._setOption('shapeMaxWidth', value); + } + + @Input() + get shapeMinHeight(): number | undefined { + return this._getOption('shapeMinHeight'); + } + set shapeMinHeight(value: number | undefined) { + this._setOption('shapeMinHeight', value); + } + + @Input() + get shapeMinWidth(): number | undefined { + return this._getOption('shapeMinWidth'); + } + set shapeMinWidth(value: number | undefined) { + this._setOption('shapeMinWidth', value); + } + + @Input() + get style(): any { + return this._getOption('style'); + } + set style(value: any) { + this._setOption('style', value); + } + + @Input() + get textStyle(): any { + return this._getOption('textStyle'); + } + set textStyle(value: any) { + this._setOption('textStyle', value); + } + + + protected get _optionPath() { + return 'defaultItemProperties'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramDefaultItemPropertiesComponent + ], + exports: [ + DxoDiagramDefaultItemPropertiesComponent + ], +}) +export class DxoDiagramDefaultItemPropertiesModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/edges.ts b/packages/devextreme-angular/src/ui/diagram/nested/edges.ts new file mode 100644 index 000000000000..24a261849491 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/edges.ts @@ -0,0 +1,194 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-edges', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramEdgesComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customDataExpr(): Function | string | undefined { + return this._getOption('customDataExpr'); + } + set customDataExpr(value: Function | string | undefined) { + this._setOption('customDataExpr', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get fromExpr(): Function | string { + return this._getOption('fromExpr'); + } + set fromExpr(value: Function | string) { + this._setOption('fromExpr', value); + } + + @Input() + get fromLineEndExpr(): Function | string | undefined { + return this._getOption('fromLineEndExpr'); + } + set fromLineEndExpr(value: Function | string | undefined) { + this._setOption('fromLineEndExpr', value); + } + + @Input() + get fromPointIndexExpr(): Function | string | undefined { + return this._getOption('fromPointIndexExpr'); + } + set fromPointIndexExpr(value: Function | string | undefined) { + this._setOption('fromPointIndexExpr', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get lineTypeExpr(): Function | string | undefined { + return this._getOption('lineTypeExpr'); + } + set lineTypeExpr(value: Function | string | undefined) { + this._setOption('lineTypeExpr', value); + } + + @Input() + get lockedExpr(): Function | string | undefined { + return this._getOption('lockedExpr'); + } + set lockedExpr(value: Function | string | undefined) { + this._setOption('lockedExpr', value); + } + + @Input() + get pointsExpr(): Function | string | undefined { + return this._getOption('pointsExpr'); + } + set pointsExpr(value: Function | string | undefined) { + this._setOption('pointsExpr', value); + } + + @Input() + get styleExpr(): Function | string | undefined { + return this._getOption('styleExpr'); + } + set styleExpr(value: Function | string | undefined) { + this._setOption('styleExpr', value); + } + + @Input() + get textExpr(): Function | string | undefined { + return this._getOption('textExpr'); + } + set textExpr(value: Function | string | undefined) { + this._setOption('textExpr', value); + } + + @Input() + get textStyleExpr(): Function | string | undefined { + return this._getOption('textStyleExpr'); + } + set textStyleExpr(value: Function | string | undefined) { + this._setOption('textStyleExpr', value); + } + + @Input() + get toExpr(): Function | string { + return this._getOption('toExpr'); + } + set toExpr(value: Function | string) { + this._setOption('toExpr', value); + } + + @Input() + get toLineEndExpr(): Function | string | undefined { + return this._getOption('toLineEndExpr'); + } + set toLineEndExpr(value: Function | string | undefined) { + this._setOption('toLineEndExpr', value); + } + + @Input() + get toPointIndexExpr(): Function | string | undefined { + return this._getOption('toPointIndexExpr'); + } + set toPointIndexExpr(value: Function | string | undefined) { + this._setOption('toPointIndexExpr', value); + } + + @Input() + get zIndexExpr(): Function | string | undefined { + return this._getOption('zIndexExpr'); + } + set zIndexExpr(value: Function | string | undefined) { + this._setOption('zIndexExpr', value); + } + + + protected get _optionPath() { + return 'edges'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramEdgesComponent + ], + exports: [ + DxoDiagramEdgesComponent + ], +}) +export class DxoDiagramEdgesModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/editing.ts b/packages/devextreme-angular/src/ui/diagram/nested/editing.ts new file mode 100644 index 000000000000..9a5f9d019fdd --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/editing.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-editing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramEditingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowAddShape(): boolean { + return this._getOption('allowAddShape'); + } + set allowAddShape(value: boolean) { + this._setOption('allowAddShape', value); + } + + @Input() + get allowChangeConnection(): boolean { + return this._getOption('allowChangeConnection'); + } + set allowChangeConnection(value: boolean) { + this._setOption('allowChangeConnection', value); + } + + @Input() + get allowChangeConnectorPoints(): boolean { + return this._getOption('allowChangeConnectorPoints'); + } + set allowChangeConnectorPoints(value: boolean) { + this._setOption('allowChangeConnectorPoints', value); + } + + @Input() + get allowChangeConnectorText(): boolean { + return this._getOption('allowChangeConnectorText'); + } + set allowChangeConnectorText(value: boolean) { + this._setOption('allowChangeConnectorText', value); + } + + @Input() + get allowChangeShapeText(): boolean { + return this._getOption('allowChangeShapeText'); + } + set allowChangeShapeText(value: boolean) { + this._setOption('allowChangeShapeText', value); + } + + @Input() + get allowDeleteConnector(): boolean { + return this._getOption('allowDeleteConnector'); + } + set allowDeleteConnector(value: boolean) { + this._setOption('allowDeleteConnector', value); + } + + @Input() + get allowDeleteShape(): boolean { + return this._getOption('allowDeleteShape'); + } + set allowDeleteShape(value: boolean) { + this._setOption('allowDeleteShape', value); + } + + @Input() + get allowMoveShape(): boolean { + return this._getOption('allowMoveShape'); + } + set allowMoveShape(value: boolean) { + this._setOption('allowMoveShape', value); + } + + @Input() + get allowResizeShape(): boolean { + return this._getOption('allowResizeShape'); + } + set allowResizeShape(value: boolean) { + this._setOption('allowResizeShape', value); + } + + + protected get _optionPath() { + return 'editing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramEditingComponent + ], + exports: [ + DxoDiagramEditingComponent + ], +}) +export class DxoDiagramEditingModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/export.ts b/packages/devextreme-angular/src/ui/diagram/nested/export.ts new file mode 100644 index 000000000000..017f93e88619 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/export.ts @@ -0,0 +1,72 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramExportComponent + ], + exports: [ + DxoDiagramExportComponent + ], +}) +export class DxoDiagramExportModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/grid-size.ts b/packages/devextreme-angular/src/ui/diagram/nested/grid-size.ts new file mode 100644 index 000000000000..c3f4d587d5ae --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/grid-size.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-grid-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramGridSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get value(): number { + return this._getOption('value'); + } + set value(value: number) { + this._setOption('value', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter; + protected get _optionPath() { + return 'gridSize'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramGridSizeComponent + ], + exports: [ + DxoDiagramGridSizeComponent + ], +}) +export class DxoDiagramGridSizeModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/group-dxi.ts b/packages/devextreme-angular/src/ui/diagram/nested/group-dxi.ts new file mode 100644 index 000000000000..c6783219d634 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/group-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand, ShapeCategory, ShapeType, ToolboxDisplayMode } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDiagramCommandComponent } from './command-dxi'; + + +@Component({ + selector: 'dxi-diagram-group', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDiagramGroupComponent extends CollectionNestedOption { + @Input() + get commands(): Array { + return this._getOption('commands'); + } + set commands(value: Array) { + this._setOption('commands', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get category(): ShapeCategory | string { + return this._getOption('category'); + } + set category(value: ShapeCategory | string) { + this._setOption('category', value); + } + + @Input() + get displayMode(): ToolboxDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: ToolboxDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get expanded(): boolean { + return this._getOption('expanded'); + } + set expanded(value: boolean) { + this._setOption('expanded', value); + } + + @Input() + get shapes(): Array { + return this._getOption('shapes'); + } + set shapes(value: Array) { + this._setOption('shapes', value); + } + + + protected get _optionPath() { + return 'groups'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramCommandComponent)) + get commandsChildren(): QueryList { + return this._getOption('commands'); + } + set commandsChildren(value) { + this.setChildren('commands', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDiagramGroupComponent + ], + exports: [ + DxiDiagramGroupComponent + ], +}) +export class DxiDiagramGroupModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/history-toolbar.ts b/packages/devextreme-angular/src/ui/diagram/nested/history-toolbar.ts new file mode 100644 index 000000000000..5437e5737efc --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/history-toolbar.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramCommandComponent } from './command-dxi'; + + +@Component({ + selector: 'dxo-diagram-history-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramHistoryToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get commands(): Array { + return this._getOption('commands'); + } + set commands(value: Array) { + this._setOption('commands', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'historyToolbar'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramCommandComponent)) + get commandsChildren(): QueryList { + return this._getOption('commands'); + } + set commandsChildren(value) { + this.setChildren('commands', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramHistoryToolbarComponent + ], + exports: [ + DxoDiagramHistoryToolbarComponent + ], +}) +export class DxoDiagramHistoryToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/index.ts b/packages/devextreme-angular/src/ui/diagram/nested/index.ts new file mode 100644 index 000000000000..b93a299464fb --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/index.ts @@ -0,0 +1,23 @@ +export * from './auto-layout'; +export * from './command-dxi'; +export * from './connection-point-dxi'; +export * from './context-menu'; +export * from './context-toolbox'; +export * from './custom-shape-dxi'; +export * from './default-item-properties'; +export * from './edges'; +export * from './editing'; +export * from './export'; +export * from './grid-size'; +export * from './group-dxi'; +export * from './history-toolbar'; +export * from './item-dxi'; +export * from './main-toolbar'; +export * from './nodes'; +export * from './page-size'; +export * from './properties-panel'; +export * from './tab-dxi'; +export * from './toolbox'; +export * from './view-toolbar'; +export * from './zoom-level'; + diff --git a/packages/devextreme-angular/src/ui/diagram/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/diagram/nested/item-dxi.ts new file mode 100644 index 000000000000..93229637df77 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/item-dxi.ts @@ -0,0 +1,116 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ToolbarItemLocation } from 'devextreme/common'; +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-diagram-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDiagramItemComponent extends CollectionNestedOption { + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get name(): Command | string { + return this._getOption('name'); + } + set name(value: Command | string) { + this._setOption('name', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDiagramItemComponent + ], + exports: [ + DxiDiagramItemComponent + ], +}) +export class DxiDiagramItemModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/main-toolbar.ts b/packages/devextreme-angular/src/ui/diagram/nested/main-toolbar.ts new file mode 100644 index 000000000000..b4e2e539a9da --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/main-toolbar.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramCommandComponent } from './command-dxi'; + + +@Component({ + selector: 'dxo-diagram-main-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramMainToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get commands(): Array { + return this._getOption('commands'); + } + set commands(value: Array) { + this._setOption('commands', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'mainToolbar'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramCommandComponent)) + get commandsChildren(): QueryList { + return this._getOption('commands'); + } + set commandsChildren(value) { + this.setChildren('commands', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramMainToolbarComponent + ], + exports: [ + DxoDiagramMainToolbarComponent + ], +}) +export class DxoDiagramMainToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/ng-package.json b/packages/devextreme-angular/src/ui/diagram/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/diagram/nested/nodes.ts b/packages/devextreme-angular/src/ui/diagram/nested/nodes.ts new file mode 100644 index 000000000000..3b0afecaae30 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/nodes.ts @@ -0,0 +1,228 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Orientation } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { DataLayoutType } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-nodes', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramNodesComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get autoLayout(): DataLayoutType | { orientation?: Orientation, type?: DataLayoutType } { + return this._getOption('autoLayout'); + } + set autoLayout(value: DataLayoutType | { orientation?: Orientation, type?: DataLayoutType }) { + this._setOption('autoLayout', value); + } + + @Input() + get autoSizeEnabled(): boolean { + return this._getOption('autoSizeEnabled'); + } + set autoSizeEnabled(value: boolean) { + this._setOption('autoSizeEnabled', value); + } + + @Input() + get containerChildrenExpr(): Function | string | undefined { + return this._getOption('containerChildrenExpr'); + } + set containerChildrenExpr(value: Function | string | undefined) { + this._setOption('containerChildrenExpr', value); + } + + @Input() + get containerKeyExpr(): Function | string { + return this._getOption('containerKeyExpr'); + } + set containerKeyExpr(value: Function | string) { + this._setOption('containerKeyExpr', value); + } + + @Input() + get customDataExpr(): Function | string | undefined { + return this._getOption('customDataExpr'); + } + set customDataExpr(value: Function | string | undefined) { + this._setOption('customDataExpr', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get heightExpr(): Function | string | undefined { + return this._getOption('heightExpr'); + } + set heightExpr(value: Function | string | undefined) { + this._setOption('heightExpr', value); + } + + @Input() + get imageUrlExpr(): Function | string | undefined { + return this._getOption('imageUrlExpr'); + } + set imageUrlExpr(value: Function | string | undefined) { + this._setOption('imageUrlExpr', value); + } + + @Input() + get itemsExpr(): Function | string | undefined { + return this._getOption('itemsExpr'); + } + set itemsExpr(value: Function | string | undefined) { + this._setOption('itemsExpr', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get leftExpr(): Function | string | undefined { + return this._getOption('leftExpr'); + } + set leftExpr(value: Function | string | undefined) { + this._setOption('leftExpr', value); + } + + @Input() + get lockedExpr(): Function | string | undefined { + return this._getOption('lockedExpr'); + } + set lockedExpr(value: Function | string | undefined) { + this._setOption('lockedExpr', value); + } + + @Input() + get parentKeyExpr(): Function | string | undefined { + return this._getOption('parentKeyExpr'); + } + set parentKeyExpr(value: Function | string | undefined) { + this._setOption('parentKeyExpr', value); + } + + @Input() + get styleExpr(): Function | string | undefined { + return this._getOption('styleExpr'); + } + set styleExpr(value: Function | string | undefined) { + this._setOption('styleExpr', value); + } + + @Input() + get textExpr(): Function | string { + return this._getOption('textExpr'); + } + set textExpr(value: Function | string) { + this._setOption('textExpr', value); + } + + @Input() + get textStyleExpr(): Function | string | undefined { + return this._getOption('textStyleExpr'); + } + set textStyleExpr(value: Function | string | undefined) { + this._setOption('textStyleExpr', value); + } + + @Input() + get topExpr(): Function | string | undefined { + return this._getOption('topExpr'); + } + set topExpr(value: Function | string | undefined) { + this._setOption('topExpr', value); + } + + @Input() + get typeExpr(): Function | string { + return this._getOption('typeExpr'); + } + set typeExpr(value: Function | string) { + this._setOption('typeExpr', value); + } + + @Input() + get widthExpr(): Function | string | undefined { + return this._getOption('widthExpr'); + } + set widthExpr(value: Function | string | undefined) { + this._setOption('widthExpr', value); + } + + @Input() + get zIndexExpr(): Function | string | undefined { + return this._getOption('zIndexExpr'); + } + set zIndexExpr(value: Function | string | undefined) { + this._setOption('zIndexExpr', value); + } + + + protected get _optionPath() { + return 'nodes'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramNodesComponent + ], + exports: [ + DxoDiagramNodesComponent + ], +}) +export class DxoDiagramNodesModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/page-size.ts b/packages/devextreme-angular/src/ui/diagram/nested/page-size.ts new file mode 100644 index 000000000000..b62998c49a9b --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/page-size.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-diagram-page-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramPageSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'pageSize'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramPageSizeComponent + ], + exports: [ + DxoDiagramPageSizeComponent + ], +}) +export class DxoDiagramPageSizeModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/properties-panel.ts b/packages/devextreme-angular/src/ui/diagram/nested/properties-panel.ts new file mode 100644 index 000000000000..63b4100b5670 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/properties-panel.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand, PanelVisibility } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramTabComponent } from './tab-dxi'; + + +@Component({ + selector: 'dxo-diagram-properties-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramPropertiesPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get tabs(): Array, groups?: Array, title?: string }>, title?: string }> { + return this._getOption('tabs'); + } + set tabs(value: Array, groups?: Array, title?: string }>, title?: string }>) { + this._setOption('tabs', value); + } + + @Input() + get visibility(): PanelVisibility { + return this._getOption('visibility'); + } + set visibility(value: PanelVisibility) { + this._setOption('visibility', value); + } + + + protected get _optionPath() { + return 'propertiesPanel'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramTabComponent)) + get tabsChildren(): QueryList { + return this._getOption('tabs'); + } + set tabsChildren(value) { + this.setChildren('tabs', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramPropertiesPanelComponent + ], + exports: [ + DxoDiagramPropertiesPanelComponent + ], +}) +export class DxoDiagramPropertiesPanelModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/diagram/nested/tab-dxi.ts new file mode 100644 index 000000000000..84b34a805231 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/tab-dxi.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiDiagramCommandComponent } from './command-dxi'; +import { DxiDiagramGroupComponent } from './group-dxi'; + + +@Component({ + selector: 'dxi-diagram-tab', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDiagramTabComponent extends CollectionNestedOption { + @Input() + get commands(): Array { + return this._getOption('commands'); + } + set commands(value: Array) { + this._setOption('commands', value); + } + + @Input() + get groups(): Array, title?: string }> { + return this._getOption('groups'); + } + set groups(value: Array, title?: string }>) { + this._setOption('groups', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramCommandComponent)) + get commandsChildren(): QueryList { + return this._getOption('commands'); + } + set commandsChildren(value) { + this.setChildren('commands', value); + } + + @ContentChildren(forwardRef(() => DxiDiagramGroupComponent)) + get groupsChildren(): QueryList { + return this._getOption('groups'); + } + set groupsChildren(value) { + this.setChildren('groups', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDiagramTabComponent + ], + exports: [ + DxiDiagramTabComponent + ], +}) +export class DxiDiagramTabModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/toolbox.ts b/packages/devextreme-angular/src/ui/diagram/nested/toolbox.ts new file mode 100644 index 000000000000..da299b37fbcb --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/toolbox.ts @@ -0,0 +1,117 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { PanelVisibility, ShapeCategory, ShapeType, ToolboxDisplayMode } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramGroupComponent } from './group-dxi'; + + +@Component({ + selector: 'dxo-diagram-toolbox', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramToolboxComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get groups(): Array, title?: string }> { + return this._getOption('groups'); + } + set groups(value: Array, title?: string }>) { + this._setOption('groups', value); + } + + @Input() + get shapeIconsPerRow(): number { + return this._getOption('shapeIconsPerRow'); + } + set shapeIconsPerRow(value: number) { + this._setOption('shapeIconsPerRow', value); + } + + @Input() + get showSearch(): boolean { + return this._getOption('showSearch'); + } + set showSearch(value: boolean) { + this._setOption('showSearch', value); + } + + @Input() + get visibility(): PanelVisibility { + return this._getOption('visibility'); + } + set visibility(value: PanelVisibility) { + this._setOption('visibility', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'toolbox'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramGroupComponent)) + get groupsChildren(): QueryList { + return this._getOption('groups'); + } + set groupsChildren(value) { + this.setChildren('groups', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramToolboxComponent + ], + exports: [ + DxoDiagramToolboxComponent + ], +}) +export class DxoDiagramToolboxModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/view-toolbar.ts b/packages/devextreme-angular/src/ui/diagram/nested/view-toolbar.ts new file mode 100644 index 000000000000..c648c5792e02 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/view-toolbar.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Command, CustomCommand } from 'devextreme/ui/diagram'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDiagramCommandComponent } from './command-dxi'; + + +@Component({ + selector: 'dxo-diagram-view-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramViewToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get commands(): Array { + return this._getOption('commands'); + } + set commands(value: Array) { + this._setOption('commands', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'viewToolbar'; + } + + + @ContentChildren(forwardRef(() => DxiDiagramCommandComponent)) + get commandsChildren(): QueryList { + return this._getOption('commands'); + } + set commandsChildren(value) { + this.setChildren('commands', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramViewToolbarComponent + ], + exports: [ + DxoDiagramViewToolbarComponent + ], +}) +export class DxoDiagramViewToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/diagram/nested/zoom-level.ts b/packages/devextreme-angular/src/ui/diagram/nested/zoom-level.ts new file mode 100644 index 000000000000..7c788d33bd93 --- /dev/null +++ b/packages/devextreme-angular/src/ui/diagram/nested/zoom-level.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-diagram-zoom-level', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDiagramZoomLevelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get value(): number | undefined { + return this._getOption('value'); + } + set value(value: number | undefined) { + this._setOption('value', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter; + protected get _optionPath() { + return 'zoomLevel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDiagramZoomLevelComponent + ], + exports: [ + DxoDiagramZoomLevelComponent + ], +}) +export class DxoDiagramZoomLevelModule { } diff --git a/packages/devextreme-angular/src/ui/draggable/index.ts b/packages/devextreme-angular/src/ui/draggable/index.ts index 874c5ec518f2..2092b409fb7d 100644 --- a/packages/devextreme-angular/src/ui/draggable/index.ts +++ b/packages/devextreme-angular/src/ui/draggable/index.ts @@ -35,6 +35,8 @@ import { import { DxoCursorOffsetModule } from 'devextreme-angular/ui/nested'; +import { DxoDraggableCursorOffsetModule } from 'devextreme-angular/ui/draggable/nested'; + @@ -427,6 +429,7 @@ export class DxDraggableComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -477,6 +480,7 @@ export class DxDraggableComponent extends DxComponent implements OnDestroy { @NgModule({ imports: [ DxoCursorOffsetModule, + DxoDraggableCursorOffsetModule, DxIntegrationModule, DxTemplateModule ], @@ -486,6 +490,7 @@ export class DxDraggableComponent extends DxComponent implements OnDestroy { exports: [ DxDraggableComponent, DxoCursorOffsetModule, + DxoDraggableCursorOffsetModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/draggable/nested/cursor-offset.ts b/packages/devextreme-angular/src/ui/draggable/nested/cursor-offset.ts new file mode 100644 index 000000000000..dd4860fc1553 --- /dev/null +++ b/packages/devextreme-angular/src/ui/draggable/nested/cursor-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-draggable-cursor-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDraggableCursorOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'cursorOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDraggableCursorOffsetComponent + ], + exports: [ + DxoDraggableCursorOffsetComponent + ], +}) +export class DxoDraggableCursorOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/draggable/nested/index.ts b/packages/devextreme-angular/src/ui/draggable/nested/index.ts new file mode 100644 index 000000000000..844315b0f08d --- /dev/null +++ b/packages/devextreme-angular/src/ui/draggable/nested/index.ts @@ -0,0 +1,2 @@ +export * from './cursor-offset'; + diff --git a/packages/devextreme-angular/src/ui/draggable/nested/ng-package.json b/packages/devextreme-angular/src/ui/draggable/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/draggable/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/drawer/index.ts b/packages/devextreme-angular/src/ui/drawer/index.ts index 3543abfe8b5f..d82739389a17 100644 --- a/packages/devextreme-angular/src/ui/drawer/index.ts +++ b/packages/devextreme-angular/src/ui/drawer/index.ts @@ -35,6 +35,7 @@ import { + /** * [descr:dxDrawer] @@ -480,6 +481,7 @@ export class DxDrawerComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/drop-down-box/index.ts b/packages/devextreme-angular/src/ui/drop-down-box/index.ts index 4475e1f77bdc..40b2a3b1e9b4 100644 --- a/packages/devextreme-angular/src/ui/drop-down-box/index.ts +++ b/packages/devextreme-angular/src/ui/drop-down-box/index.ts @@ -62,12 +62,30 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiDropDownBoxButtonModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxOptionsModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxDropDownOptionsModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxAnimationModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxHideModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxFromModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxPositionModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxAtModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxBoundaryOffsetModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxCollisionModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxMyModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxOffsetModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxToModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxoDropDownBoxShowModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxiDropDownBoxToolbarItemModule } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxiDropDownBoxItemModule } from 'devextreme-angular/ui/drop-down-box/nested'; + import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiDropDownBoxButtonComponent } from 'devextreme-angular/ui/drop-down-box/nested'; +import { DxiDropDownBoxItemComponent } from 'devextreme-angular/ui/drop-down-box/nested'; @@ -1154,23 +1172,46 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiDropDownBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiDropDownBoxButtonComponent'); this.setChildren('buttons', value); } - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiDropDownBoxItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiDropDownBoxItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1332,8 +1373,23 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiDropDownBoxButtonModule, + DxoDropDownBoxOptionsModule, + DxoDropDownBoxDropDownOptionsModule, + DxoDropDownBoxAnimationModule, + DxoDropDownBoxHideModule, + DxoDropDownBoxFromModule, + DxoDropDownBoxPositionModule, + DxoDropDownBoxAtModule, + DxoDropDownBoxBoundaryOffsetModule, + DxoDropDownBoxCollisionModule, + DxoDropDownBoxMyModule, + DxoDropDownBoxOffsetModule, + DxoDropDownBoxToModule, + DxoDropDownBoxShowModule, + DxiDropDownBoxToolbarItemModule, + DxiDropDownBoxItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1356,8 +1412,23 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiDropDownBoxButtonModule, + DxoDropDownBoxOptionsModule, + DxoDropDownBoxDropDownOptionsModule, + DxoDropDownBoxAnimationModule, + DxoDropDownBoxHideModule, + DxoDropDownBoxFromModule, + DxoDropDownBoxPositionModule, + DxoDropDownBoxAtModule, + DxoDropDownBoxBoundaryOffsetModule, + DxoDropDownBoxCollisionModule, + DxoDropDownBoxMyModule, + DxoDropDownBoxOffsetModule, + DxoDropDownBoxToModule, + DxoDropDownBoxShowModule, + DxiDropDownBoxToolbarItemModule, + DxiDropDownBoxItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/animation.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/animation.ts new file mode 100644 index 000000000000..f4357f00e3fc --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxAnimationComponent + ], + exports: [ + DxoDropDownBoxAnimationComponent + ], +}) +export class DxoDropDownBoxAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/at.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/at.ts new file mode 100644 index 000000000000..05fa498d319b --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxAtComponent + ], + exports: [ + DxoDropDownBoxAtComponent + ], +}) +export class DxoDropDownBoxAtModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/boundary-offset.ts new file mode 100644 index 000000000000..8c604c36acdc --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxBoundaryOffsetComponent + ], + exports: [ + DxoDropDownBoxBoundaryOffsetComponent + ], +}) +export class DxoDropDownBoxBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/button-dxi.ts new file mode 100644 index 000000000000..c78f977397d3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-drop-down-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiDropDownBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDropDownBoxButtonComponent + ], + exports: [ + DxiDropDownBoxButtonComponent + ], +}) +export class DxiDropDownBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/collision.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/collision.ts new file mode 100644 index 000000000000..46c782f70fd3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxCollisionComponent + ], + exports: [ + DxoDropDownBoxCollisionComponent + ], +}) +export class DxoDropDownBoxCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts new file mode 100644 index 000000000000..e450cc2aefa3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDropDownBoxToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-drop-down-box-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiDropDownBoxToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxDropDownOptionsComponent + ], + exports: [ + DxoDropDownBoxDropDownOptionsComponent + ], +}) +export class DxoDropDownBoxDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/from.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/from.ts new file mode 100644 index 000000000000..0f9a2ae35b13 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxFromComponent + ], + exports: [ + DxoDropDownBoxFromComponent + ], +}) +export class DxoDropDownBoxFromModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/hide.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/hide.ts new file mode 100644 index 000000000000..bd9261ef68ba --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxHideComponent + ], + exports: [ + DxoDropDownBoxHideComponent + ], +}) +export class DxoDropDownBoxHideModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/index.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/index.ts new file mode 100644 index 000000000000..5d8a4c3bbef5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/index.ts @@ -0,0 +1,17 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/item-dxi.ts new file mode 100644 index 000000000000..35bdd43a83ab --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-drop-down-box-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDropDownBoxItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDropDownBoxItemComponent + ], + exports: [ + DxiDropDownBoxItemComponent + ], +}) +export class DxiDropDownBoxItemModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/my.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/my.ts new file mode 100644 index 000000000000..5bbe6c1e8544 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxMyComponent + ], + exports: [ + DxoDropDownBoxMyComponent + ], +}) +export class DxoDropDownBoxMyModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/drop-down-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/offset.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/offset.ts new file mode 100644 index 000000000000..7fe7e2110d38 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxOffsetComponent + ], + exports: [ + DxoDropDownBoxOffsetComponent + ], +}) +export class DxoDropDownBoxOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts new file mode 100644 index 000000000000..fea9b47f5ac3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxOptionsComponent + ], + exports: [ + DxoDropDownBoxOptionsComponent + ], +}) +export class DxoDropDownBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/position.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/position.ts new file mode 100644 index 000000000000..1cde76899f97 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxPositionComponent + ], + exports: [ + DxoDropDownBoxPositionComponent + ], +}) +export class DxoDropDownBoxPositionModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/show.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/show.ts new file mode 100644 index 000000000000..3bfd2e98a565 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxShowComponent + ], + exports: [ + DxoDropDownBoxShowComponent + ], +}) +export class DxoDropDownBoxShowModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/to.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/to.ts new file mode 100644 index 000000000000..f4235b576860 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-box-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownBoxToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownBoxToComponent + ], + exports: [ + DxoDropDownBoxToComponent + ], +}) +export class DxoDropDownBoxToModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..f5522b220132 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-drop-down-box-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDropDownBoxToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDropDownBoxToolbarItemComponent + ], + exports: [ + DxiDropDownBoxToolbarItemComponent + ], +}) +export class DxiDropDownBoxToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/index.ts b/packages/devextreme-angular/src/ui/drop-down-button/index.ts index 7b99fb6b6d52..b58f3d9bdc5e 100644 --- a/packages/devextreme-angular/src/ui/drop-down-button/index.ts +++ b/packages/devextreme-angular/src/ui/drop-down-button/index.ts @@ -53,11 +53,26 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxoDropDownButtonDropDownOptionsModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonAnimationModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonHideModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonFromModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonPositionModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonAtModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonBoundaryOffsetModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonCollisionModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonMyModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonOffsetModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonToModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxoDropDownButtonShowModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxiDropDownButtonToolbarItemModule } from 'devextreme-angular/ui/drop-down-button/nested'; +import { DxiDropDownButtonItemModule } from 'devextreme-angular/ui/drop-down-button/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiDropDownButtonItemComponent } from 'devextreme-angular/ui/drop-down-button/nested'; /** @@ -815,15 +830,27 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy, - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiDropDownButtonItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiDropDownButtonItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -937,8 +964,21 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy, DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxoDropDownButtonDropDownOptionsModule, + DxoDropDownButtonAnimationModule, + DxoDropDownButtonHideModule, + DxoDropDownButtonFromModule, + DxoDropDownButtonPositionModule, + DxoDropDownButtonAtModule, + DxoDropDownButtonBoundaryOffsetModule, + DxoDropDownButtonCollisionModule, + DxoDropDownButtonMyModule, + DxoDropDownButtonOffsetModule, + DxoDropDownButtonToModule, + DxoDropDownButtonShowModule, + DxiDropDownButtonToolbarItemModule, + DxiDropDownButtonItemModule, DxIntegrationModule, DxTemplateModule ], @@ -959,8 +999,21 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy, DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxoDropDownButtonDropDownOptionsModule, + DxoDropDownButtonAnimationModule, + DxoDropDownButtonHideModule, + DxoDropDownButtonFromModule, + DxoDropDownButtonPositionModule, + DxoDropDownButtonAtModule, + DxoDropDownButtonBoundaryOffsetModule, + DxoDropDownButtonCollisionModule, + DxoDropDownButtonMyModule, + DxoDropDownButtonOffsetModule, + DxoDropDownButtonToModule, + DxoDropDownButtonShowModule, + DxiDropDownButtonToolbarItemModule, + DxiDropDownButtonItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/animation.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/animation.ts new file mode 100644 index 000000000000..781529c8020a --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonAnimationComponent + ], + exports: [ + DxoDropDownButtonAnimationComponent + ], +}) +export class DxoDropDownButtonAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/at.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/at.ts new file mode 100644 index 000000000000..7745acb73436 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonAtComponent + ], + exports: [ + DxoDropDownButtonAtComponent + ], +}) +export class DxoDropDownButtonAtModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/boundary-offset.ts new file mode 100644 index 000000000000..91d3f3808f22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonBoundaryOffsetComponent + ], + exports: [ + DxoDropDownButtonBoundaryOffsetComponent + ], +}) +export class DxoDropDownButtonBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/collision.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/collision.ts new file mode 100644 index 000000000000..a2c31d7d31f9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonCollisionComponent + ], + exports: [ + DxoDropDownButtonCollisionComponent + ], +}) +export class DxoDropDownButtonCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts new file mode 100644 index 000000000000..1d3ae7457cac --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiDropDownButtonToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-drop-down-button-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiDropDownButtonToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonDropDownOptionsComponent + ], + exports: [ + DxoDropDownButtonDropDownOptionsComponent + ], +}) +export class DxoDropDownButtonDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/from.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/from.ts new file mode 100644 index 000000000000..8b3d9f53f4e6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonFromComponent + ], + exports: [ + DxoDropDownButtonFromComponent + ], +}) +export class DxoDropDownButtonFromModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/hide.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/hide.ts new file mode 100644 index 000000000000..fd79026fedc7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonHideComponent + ], + exports: [ + DxoDropDownButtonHideComponent + ], +}) +export class DxoDropDownButtonHideModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/index.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/index.ts new file mode 100644 index 000000000000..ffd104687926 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/index.ts @@ -0,0 +1,15 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/item-dxi.ts new file mode 100644 index 000000000000..85c6b2dbb7d9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/item-dxi.ts @@ -0,0 +1,144 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ItemClickEvent } from 'devextreme/ui/drop_down_button'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-drop-down-button-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDropDownButtonItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDropDownButtonItemComponent + ], + exports: [ + DxiDropDownButtonItemComponent + ], +}) +export class DxiDropDownButtonItemModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/my.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/my.ts new file mode 100644 index 000000000000..8329621d2dca --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonMyComponent + ], + exports: [ + DxoDropDownButtonMyComponent + ], +}) +export class DxoDropDownButtonMyModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/ng-package.json b/packages/devextreme-angular/src/ui/drop-down-button/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/offset.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/offset.ts new file mode 100644 index 000000000000..56bcff4a3d75 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonOffsetComponent + ], + exports: [ + DxoDropDownButtonOffsetComponent + ], +}) +export class DxoDropDownButtonOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/position.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/position.ts new file mode 100644 index 000000000000..8d98fde1b924 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonPositionComponent + ], + exports: [ + DxoDropDownButtonPositionComponent + ], +}) +export class DxoDropDownButtonPositionModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/show.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/show.ts new file mode 100644 index 000000000000..921234f3d438 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonShowComponent + ], + exports: [ + DxoDropDownButtonShowComponent + ], +}) +export class DxoDropDownButtonShowModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/to.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/to.ts new file mode 100644 index 000000000000..db2ced937087 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-drop-down-button-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoDropDownButtonToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoDropDownButtonToComponent + ], + exports: [ + DxoDropDownButtonToComponent + ], +}) +export class DxoDropDownButtonToModule { } diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..21df7f1b79e2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-drop-down-button-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiDropDownButtonToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiDropDownButtonToolbarItemComponent + ], + exports: [ + DxiDropDownButtonToolbarItemComponent + ], +}) +export class DxiDropDownButtonToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/index.ts b/packages/devextreme-angular/src/ui/file-manager/index.ts index e0bcdd5b0a4b..a361340933f9 100644 --- a/packages/devextreme-angular/src/ui/file-manager/index.ts +++ b/packages/devextreme-angular/src/ui/file-manager/index.ts @@ -47,6 +47,17 @@ import { DxoToolbarModule } from 'devextreme-angular/ui/nested'; import { DxiFileSelectionItemModule } from 'devextreme-angular/ui/nested'; import { DxoUploadModule } from 'devextreme-angular/ui/nested'; +import { DxoFileManagerContextMenuModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxiFileManagerItemModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxoFileManagerItemViewModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxoFileManagerDetailsModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxiFileManagerColumnModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxoFileManagerNotificationsModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxoFileManagerPermissionsModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxoFileManagerToolbarModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxiFileManagerFileSelectionItemModule } from 'devextreme-angular/ui/file-manager/nested'; +import { DxoFileManagerUploadModule } from 'devextreme-angular/ui/file-manager/nested'; + @@ -832,6 +843,7 @@ export class DxFileManagerComponent extends DxComponent implements OnDestroy, On + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -955,6 +967,16 @@ export class DxFileManagerComponent extends DxComponent implements OnDestroy, On DxoToolbarModule, DxiFileSelectionItemModule, DxoUploadModule, + DxoFileManagerContextMenuModule, + DxiFileManagerItemModule, + DxoFileManagerItemViewModule, + DxoFileManagerDetailsModule, + DxiFileManagerColumnModule, + DxoFileManagerNotificationsModule, + DxoFileManagerPermissionsModule, + DxoFileManagerToolbarModule, + DxiFileManagerFileSelectionItemModule, + DxoFileManagerUploadModule, DxIntegrationModule, DxTemplateModule ], @@ -973,6 +995,16 @@ export class DxFileManagerComponent extends DxComponent implements OnDestroy, On DxoToolbarModule, DxiFileSelectionItemModule, DxoUploadModule, + DxoFileManagerContextMenuModule, + DxiFileManagerItemModule, + DxoFileManagerItemViewModule, + DxoFileManagerDetailsModule, + DxiFileManagerColumnModule, + DxoFileManagerNotificationsModule, + DxoFileManagerPermissionsModule, + DxoFileManagerToolbarModule, + DxiFileManagerFileSelectionItemModule, + DxoFileManagerUploadModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/file-manager/nested/column-dxi.ts new file mode 100644 index 000000000000..ba2aeda90afd --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/column-dxi.ts @@ -0,0 +1,147 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType, HorizontalAlignment, SortOrder } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-file-manager-column', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiFileManagerColumnComponent extends CollectionNestedOption { + @Input() + get alignment(): HorizontalAlignment | string | undefined { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment | string | undefined) { + this._setOption('alignment', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType | undefined { + return this._getOption('dataType'); + } + set dataType(value: DataType | undefined) { + this._setOption('dataType', value); + } + + @Input() + get hidingPriority(): number | undefined { + return this._getOption('hidingPriority'); + } + set hidingPriority(value: number | undefined) { + this._setOption('hidingPriority', value); + } + + @Input() + get sortIndex(): number | undefined { + return this._getOption('sortIndex'); + } + set sortIndex(value: number | undefined) { + this._setOption('sortIndex', value); + } + + @Input() + get sortOrder(): SortOrder | string | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | string | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'columns'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFileManagerColumnComponent + ], + exports: [ + DxiFileManagerColumnComponent + ], +}) +export class DxiFileManagerColumnModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/context-menu.ts b/packages/devextreme-angular/src/ui/file-manager/nested/context-menu.ts new file mode 100644 index 000000000000..7d4928a43f83 --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/context-menu.ts @@ -0,0 +1,85 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxFileManagerContextMenuItem, FileManagerPredefinedContextMenuItem } from 'devextreme/ui/file_manager'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiFileManagerItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-file-manager-context-menu', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerContextMenuComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + + protected get _optionPath() { + return 'contextMenu'; + } + + + @ContentChildren(forwardRef(() => DxiFileManagerItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerContextMenuComponent + ], + exports: [ + DxoFileManagerContextMenuComponent + ], +}) +export class DxoFileManagerContextMenuModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/details.ts b/packages/devextreme-angular/src/ui/file-manager/nested/details.ts new file mode 100644 index 000000000000..6e5b7aa7b7dc --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/details.ts @@ -0,0 +1,85 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxFileManagerDetailsColumn } from 'devextreme/ui/file_manager'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiFileManagerColumnComponent } from './column-dxi'; + + +@Component({ + selector: 'dxo-file-manager-details', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerDetailsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get columns(): Array { + return this._getOption('columns'); + } + set columns(value: Array) { + this._setOption('columns', value); + } + + + protected get _optionPath() { + return 'details'; + } + + + @ContentChildren(forwardRef(() => DxiFileManagerColumnComponent)) + get columnsChildren(): QueryList { + return this._getOption('columns'); + } + set columnsChildren(value) { + this.setChildren('columns', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerDetailsComponent + ], + exports: [ + DxoFileManagerDetailsComponent + ], +}) +export class DxoFileManagerDetailsModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/file-selection-item-dxi.ts b/packages/devextreme-angular/src/ui/file-manager/nested/file-selection-item-dxi.ts new file mode 100644 index 000000000000..1904b6bd02ea --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/file-selection-item-dxi.ts @@ -0,0 +1,149 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-file-manager-file-selection-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiFileManagerFileSelectionItemComponent extends CollectionNestedOption { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get name(): FileManagerPredefinedToolbarItem | string { + return this._getOption('name'); + } + set name(value: FileManagerPredefinedToolbarItem | string) { + this._setOption('name', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean | undefined { + return this._getOption('visible'); + } + set visible(value: boolean | undefined) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'fileSelectionItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFileManagerFileSelectionItemComponent + ], + exports: [ + DxiFileManagerFileSelectionItemComponent + ], +}) +export class DxiFileManagerFileSelectionItemModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/index.ts b/packages/devextreme-angular/src/ui/file-manager/nested/index.ts new file mode 100644 index 000000000000..c0ef482c5e97 --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/index.ts @@ -0,0 +1,11 @@ +export * from './column-dxi'; +export * from './context-menu'; +export * from './details'; +export * from './file-selection-item-dxi'; +export * from './item-dxi'; +export * from './item-view'; +export * from './notifications'; +export * from './permissions'; +export * from './toolbar'; +export * from './upload'; + diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/file-manager/nested/item-dxi.ts new file mode 100644 index 000000000000..aad515cc65a3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/item-dxi.ts @@ -0,0 +1,200 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { dxFileManagerContextMenuItem, FileManagerPredefinedContextMenuItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-file-manager-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiFileManagerItemComponent extends CollectionNestedOption { + @Input() + get beginGroup(): boolean { + return this._getOption('beginGroup'); + } + set beginGroup(value: boolean) { + this._setOption('beginGroup', value); + } + + @Input() + get closeMenuOnClick(): boolean { + return this._getOption('closeMenuOnClick'); + } + set closeMenuOnClick(value: boolean) { + this._setOption('closeMenuOnClick', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get name(): FileManagerPredefinedContextMenuItem | string | FileManagerPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: FileManagerPredefinedContextMenuItem | string | FileManagerPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get selectable(): boolean { + return this._getOption('selectable'); + } + set selectable(value: boolean) { + this._setOption('selectable', value); + } + + @Input() + get selected(): boolean { + return this._getOption('selected'); + } + set selected(value: boolean) { + this._setOption('selected', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean | undefined { + return this._getOption('visible'); + } + set visible(value: boolean | undefined) { + this._setOption('visible', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiFileManagerItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFileManagerItemComponent + ], + exports: [ + DxiFileManagerItemComponent + ], +}) +export class DxiFileManagerItemModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/item-view.ts b/packages/devextreme-angular/src/ui/file-manager/nested/item-view.ts new file mode 100644 index 000000000000..675d78c08a3d --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/item-view.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { dxFileManagerDetailsColumn, FileManagerItemViewMode } from 'devextreme/ui/file_manager'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-file-manager-item-view', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerItemViewComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get details(): { columns?: Array } { + return this._getOption('details'); + } + set details(value: { columns?: Array }) { + this._setOption('details', value); + } + + @Input() + get mode(): FileManagerItemViewMode { + return this._getOption('mode'); + } + set mode(value: FileManagerItemViewMode) { + this._setOption('mode', value); + } + + @Input() + get showFolders(): boolean { + return this._getOption('showFolders'); + } + set showFolders(value: boolean) { + this._setOption('showFolders', value); + } + + @Input() + get showParentFolder(): boolean { + return this._getOption('showParentFolder'); + } + set showParentFolder(value: boolean) { + this._setOption('showParentFolder', value); + } + + + protected get _optionPath() { + return 'itemView'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerItemViewComponent + ], + exports: [ + DxoFileManagerItemViewComponent + ], +}) +export class DxoFileManagerItemViewModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/ng-package.json b/packages/devextreme-angular/src/ui/file-manager/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/notifications.ts b/packages/devextreme-angular/src/ui/file-manager/nested/notifications.ts new file mode 100644 index 000000000000..9d59b26a4837 --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/notifications.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-file-manager-notifications', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerNotificationsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get showPanel(): boolean { + return this._getOption('showPanel'); + } + set showPanel(value: boolean) { + this._setOption('showPanel', value); + } + + @Input() + get showPopup(): boolean { + return this._getOption('showPopup'); + } + set showPopup(value: boolean) { + this._setOption('showPopup', value); + } + + + protected get _optionPath() { + return 'notifications'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerNotificationsComponent + ], + exports: [ + DxoFileManagerNotificationsComponent + ], +}) +export class DxoFileManagerNotificationsModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/permissions.ts b/packages/devextreme-angular/src/ui/file-manager/nested/permissions.ts new file mode 100644 index 000000000000..3be862ced9bb --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/permissions.ts @@ -0,0 +1,120 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-file-manager-permissions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerPermissionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get copy(): boolean { + return this._getOption('copy'); + } + set copy(value: boolean) { + this._setOption('copy', value); + } + + @Input() + get create(): boolean { + return this._getOption('create'); + } + set create(value: boolean) { + this._setOption('create', value); + } + + @Input() + get delete(): boolean { + return this._getOption('delete'); + } + set delete(value: boolean) { + this._setOption('delete', value); + } + + @Input() + get download(): boolean { + return this._getOption('download'); + } + set download(value: boolean) { + this._setOption('download', value); + } + + @Input() + get move(): boolean { + return this._getOption('move'); + } + set move(value: boolean) { + this._setOption('move', value); + } + + @Input() + get rename(): boolean { + return this._getOption('rename'); + } + set rename(value: boolean) { + this._setOption('rename', value); + } + + @Input() + get upload(): boolean { + return this._getOption('upload'); + } + set upload(value: boolean) { + this._setOption('upload', value); + } + + + protected get _optionPath() { + return 'permissions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerPermissionsComponent + ], + exports: [ + DxoFileManagerPermissionsComponent + ], +}) +export class DxoFileManagerPermissionsModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/toolbar.ts b/packages/devextreme-angular/src/ui/file-manager/nested/toolbar.ts new file mode 100644 index 000000000000..1b16a6483bdc --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/toolbar.ts @@ -0,0 +1,102 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxFileManagerToolbarItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiFileManagerFileSelectionItemComponent } from './file-selection-item-dxi'; +import { DxiFileManagerItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-file-manager-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get fileSelectionItems(): Array { + return this._getOption('fileSelectionItems'); + } + set fileSelectionItems(value: Array) { + this._setOption('fileSelectionItems', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + + protected get _optionPath() { + return 'toolbar'; + } + + + @ContentChildren(forwardRef(() => DxiFileManagerFileSelectionItemComponent)) + get fileSelectionItemsChildren(): QueryList { + return this._getOption('fileSelectionItems'); + } + set fileSelectionItemsChildren(value) { + this.setChildren('fileSelectionItems', value); + } + + @ContentChildren(forwardRef(() => DxiFileManagerItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerToolbarComponent + ], + exports: [ + DxoFileManagerToolbarComponent + ], +}) +export class DxoFileManagerToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/file-manager/nested/upload.ts b/packages/devextreme-angular/src/ui/file-manager/nested/upload.ts new file mode 100644 index 000000000000..119cf29fb1fa --- /dev/null +++ b/packages/devextreme-angular/src/ui/file-manager/nested/upload.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-file-manager-upload', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFileManagerUploadComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get chunkSize(): number { + return this._getOption('chunkSize'); + } + set chunkSize(value: number) { + this._setOption('chunkSize', value); + } + + @Input() + get maxFileSize(): number { + return this._getOption('maxFileSize'); + } + set maxFileSize(value: number) { + this._setOption('maxFileSize', value); + } + + + protected get _optionPath() { + return 'upload'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFileManagerUploadComponent + ], + exports: [ + DxoFileManagerUploadComponent + ], +}) +export class DxoFileManagerUploadModule { } diff --git a/packages/devextreme-angular/src/ui/file-uploader/index.ts b/packages/devextreme-angular/src/ui/file-uploader/index.ts index 4d184c6a8093..b7550bf050a9 100644 --- a/packages/devextreme-angular/src/ui/file-uploader/index.ts +++ b/packages/devextreme-angular/src/ui/file-uploader/index.ts @@ -48,6 +48,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxFileUploaderComponent), @@ -1198,6 +1199,7 @@ export class DxFileUploaderComponent extends DxComponent implements OnDestroy, C + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/filter-builder/index.ts b/packages/devextreme-angular/src/ui/filter-builder/index.ts index 86ee01d0b31e..c7f138366e06 100644 --- a/packages/devextreme-angular/src/ui/filter-builder/index.ts +++ b/packages/devextreme-angular/src/ui/filter-builder/index.ts @@ -50,9 +50,18 @@ import { DxoLookupModule } from 'devextreme-angular/ui/nested'; import { DxoFilterOperationDescriptionsModule } from 'devextreme-angular/ui/nested'; import { DxoGroupOperationDescriptionsModule } from 'devextreme-angular/ui/nested'; +import { DxiFilterBuilderCustomOperationModule } from 'devextreme-angular/ui/filter-builder/nested'; +import { DxiFilterBuilderFieldModule } from 'devextreme-angular/ui/filter-builder/nested'; +import { DxoFilterBuilderFormatModule } from 'devextreme-angular/ui/filter-builder/nested'; +import { DxoFilterBuilderLookupModule } from 'devextreme-angular/ui/filter-builder/nested'; +import { DxoFilterBuilderFilterOperationDescriptionsModule } from 'devextreme-angular/ui/filter-builder/nested'; +import { DxoFilterBuilderGroupOperationDescriptionsModule } from 'devextreme-angular/ui/filter-builder/nested'; + import { DxiCustomOperationComponent } from 'devextreme-angular/ui/nested'; import { DxiFieldComponent } from 'devextreme-angular/ui/nested'; +import { DxiFilterBuilderCustomOperationComponent } from 'devextreme-angular/ui/filter-builder/nested'; +import { DxiFilterBuilderFieldComponent } from 'devextreme-angular/ui/filter-builder/nested'; @@ -547,23 +556,46 @@ export class DxFilterBuilderComponent extends DxComponent implements OnDestroy, @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiCustomOperationComponent) - get customOperationsChildren(): QueryList { + @ContentChildren(DxiFilterBuilderCustomOperationComponent) + get customOperationsChildren(): QueryList { return this._getOption('customOperations'); } set customOperationsChildren(value) { + this.setContentChildren('customOperations', value, 'DxiFilterBuilderCustomOperationComponent'); this.setChildren('customOperations', value); } - @ContentChildren(DxiFieldComponent) - get fieldsChildren(): QueryList { + @ContentChildren(DxiFilterBuilderFieldComponent) + get fieldsChildren(): QueryList { return this._getOption('fields'); } set fieldsChildren(value) { + this.setContentChildren('fields', value, 'DxiFilterBuilderFieldComponent'); this.setChildren('fields', value); } + @ContentChildren(DxiCustomOperationComponent) + get customOperationsLegacyChildren(): QueryList { + return this._getOption('customOperations'); + } + set customOperationsLegacyChildren(value) { + if (this.checkContentChildren('customOperations', value, 'DxiCustomOperationComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiFieldComponent) + get fieldsLegacyChildren(): QueryList { + return this._getOption('fields'); + } + set fieldsLegacyChildren(value) { + if (this.checkContentChildren('fields', value, 'DxiFieldComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -680,6 +712,12 @@ export class DxFilterBuilderComponent extends DxComponent implements OnDestroy, DxoLookupModule, DxoFilterOperationDescriptionsModule, DxoGroupOperationDescriptionsModule, + DxiFilterBuilderCustomOperationModule, + DxiFilterBuilderFieldModule, + DxoFilterBuilderFormatModule, + DxoFilterBuilderLookupModule, + DxoFilterBuilderFilterOperationDescriptionsModule, + DxoFilterBuilderGroupOperationDescriptionsModule, DxIntegrationModule, DxTemplateModule ], @@ -694,6 +732,12 @@ export class DxFilterBuilderComponent extends DxComponent implements OnDestroy, DxoLookupModule, DxoFilterOperationDescriptionsModule, DxoGroupOperationDescriptionsModule, + DxiFilterBuilderCustomOperationModule, + DxiFilterBuilderFieldModule, + DxoFilterBuilderFormatModule, + DxoFilterBuilderLookupModule, + DxoFilterBuilderFilterOperationDescriptionsModule, + DxoFilterBuilderGroupOperationDescriptionsModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/custom-operation-dxi.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/custom-operation-dxi.ts new file mode 100644 index 000000000000..472c82d6fac9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/custom-operation-dxi.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-filter-builder-custom-operation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiFilterBuilderCustomOperationComponent extends CollectionNestedOption { + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataTypes(): any | undefined | Array { + return this._getOption('dataTypes'); + } + set dataTypes(value: any | undefined | Array) { + this._setOption('dataTypes', value); + } + + @Input() + get editorTemplate(): any { + return this._getOption('editorTemplate'); + } + set editorTemplate(value: any) { + this._setOption('editorTemplate', value); + } + + @Input() + get hasValue(): boolean { + return this._getOption('hasValue'); + } + set hasValue(value: boolean) { + this._setOption('hasValue', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'customOperations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFilterBuilderCustomOperationComponent + ], + exports: [ + DxiFilterBuilderCustomOperationComponent + ], +}) +export class DxiFilterBuilderCustomOperationModule { } diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/field-dxi.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/field-dxi.ts new file mode 100644 index 000000000000..1227200fe992 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/field-dxi.ts @@ -0,0 +1,167 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { Format } from 'devextreme/localization'; +import { FilterBuilderOperation } from 'devextreme/ui/filter_builder'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-filter-builder-field', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiFilterBuilderFieldComponent extends CollectionNestedOption { + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType { + return this._getOption('dataType'); + } + set dataType(value: DataType) { + this._setOption('dataType', value); + } + + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get editorTemplate(): any { + return this._getOption('editorTemplate'); + } + set editorTemplate(value: any) { + this._setOption('editorTemplate', value); + } + + @Input() + get falseText(): string { + return this._getOption('falseText'); + } + set falseText(value: string) { + this._setOption('falseText', value); + } + + @Input() + get filterOperations(): Array { + return this._getOption('filterOperations'); + } + set filterOperations(value: Array) { + this._setOption('filterOperations', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get lookup(): { allowClearing?: boolean, dataSource?: Store | DataSourceOptions | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: Function | string | undefined } { + return this._getOption('lookup'); + } + set lookup(value: { allowClearing?: boolean, dataSource?: Store | DataSourceOptions | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: Function | string | undefined }) { + this._setOption('lookup', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get trueText(): string { + return this._getOption('trueText'); + } + set trueText(value: string) { + this._setOption('trueText', value); + } + + + protected get _optionPath() { + return 'fields'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFilterBuilderFieldComponent + ], + exports: [ + DxiFilterBuilderFieldComponent + ], +}) +export class DxiFilterBuilderFieldModule { } diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/filter-operation-descriptions.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/filter-operation-descriptions.ts new file mode 100644 index 000000000000..fdc65b847a02 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/filter-operation-descriptions.ts @@ -0,0 +1,168 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-filter-builder-filter-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFilterBuilderFilterOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get between(): string { + return this._getOption('between'); + } + set between(value: string) { + this._setOption('between', value); + } + + @Input() + get contains(): string { + return this._getOption('contains'); + } + set contains(value: string) { + this._setOption('contains', value); + } + + @Input() + get endsWith(): string { + return this._getOption('endsWith'); + } + set endsWith(value: string) { + this._setOption('endsWith', value); + } + + @Input() + get equal(): string { + return this._getOption('equal'); + } + set equal(value: string) { + this._setOption('equal', value); + } + + @Input() + get greaterThan(): string { + return this._getOption('greaterThan'); + } + set greaterThan(value: string) { + this._setOption('greaterThan', value); + } + + @Input() + get greaterThanOrEqual(): string { + return this._getOption('greaterThanOrEqual'); + } + set greaterThanOrEqual(value: string) { + this._setOption('greaterThanOrEqual', value); + } + + @Input() + get isBlank(): string { + return this._getOption('isBlank'); + } + set isBlank(value: string) { + this._setOption('isBlank', value); + } + + @Input() + get isNotBlank(): string { + return this._getOption('isNotBlank'); + } + set isNotBlank(value: string) { + this._setOption('isNotBlank', value); + } + + @Input() + get lessThan(): string { + return this._getOption('lessThan'); + } + set lessThan(value: string) { + this._setOption('lessThan', value); + } + + @Input() + get lessThanOrEqual(): string { + return this._getOption('lessThanOrEqual'); + } + set lessThanOrEqual(value: string) { + this._setOption('lessThanOrEqual', value); + } + + @Input() + get notContains(): string { + return this._getOption('notContains'); + } + set notContains(value: string) { + this._setOption('notContains', value); + } + + @Input() + get notEqual(): string { + return this._getOption('notEqual'); + } + set notEqual(value: string) { + this._setOption('notEqual', value); + } + + @Input() + get startsWith(): string { + return this._getOption('startsWith'); + } + set startsWith(value: string) { + this._setOption('startsWith', value); + } + + + protected get _optionPath() { + return 'filterOperationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFilterBuilderFilterOperationDescriptionsComponent + ], + exports: [ + DxoFilterBuilderFilterOperationDescriptionsComponent + ], +}) +export class DxoFilterBuilderFilterOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/format.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/format.ts new file mode 100644 index 000000000000..1828001e024b --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-filter-builder-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFilterBuilderFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFilterBuilderFormatComponent + ], + exports: [ + DxoFilterBuilderFormatComponent + ], +}) +export class DxoFilterBuilderFormatModule { } diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/group-operation-descriptions.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/group-operation-descriptions.ts new file mode 100644 index 000000000000..868680c25bf2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/group-operation-descriptions.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-filter-builder-group-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFilterBuilderGroupOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get and(): string { + return this._getOption('and'); + } + set and(value: string) { + this._setOption('and', value); + } + + @Input() + get notAnd(): string { + return this._getOption('notAnd'); + } + set notAnd(value: string) { + this._setOption('notAnd', value); + } + + @Input() + get notOr(): string { + return this._getOption('notOr'); + } + set notOr(value: string) { + this._setOption('notOr', value); + } + + @Input() + get or(): string { + return this._getOption('or'); + } + set or(value: string) { + this._setOption('or', value); + } + + + protected get _optionPath() { + return 'groupOperationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFilterBuilderGroupOperationDescriptionsComponent + ], + exports: [ + DxoFilterBuilderGroupOperationDescriptionsComponent + ], +}) +export class DxoFilterBuilderGroupOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/index.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/index.ts new file mode 100644 index 000000000000..3534d23901a9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/index.ts @@ -0,0 +1,7 @@ +export * from './custom-operation-dxi'; +export * from './field-dxi'; +export * from './filter-operation-descriptions'; +export * from './format'; +export * from './group-operation-descriptions'; +export * from './lookup'; + diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/lookup.ts b/packages/devextreme-angular/src/ui/filter-builder/nested/lookup.ts new file mode 100644 index 000000000000..8c60177ffbd8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/lookup.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-filter-builder-lookup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFilterBuilderLookupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowClearing(): boolean { + return this._getOption('allowClearing'); + } + set allowClearing(value: boolean) { + this._setOption('allowClearing', value); + } + + @Input() + get dataSource(): Store | DataSourceOptions | undefined | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSourceOptions | undefined | Array) { + this._setOption('dataSource', value); + } + + @Input() + get displayExpr(): Function | string | undefined { + return this._getOption('displayExpr'); + } + set displayExpr(value: Function | string | undefined) { + this._setOption('displayExpr', value); + } + + @Input() + get valueExpr(): Function | string | undefined { + return this._getOption('valueExpr'); + } + set valueExpr(value: Function | string | undefined) { + this._setOption('valueExpr', value); + } + + + protected get _optionPath() { + return 'lookup'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFilterBuilderLookupComponent + ], + exports: [ + DxoFilterBuilderLookupComponent + ], +}) +export class DxoFilterBuilderLookupModule { } diff --git a/packages/devextreme-angular/src/ui/filter-builder/nested/ng-package.json b/packages/devextreme-angular/src/ui/filter-builder/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/filter-builder/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/form/index.ts b/packages/devextreme-angular/src/ui/form/index.ts index c0a18e2b79a0..4d544f92b747 100644 --- a/packages/devextreme-angular/src/ui/form/index.ts +++ b/packages/devextreme-angular/src/ui/form/index.ts @@ -46,8 +46,17 @@ import { DxoTabPanelOptionsModule } from 'devextreme-angular/ui/nested'; import { DxiTabModule } from 'devextreme-angular/ui/nested'; import { DxoButtonOptionsModule } from 'devextreme-angular/ui/nested'; +import { DxoFormColCountByScreenModule } from 'devextreme-angular/ui/form/nested'; +import { DxiFormItemModule } from 'devextreme-angular/ui/form/nested'; +import { DxoFormLabelModule } from 'devextreme-angular/ui/form/nested'; +import { DxiFormValidationRuleModule } from 'devextreme-angular/ui/form/nested'; +import { DxoFormTabPanelOptionsModule } from 'devextreme-angular/ui/form/nested'; +import { DxiFormTabModule } from 'devextreme-angular/ui/form/nested'; +import { DxoFormButtonOptionsModule } from 'devextreme-angular/ui/form/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiFormItemComponent } from 'devextreme-angular/ui/form/nested'; /** @@ -797,15 +806,27 @@ export class DxFormComponent extends DxComponent implements OnDestroy, OnChanges - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiFormItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiFormItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -911,6 +932,13 @@ export class DxFormComponent extends DxComponent implements OnDestroy, OnChanges DxoTabPanelOptionsModule, DxiTabModule, DxoButtonOptionsModule, + DxoFormColCountByScreenModule, + DxiFormItemModule, + DxoFormLabelModule, + DxiFormValidationRuleModule, + DxoFormTabPanelOptionsModule, + DxiFormTabModule, + DxoFormButtonOptionsModule, DxIntegrationModule, DxTemplateModule ], @@ -926,6 +954,13 @@ export class DxFormComponent extends DxComponent implements OnDestroy, OnChanges DxoTabPanelOptionsModule, DxiTabModule, DxoButtonOptionsModule, + DxoFormColCountByScreenModule, + DxiFormItemModule, + DxoFormLabelModule, + DxiFormValidationRuleModule, + DxoFormTabPanelOptionsModule, + DxiFormTabModule, + DxoFormButtonOptionsModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/form/nested/button-options.ts b/packages/devextreme-angular/src/ui/form/nested/button-options.ts new file mode 100644 index 000000000000..4df5fc38a531 --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/button-options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-form-button-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFormButtonOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'buttonOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFormButtonOptionsComponent + ], + exports: [ + DxoFormButtonOptionsComponent + ], +}) +export class DxoFormButtonOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/form/nested/col-count-by-screen.ts b/packages/devextreme-angular/src/ui/form/nested/col-count-by-screen.ts new file mode 100644 index 000000000000..805327051c5c --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/col-count-by-screen.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-form-col-count-by-screen', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFormColCountByScreenComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get lg(): number | undefined { + return this._getOption('lg'); + } + set lg(value: number | undefined) { + this._setOption('lg', value); + } + + @Input() + get md(): number | undefined { + return this._getOption('md'); + } + set md(value: number | undefined) { + this._setOption('md', value); + } + + @Input() + get sm(): number | undefined { + return this._getOption('sm'); + } + set sm(value: number | undefined) { + this._setOption('sm', value); + } + + @Input() + get xs(): number | undefined { + return this._getOption('xs'); + } + set xs(value: number | undefined) { + this._setOption('xs', value); + } + + + protected get _optionPath() { + return 'colCountByScreen'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFormColCountByScreenComponent + ], + exports: [ + DxoFormColCountByScreenComponent + ], +}) +export class DxoFormColCountByScreenModule { } diff --git a/packages/devextreme-angular/src/ui/form/nested/index.ts b/packages/devextreme-angular/src/ui/form/nested/index.ts new file mode 100644 index 000000000000..cf29d16a60aa --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/index.ts @@ -0,0 +1,8 @@ +export * from './button-options'; +export * from './col-count-by-screen'; +export * from './item-dxi'; +export * from './label'; +export * from './tab-dxi'; +export * from './tab-panel-options'; +export * from './validation-rule-dxi'; + diff --git a/packages/devextreme-angular/src/ui/form/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/form/nested/item-dxi.ts new file mode 100644 index 000000000000..410fadd0b85f --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/item-dxi.ts @@ -0,0 +1,368 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { AsyncRule, CompareRule, CustomRule, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, StringLengthRule, VerticalAlignment } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; +import { ButtonItem, EmptyItem, FormItemComponent, FormItemType, GroupItem, LabelLocation, SimpleItem, TabbedItem } from 'devextreme/ui/form'; +import { Properties as dxTabPanelOptions } from 'devextreme/ui/tab_panel'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiFormValidationRuleComponent } from './validation-rule-dxi'; +import { DxiFormTabComponent } from './tab-dxi'; + + +@Component({ + selector: 'dxi-form-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiFormItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get captionTemplate(): any { + return this._getOption('captionTemplate'); + } + set captionTemplate(value: any) { + this._setOption('captionTemplate', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): Array, tabTemplate?: any | undefined, template?: any | undefined, title?: string | undefined }> { + return this._getOption('tabs'); + } + set tabs(value: Array, tabTemplate?: any | undefined, template?: any | undefined, title?: string | undefined }>) { + this._setOption('tabs', value); + } + + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiFormValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + @ContentChildren(forwardRef(() => DxiFormItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + @ContentChildren(forwardRef(() => DxiFormTabComponent)) + get tabsChildren(): QueryList { + return this._getOption('tabs'); + } + set tabsChildren(value) { + this.setChildren('tabs', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFormItemComponent + ], + exports: [ + DxiFormItemComponent + ], +}) +export class DxiFormItemModule { } diff --git a/packages/devextreme-angular/src/ui/form/nested/label.ts b/packages/devextreme-angular/src/ui/form/nested/label.ts new file mode 100644 index 000000000000..0c3c0408447b --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/label.ts @@ -0,0 +1,135 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { HorizontalAlignment } from 'devextreme/common'; +import { LabelLocation } from 'devextreme/ui/form'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-form-label', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoFormLabelComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get alignment(): HorizontalAlignment { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment) { + this._setOption('alignment', value); + } + + @Input() + get location(): LabelLocation { + return this._getOption('location'); + } + set location(value: LabelLocation) { + this._setOption('location', value); + } + + @Input() + get showColon(): boolean { + return this._getOption('showColon'); + } + set showColon(value: boolean) { + this._setOption('showColon', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFormLabelComponent + ], + exports: [ + DxoFormLabelComponent + ], +}) +export class DxoFormLabelModule { } diff --git a/packages/devextreme-angular/src/ui/form/nested/ng-package.json b/packages/devextreme-angular/src/ui/form/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/form/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/form/nested/tab-dxi.ts new file mode 100644 index 000000000000..ee57dff719e8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/tab-dxi.ts @@ -0,0 +1,172 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ButtonItem, EmptyItem, GroupItem, SimpleItem, TabbedItem } from 'devextreme/ui/form'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiFormItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxi-form-tab', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiFormTabComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get badge(): string | undefined { + return this._getOption('badge'); + } + set badge(value: string | undefined) { + this._setOption('badge', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabTemplate(): any | undefined { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any | undefined) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get title(): string | undefined { + return this._getOption('title'); + } + set title(value: string | undefined) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + @ContentChildren(forwardRef(() => DxiFormItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFormTabComponent + ], + exports: [ + DxiFormTabComponent + ], +}) +export class DxiFormTabModule { } diff --git a/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts new file mode 100644 index 000000000000..48c4b65ddcb5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts @@ -0,0 +1,453 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiFormItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-form-tab-panel-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFormTabPanelOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get animationEnabled(): boolean { + return this._getOption('animationEnabled'); + } + set animationEnabled(value: boolean) { + this._setOption('animationEnabled', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get iconPosition(): TabsIconPosition { + return this._getOption('iconPosition'); + } + set iconPosition(value: TabsIconPosition) { + this._setOption('iconPosition', value); + } + + @Input() + get itemHoldTimeout(): number { + return this._getOption('itemHoldTimeout'); + } + set itemHoldTimeout(value: number) { + this._setOption('itemHoldTimeout', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get itemTitleTemplate(): any { + return this._getOption('itemTitleTemplate'); + } + set itemTitleTemplate(value: any) { + this._setOption('itemTitleTemplate', value); + } + + @Input() + get loop(): boolean { + return this._getOption('loop'); + } + set loop(value: boolean) { + this._setOption('loop', value); + } + + @Input() + get noDataText(): string { + return this._getOption('noDataText'); + } + set noDataText(value: string) { + this._setOption('noDataText', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemHold(): ((e: ItemHoldEvent) => void) { + return this._getOption('onItemHold'); + } + set onItemHold(value: ((e: ItemHoldEvent) => void)) { + this._setOption('onItemHold', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onSelectionChanged(): ((e: SelectionChangedEvent) => void) { + return this._getOption('onSelectionChanged'); + } + set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) { + this._setOption('onSelectionChanged', value); + } + + @Input() + get onTitleClick(): ((e: TitleClickEvent) => void) { + return this._getOption('onTitleClick'); + } + set onTitleClick(value: ((e: TitleClickEvent) => void)) { + this._setOption('onTitleClick', value); + } + + @Input() + get onTitleHold(): ((e: TitleHoldEvent) => void) { + return this._getOption('onTitleHold'); + } + set onTitleHold(value: ((e: TitleHoldEvent) => void)) { + this._setOption('onTitleHold', value); + } + + @Input() + get onTitleRendered(): ((e: TitleRenderedEvent) => void) { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) { + this._setOption('onTitleRendered', value); + } + + @Input() + get repaintChangesOnly(): boolean { + return this._getOption('repaintChangesOnly'); + } + set repaintChangesOnly(value: boolean) { + this._setOption('repaintChangesOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get selectedIndex(): number { + return this._getOption('selectedIndex'); + } + set selectedIndex(value: number) { + this._setOption('selectedIndex', value); + } + + @Input() + get selectedItem(): any { + return this._getOption('selectedItem'); + } + set selectedItem(value: any) { + this._setOption('selectedItem', value); + } + + @Input() + get showNavButtons(): boolean { + return this._getOption('showNavButtons'); + } + set showNavButtons(value: boolean) { + this._setOption('showNavButtons', value); + } + + @Input() + get stylingMode(): TabsStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: TabsStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get swipeEnabled(): boolean { + return this._getOption('swipeEnabled'); + } + set swipeEnabled(value: boolean) { + this._setOption('swipeEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get tabsPosition(): Position { + return this._getOption('tabsPosition'); + } + set tabsPosition(value: Position) { + this._setOption('tabsPosition', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedItemChange: EventEmitter; + protected get _optionPath() { + return 'tabPanelOptions'; + } + + + @ContentChildren(forwardRef(() => DxiFormItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'itemsChange' }, + { emit: 'selectedIndexChange' }, + { emit: 'selectedItemChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFormTabPanelOptionsComponent + ], + exports: [ + DxoFormTabPanelOptionsComponent + ], +}) +export class DxoFormTabPanelOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/form/nested/validation-rule-dxi.ts b/packages/devextreme-angular/src/ui/form/nested/validation-rule-dxi.ts new file mode 100644 index 000000000000..f4e16845290a --- /dev/null +++ b/packages/devextreme-angular/src/ui/form/nested/validation-rule-dxi.ts @@ -0,0 +1,147 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ComparisonOperator, ValidationRuleType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-form-validation-rule', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiFormValidationRuleComponent extends CollectionNestedOption { + @Input() + get message(): string { + return this._getOption('message'); + } + set message(value: string) { + this._setOption('message', value); + } + + @Input() + get trim(): boolean { + return this._getOption('trim'); + } + set trim(value: boolean) { + this._setOption('trim', value); + } + + @Input() + get type(): ValidationRuleType { + return this._getOption('type'); + } + set type(value: ValidationRuleType) { + this._setOption('type', value); + } + + @Input() + get ignoreEmptyValue(): boolean { + return this._getOption('ignoreEmptyValue'); + } + set ignoreEmptyValue(value: boolean) { + this._setOption('ignoreEmptyValue', value); + } + + @Input() + get max(): Date | number | string { + return this._getOption('max'); + } + set max(value: Date | number | string) { + this._setOption('max', value); + } + + @Input() + get min(): Date | number | string { + return this._getOption('min'); + } + set min(value: Date | number | string) { + this._setOption('min', value); + } + + @Input() + get reevaluate(): boolean { + return this._getOption('reevaluate'); + } + set reevaluate(value: boolean) { + this._setOption('reevaluate', value); + } + + @Input() + get validationCallback(): Function { + return this._getOption('validationCallback'); + } + set validationCallback(value: Function) { + this._setOption('validationCallback', value); + } + + @Input() + get comparisonTarget(): Function { + return this._getOption('comparisonTarget'); + } + set comparisonTarget(value: Function) { + this._setOption('comparisonTarget', value); + } + + @Input() + get comparisonType(): ComparisonOperator { + return this._getOption('comparisonType'); + } + set comparisonType(value: ComparisonOperator) { + this._setOption('comparisonType', value); + } + + @Input() + get pattern(): RegExp | string { + return this._getOption('pattern'); + } + set pattern(value: RegExp | string) { + this._setOption('pattern', value); + } + + + protected get _optionPath() { + return 'validationRules'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiFormValidationRuleComponent + ], + exports: [ + DxiFormValidationRuleComponent + ], +}) +export class DxiFormValidationRuleModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/index.ts b/packages/devextreme-angular/src/ui/funnel/index.ts index cfad77e6e9d0..aefc92eb7191 100644 --- a/packages/devextreme-angular/src/ui/funnel/index.ts +++ b/packages/devextreme-angular/src/ui/funnel/index.ts @@ -61,6 +61,26 @@ import { DxoSizeModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; +import { DxoFunnelAdaptiveLayoutModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelExportModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelItemModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelBorderModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelHoverStyleModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelHatchingModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelSelectionStyleModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelLabelModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelConnectorModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelFontModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelFormatModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelLegendModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelMarginModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelTitleModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelSubtitleModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelLoadingIndicatorModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelSizeModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelTooltipModule } from 'devextreme-angular/ui/funnel/nested'; +import { DxoFunnelShadowModule } from 'devextreme-angular/ui/funnel/nested'; + @@ -783,6 +803,7 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -902,6 +923,25 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang DxoSizeModule, DxoTooltipModule, DxoShadowModule, + DxoFunnelAdaptiveLayoutModule, + DxoFunnelExportModule, + DxoFunnelItemModule, + DxoFunnelBorderModule, + DxoFunnelHoverStyleModule, + DxoFunnelHatchingModule, + DxoFunnelSelectionStyleModule, + DxoFunnelLabelModule, + DxoFunnelConnectorModule, + DxoFunnelFontModule, + DxoFunnelFormatModule, + DxoFunnelLegendModule, + DxoFunnelMarginModule, + DxoFunnelTitleModule, + DxoFunnelSubtitleModule, + DxoFunnelLoadingIndicatorModule, + DxoFunnelSizeModule, + DxoFunnelTooltipModule, + DxoFunnelShadowModule, DxIntegrationModule, DxTemplateModule ], @@ -929,6 +969,25 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang DxoSizeModule, DxoTooltipModule, DxoShadowModule, + DxoFunnelAdaptiveLayoutModule, + DxoFunnelExportModule, + DxoFunnelItemModule, + DxoFunnelBorderModule, + DxoFunnelHoverStyleModule, + DxoFunnelHatchingModule, + DxoFunnelSelectionStyleModule, + DxoFunnelLabelModule, + DxoFunnelConnectorModule, + DxoFunnelFontModule, + DxoFunnelFormatModule, + DxoFunnelLegendModule, + DxoFunnelMarginModule, + DxoFunnelTitleModule, + DxoFunnelSubtitleModule, + DxoFunnelLoadingIndicatorModule, + DxoFunnelSizeModule, + DxoFunnelTooltipModule, + DxoFunnelShadowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/funnel/nested/adaptive-layout.ts b/packages/devextreme-angular/src/ui/funnel/nested/adaptive-layout.ts new file mode 100644 index 000000000000..208c07b032ca --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/adaptive-layout.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-adaptive-layout', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelAdaptiveLayoutComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get keepLabels(): boolean { + return this._getOption('keepLabels'); + } + set keepLabels(value: boolean) { + this._setOption('keepLabels', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'adaptiveLayout'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelAdaptiveLayoutComponent + ], + exports: [ + DxoFunnelAdaptiveLayoutComponent + ], +}) +export class DxoFunnelAdaptiveLayoutModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/border.ts b/packages/devextreme-angular/src/ui/funnel/nested/border.ts new file mode 100644 index 000000000000..af52f137d257 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/border.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get visible(): boolean | undefined { + return this._getOption('visible'); + } + set visible(value: boolean | undefined) { + this._setOption('visible', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelBorderComponent + ], + exports: [ + DxoFunnelBorderComponent + ], +}) +export class DxoFunnelBorderModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/connector.ts b/packages/devextreme-angular/src/ui/funnel/nested/connector.ts new file mode 100644 index 000000000000..f563ed337c2c --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/connector.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-connector', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelConnectorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'connector'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelConnectorComponent + ], + exports: [ + DxoFunnelConnectorComponent + ], +}) +export class DxoFunnelConnectorModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/export.ts b/packages/devextreme-angular/src/ui/funnel/nested/export.ts new file mode 100644 index 000000000000..b524a81e0cd5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelExportComponent + ], + exports: [ + DxoFunnelExportComponent + ], +}) +export class DxoFunnelExportModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/font.ts b/packages/devextreme-angular/src/ui/funnel/nested/font.ts new file mode 100644 index 000000000000..475ca9cc5f14 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelFontComponent + ], + exports: [ + DxoFunnelFontComponent + ], +}) +export class DxoFunnelFontModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/format.ts b/packages/devextreme-angular/src/ui/funnel/nested/format.ts new file mode 100644 index 000000000000..2a197a7d6747 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelFormatComponent + ], + exports: [ + DxoFunnelFormatComponent + ], +}) +export class DxoFunnelFormatModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/hatching.ts b/packages/devextreme-angular/src/ui/funnel/nested/hatching.ts new file mode 100644 index 000000000000..40642694cf02 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/hatching.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-hatching', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelHatchingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get direction(): HatchDirection { + return this._getOption('direction'); + } + set direction(value: HatchDirection) { + this._setOption('direction', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get step(): number { + return this._getOption('step'); + } + set step(value: number) { + this._setOption('step', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'hatching'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelHatchingComponent + ], + exports: [ + DxoFunnelHatchingComponent + ], +}) +export class DxoFunnelHatchingModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/hover-style.ts b/packages/devextreme-angular/src/ui/funnel/nested/hover-style.ts new file mode 100644 index 000000000000..6465fb342492 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/hover-style.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }) { + this._setOption('border', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelHoverStyleComponent + ], + exports: [ + DxoFunnelHoverStyleComponent + ], +}) +export class DxoFunnelHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/index.ts b/packages/devextreme-angular/src/ui/funnel/nested/index.ts new file mode 100644 index 000000000000..fd515b2fec90 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/index.ts @@ -0,0 +1,20 @@ +export * from './adaptive-layout'; +export * from './border'; +export * from './connector'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './hatching'; +export * from './hover-style'; +export * from './item'; +export * from './label'; +export * from './legend'; +export * from './loading-indicator'; +export * from './margin'; +export * from './selection-style'; +export * from './shadow'; +export * from './size'; +export * from './subtitle'; +export * from './title'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/funnel/nested/item.ts b/packages/devextreme-angular/src/ui/funnel/nested/item.ts new file mode 100644 index 000000000000..c3e8cf81401c --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/item.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelItemComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number } } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number } }) { + this._setOption('hoverStyle', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number } } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number } }) { + this._setOption('selectionStyle', value); + } + + + protected get _optionPath() { + return 'item'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelItemComponent + ], + exports: [ + DxoFunnelItemComponent + ], +}) +export class DxoFunnelItemModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/label.ts b/packages/devextreme-angular/src/ui/funnel/nested/label.ts new file mode 100644 index 000000000000..f7e9c53fd0fe --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/label.ts @@ -0,0 +1,171 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalEdge } from 'devextreme/common'; +import { DashStyle, Font, LabelPosition, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get connector(): { color?: string | undefined, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('connector'); + } + set connector(value: { color?: string | undefined, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('connector', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get horizontalAlignment(): HorizontalEdge { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalEdge) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get horizontalOffset(): number { + return this._getOption('horizontalOffset'); + } + set horizontalOffset(value: number) { + this._setOption('horizontalOffset', value); + } + + @Input() + get position(): LabelPosition { + return this._getOption('position'); + } + set position(value: LabelPosition) { + this._setOption('position', value); + } + + @Input() + get showForZeroValues(): boolean { + return this._getOption('showForZeroValues'); + } + set showForZeroValues(value: boolean) { + this._setOption('showForZeroValues', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelLabelComponent + ], + exports: [ + DxoFunnelLabelComponent + ], +}) +export class DxoFunnelLabelModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/legend.ts b/packages/devextreme-angular/src/ui/funnel/nested/legend.ts new file mode 100644 index 000000000000..839a55dcfbd0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/legend.ts @@ -0,0 +1,242 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Orientation, Position, VerticalEdge } from 'devextreme/common'; +import { DashStyle, Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-legend', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelLegendComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get columnCount(): number { + return this._getOption('columnCount'); + } + set columnCount(value: number) { + this._setOption('columnCount', value); + } + + @Input() + get columnItemSpacing(): number { + return this._getOption('columnItemSpacing'); + } + set columnItemSpacing(value: number) { + this._setOption('columnItemSpacing', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeItems(): Function { + return this._getOption('customizeItems'); + } + set customizeItems(value: Function) { + this._setOption('customizeItems', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get itemsAlignment(): HorizontalAlignment | undefined { + return this._getOption('itemsAlignment'); + } + set itemsAlignment(value: HorizontalAlignment | undefined) { + this._setOption('itemsAlignment', value); + } + + @Input() + get itemTextPosition(): Position | undefined { + return this._getOption('itemTextPosition'); + } + set itemTextPosition(value: Position | undefined) { + this._setOption('itemTextPosition', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get markerSize(): number { + return this._getOption('markerSize'); + } + set markerSize(value: number) { + this._setOption('markerSize', value); + } + + @Input() + get markerTemplate(): any | undefined { + return this._getOption('markerTemplate'); + } + set markerTemplate(value: any | undefined) { + this._setOption('markerTemplate', value); + } + + @Input() + get orientation(): Orientation | undefined { + return this._getOption('orientation'); + } + set orientation(value: Orientation | undefined) { + this._setOption('orientation', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get rowCount(): number { + return this._getOption('rowCount'); + } + set rowCount(value: number) { + this._setOption('rowCount', value); + } + + @Input() + get rowItemSpacing(): number { + return this._getOption('rowItemSpacing'); + } + set rowItemSpacing(value: number) { + this._setOption('rowItemSpacing', value); + } + + @Input() + get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } { + return this._getOption('title'); + } + set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) { + this._setOption('title', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'legend'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelLegendComponent + ], + exports: [ + DxoFunnelLegendComponent + ], +}) +export class DxoFunnelLegendModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/funnel/nested/loading-indicator.ts new file mode 100644 index 000000000000..9a826a200e68 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelLoadingIndicatorComponent + ], + exports: [ + DxoFunnelLoadingIndicatorComponent + ], +}) +export class DxoFunnelLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/margin.ts b/packages/devextreme-angular/src/ui/funnel/nested/margin.ts new file mode 100644 index 000000000000..02562dec11f9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelMarginComponent + ], + exports: [ + DxoFunnelMarginComponent + ], +}) +export class DxoFunnelMarginModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/ng-package.json b/packages/devextreme-angular/src/ui/funnel/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/funnel/nested/selection-style.ts b/packages/devextreme-angular/src/ui/funnel/nested/selection-style.ts new file mode 100644 index 000000000000..4e3ee84ac7a4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/selection-style.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-selection-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelSelectionStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }) { + this._setOption('border', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + + protected get _optionPath() { + return 'selectionStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelSelectionStyleComponent + ], + exports: [ + DxoFunnelSelectionStyleComponent + ], +}) +export class DxoFunnelSelectionStyleModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/shadow.ts b/packages/devextreme-angular/src/ui/funnel/nested/shadow.ts new file mode 100644 index 000000000000..5617d0376068 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelShadowComponent + ], + exports: [ + DxoFunnelShadowComponent + ], +}) +export class DxoFunnelShadowModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/size.ts b/packages/devextreme-angular/src/ui/funnel/nested/size.ts new file mode 100644 index 000000000000..64ff0a2278a8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelSizeComponent + ], + exports: [ + DxoFunnelSizeComponent + ], +}) +export class DxoFunnelSizeModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts b/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts new file mode 100644 index 000000000000..39cbb6c477e8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelSubtitleComponent + ], + exports: [ + DxoFunnelSubtitleComponent + ], +}) +export class DxoFunnelSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/title.ts b/packages/devextreme-angular/src/ui/funnel/nested/title.ts new file mode 100644 index 000000000000..b314e4621a89 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment | undefined { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment | undefined) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): { bottom?: number, left?: number, right?: number, top?: number } | number { + return this._getOption('margin'); + } + set margin(value: { bottom?: number, left?: number, right?: number, top?: number } | number) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelTitleComponent + ], + exports: [ + DxoFunnelTitleComponent + ], +}) +export class DxoFunnelTitleModule { } diff --git a/packages/devextreme-angular/src/ui/funnel/nested/tooltip.ts b/packages/devextreme-angular/src/ui/funnel/nested/tooltip.ts new file mode 100644 index 000000000000..9d3755ae3fe2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/funnel/nested/tooltip.ts @@ -0,0 +1,187 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-funnel-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoFunnelTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoFunnelTooltipComponent + ], + exports: [ + DxoFunnelTooltipComponent + ], +}) +export class DxoFunnelTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/gallery/index.ts b/packages/devextreme-angular/src/ui/gallery/index.ts index ac0d2898431e..e5088c897862 100644 --- a/packages/devextreme-angular/src/ui/gallery/index.ts +++ b/packages/devextreme-angular/src/ui/gallery/index.ts @@ -42,8 +42,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiGalleryItemModule } from 'devextreme-angular/ui/gallery/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiGalleryItemComponent } from 'devextreme-angular/ui/gallery/nested'; /** @@ -717,15 +720,27 @@ export class DxGalleryComponent extends DxComponent imp - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiGalleryItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiGalleryItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -825,6 +840,7 @@ export class DxGalleryComponent extends DxComponent imp @NgModule({ imports: [ DxiItemModule, + DxiGalleryItemModule, DxIntegrationModule, DxTemplateModule ], @@ -834,6 +850,7 @@ export class DxGalleryComponent extends DxComponent imp exports: [ DxGalleryComponent, DxiItemModule, + DxiGalleryItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/gallery/nested/index.ts b/packages/devextreme-angular/src/ui/gallery/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/gallery/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/gallery/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/gallery/nested/item-dxi.ts new file mode 100644 index 000000000000..dc1f3184498b --- /dev/null +++ b/packages/devextreme-angular/src/ui/gallery/nested/item-dxi.ts @@ -0,0 +1,127 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-gallery-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiGalleryItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get imageAlt(): string { + return this._getOption('imageAlt'); + } + set imageAlt(value: string) { + this._setOption('imageAlt', value); + } + + @Input() + get imageSrc(): string { + return this._getOption('imageSrc'); + } + set imageSrc(value: string) { + this._setOption('imageSrc', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiGalleryItemComponent + ], + exports: [ + DxiGalleryItemComponent + ], +}) +export class DxiGalleryItemModule { } diff --git a/packages/devextreme-angular/src/ui/gallery/nested/ng-package.json b/packages/devextreme-angular/src/ui/gallery/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gallery/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/gantt/index.ts b/packages/devextreme-angular/src/ui/gantt/index.ts index 3e920981cfaa..e3e9761e928c 100644 --- a/packages/devextreme-angular/src/ui/gantt/index.ts +++ b/packages/devextreme-angular/src/ui/gantt/index.ts @@ -60,9 +60,31 @@ import { DxoTasksModule } from 'devextreme-angular/ui/nested'; import { DxoToolbarModule } from 'devextreme-angular/ui/nested'; import { DxoValidationModule } from 'devextreme-angular/ui/nested'; +import { DxiGanttColumnModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttFormatModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttHeaderFilterModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttSearchModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttContextMenuModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxiGanttItemModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttDependenciesModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttEditingModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttFilterRowModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttOperationDescriptionsModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttTextsModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttResourceAssignmentsModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttResourcesModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttScaleTypeRangeModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttSortingModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxiGanttStripLineModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttTasksModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttToolbarModule } from 'devextreme-angular/ui/gantt/nested'; +import { DxoGanttValidationModule } from 'devextreme-angular/ui/gantt/nested'; + import { DxiColumnComponent } from 'devextreme-angular/ui/nested'; import { DxiStripLineComponent } from 'devextreme-angular/ui/nested'; +import { DxiGanttColumnComponent } from 'devextreme-angular/ui/gantt/nested'; +import { DxiGanttStripLineComponent } from 'devextreme-angular/ui/gantt/nested'; /** @@ -1152,23 +1174,46 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange - @ContentChildren(DxiColumnComponent) - get columnsChildren(): QueryList { + @ContentChildren(DxiGanttColumnComponent) + get columnsChildren(): QueryList { return this._getOption('columns'); } set columnsChildren(value) { + this.setContentChildren('columns', value, 'DxiGanttColumnComponent'); this.setChildren('columns', value); } - @ContentChildren(DxiStripLineComponent) - get stripLinesChildren(): QueryList { + @ContentChildren(DxiGanttStripLineComponent) + get stripLinesChildren(): QueryList { return this._getOption('stripLines'); } set stripLinesChildren(value) { + this.setContentChildren('stripLines', value, 'DxiGanttStripLineComponent'); this.setChildren('stripLines', value); } + @ContentChildren(DxiColumnComponent) + get columnsLegacyChildren(): QueryList { + return this._getOption('columns'); + } + set columnsLegacyChildren(value) { + if (this.checkContentChildren('columns', value, 'DxiColumnComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiStripLineComponent) + get stripLinesLegacyChildren(): QueryList { + return this._getOption('stripLines'); + } + set stripLinesLegacyChildren(value) { + if (this.checkContentChildren('stripLines', value, 'DxiStripLineComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1320,6 +1365,25 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange DxoTasksModule, DxoToolbarModule, DxoValidationModule, + DxiGanttColumnModule, + DxoGanttFormatModule, + DxoGanttHeaderFilterModule, + DxoGanttSearchModule, + DxoGanttContextMenuModule, + DxiGanttItemModule, + DxoGanttDependenciesModule, + DxoGanttEditingModule, + DxoGanttFilterRowModule, + DxoGanttOperationDescriptionsModule, + DxoGanttTextsModule, + DxoGanttResourceAssignmentsModule, + DxoGanttResourcesModule, + DxoGanttScaleTypeRangeModule, + DxoGanttSortingModule, + DxiGanttStripLineModule, + DxoGanttTasksModule, + DxoGanttToolbarModule, + DxoGanttValidationModule, DxIntegrationModule, DxTemplateModule ], @@ -1347,6 +1411,25 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange DxoTasksModule, DxoToolbarModule, DxoValidationModule, + DxiGanttColumnModule, + DxoGanttFormatModule, + DxoGanttHeaderFilterModule, + DxoGanttSearchModule, + DxoGanttContextMenuModule, + DxiGanttItemModule, + DxoGanttDependenciesModule, + DxoGanttEditingModule, + DxoGanttFilterRowModule, + DxoGanttOperationDescriptionsModule, + DxoGanttTextsModule, + DxoGanttResourceAssignmentsModule, + DxoGanttResourcesModule, + DxoGanttScaleTypeRangeModule, + DxoGanttSortingModule, + DxiGanttStripLineModule, + DxoGanttTasksModule, + DxoGanttToolbarModule, + DxoGanttValidationModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/gantt/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/gantt/nested/column-dxi.ts new file mode 100644 index 000000000000..fadbbcada796 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/column-dxi.ts @@ -0,0 +1,380 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { DataType, HorizontalAlignment, SearchMode, SortOrder } from 'devextreme/common'; +import { ColumnHeaderFilterSearchConfig, FilterOperation, FilterType, HeaderFilterGroupInterval, SelectedFilterOperation } from 'devextreme/common/grids'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-gantt-column', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiGanttColumnComponent extends CollectionNestedOption { + @Input() + get alignment(): HorizontalAlignment | string | undefined { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment | string | undefined) { + this._setOption('alignment', value); + } + + @Input() + get allowFiltering(): boolean { + return this._getOption('allowFiltering'); + } + set allowFiltering(value: boolean) { + this._setOption('allowFiltering', value); + } + + @Input() + get allowHeaderFiltering(): boolean { + return this._getOption('allowHeaderFiltering'); + } + set allowHeaderFiltering(value: boolean) { + this._setOption('allowHeaderFiltering', value); + } + + @Input() + get allowSorting(): boolean { + return this._getOption('allowSorting'); + } + set allowSorting(value: boolean) { + this._setOption('allowSorting', value); + } + + @Input() + get calculateCellValue(): Function { + return this._getOption('calculateCellValue'); + } + set calculateCellValue(value: Function) { + this._setOption('calculateCellValue', value); + } + + @Input() + get calculateDisplayValue(): Function | string { + return this._getOption('calculateDisplayValue'); + } + set calculateDisplayValue(value: Function | string) { + this._setOption('calculateDisplayValue', value); + } + + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get calculateSortValue(): Function | string { + return this._getOption('calculateSortValue'); + } + set calculateSortValue(value: Function | string) { + this._setOption('calculateSortValue', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get cellTemplate(): any { + return this._getOption('cellTemplate'); + } + set cellTemplate(value: any) { + this._setOption('cellTemplate', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType | undefined { + return this._getOption('dataType'); + } + set dataType(value: DataType | undefined) { + this._setOption('dataType', value); + } + + @Input() + get encodeHtml(): boolean { + return this._getOption('encodeHtml'); + } + set encodeHtml(value: boolean) { + this._setOption('encodeHtml', value); + } + + @Input() + get falseText(): string { + return this._getOption('falseText'); + } + set falseText(value: string) { + this._setOption('falseText', value); + } + + @Input() + get filterOperations(): Array { + return this._getOption('filterOperations'); + } + set filterOperations(value: Array) { + this._setOption('filterOperations', value); + } + + @Input() + get filterType(): FilterType { + return this._getOption('filterType'); + } + set filterType(value: FilterType) { + this._setOption('filterType', value); + } + + @Input() + get filterValue(): any | undefined { + return this._getOption('filterValue'); + } + set filterValue(value: any | undefined) { + this._setOption('filterValue', value); + } + + @Input() + get filterValues(): Array { + return this._getOption('filterValues'); + } + set filterValues(value: Array) { + this._setOption('filterValues', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get headerCellTemplate(): any { + return this._getOption('headerCellTemplate'); + } + set headerCellTemplate(value: any) { + this._setOption('headerCellTemplate', value); + } + + @Input() + get headerFilter(): { allowSearch?: boolean, allowSelectAll?: boolean, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, groupInterval?: HeaderFilterGroupInterval | number | undefined, height?: number | string | undefined, search?: ColumnHeaderFilterSearchConfig, searchMode?: SearchMode, width?: number | string | undefined } { + return this._getOption('headerFilter'); + } + set headerFilter(value: { allowSearch?: boolean, allowSelectAll?: boolean, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, groupInterval?: HeaderFilterGroupInterval | number | undefined, height?: number | string | undefined, search?: ColumnHeaderFilterSearchConfig, searchMode?: SearchMode, width?: number | string | undefined }) { + this._setOption('headerFilter', value); + } + + @Input() + get minWidth(): number | undefined { + return this._getOption('minWidth'); + } + set minWidth(value: number | undefined) { + this._setOption('minWidth', value); + } + + @Input() + get selectedFilterOperation(): SelectedFilterOperation | undefined { + return this._getOption('selectedFilterOperation'); + } + set selectedFilterOperation(value: SelectedFilterOperation | undefined) { + this._setOption('selectedFilterOperation', value); + } + + @Input() + get sortIndex(): number | undefined { + return this._getOption('sortIndex'); + } + set sortIndex(value: number | undefined) { + this._setOption('sortIndex', value); + } + + @Input() + get sortingMethod(): Function | undefined { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: Function | undefined) { + this._setOption('sortingMethod', value); + } + + @Input() + get sortOrder(): SortOrder | string | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | string | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get trueText(): string { + return this._getOption('trueText'); + } + set trueText(value: string) { + this._setOption('trueText', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterValueChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterValuesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedFilterOperationChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() sortIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() sortOrderChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleIndexChange: EventEmitter; + protected get _optionPath() { + return 'columns'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'filterValueChange' }, + { emit: 'filterValuesChange' }, + { emit: 'selectedFilterOperationChange' }, + { emit: 'sortIndexChange' }, + { emit: 'sortOrderChange' }, + { emit: 'visibleChange' }, + { emit: 'visibleIndexChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiGanttColumnComponent + ], + exports: [ + DxiGanttColumnComponent + ], +}) +export class DxiGanttColumnModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/context-menu.ts b/packages/devextreme-angular/src/ui/gantt/nested/context-menu.ts new file mode 100644 index 000000000000..99c0d936ab18 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/context-menu.ts @@ -0,0 +1,94 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxContextMenuItem } from 'devextreme/ui/context_menu'; +import { GanttPredefinedContextMenuItem } from 'devextreme/ui/gantt'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiGanttItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-gantt-context-menu', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttContextMenuComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get items(): Array, name?: GanttPredefinedContextMenuItem | string, selectable?: boolean, selected?: boolean, template?: any, text?: string, visible?: boolean }> { + return this._getOption('items'); + } + set items(value: Array, name?: GanttPredefinedContextMenuItem | string, selectable?: boolean, selected?: boolean, template?: any, text?: string, visible?: boolean }>) { + this._setOption('items', value); + } + + + protected get _optionPath() { + return 'contextMenu'; + } + + + @ContentChildren(forwardRef(() => DxiGanttItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttContextMenuComponent + ], + exports: [ + DxoGanttContextMenuComponent + ], +}) +export class DxoGanttContextMenuModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/dependencies.ts b/packages/devextreme-angular/src/ui/gantt/nested/dependencies.ts new file mode 100644 index 000000000000..a1cc3d65760f --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/dependencies.ts @@ -0,0 +1,106 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-dependencies', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttDependenciesComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get predecessorIdExpr(): Function | string { + return this._getOption('predecessorIdExpr'); + } + set predecessorIdExpr(value: Function | string) { + this._setOption('predecessorIdExpr', value); + } + + @Input() + get successorIdExpr(): Function | string { + return this._getOption('successorIdExpr'); + } + set successorIdExpr(value: Function | string) { + this._setOption('successorIdExpr', value); + } + + @Input() + get typeExpr(): Function | string { + return this._getOption('typeExpr'); + } + set typeExpr(value: Function | string) { + this._setOption('typeExpr', value); + } + + + protected get _optionPath() { + return 'dependencies'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttDependenciesComponent + ], + exports: [ + DxoGanttDependenciesComponent + ], +}) +export class DxoGanttDependenciesModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/editing.ts b/packages/devextreme-angular/src/ui/gantt/nested/editing.ts new file mode 100644 index 000000000000..9f77e78a7621 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/editing.ts @@ -0,0 +1,144 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-editing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttEditingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDependencyAdding(): boolean { + return this._getOption('allowDependencyAdding'); + } + set allowDependencyAdding(value: boolean) { + this._setOption('allowDependencyAdding', value); + } + + @Input() + get allowDependencyDeleting(): boolean { + return this._getOption('allowDependencyDeleting'); + } + set allowDependencyDeleting(value: boolean) { + this._setOption('allowDependencyDeleting', value); + } + + @Input() + get allowResourceAdding(): boolean { + return this._getOption('allowResourceAdding'); + } + set allowResourceAdding(value: boolean) { + this._setOption('allowResourceAdding', value); + } + + @Input() + get allowResourceDeleting(): boolean { + return this._getOption('allowResourceDeleting'); + } + set allowResourceDeleting(value: boolean) { + this._setOption('allowResourceDeleting', value); + } + + @Input() + get allowResourceUpdating(): boolean { + return this._getOption('allowResourceUpdating'); + } + set allowResourceUpdating(value: boolean) { + this._setOption('allowResourceUpdating', value); + } + + @Input() + get allowTaskAdding(): boolean { + return this._getOption('allowTaskAdding'); + } + set allowTaskAdding(value: boolean) { + this._setOption('allowTaskAdding', value); + } + + @Input() + get allowTaskDeleting(): boolean { + return this._getOption('allowTaskDeleting'); + } + set allowTaskDeleting(value: boolean) { + this._setOption('allowTaskDeleting', value); + } + + @Input() + get allowTaskResourceUpdating(): boolean { + return this._getOption('allowTaskResourceUpdating'); + } + set allowTaskResourceUpdating(value: boolean) { + this._setOption('allowTaskResourceUpdating', value); + } + + @Input() + get allowTaskUpdating(): boolean { + return this._getOption('allowTaskUpdating'); + } + set allowTaskUpdating(value: boolean) { + this._setOption('allowTaskUpdating', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'editing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttEditingComponent + ], + exports: [ + DxoGanttEditingComponent + ], +}) +export class DxoGanttEditingModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/filter-row.ts b/packages/devextreme-angular/src/ui/gantt/nested/filter-row.ts new file mode 100644 index 000000000000..01894d96d011 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/filter-row.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { dxGanttFilterRowOperationDescriptions } from 'devextreme/ui/gantt'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-filter-row', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttFilterRowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get betweenEndText(): string { + return this._getOption('betweenEndText'); + } + set betweenEndText(value: string) { + this._setOption('betweenEndText', value); + } + + @Input() + get betweenStartText(): string { + return this._getOption('betweenStartText'); + } + set betweenStartText(value: string) { + this._setOption('betweenStartText', value); + } + + @Input() + get operationDescriptions(): dxGanttFilterRowOperationDescriptions { + return this._getOption('operationDescriptions'); + } + set operationDescriptions(value: dxGanttFilterRowOperationDescriptions) { + this._setOption('operationDescriptions', value); + } + + @Input() + get resetOperationText(): string { + return this._getOption('resetOperationText'); + } + set resetOperationText(value: string) { + this._setOption('resetOperationText', value); + } + + @Input() + get showAllText(): string { + return this._getOption('showAllText'); + } + set showAllText(value: string) { + this._setOption('showAllText', value); + } + + @Input() + get showOperationChooser(): boolean { + return this._getOption('showOperationChooser'); + } + set showOperationChooser(value: boolean) { + this._setOption('showOperationChooser', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'filterRow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttFilterRowComponent + ], + exports: [ + DxoGanttFilterRowComponent + ], +}) +export class DxoGanttFilterRowModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/format.ts b/packages/devextreme-angular/src/ui/gantt/nested/format.ts new file mode 100644 index 000000000000..88518e1bdf38 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttFormatComponent + ], + exports: [ + DxoGanttFormatComponent + ], +}) +export class DxoGanttFormatModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/header-filter.ts b/packages/devextreme-angular/src/ui/gantt/nested/header-filter.ts new file mode 100644 index 000000000000..ec1a32ec2840 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/header-filter.ts @@ -0,0 +1,157 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; +import { ColumnHeaderFilterSearchConfig, HeaderFilterGroupInterval, HeaderFilterSearchConfig } from 'devextreme/common/grids'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { dxGanttHeaderFilterTexts } from 'devextreme/ui/gantt'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-header-filter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttHeaderFilterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get dataSource(): Store | DataSourceOptions | Function | null | undefined | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSourceOptions | Function | null | undefined | Array) { + this._setOption('dataSource', value); + } + + @Input() + get groupInterval(): HeaderFilterGroupInterval | number | undefined { + return this._getOption('groupInterval'); + } + set groupInterval(value: HeaderFilterGroupInterval | number | undefined) { + this._setOption('groupInterval', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get search(): ColumnHeaderFilterSearchConfig | HeaderFilterSearchConfig { + return this._getOption('search'); + } + set search(value: ColumnHeaderFilterSearchConfig | HeaderFilterSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchMode(): SearchMode { + return this._getOption('searchMode'); + } + set searchMode(value: SearchMode) { + this._setOption('searchMode', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get texts(): dxGanttHeaderFilterTexts { + return this._getOption('texts'); + } + set texts(value: dxGanttHeaderFilterTexts) { + this._setOption('texts', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'headerFilter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttHeaderFilterComponent + ], + exports: [ + DxoGanttHeaderFilterComponent + ], +}) +export class DxoGanttHeaderFilterModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/index.ts b/packages/devextreme-angular/src/ui/gantt/nested/index.ts new file mode 100644 index 000000000000..6982a8d19106 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/index.ts @@ -0,0 +1,20 @@ +export * from './column-dxi'; +export * from './context-menu'; +export * from './dependencies'; +export * from './editing'; +export * from './filter-row'; +export * from './format'; +export * from './header-filter'; +export * from './item-dxi'; +export * from './operation-descriptions'; +export * from './resource-assignments'; +export * from './resources'; +export * from './scale-type-range'; +export * from './search'; +export * from './sorting'; +export * from './strip-line-dxi'; +export * from './tasks'; +export * from './texts'; +export * from './toolbar'; +export * from './validation'; + diff --git a/packages/devextreme-angular/src/ui/gantt/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/gantt/nested/item-dxi.ts new file mode 100644 index 000000000000..39ddd5d9bb5f --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/item-dxi.ts @@ -0,0 +1,246 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { dxContextMenuItem } from 'devextreme/ui/context_menu'; +import { GanttPredefinedContextMenuItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-gantt-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiGanttItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get beginGroup(): boolean { + return this._getOption('beginGroup'); + } + set beginGroup(value: boolean) { + this._setOption('beginGroup', value); + } + + @Input() + get closeMenuOnClick(): boolean { + return this._getOption('closeMenuOnClick'); + } + set closeMenuOnClick(value: boolean) { + this._setOption('closeMenuOnClick', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get name(): GanttPredefinedContextMenuItem | string | GanttPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: GanttPredefinedContextMenuItem | string | GanttPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get selectable(): boolean { + return this._getOption('selectable'); + } + set selectable(value: boolean) { + this._setOption('selectable', value); + } + + @Input() + get selected(): boolean { + return this._getOption('selected'); + } + set selected(value: boolean) { + this._setOption('selected', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiGanttItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiGanttItemComponent + ], + exports: [ + DxiGanttItemComponent + ], +}) +export class DxiGanttItemModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/ng-package.json b/packages/devextreme-angular/src/ui/gantt/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/gantt/nested/operation-descriptions.ts b/packages/devextreme-angular/src/ui/gantt/nested/operation-descriptions.ts new file mode 100644 index 000000000000..f2bb538341ed --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/operation-descriptions.ts @@ -0,0 +1,152 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get between(): string { + return this._getOption('between'); + } + set between(value: string) { + this._setOption('between', value); + } + + @Input() + get contains(): string { + return this._getOption('contains'); + } + set contains(value: string) { + this._setOption('contains', value); + } + + @Input() + get endsWith(): string { + return this._getOption('endsWith'); + } + set endsWith(value: string) { + this._setOption('endsWith', value); + } + + @Input() + get equal(): string { + return this._getOption('equal'); + } + set equal(value: string) { + this._setOption('equal', value); + } + + @Input() + get greaterThan(): string { + return this._getOption('greaterThan'); + } + set greaterThan(value: string) { + this._setOption('greaterThan', value); + } + + @Input() + get greaterThanOrEqual(): string { + return this._getOption('greaterThanOrEqual'); + } + set greaterThanOrEqual(value: string) { + this._setOption('greaterThanOrEqual', value); + } + + @Input() + get lessThan(): string { + return this._getOption('lessThan'); + } + set lessThan(value: string) { + this._setOption('lessThan', value); + } + + @Input() + get lessThanOrEqual(): string { + return this._getOption('lessThanOrEqual'); + } + set lessThanOrEqual(value: string) { + this._setOption('lessThanOrEqual', value); + } + + @Input() + get notContains(): string { + return this._getOption('notContains'); + } + set notContains(value: string) { + this._setOption('notContains', value); + } + + @Input() + get notEqual(): string { + return this._getOption('notEqual'); + } + set notEqual(value: string) { + this._setOption('notEqual', value); + } + + @Input() + get startsWith(): string { + return this._getOption('startsWith'); + } + set startsWith(value: string) { + this._setOption('startsWith', value); + } + + + protected get _optionPath() { + return 'operationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttOperationDescriptionsComponent + ], + exports: [ + DxoGanttOperationDescriptionsComponent + ], +}) +export class DxoGanttOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/resource-assignments.ts b/packages/devextreme-angular/src/ui/gantt/nested/resource-assignments.ts new file mode 100644 index 000000000000..017f8f8df3e4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/resource-assignments.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-resource-assignments', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttResourceAssignmentsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get resourceIdExpr(): Function | string { + return this._getOption('resourceIdExpr'); + } + set resourceIdExpr(value: Function | string) { + this._setOption('resourceIdExpr', value); + } + + @Input() + get taskIdExpr(): Function | string { + return this._getOption('taskIdExpr'); + } + set taskIdExpr(value: Function | string) { + this._setOption('taskIdExpr', value); + } + + + protected get _optionPath() { + return 'resourceAssignments'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttResourceAssignmentsComponent + ], + exports: [ + DxoGanttResourceAssignmentsComponent + ], +}) +export class DxoGanttResourceAssignmentsModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/resources.ts b/packages/devextreme-angular/src/ui/gantt/nested/resources.ts new file mode 100644 index 000000000000..651f5ae3b356 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/resources.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-resources', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttResourcesComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get colorExpr(): Function | string { + return this._getOption('colorExpr'); + } + set colorExpr(value: Function | string) { + this._setOption('colorExpr', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get textExpr(): Function | string { + return this._getOption('textExpr'); + } + set textExpr(value: Function | string) { + this._setOption('textExpr', value); + } + + + protected get _optionPath() { + return 'resources'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttResourcesComponent + ], + exports: [ + DxoGanttResourcesComponent + ], +}) +export class DxoGanttResourcesModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/scale-type-range.ts b/packages/devextreme-angular/src/ui/gantt/nested/scale-type-range.ts new file mode 100644 index 000000000000..ada4d652563b --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/scale-type-range.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { GanttScaleType } from 'devextreme/ui/gantt'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-scale-type-range', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttScaleTypeRangeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get max(): GanttScaleType { + return this._getOption('max'); + } + set max(value: GanttScaleType) { + this._setOption('max', value); + } + + @Input() + get min(): GanttScaleType { + return this._getOption('min'); + } + set min(value: GanttScaleType) { + this._setOption('min', value); + } + + + protected get _optionPath() { + return 'scaleTypeRange'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttScaleTypeRangeComponent + ], + exports: [ + DxoGanttScaleTypeRangeComponent + ], +}) +export class DxoGanttScaleTypeRangeModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/search.ts b/packages/devextreme-angular/src/ui/gantt/nested/search.ts new file mode 100644 index 000000000000..4f15e715ac9a --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/search.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-search', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttSearchComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get mode(): SearchMode { + return this._getOption('mode'); + } + set mode(value: SearchMode) { + this._setOption('mode', value); + } + + @Input() + get searchExpr(): Function | string | undefined | Array { + return this._getOption('searchExpr'); + } + set searchExpr(value: Function | string | undefined | Array) { + this._setOption('searchExpr', value); + } + + @Input() + get timeout(): number { + return this._getOption('timeout'); + } + set timeout(value: number) { + this._setOption('timeout', value); + } + + + protected get _optionPath() { + return 'search'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttSearchComponent + ], + exports: [ + DxoGanttSearchComponent + ], +}) +export class DxoGanttSearchModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/sorting.ts b/packages/devextreme-angular/src/ui/gantt/nested/sorting.ts new file mode 100644 index 000000000000..b62d70432e09 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/sorting.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SingleMultipleOrNone } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-sorting', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttSortingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get ascendingText(): string { + return this._getOption('ascendingText'); + } + set ascendingText(value: string) { + this._setOption('ascendingText', value); + } + + @Input() + get clearText(): string { + return this._getOption('clearText'); + } + set clearText(value: string) { + this._setOption('clearText', value); + } + + @Input() + get descendingText(): string { + return this._getOption('descendingText'); + } + set descendingText(value: string) { + this._setOption('descendingText', value); + } + + @Input() + get mode(): SingleMultipleOrNone | string { + return this._getOption('mode'); + } + set mode(value: SingleMultipleOrNone | string) { + this._setOption('mode', value); + } + + @Input() + get showSortIndexes(): boolean { + return this._getOption('showSortIndexes'); + } + set showSortIndexes(value: boolean) { + this._setOption('showSortIndexes', value); + } + + + protected get _optionPath() { + return 'sorting'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttSortingComponent + ], + exports: [ + DxoGanttSortingComponent + ], +}) +export class DxoGanttSortingModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/strip-line-dxi.ts b/packages/devextreme-angular/src/ui/gantt/nested/strip-line-dxi.ts new file mode 100644 index 000000000000..4a9335ffed98 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/strip-line-dxi.ts @@ -0,0 +1,90 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-gantt-strip-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiGanttStripLineComponent extends CollectionNestedOption { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get end(): Date | number | Function | string | undefined { + return this._getOption('end'); + } + set end(value: Date | number | Function | string | undefined) { + this._setOption('end', value); + } + + @Input() + get start(): Date | number | Function | string | undefined { + return this._getOption('start'); + } + set start(value: Date | number | Function | string | undefined) { + this._setOption('start', value); + } + + @Input() + get title(): string | undefined { + return this._getOption('title'); + } + set title(value: string | undefined) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'stripLines'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiGanttStripLineComponent + ], + exports: [ + DxiGanttStripLineComponent + ], +}) +export class DxiGanttStripLineModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/tasks.ts b/packages/devextreme-angular/src/ui/gantt/nested/tasks.ts new file mode 100644 index 000000000000..e2d090186b76 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/tasks.ts @@ -0,0 +1,130 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-tasks', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttTasksComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get colorExpr(): Function | string { + return this._getOption('colorExpr'); + } + set colorExpr(value: Function | string) { + this._setOption('colorExpr', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get endExpr(): Function | string { + return this._getOption('endExpr'); + } + set endExpr(value: Function | string) { + this._setOption('endExpr', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get parentIdExpr(): Function | string { + return this._getOption('parentIdExpr'); + } + set parentIdExpr(value: Function | string) { + this._setOption('parentIdExpr', value); + } + + @Input() + get progressExpr(): Function | string { + return this._getOption('progressExpr'); + } + set progressExpr(value: Function | string) { + this._setOption('progressExpr', value); + } + + @Input() + get startExpr(): Function | string { + return this._getOption('startExpr'); + } + set startExpr(value: Function | string) { + this._setOption('startExpr', value); + } + + @Input() + get titleExpr(): Function | string { + return this._getOption('titleExpr'); + } + set titleExpr(value: Function | string) { + this._setOption('titleExpr', value); + } + + + protected get _optionPath() { + return 'tasks'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttTasksComponent + ], + exports: [ + DxoGanttTasksComponent + ], +}) +export class DxoGanttTasksModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/texts.ts b/packages/devextreme-angular/src/ui/gantt/nested/texts.ts new file mode 100644 index 000000000000..fdac577868f3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/texts.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-texts', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttTextsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get cancel(): string { + return this._getOption('cancel'); + } + set cancel(value: string) { + this._setOption('cancel', value); + } + + @Input() + get emptyValue(): string { + return this._getOption('emptyValue'); + } + set emptyValue(value: string) { + this._setOption('emptyValue', value); + } + + @Input() + get ok(): string { + return this._getOption('ok'); + } + set ok(value: string) { + this._setOption('ok', value); + } + + + protected get _optionPath() { + return 'texts'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttTextsComponent + ], + exports: [ + DxoGanttTextsComponent + ], +}) +export class DxoGanttTextsModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/toolbar.ts b/packages/devextreme-angular/src/ui/gantt/nested/toolbar.ts new file mode 100644 index 000000000000..35189a7411dc --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/toolbar.ts @@ -0,0 +1,85 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxGanttToolbarItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiGanttItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-gantt-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + + protected get _optionPath() { + return 'toolbar'; + } + + + @ContentChildren(forwardRef(() => DxiGanttItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttToolbarComponent + ], + exports: [ + DxoGanttToolbarComponent + ], +}) +export class DxoGanttToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/gantt/nested/validation.ts b/packages/devextreme-angular/src/ui/gantt/nested/validation.ts new file mode 100644 index 000000000000..1625ada6574b --- /dev/null +++ b/packages/devextreme-angular/src/ui/gantt/nested/validation.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-gantt-validation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoGanttValidationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get autoUpdateParentTasks(): boolean { + return this._getOption('autoUpdateParentTasks'); + } + set autoUpdateParentTasks(value: boolean) { + this._setOption('autoUpdateParentTasks', value); + } + + @Input() + get enablePredecessorGap(): boolean { + return this._getOption('enablePredecessorGap'); + } + set enablePredecessorGap(value: boolean) { + this._setOption('enablePredecessorGap', value); + } + + @Input() + get validateDependencies(): boolean { + return this._getOption('validateDependencies'); + } + set validateDependencies(value: boolean) { + this._setOption('validateDependencies', value); + } + + + protected get _optionPath() { + return 'validation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoGanttValidationComponent + ], + exports: [ + DxoGanttValidationComponent + ], +}) +export class DxoGanttValidationModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/index.ts b/packages/devextreme-angular/src/ui/html-editor/index.ts index f938e96ca594..79645ff941f6 100644 --- a/packages/devextreme-angular/src/ui/html-editor/index.ts +++ b/packages/devextreme-angular/src/ui/html-editor/index.ts @@ -55,8 +55,20 @@ import { DxoTableResizingModule } from 'devextreme-angular/ui/nested'; import { DxoToolbarModule } from 'devextreme-angular/ui/nested'; import { DxoVariablesModule } from 'devextreme-angular/ui/nested'; +import { DxoHtmlEditorImageUploadModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxoHtmlEditorFileUploaderOptionsModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxiHtmlEditorTabModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxoHtmlEditorMediaResizingModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxiHtmlEditorMentionModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxoHtmlEditorTableContextMenuModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxiHtmlEditorItemModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxoHtmlEditorTableResizingModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxoHtmlEditorToolbarModule } from 'devextreme-angular/ui/html-editor/nested'; +import { DxoHtmlEditorVariablesModule } from 'devextreme-angular/ui/html-editor/nested'; + import { DxiMentionComponent } from 'devextreme-angular/ui/nested'; +import { DxiHtmlEditorMentionComponent } from 'devextreme-angular/ui/html-editor/nested'; @@ -831,15 +843,27 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiMentionComponent) - get mentionsChildren(): QueryList { + @ContentChildren(DxiHtmlEditorMentionComponent) + get mentionsChildren(): QueryList { return this._getOption('mentions'); } set mentionsChildren(value) { + this.setContentChildren('mentions', value, 'DxiHtmlEditorMentionComponent'); this.setChildren('mentions', value); } + @ContentChildren(DxiMentionComponent) + get mentionsLegacyChildren(): QueryList { + return this._getOption('mentions'); + } + set mentionsLegacyChildren(value) { + if (this.checkContentChildren('mentions', value, 'DxiMentionComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -972,6 +996,16 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con DxoTableResizingModule, DxoToolbarModule, DxoVariablesModule, + DxoHtmlEditorImageUploadModule, + DxoHtmlEditorFileUploaderOptionsModule, + DxiHtmlEditorTabModule, + DxoHtmlEditorMediaResizingModule, + DxiHtmlEditorMentionModule, + DxoHtmlEditorTableContextMenuModule, + DxiHtmlEditorItemModule, + DxoHtmlEditorTableResizingModule, + DxoHtmlEditorToolbarModule, + DxoHtmlEditorVariablesModule, DxIntegrationModule, DxTemplateModule ], @@ -990,6 +1024,16 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con DxoTableResizingModule, DxoToolbarModule, DxoVariablesModule, + DxoHtmlEditorImageUploadModule, + DxoHtmlEditorFileUploaderOptionsModule, + DxiHtmlEditorTabModule, + DxoHtmlEditorMediaResizingModule, + DxiHtmlEditorMentionModule, + DxoHtmlEditorTableContextMenuModule, + DxiHtmlEditorItemModule, + DxoHtmlEditorTableResizingModule, + DxoHtmlEditorToolbarModule, + DxoHtmlEditorVariablesModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts b/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts new file mode 100644 index 000000000000..56f75db0a4f4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts @@ -0,0 +1,592 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { ValidationStatus } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { BeforeSendEvent, ContentReadyEvent, DisposingEvent, DropZoneEnterEvent, DropZoneLeaveEvent, FilesUploadedEvent, FileUploadMode, InitializedEvent, OptionChangedEvent, ProgressEvent, UploadAbortedEvent, UploadedEvent, UploadErrorEvent, UploadHttpMethod, UploadStartedEvent, ValueChangedEvent } from 'devextreme/ui/file_uploader'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-html-editor-file-uploader-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorFileUploaderOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get abortUpload(): Function { + return this._getOption('abortUpload'); + } + set abortUpload(value: Function) { + this._setOption('abortUpload', value); + } + + @Input() + get accept(): string { + return this._getOption('accept'); + } + set accept(value: string) { + this._setOption('accept', value); + } + + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get allowCanceling(): boolean { + return this._getOption('allowCanceling'); + } + set allowCanceling(value: boolean) { + this._setOption('allowCanceling', value); + } + + @Input() + get allowedFileExtensions(): Array { + return this._getOption('allowedFileExtensions'); + } + set allowedFileExtensions(value: Array) { + this._setOption('allowedFileExtensions', value); + } + + @Input() + get chunkSize(): number { + return this._getOption('chunkSize'); + } + set chunkSize(value: number) { + this._setOption('chunkSize', value); + } + + @Input() + get dialogTrigger(): UserDefinedElement | string | undefined { + return this._getOption('dialogTrigger'); + } + set dialogTrigger(value: UserDefinedElement | string | undefined) { + this._setOption('dialogTrigger', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dropZone(): UserDefinedElement | string | undefined { + return this._getOption('dropZone'); + } + set dropZone(value: UserDefinedElement | string | undefined) { + this._setOption('dropZone', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get inputAttr(): any { + return this._getOption('inputAttr'); + } + set inputAttr(value: any) { + this._setOption('inputAttr', value); + } + + @Input() + get invalidFileExtensionMessage(): string { + return this._getOption('invalidFileExtensionMessage'); + } + set invalidFileExtensionMessage(value: string) { + this._setOption('invalidFileExtensionMessage', value); + } + + @Input() + get invalidMaxFileSizeMessage(): string { + return this._getOption('invalidMaxFileSizeMessage'); + } + set invalidMaxFileSizeMessage(value: string) { + this._setOption('invalidMaxFileSizeMessage', value); + } + + @Input() + get invalidMinFileSizeMessage(): string { + return this._getOption('invalidMinFileSizeMessage'); + } + set invalidMinFileSizeMessage(value: string) { + this._setOption('invalidMinFileSizeMessage', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get isValid(): boolean { + return this._getOption('isValid'); + } + set isValid(value: boolean) { + this._setOption('isValid', value); + } + + @Input() + get labelText(): string { + return this._getOption('labelText'); + } + set labelText(value: string) { + this._setOption('labelText', value); + } + + @Input() + get maxFileSize(): number { + return this._getOption('maxFileSize'); + } + set maxFileSize(value: number) { + this._setOption('maxFileSize', value); + } + + @Input() + get minFileSize(): number { + return this._getOption('minFileSize'); + } + set minFileSize(value: number) { + this._setOption('minFileSize', value); + } + + @Input() + get multiple(): boolean { + return this._getOption('multiple'); + } + set multiple(value: boolean) { + this._setOption('multiple', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + @Input() + get onBeforeSend(): ((e: BeforeSendEvent) => void) { + return this._getOption('onBeforeSend'); + } + set onBeforeSend(value: ((e: BeforeSendEvent) => void)) { + this._setOption('onBeforeSend', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onDropZoneEnter(): ((e: DropZoneEnterEvent) => void) { + return this._getOption('onDropZoneEnter'); + } + set onDropZoneEnter(value: ((e: DropZoneEnterEvent) => void)) { + this._setOption('onDropZoneEnter', value); + } + + @Input() + get onDropZoneLeave(): ((e: DropZoneLeaveEvent) => void) { + return this._getOption('onDropZoneLeave'); + } + set onDropZoneLeave(value: ((e: DropZoneLeaveEvent) => void)) { + this._setOption('onDropZoneLeave', value); + } + + @Input() + get onFilesUploaded(): ((e: FilesUploadedEvent) => void) { + return this._getOption('onFilesUploaded'); + } + set onFilesUploaded(value: ((e: FilesUploadedEvent) => void)) { + this._setOption('onFilesUploaded', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onProgress(): ((e: ProgressEvent) => void) { + return this._getOption('onProgress'); + } + set onProgress(value: ((e: ProgressEvent) => void)) { + this._setOption('onProgress', value); + } + + @Input() + get onUploadAborted(): ((e: UploadAbortedEvent) => void) { + return this._getOption('onUploadAborted'); + } + set onUploadAborted(value: ((e: UploadAbortedEvent) => void)) { + this._setOption('onUploadAborted', value); + } + + @Input() + get onUploaded(): ((e: UploadedEvent) => void) { + return this._getOption('onUploaded'); + } + set onUploaded(value: ((e: UploadedEvent) => void)) { + this._setOption('onUploaded', value); + } + + @Input() + get onUploadError(): ((e: UploadErrorEvent) => void) { + return this._getOption('onUploadError'); + } + set onUploadError(value: ((e: UploadErrorEvent) => void)) { + this._setOption('onUploadError', value); + } + + @Input() + get onUploadStarted(): ((e: UploadStartedEvent) => void) { + return this._getOption('onUploadStarted'); + } + set onUploadStarted(value: ((e: UploadStartedEvent) => void)) { + this._setOption('onUploadStarted', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get progress(): number { + return this._getOption('progress'); + } + set progress(value: number) { + this._setOption('progress', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get readyToUploadMessage(): string { + return this._getOption('readyToUploadMessage'); + } + set readyToUploadMessage(value: string) { + this._setOption('readyToUploadMessage', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get selectButtonText(): string { + return this._getOption('selectButtonText'); + } + set selectButtonText(value: string) { + this._setOption('selectButtonText', value); + } + + @Input() + get showFileList(): boolean { + return this._getOption('showFileList'); + } + set showFileList(value: boolean) { + this._setOption('showFileList', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get uploadAbortedMessage(): string { + return this._getOption('uploadAbortedMessage'); + } + set uploadAbortedMessage(value: string) { + this._setOption('uploadAbortedMessage', value); + } + + @Input() + get uploadButtonText(): string { + return this._getOption('uploadButtonText'); + } + set uploadButtonText(value: string) { + this._setOption('uploadButtonText', value); + } + + @Input() + get uploadChunk(): Function { + return this._getOption('uploadChunk'); + } + set uploadChunk(value: Function) { + this._setOption('uploadChunk', value); + } + + @Input() + get uploadCustomData(): any { + return this._getOption('uploadCustomData'); + } + set uploadCustomData(value: any) { + this._setOption('uploadCustomData', value); + } + + @Input() + get uploadedMessage(): string { + return this._getOption('uploadedMessage'); + } + set uploadedMessage(value: string) { + this._setOption('uploadedMessage', value); + } + + @Input() + get uploadFailedMessage(): string { + return this._getOption('uploadFailedMessage'); + } + set uploadFailedMessage(value: string) { + this._setOption('uploadFailedMessage', value); + } + + @Input() + get uploadFile(): Function { + return this._getOption('uploadFile'); + } + set uploadFile(value: Function) { + this._setOption('uploadFile', value); + } + + @Input() + get uploadHeaders(): any { + return this._getOption('uploadHeaders'); + } + set uploadHeaders(value: any) { + this._setOption('uploadHeaders', value); + } + + @Input() + get uploadMethod(): UploadHttpMethod { + return this._getOption('uploadMethod'); + } + set uploadMethod(value: UploadHttpMethod) { + this._setOption('uploadMethod', value); + } + + @Input() + get uploadMode(): FileUploadMode { + return this._getOption('uploadMode'); + } + set uploadMode(value: FileUploadMode) { + this._setOption('uploadMode', value); + } + + @Input() + get uploadUrl(): string { + return this._getOption('uploadUrl'); + } + set uploadUrl(value: string) { + this._setOption('uploadUrl', value); + } + + @Input() + get validationError(): any { + return this._getOption('validationError'); + } + set validationError(value: any) { + this._setOption('validationError', value); + } + + @Input() + get validationErrors(): Array { + return this._getOption('validationErrors'); + } + set validationErrors(value: Array) { + this._setOption('validationErrors', value); + } + + @Input() + get validationStatus(): ValidationStatus { + return this._getOption('validationStatus'); + } + set validationStatus(value: ValidationStatus) { + this._setOption('validationStatus', value); + } + + @Input() + get value(): Array { + return this._getOption('value'); + } + set value(value: Array) { + this._setOption('value', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter>; + protected get _optionPath() { + return 'fileUploaderOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorFileUploaderOptionsComponent + ], + exports: [ + DxoHtmlEditorFileUploaderOptionsComponent + ], +}) +export class DxoHtmlEditorFileUploaderOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/image-upload.ts b/packages/devextreme-angular/src/ui/html-editor/nested/image-upload.ts new file mode 100644 index 000000000000..402f4b722bf0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/image-upload.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxFileUploaderOptions } from 'devextreme/ui/file_uploader'; +import { dxHtmlEditorImageUploadTabItem, HtmlEditorImageUploadMode, HtmlEditorImageUploadTab } from 'devextreme/ui/html_editor'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiHtmlEditorTabComponent } from './tab-dxi'; + + +@Component({ + selector: 'dxo-html-editor-image-upload', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorImageUploadComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get fileUploaderOptions(): dxFileUploaderOptions { + return this._getOption('fileUploaderOptions'); + } + set fileUploaderOptions(value: dxFileUploaderOptions) { + this._setOption('fileUploaderOptions', value); + } + + @Input() + get fileUploadMode(): HtmlEditorImageUploadMode { + return this._getOption('fileUploadMode'); + } + set fileUploadMode(value: HtmlEditorImageUploadMode) { + this._setOption('fileUploadMode', value); + } + + @Input() + get tabs(): Array { + return this._getOption('tabs'); + } + set tabs(value: Array) { + this._setOption('tabs', value); + } + + @Input() + get uploadDirectory(): string | undefined { + return this._getOption('uploadDirectory'); + } + set uploadDirectory(value: string | undefined) { + this._setOption('uploadDirectory', value); + } + + @Input() + get uploadUrl(): string | undefined { + return this._getOption('uploadUrl'); + } + set uploadUrl(value: string | undefined) { + this._setOption('uploadUrl', value); + } + + + protected get _optionPath() { + return 'imageUpload'; + } + + + @ContentChildren(forwardRef(() => DxiHtmlEditorTabComponent)) + get tabsChildren(): QueryList { + return this._getOption('tabs'); + } + set tabsChildren(value) { + this.setChildren('tabs', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorImageUploadComponent + ], + exports: [ + DxoHtmlEditorImageUploadComponent + ], +}) +export class DxoHtmlEditorImageUploadModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/index.ts b/packages/devextreme-angular/src/ui/html-editor/nested/index.ts new file mode 100644 index 000000000000..da31f5e86a8d --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/index.ts @@ -0,0 +1,11 @@ +export * from './file-uploader-options'; +export * from './image-upload'; +export * from './item-dxi'; +export * from './media-resizing'; +export * from './mention-dxi'; +export * from './tab-dxi'; +export * from './table-context-menu'; +export * from './table-resizing'; +export * from './toolbar'; +export * from './variables'; + diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/html-editor/nested/item-dxi.ts new file mode 100644 index 000000000000..df1c66c4b6bf --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/item-dxi.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-html-editor-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiHtmlEditorItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get beginGroup(): boolean { + return this._getOption('beginGroup'); + } + set beginGroup(value: boolean) { + this._setOption('beginGroup', value); + } + + @Input() + get closeMenuOnClick(): boolean { + return this._getOption('closeMenuOnClick'); + } + set closeMenuOnClick(value: boolean) { + this._setOption('closeMenuOnClick', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get name(): HtmlEditorPredefinedContextMenuItem | undefined | HtmlEditorPredefinedToolbarItem | string { + return this._getOption('name'); + } + set name(value: HtmlEditorPredefinedContextMenuItem | undefined | HtmlEditorPredefinedToolbarItem | string) { + this._setOption('name', value); + } + + @Input() + get selectable(): boolean { + return this._getOption('selectable'); + } + set selectable(value: boolean) { + this._setOption('selectable', value); + } + + @Input() + get selected(): boolean { + return this._getOption('selected'); + } + set selected(value: boolean) { + this._setOption('selected', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get acceptedValues(): Array { + return this._getOption('acceptedValues'); + } + set acceptedValues(value: Array) { + this._setOption('acceptedValues', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get formatName(): HtmlEditorPredefinedToolbarItem | string { + return this._getOption('formatName'); + } + set formatName(value: HtmlEditorPredefinedToolbarItem | string) { + this._setOption('formatName', value); + } + + @Input() + get formatValues(): Array { + return this._getOption('formatValues'); + } + set formatValues(value: Array) { + this._setOption('formatValues', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiHtmlEditorItemComponent + ], + exports: [ + DxiHtmlEditorItemComponent + ], +}) +export class DxiHtmlEditorItemModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/media-resizing.ts b/packages/devextreme-angular/src/ui/html-editor/nested/media-resizing.ts new file mode 100644 index 000000000000..b735810c7a25 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/media-resizing.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-html-editor-media-resizing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorMediaResizingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowedTargets(): Array { + return this._getOption('allowedTargets'); + } + set allowedTargets(value: Array) { + this._setOption('allowedTargets', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'mediaResizing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorMediaResizingComponent + ], + exports: [ + DxoHtmlEditorMediaResizingComponent + ], +}) +export class DxoHtmlEditorMediaResizingModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/mention-dxi.ts b/packages/devextreme-angular/src/ui/html-editor/nested/mention-dxi.ts new file mode 100644 index 000000000000..d1866f0849c3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/mention-dxi.ts @@ -0,0 +1,132 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-html-editor-mention', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiHtmlEditorMentionComponent extends CollectionNestedOption { + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get displayExpr(): Function | string { + return this._getOption('displayExpr'); + } + set displayExpr(value: Function | string) { + this._setOption('displayExpr', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get marker(): string { + return this._getOption('marker'); + } + set marker(value: string) { + this._setOption('marker', value); + } + + @Input() + get minSearchLength(): number { + return this._getOption('minSearchLength'); + } + set minSearchLength(value: number) { + this._setOption('minSearchLength', value); + } + + @Input() + get searchExpr(): Function | string | Array { + return this._getOption('searchExpr'); + } + set searchExpr(value: Function | string | Array) { + this._setOption('searchExpr', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get valueExpr(): Function | string { + return this._getOption('valueExpr'); + } + set valueExpr(value: Function | string) { + this._setOption('valueExpr', value); + } + + + protected get _optionPath() { + return 'mentions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiHtmlEditorMentionComponent + ], + exports: [ + DxiHtmlEditorMentionComponent + ], +}) +export class DxiHtmlEditorMentionModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/ng-package.json b/packages/devextreme-angular/src/ui/html-editor/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/html-editor/nested/tab-dxi.ts new file mode 100644 index 000000000000..a530f0cc2e9f --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/tab-dxi.ts @@ -0,0 +1,67 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HtmlEditorImageUploadTab } from 'devextreme/ui/html_editor'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-html-editor-tab', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiHtmlEditorTabComponent extends CollectionNestedOption { + @Input() + get name(): HtmlEditorImageUploadTab | undefined { + return this._getOption('name'); + } + set name(value: HtmlEditorImageUploadTab | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiHtmlEditorTabComponent + ], + exports: [ + DxiHtmlEditorTabComponent + ], +}) +export class DxiHtmlEditorTabModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/table-context-menu.ts b/packages/devextreme-angular/src/ui/html-editor/nested/table-context-menu.ts new file mode 100644 index 000000000000..bee93774fc81 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/table-context-menu.ts @@ -0,0 +1,93 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { HtmlEditorPredefinedContextMenuItem } from 'devextreme/ui/html_editor'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiHtmlEditorItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-html-editor-table-context-menu', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorTableContextMenuComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get items(): Array, name?: HtmlEditorPredefinedContextMenuItem | undefined, selectable?: boolean, selected?: boolean, template?: any, text?: string, visible?: boolean }> { + return this._getOption('items'); + } + set items(value: Array, name?: HtmlEditorPredefinedContextMenuItem | undefined, selectable?: boolean, selected?: boolean, template?: any, text?: string, visible?: boolean }>) { + this._setOption('items', value); + } + + + protected get _optionPath() { + return 'tableContextMenu'; + } + + + @ContentChildren(forwardRef(() => DxiHtmlEditorItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorTableContextMenuComponent + ], + exports: [ + DxoHtmlEditorTableContextMenuComponent + ], +}) +export class DxoHtmlEditorTableContextMenuModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/table-resizing.ts b/packages/devextreme-angular/src/ui/html-editor/nested/table-resizing.ts new file mode 100644 index 000000000000..e1d02fd7d670 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/table-resizing.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-html-editor-table-resizing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorTableResizingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get minColumnWidth(): number { + return this._getOption('minColumnWidth'); + } + set minColumnWidth(value: number) { + this._setOption('minColumnWidth', value); + } + + @Input() + get minRowHeight(): number { + return this._getOption('minRowHeight'); + } + set minRowHeight(value: number) { + this._setOption('minRowHeight', value); + } + + + protected get _optionPath() { + return 'tableResizing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorTableResizingComponent + ], + exports: [ + DxoHtmlEditorTableResizingComponent + ], +}) +export class DxoHtmlEditorTableResizingModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/toolbar.ts b/packages/devextreme-angular/src/ui/html-editor/nested/toolbar.ts new file mode 100644 index 000000000000..16dc16062ee6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/toolbar.ts @@ -0,0 +1,102 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { UserDefinedElement } from 'devextreme/core/element'; +import { dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiHtmlEditorItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-html-editor-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get container(): UserDefinedElement | string { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string) { + this._setOption('container', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get multiline(): boolean { + return this._getOption('multiline'); + } + set multiline(value: boolean) { + this._setOption('multiline', value); + } + + + protected get _optionPath() { + return 'toolbar'; + } + + + @ContentChildren(forwardRef(() => DxiHtmlEditorItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorToolbarComponent + ], + exports: [ + DxoHtmlEditorToolbarComponent + ], +}) +export class DxoHtmlEditorToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/variables.ts b/packages/devextreme-angular/src/ui/html-editor/nested/variables.ts new file mode 100644 index 000000000000..020f02d8041a --- /dev/null +++ b/packages/devextreme-angular/src/ui/html-editor/nested/variables.ts @@ -0,0 +1,82 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-html-editor-variables', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoHtmlEditorVariablesComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get escapeChar(): string | Array { + return this._getOption('escapeChar'); + } + set escapeChar(value: string | Array) { + this._setOption('escapeChar', value); + } + + + protected get _optionPath() { + return 'variables'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoHtmlEditorVariablesComponent + ], + exports: [ + DxoHtmlEditorVariablesComponent + ], +}) +export class DxoHtmlEditorVariablesModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/index.ts b/packages/devextreme-angular/src/ui/linear-gauge/index.ts index 3eb95d74e59d..123eb53a12ba 100644 --- a/packages/devextreme-angular/src/ui/linear-gauge/index.ts +++ b/packages/devextreme-angular/src/ui/linear-gauge/index.ts @@ -66,6 +66,32 @@ import { DxoBorderModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; import { DxoValueIndicatorModule } from 'devextreme-angular/ui/nested'; +import { DxoLinearGaugeAnimationModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeExportModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeGeometryModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeLoadingIndicatorModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeFontModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeMarginModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeRangeContainerModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeBackgroundColorModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxiLinearGaugeRangeModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeColorModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeWidthModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeScaleModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeLabelModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeFormatModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeMinorTickModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeTickModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeSizeModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeSubvalueIndicatorModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeTextModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeTitleModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeSubtitleModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeTooltipModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeBorderModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeShadowModule } from 'devextreme-angular/ui/linear-gauge/nested'; +import { DxoLinearGaugeValueIndicatorModule } from 'devextreme-angular/ui/linear-gauge/nested'; + @@ -592,6 +618,7 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -704,6 +731,31 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On DxoBorderModule, DxoShadowModule, DxoValueIndicatorModule, + DxoLinearGaugeAnimationModule, + DxoLinearGaugeExportModule, + DxoLinearGaugeGeometryModule, + DxoLinearGaugeLoadingIndicatorModule, + DxoLinearGaugeFontModule, + DxoLinearGaugeMarginModule, + DxoLinearGaugeRangeContainerModule, + DxoLinearGaugeBackgroundColorModule, + DxiLinearGaugeRangeModule, + DxoLinearGaugeColorModule, + DxoLinearGaugeWidthModule, + DxoLinearGaugeScaleModule, + DxoLinearGaugeLabelModule, + DxoLinearGaugeFormatModule, + DxoLinearGaugeMinorTickModule, + DxoLinearGaugeTickModule, + DxoLinearGaugeSizeModule, + DxoLinearGaugeSubvalueIndicatorModule, + DxoLinearGaugeTextModule, + DxoLinearGaugeTitleModule, + DxoLinearGaugeSubtitleModule, + DxoLinearGaugeTooltipModule, + DxoLinearGaugeBorderModule, + DxoLinearGaugeShadowModule, + DxoLinearGaugeValueIndicatorModule, DxIntegrationModule, DxTemplateModule ], @@ -737,6 +789,31 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On DxoBorderModule, DxoShadowModule, DxoValueIndicatorModule, + DxoLinearGaugeAnimationModule, + DxoLinearGaugeExportModule, + DxoLinearGaugeGeometryModule, + DxoLinearGaugeLoadingIndicatorModule, + DxoLinearGaugeFontModule, + DxoLinearGaugeMarginModule, + DxoLinearGaugeRangeContainerModule, + DxoLinearGaugeBackgroundColorModule, + DxiLinearGaugeRangeModule, + DxoLinearGaugeColorModule, + DxoLinearGaugeWidthModule, + DxoLinearGaugeScaleModule, + DxoLinearGaugeLabelModule, + DxoLinearGaugeFormatModule, + DxoLinearGaugeMinorTickModule, + DxoLinearGaugeTickModule, + DxoLinearGaugeSizeModule, + DxoLinearGaugeSubvalueIndicatorModule, + DxoLinearGaugeTextModule, + DxoLinearGaugeTitleModule, + DxoLinearGaugeSubtitleModule, + DxoLinearGaugeTooltipModule, + DxoLinearGaugeBorderModule, + DxoLinearGaugeShadowModule, + DxoLinearGaugeValueIndicatorModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/animation.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/animation.ts new file mode 100644 index 000000000000..71d6f215d6ce --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/animation.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationEaseMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): AnimationEaseMode { + return this._getOption('easing'); + } + set easing(value: AnimationEaseMode) { + this._setOption('easing', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeAnimationComponent + ], + exports: [ + DxoLinearGaugeAnimationComponent + ], +}) +export class DxoLinearGaugeAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/background-color.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/background-color.ts new file mode 100644 index 000000000000..a3615429bf61 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/background-color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-background-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeBackgroundColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'backgroundColor'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeBackgroundColorComponent + ], + exports: [ + DxoLinearGaugeBackgroundColorComponent + ], +}) +export class DxoLinearGaugeBackgroundColorModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/border.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/border.ts new file mode 100644 index 000000000000..470de1a13946 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/border.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeBorderComponent + ], + exports: [ + DxoLinearGaugeBorderComponent + ], +}) +export class DxoLinearGaugeBorderModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/color.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/color.ts new file mode 100644 index 000000000000..58add4dc4919 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'color'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeColorComponent + ], + exports: [ + DxoLinearGaugeColorComponent + ], +}) +export class DxoLinearGaugeColorModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/export.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/export.ts new file mode 100644 index 000000000000..8a96257489d2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeExportComponent + ], + exports: [ + DxoLinearGaugeExportComponent + ], +}) +export class DxoLinearGaugeExportModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/font.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/font.ts new file mode 100644 index 000000000000..b0dc1432e92a --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeFontComponent + ], + exports: [ + DxoLinearGaugeFontComponent + ], +}) +export class DxoLinearGaugeFontModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/format.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/format.ts new file mode 100644 index 000000000000..2044e163ec34 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeFormatComponent + ], + exports: [ + DxoLinearGaugeFormatComponent + ], +}) +export class DxoLinearGaugeFormatModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/geometry.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/geometry.ts new file mode 100644 index 000000000000..4399b0ec0909 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/geometry.ts @@ -0,0 +1,73 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Orientation } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-geometry', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeGeometryComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get orientation(): Orientation { + return this._getOption('orientation'); + } + set orientation(value: Orientation) { + this._setOption('orientation', value); + } + + + protected get _optionPath() { + return 'geometry'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeGeometryComponent + ], + exports: [ + DxoLinearGaugeGeometryComponent + ], +}) +export class DxoLinearGaugeGeometryModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/index.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/index.ts new file mode 100644 index 000000000000..a047550b2e4b --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/index.ts @@ -0,0 +1,26 @@ +export * from './animation'; +export * from './background-color'; +export * from './border'; +export * from './color'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './geometry'; +export * from './label'; +export * from './loading-indicator'; +export * from './margin'; +export * from './minor-tick'; +export * from './range-container'; +export * from './range-dxi'; +export * from './scale'; +export * from './shadow'; +export * from './size'; +export * from './subtitle'; +export * from './subvalue-indicator'; +export * from './text'; +export * from './tick'; +export * from './title'; +export * from './tooltip'; +export * from './value-indicator'; +export * from './width'; + diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/label.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/label.ts new file mode 100644 index 000000000000..0db11cc19fd5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/label.ts @@ -0,0 +1,122 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, LabelOverlap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get indentFromTick(): number { + return this._getOption('indentFromTick'); + } + set indentFromTick(value: number) { + this._setOption('indentFromTick', value); + } + + @Input() + get overlappingBehavior(): LabelOverlap { + return this._getOption('overlappingBehavior'); + } + set overlappingBehavior(value: LabelOverlap) { + this._setOption('overlappingBehavior', value); + } + + @Input() + get useRangeColors(): boolean { + return this._getOption('useRangeColors'); + } + set useRangeColors(value: boolean) { + this._setOption('useRangeColors', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeLabelComponent + ], + exports: [ + DxoLinearGaugeLabelComponent + ], +}) +export class DxoLinearGaugeLabelModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/loading-indicator.ts new file mode 100644 index 000000000000..c1335e7aaa3e --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/loading-indicator.ts @@ -0,0 +1,110 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeLoadingIndicatorComponent + ], + exports: [ + DxoLinearGaugeLoadingIndicatorComponent + ], +}) +export class DxoLinearGaugeLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/margin.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/margin.ts new file mode 100644 index 000000000000..e85723cb279f --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeMarginComponent + ], + exports: [ + DxoLinearGaugeMarginComponent + ], +}) +export class DxoLinearGaugeMarginModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/minor-tick.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/minor-tick.ts new file mode 100644 index 000000000000..6870d2549951 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/minor-tick.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-minor-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeMinorTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorTick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeMinorTickComponent + ], + exports: [ + DxoLinearGaugeMinorTickComponent + ], +}) +export class DxoLinearGaugeMinorTickModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/ng-package.json b/packages/devextreme-angular/src/ui/linear-gauge/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/range-container.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/range-container.ts new file mode 100644 index 000000000000..72ce0b158833 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/range-container.ts @@ -0,0 +1,142 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { ChartsColor, Palette, PaletteExtensionMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiLinearGaugeRangeComponent } from './range-dxi'; + + +@Component({ + selector: 'dxo-linear-gauge-range-container', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeRangeContainerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): ChartsColor | string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: ChartsColor | string) { + this._setOption('backgroundColor', value); + } + + @Input() + get horizontalOrientation(): HorizontalAlignment { + return this._getOption('horizontalOrientation'); + } + set horizontalOrientation(value: HorizontalAlignment) { + this._setOption('horizontalOrientation', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get paletteExtensionMode(): PaletteExtensionMode { + return this._getOption('paletteExtensionMode'); + } + set paletteExtensionMode(value: PaletteExtensionMode) { + this._setOption('paletteExtensionMode', value); + } + + @Input() + get ranges(): Array { + return this._getOption('ranges'); + } + set ranges(value: Array) { + this._setOption('ranges', value); + } + + @Input() + get verticalOrientation(): VerticalAlignment { + return this._getOption('verticalOrientation'); + } + set verticalOrientation(value: VerticalAlignment) { + this._setOption('verticalOrientation', value); + } + + @Input() + get width(): number | { end?: number, start?: number } { + return this._getOption('width'); + } + set width(value: number | { end?: number, start?: number }) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'rangeContainer'; + } + + + @ContentChildren(forwardRef(() => DxiLinearGaugeRangeComponent)) + get rangesChildren(): QueryList { + return this._getOption('ranges'); + } + set rangesChildren(value) { + this.setChildren('ranges', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeRangeContainerComponent + ], + exports: [ + DxoLinearGaugeRangeContainerComponent + ], +}) +export class DxoLinearGaugeRangeContainerModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/range-dxi.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/range-dxi.ts new file mode 100644 index 000000000000..7e920c46f2a6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/range-dxi.ts @@ -0,0 +1,83 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-linear-gauge-range', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiLinearGaugeRangeComponent extends CollectionNestedOption { + @Input() + get color(): ChartsColor | string { + return this._getOption('color'); + } + set color(value: ChartsColor | string) { + this._setOption('color', value); + } + + @Input() + get endValue(): number { + return this._getOption('endValue'); + } + set endValue(value: number) { + this._setOption('endValue', value); + } + + @Input() + get startValue(): number { + return this._getOption('startValue'); + } + set startValue(value: number) { + this._setOption('startValue', value); + } + + + protected get _optionPath() { + return 'ranges'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiLinearGaugeRangeComponent + ], + exports: [ + DxiLinearGaugeRangeComponent + ], +}) +export class DxiLinearGaugeRangeModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts new file mode 100644 index 000000000000..b55eff02a155 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts @@ -0,0 +1,171 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { Font, LabelOverlap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-scale', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeScaleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get customMinorTicks(): Array { + return this._getOption('customMinorTicks'); + } + set customMinorTicks(value: Array) { + this._setOption('customMinorTicks', value); + } + + @Input() + get customTicks(): Array { + return this._getOption('customTicks'); + } + set customTicks(value: Array) { + this._setOption('customTicks', value); + } + + @Input() + get endValue(): number { + return this._getOption('endValue'); + } + set endValue(value: number) { + this._setOption('endValue', value); + } + + @Input() + get horizontalOrientation(): HorizontalAlignment { + return this._getOption('horizontalOrientation'); + } + set horizontalOrientation(value: HorizontalAlignment) { + this._setOption('horizontalOrientation', value); + } + + @Input() + get label(): { customizeText?: Function, font?: Font, format?: Format | string | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { customizeText?: Function, font?: Font, format?: Format | string | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickInterval(): number | undefined { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: number | undefined) { + this._setOption('minorTickInterval', value); + } + + @Input() + get scaleDivisionFactor(): number { + return this._getOption('scaleDivisionFactor'); + } + set scaleDivisionFactor(value: number) { + this._setOption('scaleDivisionFactor', value); + } + + @Input() + get startValue(): number { + return this._getOption('startValue'); + } + set startValue(value: number) { + this._setOption('startValue', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): number | undefined { + return this._getOption('tickInterval'); + } + set tickInterval(value: number | undefined) { + this._setOption('tickInterval', value); + } + + @Input() + get verticalOrientation(): VerticalAlignment { + return this._getOption('verticalOrientation'); + } + set verticalOrientation(value: VerticalAlignment) { + this._setOption('verticalOrientation', value); + } + + + protected get _optionPath() { + return 'scale'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeScaleComponent + ], + exports: [ + DxoLinearGaugeScaleComponent + ], +}) +export class DxoLinearGaugeScaleModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/shadow.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/shadow.ts new file mode 100644 index 000000000000..977ecf73e0e0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeShadowComponent + ], + exports: [ + DxoLinearGaugeShadowComponent + ], +}) +export class DxoLinearGaugeShadowModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/size.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/size.ts new file mode 100644 index 000000000000..56c5f270262c --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeSizeComponent + ], + exports: [ + DxoLinearGaugeSizeComponent + ], +}) +export class DxoLinearGaugeSizeModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts new file mode 100644 index 000000000000..dba559a89dbd --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeSubtitleComponent + ], + exports: [ + DxoLinearGaugeSubtitleComponent + ], +}) +export class DxoLinearGaugeSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/subvalue-indicator.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/subvalue-indicator.ts new file mode 100644 index 000000000000..344910a8b851 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/subvalue-indicator.ts @@ -0,0 +1,219 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalEdge, VerticalEdge } from 'devextreme/common'; +import { ChartsColor, Font, Palette } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-subvalue-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeSubvalueIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get baseValue(): number | undefined { + return this._getOption('baseValue'); + } + set baseValue(value: number | undefined) { + this._setOption('baseValue', value); + } + + @Input() + get beginAdaptingAtRadius(): number { + return this._getOption('beginAdaptingAtRadius'); + } + set beginAdaptingAtRadius(value: number) { + this._setOption('beginAdaptingAtRadius', value); + } + + @Input() + get color(): ChartsColor | string { + return this._getOption('color'); + } + set color(value: ChartsColor | string) { + this._setOption('color', value); + } + + @Input() + get horizontalOrientation(): HorizontalEdge { + return this._getOption('horizontalOrientation'); + } + set horizontalOrientation(value: HorizontalEdge) { + this._setOption('horizontalOrientation', value); + } + + @Input() + get indentFromCenter(): number { + return this._getOption('indentFromCenter'); + } + set indentFromCenter(value: number) { + this._setOption('indentFromCenter', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get secondColor(): string { + return this._getOption('secondColor'); + } + set secondColor(value: string) { + this._setOption('secondColor', value); + } + + @Input() + get secondFraction(): number { + return this._getOption('secondFraction'); + } + set secondFraction(value: number) { + this._setOption('secondFraction', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get spindleGapSize(): number { + return this._getOption('spindleGapSize'); + } + set spindleGapSize(value: number) { + this._setOption('spindleGapSize', value); + } + + @Input() + get spindleSize(): number { + return this._getOption('spindleSize'); + } + set spindleSize(value: number) { + this._setOption('spindleSize', value); + } + + @Input() + get text(): { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number } { + return this._getOption('text'); + } + set text(value: { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number }) { + this._setOption('text', value); + } + + @Input() + get type(): string { + return this._getOption('type'); + } + set type(value: string) { + this._setOption('type', value); + } + + @Input() + get verticalOrientation(): VerticalEdge { + return this._getOption('verticalOrientation'); + } + set verticalOrientation(value: VerticalEdge) { + this._setOption('verticalOrientation', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'subvalueIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeSubvalueIndicatorComponent + ], + exports: [ + DxoLinearGaugeSubvalueIndicatorComponent + ], +}) +export class DxoLinearGaugeSubvalueIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/text.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/text.ts new file mode 100644 index 000000000000..656cb86b6bb5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/text.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-text', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeTextComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeText(): Function | undefined { + return this._getOption('customizeText'); + } + set customizeText(value: Function | undefined) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get indent(): number { + return this._getOption('indent'); + } + set indent(value: number) { + this._setOption('indent', value); + } + + + protected get _optionPath() { + return 'text'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeTextComponent + ], + exports: [ + DxoLinearGaugeTextComponent + ], +}) +export class DxoLinearGaugeTextModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/tick.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/tick.ts new file mode 100644 index 000000000000..eaaaf6a19473 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/tick.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'tick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeTickComponent + ], + exports: [ + DxoLinearGaugeTickComponent + ], +}) +export class DxoLinearGaugeTickModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts new file mode 100644 index 000000000000..f769af67a277 --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeTitleComponent + ], + exports: [ + DxoLinearGaugeTitleComponent + ], +}) +export class DxoLinearGaugeTitleModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/tooltip.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/tooltip.ts new file mode 100644 index 000000000000..e2298f497efc --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/tooltip.ts @@ -0,0 +1,195 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeTooltipComponent + ], + exports: [ + DxoLinearGaugeTooltipComponent + ], +}) +export class DxoLinearGaugeTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/value-indicator.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/value-indicator.ts new file mode 100644 index 000000000000..5b263627f69f --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/value-indicator.ts @@ -0,0 +1,219 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalEdge, VerticalEdge } from 'devextreme/common'; +import { ChartsColor, Font, Palette } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-value-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeValueIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get baseValue(): number | undefined { + return this._getOption('baseValue'); + } + set baseValue(value: number | undefined) { + this._setOption('baseValue', value); + } + + @Input() + get beginAdaptingAtRadius(): number { + return this._getOption('beginAdaptingAtRadius'); + } + set beginAdaptingAtRadius(value: number) { + this._setOption('beginAdaptingAtRadius', value); + } + + @Input() + get color(): ChartsColor | string { + return this._getOption('color'); + } + set color(value: ChartsColor | string) { + this._setOption('color', value); + } + + @Input() + get horizontalOrientation(): HorizontalEdge { + return this._getOption('horizontalOrientation'); + } + set horizontalOrientation(value: HorizontalEdge) { + this._setOption('horizontalOrientation', value); + } + + @Input() + get indentFromCenter(): number { + return this._getOption('indentFromCenter'); + } + set indentFromCenter(value: number) { + this._setOption('indentFromCenter', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get secondColor(): string { + return this._getOption('secondColor'); + } + set secondColor(value: string) { + this._setOption('secondColor', value); + } + + @Input() + get secondFraction(): number { + return this._getOption('secondFraction'); + } + set secondFraction(value: number) { + this._setOption('secondFraction', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get spindleGapSize(): number { + return this._getOption('spindleGapSize'); + } + set spindleGapSize(value: number) { + this._setOption('spindleGapSize', value); + } + + @Input() + get spindleSize(): number { + return this._getOption('spindleSize'); + } + set spindleSize(value: number) { + this._setOption('spindleSize', value); + } + + @Input() + get text(): { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number } { + return this._getOption('text'); + } + set text(value: { customizeText?: Function | undefined, font?: Font, format?: Format | string | undefined, indent?: number }) { + this._setOption('text', value); + } + + @Input() + get type(): string { + return this._getOption('type'); + } + set type(value: string) { + this._setOption('type', value); + } + + @Input() + get verticalOrientation(): VerticalEdge { + return this._getOption('verticalOrientation'); + } + set verticalOrientation(value: VerticalEdge) { + this._setOption('verticalOrientation', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'valueIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeValueIndicatorComponent + ], + exports: [ + DxoLinearGaugeValueIndicatorComponent + ], +}) +export class DxoLinearGaugeValueIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/width.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/width.ts new file mode 100644 index 000000000000..f60d26fbb1ea --- /dev/null +++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/width.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-linear-gauge-width', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLinearGaugeWidthComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get end(): number { + return this._getOption('end'); + } + set end(value: number) { + this._setOption('end', value); + } + + @Input() + get start(): number { + return this._getOption('start'); + } + set start(value: number) { + this._setOption('start', value); + } + + + protected get _optionPath() { + return 'width'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLinearGaugeWidthComponent + ], + exports: [ + DxoLinearGaugeWidthComponent + ], +}) +export class DxoLinearGaugeWidthModule { } diff --git a/packages/devextreme-angular/src/ui/list/index.ts b/packages/devextreme-angular/src/ui/list/index.ts index cb53039211c1..9e948babdef9 100644 --- a/packages/devextreme-angular/src/ui/list/index.ts +++ b/packages/devextreme-angular/src/ui/list/index.ts @@ -51,9 +51,19 @@ import { DxoSearchEditorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxiButtonModule } from 'devextreme-angular/ui/nested'; import { DxoOptionsModule } from 'devextreme-angular/ui/nested'; +import { DxoListItemDraggingModule } from 'devextreme-angular/ui/list/nested'; +import { DxoListCursorOffsetModule } from 'devextreme-angular/ui/list/nested'; +import { DxiListItemModule } from 'devextreme-angular/ui/list/nested'; +import { DxiListMenuItemModule } from 'devextreme-angular/ui/list/nested'; +import { DxoListSearchEditorOptionsModule } from 'devextreme-angular/ui/list/nested'; +import { DxiListButtonModule } from 'devextreme-angular/ui/list/nested'; +import { DxoListOptionsModule } from 'devextreme-angular/ui/list/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; import { DxiMenuItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiListItemComponent } from 'devextreme-angular/ui/list/nested'; +import { DxiListMenuItemComponent } from 'devextreme-angular/ui/list/nested'; /** @@ -1319,23 +1329,46 @@ export class DxListComponent extends DxComponent implem - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiListItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiListItemComponent'); this.setChildren('items', value); } - @ContentChildren(DxiMenuItemComponent) - get menuItemsChildren(): QueryList { + @ContentChildren(DxiListMenuItemComponent) + get menuItemsChildren(): QueryList { return this._getOption('menuItems'); } set menuItemsChildren(value) { + this.setContentChildren('menuItems', value, 'DxiListMenuItemComponent'); this.setChildren('menuItems', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiMenuItemComponent) + get menuItemsLegacyChildren(): QueryList { + return this._getOption('menuItems'); + } + set menuItemsLegacyChildren(value) { + if (this.checkContentChildren('menuItems', value, 'DxiMenuItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1484,6 +1517,13 @@ export class DxListComponent extends DxComponent implem DxoSearchEditorOptionsModule, DxiButtonModule, DxoOptionsModule, + DxoListItemDraggingModule, + DxoListCursorOffsetModule, + DxiListItemModule, + DxiListMenuItemModule, + DxoListSearchEditorOptionsModule, + DxiListButtonModule, + DxoListOptionsModule, DxIntegrationModule, DxTemplateModule ], @@ -1499,6 +1539,13 @@ export class DxListComponent extends DxComponent implem DxoSearchEditorOptionsModule, DxiButtonModule, DxoOptionsModule, + DxoListItemDraggingModule, + DxoListCursorOffsetModule, + DxiListItemModule, + DxiListMenuItemModule, + DxoListSearchEditorOptionsModule, + DxiListButtonModule, + DxoListOptionsModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/list/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/list/nested/button-dxi.ts new file mode 100644 index 000000000000..87345bf03070 --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-list-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiListButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiListButtonComponent + ], + exports: [ + DxiListButtonComponent + ], +}) +export class DxiListButtonModule { } diff --git a/packages/devextreme-angular/src/ui/list/nested/cursor-offset.ts b/packages/devextreme-angular/src/ui/list/nested/cursor-offset.ts new file mode 100644 index 000000000000..4e9d071b1906 --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/cursor-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-list-cursor-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoListCursorOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'cursorOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoListCursorOffsetComponent + ], + exports: [ + DxoListCursorOffsetComponent + ], +}) +export class DxoListCursorOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/list/nested/index.ts b/packages/devextreme-angular/src/ui/list/nested/index.ts new file mode 100644 index 000000000000..99df0dae9210 --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/index.ts @@ -0,0 +1,8 @@ +export * from './button-dxi'; +export * from './cursor-offset'; +export * from './item-dragging'; +export * from './item-dxi'; +export * from './menu-item-dxi'; +export * from './options'; +export * from './search-editor-options'; + diff --git a/packages/devextreme-angular/src/ui/list/nested/item-dragging.ts b/packages/devextreme-angular/src/ui/list/nested/item-dragging.ts new file mode 100644 index 000000000000..bad4381c1455 --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/item-dragging.ts @@ -0,0 +1,315 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DragDirection, DragHighlight, Orientation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { AddEvent, DisposingEvent, DragChangeEvent, DragEndEvent, DragMoveEvent, DragStartEvent, InitializedEvent, OptionChangedEvent, RemoveEvent, ReorderEvent } from 'devextreme/ui/sortable'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-list-item-dragging', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoListItemDraggingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDropInsideItem(): boolean { + return this._getOption('allowDropInsideItem'); + } + set allowDropInsideItem(value: boolean) { + this._setOption('allowDropInsideItem', value); + } + + @Input() + get allowReordering(): boolean { + return this._getOption('allowReordering'); + } + set allowReordering(value: boolean) { + this._setOption('allowReordering', value); + } + + @Input() + get autoScroll(): boolean { + return this._getOption('autoScroll'); + } + set autoScroll(value: boolean) { + this._setOption('autoScroll', value); + } + + @Input() + get boundary(): UserDefinedElement | string | undefined { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | undefined) { + this._setOption('boundary', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get cursorOffset(): string | { x?: number, y?: number } { + return this._getOption('cursorOffset'); + } + set cursorOffset(value: string | { x?: number, y?: number }) { + this._setOption('cursorOffset', value); + } + + @Input() + get data(): any | undefined { + return this._getOption('data'); + } + set data(value: any | undefined) { + this._setOption('data', value); + } + + @Input() + get dragDirection(): DragDirection { + return this._getOption('dragDirection'); + } + set dragDirection(value: DragDirection) { + this._setOption('dragDirection', value); + } + + @Input() + get dragTemplate(): any | undefined { + return this._getOption('dragTemplate'); + } + set dragTemplate(value: any | undefined) { + this._setOption('dragTemplate', value); + } + + @Input() + get dropFeedbackMode(): DragHighlight { + return this._getOption('dropFeedbackMode'); + } + set dropFeedbackMode(value: DragHighlight) { + this._setOption('dropFeedbackMode', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get filter(): string { + return this._getOption('filter'); + } + set filter(value: string) { + this._setOption('filter', value); + } + + @Input() + get group(): string | undefined { + return this._getOption('group'); + } + set group(value: string | undefined) { + this._setOption('group', value); + } + + @Input() + get handle(): string { + return this._getOption('handle'); + } + set handle(value: string) { + this._setOption('handle', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get itemOrientation(): Orientation { + return this._getOption('itemOrientation'); + } + set itemOrientation(value: Orientation) { + this._setOption('itemOrientation', value); + } + + @Input() + get moveItemOnDrop(): boolean { + return this._getOption('moveItemOnDrop'); + } + set moveItemOnDrop(value: boolean) { + this._setOption('moveItemOnDrop', value); + } + + @Input() + get onAdd(): ((e: AddEvent) => void) { + return this._getOption('onAdd'); + } + set onAdd(value: ((e: AddEvent) => void)) { + this._setOption('onAdd', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onDragChange(): ((e: DragChangeEvent) => void) { + return this._getOption('onDragChange'); + } + set onDragChange(value: ((e: DragChangeEvent) => void)) { + this._setOption('onDragChange', value); + } + + @Input() + get onDragEnd(): ((e: DragEndEvent) => void) { + return this._getOption('onDragEnd'); + } + set onDragEnd(value: ((e: DragEndEvent) => void)) { + this._setOption('onDragEnd', value); + } + + @Input() + get onDragMove(): ((e: DragMoveEvent) => void) { + return this._getOption('onDragMove'); + } + set onDragMove(value: ((e: DragMoveEvent) => void)) { + this._setOption('onDragMove', value); + } + + @Input() + get onDragStart(): ((e: DragStartEvent) => void) { + return this._getOption('onDragStart'); + } + set onDragStart(value: ((e: DragStartEvent) => void)) { + this._setOption('onDragStart', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onRemove(): ((e: RemoveEvent) => void) { + return this._getOption('onRemove'); + } + set onRemove(value: ((e: RemoveEvent) => void)) { + this._setOption('onRemove', value); + } + + @Input() + get onReorder(): ((e: ReorderEvent) => void) { + return this._getOption('onReorder'); + } + set onReorder(value: ((e: ReorderEvent) => void)) { + this._setOption('onReorder', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get scrollSensitivity(): number { + return this._getOption('scrollSensitivity'); + } + set scrollSensitivity(value: number) { + this._setOption('scrollSensitivity', value); + } + + @Input() + get scrollSpeed(): number { + return this._getOption('scrollSpeed'); + } + set scrollSpeed(value: number) { + this._setOption('scrollSpeed', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'itemDragging'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoListItemDraggingComponent + ], + exports: [ + DxoListItemDraggingComponent + ], +}) +export class DxoListItemDraggingModule { } diff --git a/packages/devextreme-angular/src/ui/list/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/list/nested/item-dxi.ts new file mode 100644 index 000000000000..95c41b5fc68f --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/item-dxi.ts @@ -0,0 +1,151 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-list-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiListItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get key(): string { + return this._getOption('key'); + } + set key(value: string) { + this._setOption('key', value); + } + + @Input() + get showChevron(): boolean { + return this._getOption('showChevron'); + } + set showChevron(value: boolean) { + this._setOption('showChevron', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiListItemComponent + ], + exports: [ + DxiListItemComponent + ], +}) +export class DxiListItemModule { } diff --git a/packages/devextreme-angular/src/ui/list/nested/menu-item-dxi.ts b/packages/devextreme-angular/src/ui/list/nested/menu-item-dxi.ts new file mode 100644 index 000000000000..9674051f4dca --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/menu-item-dxi.ts @@ -0,0 +1,74 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-list-menu-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiListMenuItemComponent extends CollectionNestedOption { + @Input() + get action(): Function { + return this._getOption('action'); + } + set action(value: Function) { + this._setOption('action', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + protected get _optionPath() { + return 'menuItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiListMenuItemComponent + ], + exports: [ + DxiListMenuItemComponent + ], +}) +export class DxiListMenuItemModule { } diff --git a/packages/devextreme-angular/src/ui/list/nested/ng-package.json b/packages/devextreme-angular/src/ui/list/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/list/nested/options.ts b/packages/devextreme-angular/src/ui/list/nested/options.ts new file mode 100644 index 000000000000..3e564c5e0a3b --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-list-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoListOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoListOptionsComponent + ], + exports: [ + DxoListOptionsComponent + ], +}) +export class DxoListOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts b/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts new file mode 100644 index 000000000000..bb064b3b936a --- /dev/null +++ b/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts @@ -0,0 +1,539 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { EditorStyle, LabelMode, MaskMode, Position, TextBoxPredefinedButton, TextEditorButton, ValidationMessageMode, ValidationStatus } from 'devextreme/common'; +import { ChangeEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OptionChangedEvent, PasteEvent, TextBoxType, ValueChangedEvent } from 'devextreme/ui/text_box'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiListButtonComponent } from './button-dxi'; + + +@Component({ + selector: 'dxo-list-search-editor-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoListSearchEditorOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get buttons(): Array { + return this._getOption('buttons'); + } + set buttons(value: Array) { + this._setOption('buttons', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get inputAttr(): any { + return this._getOption('inputAttr'); + } + set inputAttr(value: any) { + this._setOption('inputAttr', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get isValid(): boolean { + return this._getOption('isValid'); + } + set isValid(value: boolean) { + this._setOption('isValid', value); + } + + @Input() + get label(): string { + return this._getOption('label'); + } + set label(value: string) { + this._setOption('label', value); + } + + @Input() + get labelMode(): LabelMode { + return this._getOption('labelMode'); + } + set labelMode(value: LabelMode) { + this._setOption('labelMode', value); + } + + @Input() + get mask(): string { + return this._getOption('mask'); + } + set mask(value: string) { + this._setOption('mask', value); + } + + @Input() + get maskChar(): string { + return this._getOption('maskChar'); + } + set maskChar(value: string) { + this._setOption('maskChar', value); + } + + @Input() + get maskInvalidMessage(): string { + return this._getOption('maskInvalidMessage'); + } + set maskInvalidMessage(value: string) { + this._setOption('maskInvalidMessage', value); + } + + @Input() + get maskRules(): any { + return this._getOption('maskRules'); + } + set maskRules(value: any) { + this._setOption('maskRules', value); + } + + @Input() + get maxLength(): number | string { + return this._getOption('maxLength'); + } + set maxLength(value: number | string) { + this._setOption('maxLength', value); + } + + @Input() + get mode(): TextBoxType { + return this._getOption('mode'); + } + set mode(value: TextBoxType) { + this._setOption('mode', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + @Input() + get onChange(): ((e: ChangeEvent) => void) { + return this._getOption('onChange'); + } + set onChange(value: ((e: ChangeEvent) => void)) { + this._setOption('onChange', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onCopy(): ((e: CopyEvent) => void) { + return this._getOption('onCopy'); + } + set onCopy(value: ((e: CopyEvent) => void)) { + this._setOption('onCopy', value); + } + + @Input() + get onCut(): ((e: CutEvent) => void) { + return this._getOption('onCut'); + } + set onCut(value: ((e: CutEvent) => void)) { + this._setOption('onCut', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onEnterKey(): ((e: EnterKeyEvent) => void) { + return this._getOption('onEnterKey'); + } + set onEnterKey(value: ((e: EnterKeyEvent) => void)) { + this._setOption('onEnterKey', value); + } + + @Input() + get onFocusIn(): ((e: FocusInEvent) => void) { + return this._getOption('onFocusIn'); + } + set onFocusIn(value: ((e: FocusInEvent) => void)) { + this._setOption('onFocusIn', value); + } + + @Input() + get onFocusOut(): ((e: FocusOutEvent) => void) { + return this._getOption('onFocusOut'); + } + set onFocusOut(value: ((e: FocusOutEvent) => void)) { + this._setOption('onFocusOut', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onInput(): ((e: InputEvent) => void) { + return this._getOption('onInput'); + } + set onInput(value: ((e: InputEvent) => void)) { + this._setOption('onInput', value); + } + + @Input() + get onKeyDown(): ((e: KeyDownEvent) => void) { + return this._getOption('onKeyDown'); + } + set onKeyDown(value: ((e: KeyDownEvent) => void)) { + this._setOption('onKeyDown', value); + } + + @Input() + get onKeyUp(): ((e: KeyUpEvent) => void) { + return this._getOption('onKeyUp'); + } + set onKeyUp(value: ((e: KeyUpEvent) => void)) { + this._setOption('onKeyUp', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onPaste(): ((e: PasteEvent) => void) { + return this._getOption('onPaste'); + } + set onPaste(value: ((e: PasteEvent) => void)) { + this._setOption('onPaste', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get placeholder(): string { + return this._getOption('placeholder'); + } + set placeholder(value: string) { + this._setOption('placeholder', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get showClearButton(): boolean { + return this._getOption('showClearButton'); + } + set showClearButton(value: boolean) { + this._setOption('showClearButton', value); + } + + @Input() + get showMaskMode(): MaskMode { + return this._getOption('showMaskMode'); + } + set showMaskMode(value: MaskMode) { + this._setOption('showMaskMode', value); + } + + @Input() + get spellcheck(): boolean { + return this._getOption('spellcheck'); + } + set spellcheck(value: boolean) { + this._setOption('spellcheck', value); + } + + @Input() + get stylingMode(): EditorStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: EditorStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get useMaskedValue(): boolean { + return this._getOption('useMaskedValue'); + } + set useMaskedValue(value: boolean) { + this._setOption('useMaskedValue', value); + } + + @Input() + get validationError(): any { + return this._getOption('validationError'); + } + set validationError(value: any) { + this._setOption('validationError', value); + } + + @Input() + get validationErrors(): Array { + return this._getOption('validationErrors'); + } + set validationErrors(value: Array) { + this._setOption('validationErrors', value); + } + + @Input() + get validationMessageMode(): ValidationMessageMode { + return this._getOption('validationMessageMode'); + } + set validationMessageMode(value: ValidationMessageMode) { + this._setOption('validationMessageMode', value); + } + + @Input() + get validationMessagePosition(): Position { + return this._getOption('validationMessagePosition'); + } + set validationMessagePosition(value: Position) { + this._setOption('validationMessagePosition', value); + } + + @Input() + get validationStatus(): ValidationStatus { + return this._getOption('validationStatus'); + } + set validationStatus(value: ValidationStatus) { + this._setOption('validationStatus', value); + } + + @Input() + get value(): string { + return this._getOption('value'); + } + set value(value: string) { + this._setOption('value', value); + } + + @Input() + get valueChangeEvent(): string { + return this._getOption('valueChangeEvent'); + } + set valueChangeEvent(value: string) { + this._setOption('valueChangeEvent', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() textChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter; + protected get _optionPath() { + return 'searchEditorOptions'; + } + + + @ContentChildren(forwardRef(() => DxiListButtonComponent)) + get buttonsChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsChildren(value) { + this.setChildren('buttons', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'textChange' }, + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoListSearchEditorOptionsComponent + ], + exports: [ + DxoListSearchEditorOptionsComponent + ], +}) +export class DxoListSearchEditorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/load-indicator/index.ts b/packages/devextreme-angular/src/ui/load-indicator/index.ts index f0ffc7c0dd1a..eb880f02b8b4 100644 --- a/packages/devextreme-angular/src/ui/load-indicator/index.ts +++ b/packages/devextreme-angular/src/ui/load-indicator/index.ts @@ -35,6 +35,7 @@ import { + /** * [descr:dxLoadIndicator] @@ -228,6 +229,7 @@ export class DxLoadIndicatorComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts index a5c49da6612e..ae6221da016e 100644 --- a/packages/devextreme-angular/src/ui/load-panel/index.ts +++ b/packages/devextreme-angular/src/ui/load-panel/index.ts @@ -47,6 +47,18 @@ import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; +import { DxoLoadPanelAnimationModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelHideModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelFromModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelPositionModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelAtModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelBoundaryOffsetModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelCollisionModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelMyModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelOffsetModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelToModule } from 'devextreme-angular/ui/load-panel/nested'; +import { DxoLoadPanelShowModule } from 'devextreme-angular/ui/load-panel/nested'; + @@ -657,6 +669,7 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -729,6 +742,17 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, + DxoLoadPanelAnimationModule, + DxoLoadPanelHideModule, + DxoLoadPanelFromModule, + DxoLoadPanelPositionModule, + DxoLoadPanelAtModule, + DxoLoadPanelBoundaryOffsetModule, + DxoLoadPanelCollisionModule, + DxoLoadPanelMyModule, + DxoLoadPanelOffsetModule, + DxoLoadPanelToModule, + DxoLoadPanelShowModule, DxIntegrationModule, DxTemplateModule ], @@ -748,6 +772,17 @@ export class DxLoadPanelComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, + DxoLoadPanelAnimationModule, + DxoLoadPanelHideModule, + DxoLoadPanelFromModule, + DxoLoadPanelPositionModule, + DxoLoadPanelAtModule, + DxoLoadPanelBoundaryOffsetModule, + DxoLoadPanelCollisionModule, + DxoLoadPanelMyModule, + DxoLoadPanelOffsetModule, + DxoLoadPanelToModule, + DxoLoadPanelShowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/animation.ts b/packages/devextreme-angular/src/ui/load-panel/nested/animation.ts new file mode 100644 index 000000000000..2cb5791080dc --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelAnimationComponent + ], + exports: [ + DxoLoadPanelAnimationComponent + ], +}) +export class DxoLoadPanelAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/at.ts b/packages/devextreme-angular/src/ui/load-panel/nested/at.ts new file mode 100644 index 000000000000..a57d70ad7170 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelAtComponent + ], + exports: [ + DxoLoadPanelAtComponent + ], +}) +export class DxoLoadPanelAtModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/load-panel/nested/boundary-offset.ts new file mode 100644 index 000000000000..ce732d73ae99 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelBoundaryOffsetComponent + ], + exports: [ + DxoLoadPanelBoundaryOffsetComponent + ], +}) +export class DxoLoadPanelBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/collision.ts b/packages/devextreme-angular/src/ui/load-panel/nested/collision.ts new file mode 100644 index 000000000000..7109f2eb3c11 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelCollisionComponent + ], + exports: [ + DxoLoadPanelCollisionComponent + ], +}) +export class DxoLoadPanelCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/from.ts b/packages/devextreme-angular/src/ui/load-panel/nested/from.ts new file mode 100644 index 000000000000..53f095a9513f --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelFromComponent + ], + exports: [ + DxoLoadPanelFromComponent + ], +}) +export class DxoLoadPanelFromModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/hide.ts b/packages/devextreme-angular/src/ui/load-panel/nested/hide.ts new file mode 100644 index 000000000000..7f418b418d35 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelHideComponent + ], + exports: [ + DxoLoadPanelHideComponent + ], +}) +export class DxoLoadPanelHideModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/index.ts b/packages/devextreme-angular/src/ui/load-panel/nested/index.ts new file mode 100644 index 000000000000..332a5a7d175b --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/index.ts @@ -0,0 +1,12 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './from'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show'; +export * from './to'; + diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/my.ts b/packages/devextreme-angular/src/ui/load-panel/nested/my.ts new file mode 100644 index 000000000000..ae7040206436 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelMyComponent + ], + exports: [ + DxoLoadPanelMyComponent + ], +}) +export class DxoLoadPanelMyModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/ng-package.json b/packages/devextreme-angular/src/ui/load-panel/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/offset.ts b/packages/devextreme-angular/src/ui/load-panel/nested/offset.ts new file mode 100644 index 000000000000..4d7d2880e0bf --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelOffsetComponent + ], + exports: [ + DxoLoadPanelOffsetComponent + ], +}) +export class DxoLoadPanelOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/position.ts b/packages/devextreme-angular/src/ui/load-panel/nested/position.ts new file mode 100644 index 000000000000..7262ab0fa7cb --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelPositionComponent + ], + exports: [ + DxoLoadPanelPositionComponent + ], +}) +export class DxoLoadPanelPositionModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/show.ts b/packages/devextreme-angular/src/ui/load-panel/nested/show.ts new file mode 100644 index 000000000000..2159982dafeb --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelShowComponent + ], + exports: [ + DxoLoadPanelShowComponent + ], +}) +export class DxoLoadPanelShowModule { } diff --git a/packages/devextreme-angular/src/ui/load-panel/nested/to.ts b/packages/devextreme-angular/src/ui/load-panel/nested/to.ts new file mode 100644 index 000000000000..ce9bb916da11 --- /dev/null +++ b/packages/devextreme-angular/src/ui/load-panel/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-load-panel-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLoadPanelToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLoadPanelToComponent + ], + exports: [ + DxoLoadPanelToComponent + ], +}) +export class DxoLoadPanelToModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/index.ts b/packages/devextreme-angular/src/ui/lookup/index.ts index 9d205908d5df..7a8617c3c0b8 100644 --- a/packages/devextreme-angular/src/ui/lookup/index.ts +++ b/packages/devextreme-angular/src/ui/lookup/index.ts @@ -62,11 +62,28 @@ import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; import { DxoHideEventModule } from 'devextreme-angular/ui/nested'; import { DxoShowEventModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxoLookupDropDownOptionsModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupAnimationModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupHideModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupFromModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupPositionModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupAtModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupBoundaryOffsetModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupCollisionModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupMyModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupOffsetModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupToModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupShowModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupHideEventModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxoLookupShowEventModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxiLookupToolbarItemModule } from 'devextreme-angular/ui/lookup/nested'; +import { DxiLookupItemModule } from 'devextreme-angular/ui/lookup/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiLookupItemComponent } from 'devextreme-angular/ui/lookup/nested'; @@ -1605,15 +1622,27 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiLookupItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiLookupItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1795,8 +1824,23 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control DxoShowModule, DxoHideEventModule, DxoShowEventModule, - DxiToolbarItemModule, DxiItemModule, + DxoLookupDropDownOptionsModule, + DxoLookupAnimationModule, + DxoLookupHideModule, + DxoLookupFromModule, + DxoLookupPositionModule, + DxoLookupAtModule, + DxoLookupBoundaryOffsetModule, + DxoLookupCollisionModule, + DxoLookupMyModule, + DxoLookupOffsetModule, + DxoLookupToModule, + DxoLookupShowModule, + DxoLookupHideEventModule, + DxoLookupShowEventModule, + DxiLookupToolbarItemModule, + DxiLookupItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1819,8 +1863,23 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control DxoShowModule, DxoHideEventModule, DxoShowEventModule, - DxiToolbarItemModule, DxiItemModule, + DxoLookupDropDownOptionsModule, + DxoLookupAnimationModule, + DxoLookupHideModule, + DxoLookupFromModule, + DxoLookupPositionModule, + DxoLookupAtModule, + DxoLookupBoundaryOffsetModule, + DxoLookupCollisionModule, + DxoLookupMyModule, + DxoLookupOffsetModule, + DxoLookupToModule, + DxoLookupShowModule, + DxoLookupHideEventModule, + DxoLookupShowEventModule, + DxiLookupToolbarItemModule, + DxiLookupItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/lookup/nested/animation.ts b/packages/devextreme-angular/src/ui/lookup/nested/animation.ts new file mode 100644 index 000000000000..900c13f36186 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupAnimationComponent + ], + exports: [ + DxoLookupAnimationComponent + ], +}) +export class DxoLookupAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/at.ts b/packages/devextreme-angular/src/ui/lookup/nested/at.ts new file mode 100644 index 000000000000..32cd09f40bdf --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupAtComponent + ], + exports: [ + DxoLookupAtComponent + ], +}) +export class DxoLookupAtModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/lookup/nested/boundary-offset.ts new file mode 100644 index 000000000000..dd00b85effed --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupBoundaryOffsetComponent + ], + exports: [ + DxoLookupBoundaryOffsetComponent + ], +}) +export class DxoLookupBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/collision.ts b/packages/devextreme-angular/src/ui/lookup/nested/collision.ts new file mode 100644 index 000000000000..753713672a8c --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupCollisionComponent + ], + exports: [ + DxoLookupCollisionComponent + ], +}) +export class DxoLookupCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts new file mode 100644 index 000000000000..b4f706b40ef6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts @@ -0,0 +1,440 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { Position, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, OptionChangedEvent, ShowingEvent, ShownEvent, TitleRenderedEvent } from 'devextreme/ui/popover'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiLookupToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-lookup-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideEvent(): string | undefined | { delay?: number | undefined, name?: string | undefined } { + return this._getOption('hideEvent'); + } + set hideEvent(value: string | undefined | { delay?: number | undefined, name?: string | undefined }) { + this._setOption('hideEvent', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): ((e: HiddenEvent) => void) { + return this._getOption('onHidden'); + } + set onHidden(value: ((e: HiddenEvent) => void)) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): ((e: HidingEvent) => void) { + return this._getOption('onHiding'); + } + set onHiding(value: ((e: HidingEvent) => void)) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onShowing(): ((e: ShowingEvent) => void) { + return this._getOption('onShowing'); + } + set onShowing(value: ((e: ShowingEvent) => void)) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): ((e: ShownEvent) => void) { + return this._getOption('onShown'); + } + set onShown(value: ((e: ShownEvent) => void)) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): ((e: TitleRenderedEvent) => void) { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): Position | PositionConfig { + return this._getOption('position'); + } + set position(value: Position | PositionConfig) { + this._setOption('position', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showEvent(): string | undefined | { delay?: number | undefined, name?: string | undefined } { + return this._getOption('showEvent'); + } + set showEvent(value: string | undefined | { delay?: number | undefined, name?: string | undefined }) { + this._setOption('showEvent', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get target(): UserDefinedElement | string | undefined { + return this._getOption('target'); + } + set target(value: UserDefinedElement | string | undefined) { + this._setOption('target', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiLookupToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupDropDownOptionsComponent + ], + exports: [ + DxoLookupDropDownOptionsComponent + ], +}) +export class DxoLookupDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/from.ts b/packages/devextreme-angular/src/ui/lookup/nested/from.ts new file mode 100644 index 000000000000..36e9627ed2df --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupFromComponent + ], + exports: [ + DxoLookupFromComponent + ], +}) +export class DxoLookupFromModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/hide-event.ts b/packages/devextreme-angular/src/ui/lookup/nested/hide-event.ts new file mode 100644 index 000000000000..46f0f5155994 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/hide-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-hide-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupHideEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'hideEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupHideEventComponent + ], + exports: [ + DxoLookupHideEventComponent + ], +}) +export class DxoLookupHideEventModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/hide.ts b/packages/devextreme-angular/src/ui/lookup/nested/hide.ts new file mode 100644 index 000000000000..e535a3684f22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupHideComponent + ], + exports: [ + DxoLookupHideComponent + ], +}) +export class DxoLookupHideModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/index.ts b/packages/devextreme-angular/src/ui/lookup/nested/index.ts new file mode 100644 index 000000000000..c843434868bb --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/index.ts @@ -0,0 +1,17 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide-event'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show-event'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/lookup/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/lookup/nested/item-dxi.ts new file mode 100644 index 000000000000..0f3f6e20fcdf --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-lookup-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiLookupItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiLookupItemComponent + ], + exports: [ + DxiLookupItemComponent + ], +}) +export class DxiLookupItemModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/my.ts b/packages/devextreme-angular/src/ui/lookup/nested/my.ts new file mode 100644 index 000000000000..0ff0bb111511 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupMyComponent + ], + exports: [ + DxoLookupMyComponent + ], +}) +export class DxoLookupMyModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/ng-package.json b/packages/devextreme-angular/src/ui/lookup/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/lookup/nested/offset.ts b/packages/devextreme-angular/src/ui/lookup/nested/offset.ts new file mode 100644 index 000000000000..7793e28bb2f9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupOffsetComponent + ], + exports: [ + DxoLookupOffsetComponent + ], +}) +export class DxoLookupOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/position.ts b/packages/devextreme-angular/src/ui/lookup/nested/position.ts new file mode 100644 index 000000000000..ee956f6b650a --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupPositionComponent + ], + exports: [ + DxoLookupPositionComponent + ], +}) +export class DxoLookupPositionModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/show-event.ts b/packages/devextreme-angular/src/ui/lookup/nested/show-event.ts new file mode 100644 index 000000000000..776069586c7d --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/show-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-show-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupShowEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupShowEventComponent + ], + exports: [ + DxoLookupShowEventComponent + ], +}) +export class DxoLookupShowEventModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/show.ts b/packages/devextreme-angular/src/ui/lookup/nested/show.ts new file mode 100644 index 000000000000..7d18cfac96d6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupShowComponent + ], + exports: [ + DxoLookupShowComponent + ], +}) +export class DxoLookupShowModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/to.ts b/packages/devextreme-angular/src/ui/lookup/nested/to.ts new file mode 100644 index 000000000000..e5e04fce98ec --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-lookup-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoLookupToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoLookupToComponent + ], + exports: [ + DxoLookupToComponent + ], +}) +export class DxoLookupToModule { } diff --git a/packages/devextreme-angular/src/ui/lookup/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/lookup/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..95d9fe57d0e9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/lookup/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-lookup-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiLookupToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiLookupToolbarItemComponent + ], + exports: [ + DxiLookupToolbarItemComponent + ], +}) +export class DxiLookupToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/map/index.ts b/packages/devextreme-angular/src/ui/map/index.ts index 759c4d406144..60a023f36056 100644 --- a/packages/devextreme-angular/src/ui/map/index.ts +++ b/packages/devextreme-angular/src/ui/map/index.ts @@ -44,10 +44,20 @@ import { DxiLocationModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxiRouteModule } from 'devextreme-angular/ui/nested'; +import { DxoMapApiKeyModule } from 'devextreme-angular/ui/map/nested'; +import { DxiMapCenterModule } from 'devextreme-angular/ui/map/nested'; +import { DxiMapMarkerModule } from 'devextreme-angular/ui/map/nested'; +import { DxiMapLocationModule } from 'devextreme-angular/ui/map/nested'; +import { DxoMapTooltipModule } from 'devextreme-angular/ui/map/nested'; +import { DxiMapRouteModule } from 'devextreme-angular/ui/map/nested'; + import { DxiCenterComponent } from 'devextreme-angular/ui/nested'; import { DxiMarkerComponent } from 'devextreme-angular/ui/nested'; import { DxiRouteComponent } from 'devextreme-angular/ui/nested'; +import { DxiMapCenterComponent } from 'devextreme-angular/ui/map/nested'; +import { DxiMapMarkerComponent } from 'devextreme-angular/ui/map/nested'; +import { DxiMapRouteComponent } from 'devextreme-angular/ui/map/nested'; /** @@ -581,31 +591,65 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges, - @ContentChildren(DxiCenterComponent) - get centerChildren(): QueryList { + @ContentChildren(DxiMapCenterComponent) + get centerChildren(): QueryList { return this._getOption('center'); } set centerChildren(value) { + this.setContentChildren('center', value, 'DxiMapCenterComponent'); this.setChildren('center', value); } - @ContentChildren(DxiMarkerComponent) - get markersChildren(): QueryList { + @ContentChildren(DxiMapMarkerComponent) + get markersChildren(): QueryList { return this._getOption('markers'); } set markersChildren(value) { + this.setContentChildren('markers', value, 'DxiMapMarkerComponent'); this.setChildren('markers', value); } - @ContentChildren(DxiRouteComponent) - get routesChildren(): QueryList { + @ContentChildren(DxiMapRouteComponent) + get routesChildren(): QueryList { return this._getOption('routes'); } set routesChildren(value) { + this.setContentChildren('routes', value, 'DxiMapRouteComponent'); this.setChildren('routes', value); } + @ContentChildren(DxiCenterComponent) + get centerLegacyChildren(): QueryList { + return this._getOption('center'); + } + set centerLegacyChildren(value) { + if (this.checkContentChildren('center', value, 'DxiCenterComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiMarkerComponent) + get markersLegacyChildren(): QueryList { + return this._getOption('markers'); + } + set markersLegacyChildren(value) { + if (this.checkContentChildren('markers', value, 'DxiMarkerComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiRouteComponent) + get routesLegacyChildren(): QueryList { + return this._getOption('routes'); + } + set routesLegacyChildren(value) { + if (this.checkContentChildren('routes', value, 'DxiRouteComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -705,6 +749,12 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges, DxiLocationModule, DxoTooltipModule, DxiRouteModule, + DxoMapApiKeyModule, + DxiMapCenterModule, + DxiMapMarkerModule, + DxiMapLocationModule, + DxoMapTooltipModule, + DxiMapRouteModule, DxIntegrationModule, DxTemplateModule ], @@ -719,6 +769,12 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges, DxiLocationModule, DxoTooltipModule, DxiRouteModule, + DxoMapApiKeyModule, + DxiMapCenterModule, + DxiMapMarkerModule, + DxiMapLocationModule, + DxoMapTooltipModule, + DxiMapRouteModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/map/nested/api-key.ts b/packages/devextreme-angular/src/ui/map/nested/api-key.ts new file mode 100644 index 000000000000..13761a4f7831 --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/api-key.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-map-api-key', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMapApiKeyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bing(): string { + return this._getOption('bing'); + } + set bing(value: string) { + this._setOption('bing', value); + } + + @Input() + get google(): string { + return this._getOption('google'); + } + set google(value: string) { + this._setOption('google', value); + } + + @Input() + get googleStatic(): string { + return this._getOption('googleStatic'); + } + set googleStatic(value: string) { + this._setOption('googleStatic', value); + } + + + protected get _optionPath() { + return 'apiKey'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMapApiKeyComponent + ], + exports: [ + DxoMapApiKeyComponent + ], +}) +export class DxoMapApiKeyModule { } diff --git a/packages/devextreme-angular/src/ui/map/nested/center-dxi.ts b/packages/devextreme-angular/src/ui/map/nested/center-dxi.ts new file mode 100644 index 000000000000..7b2e58a13dc8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/center-dxi.ts @@ -0,0 +1,74 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-map-center', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiMapCenterComponent extends CollectionNestedOption { + @Input() + get lat(): number { + return this._getOption('lat'); + } + set lat(value: number) { + this._setOption('lat', value); + } + + @Input() + get lng(): number { + return this._getOption('lng'); + } + set lng(value: number) { + this._setOption('lng', value); + } + + + protected get _optionPath() { + return 'center'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiMapCenterComponent + ], + exports: [ + DxiMapCenterComponent + ], +}) +export class DxiMapCenterModule { } diff --git a/packages/devextreme-angular/src/ui/map/nested/index.ts b/packages/devextreme-angular/src/ui/map/nested/index.ts new file mode 100644 index 000000000000..1628a1714b7b --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/index.ts @@ -0,0 +1,7 @@ +export * from './api-key'; +export * from './center-dxi'; +export * from './location-dxi'; +export * from './marker-dxi'; +export * from './route-dxi'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/map/nested/location-dxi.ts b/packages/devextreme-angular/src/ui/map/nested/location-dxi.ts new file mode 100644 index 000000000000..ac09f689be9b --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/location-dxi.ts @@ -0,0 +1,74 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-map-location', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiMapLocationComponent extends CollectionNestedOption { + @Input() + get lat(): number { + return this._getOption('lat'); + } + set lat(value: number) { + this._setOption('lat', value); + } + + @Input() + get lng(): number { + return this._getOption('lng'); + } + set lng(value: number) { + this._setOption('lng', value); + } + + + protected get _optionPath() { + return 'location'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiMapLocationComponent + ], + exports: [ + DxiMapLocationComponent + ], +}) +export class DxiMapLocationModule { } diff --git a/packages/devextreme-angular/src/ui/map/nested/marker-dxi.ts b/packages/devextreme-angular/src/ui/map/nested/marker-dxi.ts new file mode 100644 index 000000000000..c801306c57af --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/marker-dxi.ts @@ -0,0 +1,102 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiMapLocationComponent } from './location-dxi'; + + +@Component({ + selector: 'dxi-map-marker', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiMapMarkerComponent extends CollectionNestedOption { + @Input() + get iconSrc(): string { + return this._getOption('iconSrc'); + } + set iconSrc(value: string) { + this._setOption('iconSrc', value); + } + + @Input() + get location(): string | Array { + return this._getOption('location'); + } + set location(value: string | Array) { + this._setOption('location', value); + } + + @Input() + get onClick(): Function { + return this._getOption('onClick'); + } + set onClick(value: Function) { + this._setOption('onClick', value); + } + + @Input() + get tooltip(): string | { isShown?: boolean, text?: string } { + return this._getOption('tooltip'); + } + set tooltip(value: string | { isShown?: boolean, text?: string }) { + this._setOption('tooltip', value); + } + + + protected get _optionPath() { + return 'markers'; + } + + + @ContentChildren(forwardRef(() => DxiMapLocationComponent)) + get locationChildren(): QueryList { + return this._getOption('location'); + } + set locationChildren(value) { + this.setChildren('location', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiMapMarkerComponent + ], + exports: [ + DxiMapMarkerComponent + ], +}) +export class DxiMapMarkerModule { } diff --git a/packages/devextreme-angular/src/ui/map/nested/ng-package.json b/packages/devextreme-angular/src/ui/map/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/map/nested/route-dxi.ts b/packages/devextreme-angular/src/ui/map/nested/route-dxi.ts new file mode 100644 index 000000000000..acb110a4c704 --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/route-dxi.ts @@ -0,0 +1,111 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { RouteMode } from 'devextreme/ui/map'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiMapLocationComponent } from './location-dxi'; + + +@Component({ + selector: 'dxi-map-route', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiMapRouteComponent extends CollectionNestedOption { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get locations(): Array { + return this._getOption('locations'); + } + set locations(value: Array) { + this._setOption('locations', value); + } + + @Input() + get mode(): RouteMode { + return this._getOption('mode'); + } + set mode(value: RouteMode) { + this._setOption('mode', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'routes'; + } + + + @ContentChildren(forwardRef(() => DxiMapLocationComponent)) + get locationsChildren(): QueryList { + return this._getOption('locations'); + } + set locationsChildren(value) { + this.setChildren('locations', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiMapRouteComponent + ], + exports: [ + DxiMapRouteComponent + ], +}) +export class DxiMapRouteModule { } diff --git a/packages/devextreme-angular/src/ui/map/nested/tooltip.ts b/packages/devextreme-angular/src/ui/map/nested/tooltip.ts new file mode 100644 index 000000000000..e0b386c78d7c --- /dev/null +++ b/packages/devextreme-angular/src/ui/map/nested/tooltip.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-map-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMapTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get isShown(): boolean { + return this._getOption('isShown'); + } + set isShown(value: boolean) { + this._setOption('isShown', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMapTooltipComponent + ], + exports: [ + DxoMapTooltipComponent + ], +}) +export class DxoMapTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/menu/index.ts b/packages/devextreme-angular/src/ui/menu/index.ts index c255d2cf3c6f..356e00453120 100644 --- a/packages/devextreme-angular/src/ui/menu/index.ts +++ b/packages/devextreme-angular/src/ui/menu/index.ts @@ -58,8 +58,25 @@ import { DxoShowFirstSubmenuModeModule } from 'devextreme-angular/ui/nested'; import { DxoDelayModule } from 'devextreme-angular/ui/nested'; import { DxoShowSubmenuModeModule } from 'devextreme-angular/ui/nested'; +import { DxoMenuAnimationModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuHideModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuFromModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuPositionModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuAtModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuBoundaryOffsetModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuCollisionModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuMyModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuOffsetModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuToModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuShowModule } from 'devextreme-angular/ui/menu/nested'; +import { DxiMenuItemModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuShowFirstSubmenuModeModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuDelayModule } from 'devextreme-angular/ui/menu/nested'; +import { DxoMenuShowSubmenuModeModule } from 'devextreme-angular/ui/menu/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiMenuItemComponent } from 'devextreme-angular/ui/menu/nested'; /** @@ -777,15 +794,27 @@ export class DxMenuComponent extends DxComponent implements OnDestro - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiMenuItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiMenuItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -903,6 +932,21 @@ export class DxMenuComponent extends DxComponent implements OnDestro DxoShowFirstSubmenuModeModule, DxoDelayModule, DxoShowSubmenuModeModule, + DxoMenuAnimationModule, + DxoMenuHideModule, + DxoMenuFromModule, + DxoMenuPositionModule, + DxoMenuAtModule, + DxoMenuBoundaryOffsetModule, + DxoMenuCollisionModule, + DxoMenuMyModule, + DxoMenuOffsetModule, + DxoMenuToModule, + DxoMenuShowModule, + DxiMenuItemModule, + DxoMenuShowFirstSubmenuModeModule, + DxoMenuDelayModule, + DxoMenuShowSubmenuModeModule, DxIntegrationModule, DxTemplateModule ], @@ -926,6 +970,21 @@ export class DxMenuComponent extends DxComponent implements OnDestro DxoShowFirstSubmenuModeModule, DxoDelayModule, DxoShowSubmenuModeModule, + DxoMenuAnimationModule, + DxoMenuHideModule, + DxoMenuFromModule, + DxoMenuPositionModule, + DxoMenuAtModule, + DxoMenuBoundaryOffsetModule, + DxoMenuCollisionModule, + DxoMenuMyModule, + DxoMenuOffsetModule, + DxoMenuToModule, + DxoMenuShowModule, + DxiMenuItemModule, + DxoMenuShowFirstSubmenuModeModule, + DxoMenuDelayModule, + DxoMenuShowSubmenuModeModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/menu/nested/animation.ts b/packages/devextreme-angular/src/ui/menu/nested/animation.ts new file mode 100644 index 000000000000..cd7e878fc913 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuAnimationComponent + ], + exports: [ + DxoMenuAnimationComponent + ], +}) +export class DxoMenuAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/at.ts b/packages/devextreme-angular/src/ui/menu/nested/at.ts new file mode 100644 index 000000000000..f1571741fb9f --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuAtComponent + ], + exports: [ + DxoMenuAtComponent + ], +}) +export class DxoMenuAtModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/menu/nested/boundary-offset.ts new file mode 100644 index 000000000000..f9f788e1d5a6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuBoundaryOffsetComponent + ], + exports: [ + DxoMenuBoundaryOffsetComponent + ], +}) +export class DxoMenuBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/collision.ts b/packages/devextreme-angular/src/ui/menu/nested/collision.ts new file mode 100644 index 000000000000..f11ee240aa26 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuCollisionComponent + ], + exports: [ + DxoMenuCollisionComponent + ], +}) +export class DxoMenuCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/delay.ts b/packages/devextreme-angular/src/ui/menu/nested/delay.ts new file mode 100644 index 000000000000..033228c7e20d --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/delay.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-delay', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuDelayComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): number { + return this._getOption('hide'); + } + set hide(value: number) { + this._setOption('hide', value); + } + + @Input() + get show(): number { + return this._getOption('show'); + } + set show(value: number) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'delay'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuDelayComponent + ], + exports: [ + DxoMenuDelayComponent + ], +}) +export class DxoMenuDelayModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/from.ts b/packages/devextreme-angular/src/ui/menu/nested/from.ts new file mode 100644 index 000000000000..f173416ca0de --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuFromComponent + ], + exports: [ + DxoMenuFromComponent + ], +}) +export class DxoMenuFromModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/hide.ts b/packages/devextreme-angular/src/ui/menu/nested/hide.ts new file mode 100644 index 000000000000..c20d7cf19ac5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuHideComponent + ], + exports: [ + DxoMenuHideComponent + ], +}) +export class DxoMenuHideModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/index.ts b/packages/devextreme-angular/src/ui/menu/nested/index.ts new file mode 100644 index 000000000000..828f068f7d58 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/index.ts @@ -0,0 +1,16 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './delay'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show-first-submenu-mode'; +export * from './show-submenu-mode'; +export * from './show'; +export * from './to'; + diff --git a/packages/devextreme-angular/src/ui/menu/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/menu/nested/item-dxi.ts new file mode 100644 index 000000000000..88c1421e1470 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/item-dxi.ts @@ -0,0 +1,166 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxMenuItem } from 'devextreme/ui/menu'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-menu-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiMenuItemComponent extends CollectionNestedOption { + @Input() + get beginGroup(): boolean { + return this._getOption('beginGroup'); + } + set beginGroup(value: boolean) { + this._setOption('beginGroup', value); + } + + @Input() + get closeMenuOnClick(): boolean { + return this._getOption('closeMenuOnClick'); + } + set closeMenuOnClick(value: boolean) { + this._setOption('closeMenuOnClick', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get linkAttr(): any { + return this._getOption('linkAttr'); + } + set linkAttr(value: any) { + this._setOption('linkAttr', value); + } + + @Input() + get selectable(): boolean { + return this._getOption('selectable'); + } + set selectable(value: boolean) { + this._setOption('selectable', value); + } + + @Input() + get selected(): boolean { + return this._getOption('selected'); + } + set selected(value: boolean) { + this._setOption('selected', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get url(): string { + return this._getOption('url'); + } + set url(value: string) { + this._setOption('url', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiMenuItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiMenuItemComponent + ], + exports: [ + DxiMenuItemComponent + ], +}) +export class DxiMenuItemModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/my.ts b/packages/devextreme-angular/src/ui/menu/nested/my.ts new file mode 100644 index 000000000000..e3847ab24f70 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuMyComponent + ], + exports: [ + DxoMenuMyComponent + ], +}) +export class DxoMenuMyModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/ng-package.json b/packages/devextreme-angular/src/ui/menu/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/menu/nested/offset.ts b/packages/devextreme-angular/src/ui/menu/nested/offset.ts new file mode 100644 index 000000000000..f54c2d5ce00a --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuOffsetComponent + ], + exports: [ + DxoMenuOffsetComponent + ], +}) +export class DxoMenuOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/position.ts b/packages/devextreme-angular/src/ui/menu/nested/position.ts new file mode 100644 index 000000000000..de929449e713 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuPositionComponent + ], + exports: [ + DxoMenuPositionComponent + ], +}) +export class DxoMenuPositionModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/show-first-submenu-mode.ts b/packages/devextreme-angular/src/ui/menu/nested/show-first-submenu-mode.ts new file mode 100644 index 000000000000..69a9e7231d62 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/show-first-submenu-mode.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SubmenuShowMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-show-first-submenu-mode', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuShowFirstSubmenuModeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | { hide?: number, show?: number } { + return this._getOption('delay'); + } + set delay(value: number | { hide?: number, show?: number }) { + this._setOption('delay', value); + } + + @Input() + get name(): SubmenuShowMode { + return this._getOption('name'); + } + set name(value: SubmenuShowMode) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showFirstSubmenuMode'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuShowFirstSubmenuModeComponent + ], + exports: [ + DxoMenuShowFirstSubmenuModeComponent + ], +}) +export class DxoMenuShowFirstSubmenuModeModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/show-submenu-mode.ts b/packages/devextreme-angular/src/ui/menu/nested/show-submenu-mode.ts new file mode 100644 index 000000000000..258bd1620f4c --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/show-submenu-mode.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SubmenuShowMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-show-submenu-mode', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuShowSubmenuModeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | { hide?: number, show?: number } { + return this._getOption('delay'); + } + set delay(value: number | { hide?: number, show?: number }) { + this._setOption('delay', value); + } + + @Input() + get name(): SubmenuShowMode { + return this._getOption('name'); + } + set name(value: SubmenuShowMode) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showSubmenuMode'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuShowSubmenuModeComponent + ], + exports: [ + DxoMenuShowSubmenuModeComponent + ], +}) +export class DxoMenuShowSubmenuModeModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/show.ts b/packages/devextreme-angular/src/ui/menu/nested/show.ts new file mode 100644 index 000000000000..d6c31f1c67f3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuShowComponent + ], + exports: [ + DxoMenuShowComponent + ], +}) +export class DxoMenuShowModule { } diff --git a/packages/devextreme-angular/src/ui/menu/nested/to.ts b/packages/devextreme-angular/src/ui/menu/nested/to.ts new file mode 100644 index 000000000000..37871e39905d --- /dev/null +++ b/packages/devextreme-angular/src/ui/menu/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-menu-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoMenuToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoMenuToComponent + ], + exports: [ + DxoMenuToComponent + ], +}) +export class DxoMenuToModule { } diff --git a/packages/devextreme-angular/src/ui/multi-view/index.ts b/packages/devextreme-angular/src/ui/multi-view/index.ts index 8086243e2adb..39fffbe8bf88 100644 --- a/packages/devextreme-angular/src/ui/multi-view/index.ts +++ b/packages/devextreme-angular/src/ui/multi-view/index.ts @@ -42,8 +42,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiMultiViewItemModule } from 'devextreme-angular/ui/multi-view/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiMultiViewItemComponent } from 'devextreme-angular/ui/multi-view/nested'; /** @@ -597,15 +600,27 @@ export class DxMultiViewComponent extends DxComponent i - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiMultiViewItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiMultiViewItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -699,6 +714,7 @@ export class DxMultiViewComponent extends DxComponent i @NgModule({ imports: [ DxiItemModule, + DxiMultiViewItemModule, DxIntegrationModule, DxTemplateModule ], @@ -708,6 +724,7 @@ export class DxMultiViewComponent extends DxComponent i exports: [ DxMultiViewComponent, DxiItemModule, + DxiMultiViewItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/multi-view/nested/index.ts b/packages/devextreme-angular/src/ui/multi-view/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/multi-view/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/multi-view/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/multi-view/nested/item-dxi.ts new file mode 100644 index 000000000000..fd8f745559d7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/multi-view/nested/item-dxi.ts @@ -0,0 +1,111 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-multi-view-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiMultiViewItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiMultiViewItemComponent + ], + exports: [ + DxiMultiViewItemComponent + ], +}) +export class DxiMultiViewItemModule { } diff --git a/packages/devextreme-angular/src/ui/multi-view/nested/ng-package.json b/packages/devextreme-angular/src/ui/multi-view/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/multi-view/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/nested/label.ts b/packages/devextreme-angular/src/ui/nested/label.ts index aecc0f04fcbc..45699d9be495 100644 --- a/packages/devextreme-angular/src/ui/nested/label.ts +++ b/packages/devextreme-angular/src/ui/nested/label.ts @@ -7,11 +7,15 @@ import { OnDestroy, NgModule, Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, SkipSelf, Input } from '@angular/core'; - +import { DOCUMENT } from '@angular/common'; import { HorizontalAlignment, HorizontalEdge, Position, VerticalAlignment, VerticalEdge } from 'devextreme/common'; @@ -23,17 +27,22 @@ import { CircularGaugeLabelOverlap } from 'devextreme/viz/circular_gauge'; import { NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost } from 'devextreme-angular/core'; import { NestedOption } from 'devextreme-angular/core'; @Component({ selector: 'dxo-label', - template: '', - styles: [''], - providers: [NestedOptionHost] + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] }) -export class DxoLabelComponent extends NestedOption implements OnDestroy, OnInit { +export class DxoLabelComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { @Input() get connectorColor(): string | undefined { return this._getOption('connectorColor'); @@ -361,10 +370,22 @@ export class DxoLabelComponent extends NestedOption implements OnDestroy, OnInit constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, - @Host() optionHost: NestedOptionHost) { + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { super(); parentOptionHost.setNestedOption(this); optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); } diff --git a/packages/devextreme-angular/src/ui/number-box/index.ts b/packages/devextreme-angular/src/ui/number-box/index.ts index 5312798f0564..14f200f02357 100644 --- a/packages/devextreme-angular/src/ui/number-box/index.ts +++ b/packages/devextreme-angular/src/ui/number-box/index.ts @@ -49,8 +49,13 @@ import { DxiButtonModule } from 'devextreme-angular/ui/nested'; import { DxoOptionsModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; +import { DxiNumberBoxButtonModule } from 'devextreme-angular/ui/number-box/nested'; +import { DxoNumberBoxOptionsModule } from 'devextreme-angular/ui/number-box/nested'; +import { DxoNumberBoxFormatModule } from 'devextreme-angular/ui/number-box/nested'; + import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; +import { DxiNumberBoxButtonComponent } from 'devextreme-angular/ui/number-box/nested'; @@ -989,15 +994,27 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiNumberBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiNumberBoxButtonComponent'); this.setChildren('buttons', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1136,6 +1153,9 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont DxiButtonModule, DxoOptionsModule, DxoFormatModule, + DxiNumberBoxButtonModule, + DxoNumberBoxOptionsModule, + DxoNumberBoxFormatModule, DxIntegrationModule, DxTemplateModule ], @@ -1147,6 +1167,9 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont DxiButtonModule, DxoOptionsModule, DxoFormatModule, + DxiNumberBoxButtonModule, + DxoNumberBoxOptionsModule, + DxoNumberBoxFormatModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/number-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/number-box/nested/button-dxi.ts new file mode 100644 index 000000000000..f3f27d574c49 --- /dev/null +++ b/packages/devextreme-angular/src/ui/number-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-number-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiNumberBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiNumberBoxButtonComponent + ], + exports: [ + DxiNumberBoxButtonComponent + ], +}) +export class DxiNumberBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/number-box/nested/format.ts b/packages/devextreme-angular/src/ui/number-box/nested/format.ts new file mode 100644 index 000000000000..ab4a41362a17 --- /dev/null +++ b/packages/devextreme-angular/src/ui/number-box/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-number-box-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoNumberBoxFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoNumberBoxFormatComponent + ], + exports: [ + DxoNumberBoxFormatComponent + ], +}) +export class DxoNumberBoxFormatModule { } diff --git a/packages/devextreme-angular/src/ui/number-box/nested/index.ts b/packages/devextreme-angular/src/ui/number-box/nested/index.ts new file mode 100644 index 000000000000..950844e1e76d --- /dev/null +++ b/packages/devextreme-angular/src/ui/number-box/nested/index.ts @@ -0,0 +1,4 @@ +export * from './button-dxi'; +export * from './format'; +export * from './options'; + diff --git a/packages/devextreme-angular/src/ui/number-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/number-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/number-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/number-box/nested/options.ts b/packages/devextreme-angular/src/ui/number-box/nested/options.ts new file mode 100644 index 000000000000..d3d2e14ed914 --- /dev/null +++ b/packages/devextreme-angular/src/ui/number-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-number-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoNumberBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoNumberBoxOptionsComponent + ], + exports: [ + DxoNumberBoxOptionsComponent + ], +}) +export class DxoNumberBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/index.ts b/packages/devextreme-angular/src/ui/pie-chart/index.ts index fdc3f755ef88..4683e4668a66 100644 --- a/packages/devextreme-angular/src/ui/pie-chart/index.ts +++ b/packages/devextreme-angular/src/ui/pie-chart/index.ts @@ -72,9 +72,40 @@ import { DxoSeriesTemplateModule } from 'devextreme-angular/ui/nested'; import { DxoSizeModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; +import { DxoPieChartAdaptiveLayoutModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartAnimationModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxiPieChartAnnotationModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartBorderModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartFontModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartImageModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartShadowModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartCommonAnnotationSettingsModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartCommonSeriesSettingsModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartColorModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartHoverStyleModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartHatchingModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartLabelModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartArgumentFormatModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartConnectorModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartFormatModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartSelectionStyleModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartSmallValuesGroupingModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartExportModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartLegendModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartMarginModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartTitleModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartLoadingIndicatorModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxiPieChartSeriesModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartSeriesTemplateModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartSizeModule } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxoPieChartTooltipModule } from 'devextreme-angular/ui/pie-chart/nested'; + import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested'; import { DxiSeriesComponent } from 'devextreme-angular/ui/nested'; +import { DxiPieChartAnnotationComponent } from 'devextreme-angular/ui/pie-chart/nested'; +import { DxiPieChartSeriesComponent } from 'devextreme-angular/ui/pie-chart/nested'; /** @@ -937,23 +968,46 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha - @ContentChildren(DxiAnnotationComponent) - get annotationsChildren(): QueryList { + @ContentChildren(DxiPieChartAnnotationComponent) + get annotationsChildren(): QueryList { return this._getOption('annotations'); } set annotationsChildren(value) { + this.setContentChildren('annotations', value, 'DxiPieChartAnnotationComponent'); this.setChildren('annotations', value); } - @ContentChildren(DxiSeriesComponent) - get seriesChildren(): QueryList { + @ContentChildren(DxiPieChartSeriesComponent) + get seriesChildren(): QueryList { return this._getOption('series'); } set seriesChildren(value) { + this.setContentChildren('series', value, 'DxiPieChartSeriesComponent'); this.setChildren('series', value); } + @ContentChildren(DxiAnnotationComponent) + get annotationsLegacyChildren(): QueryList { + return this._getOption('annotations'); + } + set annotationsLegacyChildren(value) { + if (this.checkContentChildren('annotations', value, 'DxiAnnotationComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiSeriesComponent) + get seriesLegacyChildren(): QueryList { + return this._getOption('series'); + } + set seriesLegacyChildren(value) { + if (this.checkContentChildren('series', value, 'DxiSeriesComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1097,6 +1151,34 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha DxoSeriesTemplateModule, DxoSizeModule, DxoTooltipModule, + DxoPieChartAdaptiveLayoutModule, + DxoPieChartAnimationModule, + DxiPieChartAnnotationModule, + DxoPieChartBorderModule, + DxoPieChartFontModule, + DxoPieChartImageModule, + DxoPieChartShadowModule, + DxoPieChartCommonAnnotationSettingsModule, + DxoPieChartCommonSeriesSettingsModule, + DxoPieChartColorModule, + DxoPieChartHoverStyleModule, + DxoPieChartHatchingModule, + DxoPieChartLabelModule, + DxoPieChartArgumentFormatModule, + DxoPieChartConnectorModule, + DxoPieChartFormatModule, + DxoPieChartSelectionStyleModule, + DxoPieChartSmallValuesGroupingModule, + DxoPieChartExportModule, + DxoPieChartLegendModule, + DxoPieChartMarginModule, + DxoPieChartTitleModule, + DxoPieChartSubtitleModule, + DxoPieChartLoadingIndicatorModule, + DxiPieChartSeriesModule, + DxoPieChartSeriesTemplateModule, + DxoPieChartSizeModule, + DxoPieChartTooltipModule, DxIntegrationModule, DxTemplateModule ], @@ -1133,6 +1215,34 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha DxoSeriesTemplateModule, DxoSizeModule, DxoTooltipModule, + DxoPieChartAdaptiveLayoutModule, + DxoPieChartAnimationModule, + DxiPieChartAnnotationModule, + DxoPieChartBorderModule, + DxoPieChartFontModule, + DxoPieChartImageModule, + DxoPieChartShadowModule, + DxoPieChartCommonAnnotationSettingsModule, + DxoPieChartCommonSeriesSettingsModule, + DxoPieChartColorModule, + DxoPieChartHoverStyleModule, + DxoPieChartHatchingModule, + DxoPieChartLabelModule, + DxoPieChartArgumentFormatModule, + DxoPieChartConnectorModule, + DxoPieChartFormatModule, + DxoPieChartSelectionStyleModule, + DxoPieChartSmallValuesGroupingModule, + DxoPieChartExportModule, + DxoPieChartLegendModule, + DxoPieChartMarginModule, + DxoPieChartTitleModule, + DxoPieChartSubtitleModule, + DxoPieChartLoadingIndicatorModule, + DxiPieChartSeriesModule, + DxoPieChartSeriesTemplateModule, + DxoPieChartSizeModule, + DxoPieChartTooltipModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/adaptive-layout.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/adaptive-layout.ts new file mode 100644 index 000000000000..28fc911b6cb9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/adaptive-layout.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-adaptive-layout', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartAdaptiveLayoutComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get keepLabels(): boolean { + return this._getOption('keepLabels'); + } + set keepLabels(value: boolean) { + this._setOption('keepLabels', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'adaptiveLayout'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartAdaptiveLayoutComponent + ], + exports: [ + DxoPieChartAdaptiveLayoutComponent + ], +}) +export class DxoPieChartAdaptiveLayoutModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/animation.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/animation.ts new file mode 100644 index 000000000000..928269ea6c22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/animation.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationEaseMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): AnimationEaseMode { + return this._getOption('easing'); + } + set easing(value: AnimationEaseMode) { + this._setOption('easing', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get maxPointCountSupported(): number { + return this._getOption('maxPointCountSupported'); + } + set maxPointCountSupported(value: number) { + this._setOption('maxPointCountSupported', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartAnimationComponent + ], + exports: [ + DxoPieChartAnimationComponent + ], +}) +export class DxoPieChartAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/annotation-dxi.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/annotation-dxi.ts new file mode 100644 index 000000000000..00df671d72ee --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/annotation-dxi.ts @@ -0,0 +1,308 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { PieChartAnnotationLocation } from 'devextreme/viz/pie_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-pie-chart-annotation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPieChartAnnotationComponent extends CollectionNestedOption { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get argument(): Date | number | string | undefined { + return this._getOption('argument'); + } + set argument(value: Date | number | string | undefined) { + this._setOption('argument', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get location(): PieChartAnnotationLocation { + return this._getOption('location'); + } + set location(value: PieChartAnnotationLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get series(): string | undefined { + return this._getOption('series'); + } + set series(value: string | undefined) { + this._setOption('series', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'annotations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPieChartAnnotationComponent + ], + exports: [ + DxiPieChartAnnotationComponent + ], +}) +export class DxiPieChartAnnotationModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/argument-format.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/argument-format.ts new file mode 100644 index 000000000000..b30941c7aac2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/argument-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-argument-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartArgumentFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'argumentFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartArgumentFormatComponent + ], + exports: [ + DxoPieChartArgumentFormatComponent + ], +}) +export class DxoPieChartArgumentFormatModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/border.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/border.ts new file mode 100644 index 000000000000..ccc99add3b22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/border.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle | undefined { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle | undefined) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartBorderComponent + ], + exports: [ + DxoPieChartBorderComponent + ], +}) +export class DxoPieChartBorderModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/color.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/color.ts new file mode 100644 index 000000000000..e9898a46b3ae --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'color'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartColorComponent + ], + exports: [ + DxoPieChartColorComponent + ], +}) +export class DxoPieChartColorModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/common-annotation-settings.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/common-annotation-settings.ts new file mode 100644 index 000000000000..381292828680 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/common-annotation-settings.ts @@ -0,0 +1,306 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { PieChartAnnotationLocation } from 'devextreme/viz/pie_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-common-annotation-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartCommonAnnotationSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get argument(): Date | number | string | undefined { + return this._getOption('argument'); + } + set argument(value: Date | number | string | undefined) { + this._setOption('argument', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get location(): PieChartAnnotationLocation { + return this._getOption('location'); + } + set location(value: PieChartAnnotationLocation) { + this._setOption('location', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get series(): string | undefined { + return this._getOption('series'); + } + set series(value: string | undefined) { + this._setOption('series', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'commonAnnotationSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartCommonAnnotationSettingsComponent + ], + exports: [ + DxoPieChartCommonAnnotationSettingsComponent + ], +}) +export class DxoPieChartCommonAnnotationSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/common-series-settings.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/common-series-settings.ts new file mode 100644 index 000000000000..877f876d907a --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/common-series-settings.ts @@ -0,0 +1,179 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, ChartsDataType, DashStyle, Font, HatchDirection, LabelPosition, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PieChartSeriesInteractionMode, SmallValuesGroupingMode } from 'devextreme/viz/pie_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-common-series-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartCommonSeriesSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get argumentType(): ChartsDataType | undefined { + return this._getOption('argumentType'); + } + set argumentType(value: ChartsDataType | undefined) { + this._setOption('argumentType', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hoverMode(): PieChartSeriesInteractionMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: PieChartSeriesInteractionMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }) { + this._setOption('hoverStyle', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }) { + this._setOption('label', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minSegmentSize(): number | undefined { + return this._getOption('minSegmentSize'); + } + set minSegmentSize(value: number | undefined) { + this._setOption('minSegmentSize', value); + } + + @Input() + get selectionMode(): PieChartSeriesInteractionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: PieChartSeriesInteractionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }) { + this._setOption('selectionStyle', value); + } + + @Input() + get smallValuesGrouping(): { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined } { + return this._getOption('smallValuesGrouping'); + } + set smallValuesGrouping(value: { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined }) { + this._setOption('smallValuesGrouping', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + + protected get _optionPath() { + return 'commonSeriesSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartCommonSeriesSettingsComponent + ], + exports: [ + DxoPieChartCommonSeriesSettingsComponent + ], +}) +export class DxoPieChartCommonSeriesSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/connector.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/connector.ts new file mode 100644 index 000000000000..958529a54780 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/connector.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-connector', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartConnectorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'connector'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartConnectorComponent + ], + exports: [ + DxoPieChartConnectorComponent + ], +}) +export class DxoPieChartConnectorModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/export.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/export.ts new file mode 100644 index 000000000000..2045d1b93f6c --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartExportComponent + ], + exports: [ + DxoPieChartExportComponent + ], +}) +export class DxoPieChartExportModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/font.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/font.ts new file mode 100644 index 000000000000..1dc6b8e3830c --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartFontComponent + ], + exports: [ + DxoPieChartFontComponent + ], +}) +export class DxoPieChartFontModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/format.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/format.ts new file mode 100644 index 000000000000..ee3470b2cead --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartFormatComponent + ], + exports: [ + DxoPieChartFormatComponent + ], +}) +export class DxoPieChartFormatModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/hatching.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/hatching.ts new file mode 100644 index 000000000000..f47dcb4ad70d --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/hatching.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-hatching', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartHatchingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get direction(): HatchDirection { + return this._getOption('direction'); + } + set direction(value: HatchDirection) { + this._setOption('direction', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get step(): number { + return this._getOption('step'); + } + set step(value: number) { + this._setOption('step', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'hatching'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartHatchingComponent + ], + exports: [ + DxoPieChartHatchingComponent + ], +}) +export class DxoPieChartHatchingModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/hover-style.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/hover-style.ts new file mode 100644 index 000000000000..e201fc4574f4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/hover-style.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartHoverStyleComponent + ], + exports: [ + DxoPieChartHoverStyleComponent + ], +}) +export class DxoPieChartHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/image.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/image.ts new file mode 100644 index 000000000000..c024c25fa117 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/image.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-image', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartImageComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get url(): string | undefined { + return this._getOption('url'); + } + set url(value: string | undefined) { + this._setOption('url', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'image'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartImageComponent + ], + exports: [ + DxoPieChartImageComponent + ], +}) +export class DxoPieChartImageModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/index.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/index.ts new file mode 100644 index 000000000000..bffa59507ffe --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/index.ts @@ -0,0 +1,29 @@ +export * from './adaptive-layout'; +export * from './animation'; +export * from './annotation-dxi'; +export * from './argument-format'; +export * from './border'; +export * from './color'; +export * from './common-annotation-settings'; +export * from './common-series-settings'; +export * from './connector'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './hatching'; +export * from './hover-style'; +export * from './image'; +export * from './label'; +export * from './legend'; +export * from './loading-indicator'; +export * from './margin'; +export * from './selection-style'; +export * from './series-dxi'; +export * from './series-template'; +export * from './shadow'; +export * from './size'; +export * from './small-values-grouping'; +export * from './subtitle'; +export * from './title'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/label.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/label.ts new file mode 100644 index 000000000000..2b848c2b5278 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/label.ts @@ -0,0 +1,178 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font, LabelPosition, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get connector(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('connector'); + } + set connector(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('connector', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get position(): LabelPosition { + return this._getOption('position'); + } + set position(value: LabelPosition) { + this._setOption('position', value); + } + + @Input() + get radialOffset(): number { + return this._getOption('radialOffset'); + } + set radialOffset(value: number) { + this._setOption('radialOffset', value); + } + + @Input() + get rotationAngle(): number { + return this._getOption('rotationAngle'); + } + set rotationAngle(value: number) { + this._setOption('rotationAngle', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartLabelComponent + ], + exports: [ + DxoPieChartLabelComponent + ], +}) +export class DxoPieChartLabelModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts new file mode 100644 index 000000000000..18c91af528e1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts @@ -0,0 +1,251 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Orientation, Position, VerticalEdge } from 'devextreme/common'; +import { DashStyle, Font } from 'devextreme/common/charts'; +import { PieChartLegendHoverMode } from 'devextreme/viz/pie_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-legend', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartLegendComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get columnCount(): number { + return this._getOption('columnCount'); + } + set columnCount(value: number) { + this._setOption('columnCount', value); + } + + @Input() + get columnItemSpacing(): number { + return this._getOption('columnItemSpacing'); + } + set columnItemSpacing(value: number) { + this._setOption('columnItemSpacing', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeItems(): Function { + return this._getOption('customizeItems'); + } + set customizeItems(value: Function) { + this._setOption('customizeItems', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get hoverMode(): PieChartLegendHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: PieChartLegendHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get itemsAlignment(): HorizontalAlignment | undefined { + return this._getOption('itemsAlignment'); + } + set itemsAlignment(value: HorizontalAlignment | undefined) { + this._setOption('itemsAlignment', value); + } + + @Input() + get itemTextPosition(): Position | undefined { + return this._getOption('itemTextPosition'); + } + set itemTextPosition(value: Position | undefined) { + this._setOption('itemTextPosition', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get markerSize(): number { + return this._getOption('markerSize'); + } + set markerSize(value: number) { + this._setOption('markerSize', value); + } + + @Input() + get markerTemplate(): any | undefined { + return this._getOption('markerTemplate'); + } + set markerTemplate(value: any | undefined) { + this._setOption('markerTemplate', value); + } + + @Input() + get orientation(): Orientation | undefined { + return this._getOption('orientation'); + } + set orientation(value: Orientation | undefined) { + this._setOption('orientation', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get rowCount(): number { + return this._getOption('rowCount'); + } + set rowCount(value: number) { + this._setOption('rowCount', value); + } + + @Input() + get rowItemSpacing(): number { + return this._getOption('rowItemSpacing'); + } + set rowItemSpacing(value: number) { + this._setOption('rowItemSpacing', value); + } + + @Input() + get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } { + return this._getOption('title'); + } + set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) { + this._setOption('title', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'legend'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartLegendComponent + ], + exports: [ + DxoPieChartLegendComponent + ], +}) +export class DxoPieChartLegendModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/loading-indicator.ts new file mode 100644 index 000000000000..184c940f65e9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartLoadingIndicatorComponent + ], + exports: [ + DxoPieChartLoadingIndicatorComponent + ], +}) +export class DxoPieChartLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/margin.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/margin.ts new file mode 100644 index 000000000000..49b66eb08d6d --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartMarginComponent + ], + exports: [ + DxoPieChartMarginComponent + ], +}) +export class DxoPieChartMarginModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/ng-package.json b/packages/devextreme-angular/src/ui/pie-chart/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/selection-style.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/selection-style.ts new file mode 100644 index 000000000000..661fa88a1941 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/selection-style.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-selection-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartSelectionStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + + protected get _optionPath() { + return 'selectionStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartSelectionStyleComponent + ], + exports: [ + DxoPieChartSelectionStyleComponent + ], +}) +export class DxoPieChartSelectionStyleModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/series-dxi.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/series-dxi.ts new file mode 100644 index 000000000000..943d1229015e --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/series-dxi.ts @@ -0,0 +1,189 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, ChartsDataType, DashStyle, Font, HatchDirection, LabelPosition, TextOverflow, WordWrap } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PieChartSeriesInteractionMode, SmallValuesGroupingMode } from 'devextreme/viz/pie_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-pie-chart-series', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPieChartSeriesComponent extends CollectionNestedOption { + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get argumentType(): ChartsDataType | undefined { + return this._getOption('argumentType'); + } + set argumentType(value: ChartsDataType | undefined) { + this._setOption('argumentType', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hoverMode(): PieChartSeriesInteractionMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: PieChartSeriesInteractionMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }) { + this._setOption('hoverStyle', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }) { + this._setOption('label', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minSegmentSize(): number | undefined { + return this._getOption('minSegmentSize'); + } + set minSegmentSize(value: number | undefined) { + this._setOption('minSegmentSize', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get selectionMode(): PieChartSeriesInteractionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: PieChartSeriesInteractionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }) { + this._setOption('selectionStyle', value); + } + + @Input() + get smallValuesGrouping(): { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined } { + return this._getOption('smallValuesGrouping'); + } + set smallValuesGrouping(value: { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined }) { + this._setOption('smallValuesGrouping', value); + } + + @Input() + get tag(): any | undefined { + return this._getOption('tag'); + } + set tag(value: any | undefined) { + this._setOption('tag', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + + protected get _optionPath() { + return 'series'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPieChartSeriesComponent + ], + exports: [ + DxiPieChartSeriesComponent + ], +}) +export class DxiPieChartSeriesModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/series-template.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/series-template.ts new file mode 100644 index 000000000000..793e03b8f520 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/series-template.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-series-template', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartSeriesTemplateComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeSeries(): Function { + return this._getOption('customizeSeries'); + } + set customizeSeries(value: Function) { + this._setOption('customizeSeries', value); + } + + @Input() + get nameField(): string { + return this._getOption('nameField'); + } + set nameField(value: string) { + this._setOption('nameField', value); + } + + + protected get _optionPath() { + return 'seriesTemplate'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartSeriesTemplateComponent + ], + exports: [ + DxoPieChartSeriesTemplateComponent + ], +}) +export class DxoPieChartSeriesTemplateModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/shadow.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/shadow.ts new file mode 100644 index 000000000000..cc42f2014091 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartShadowComponent + ], + exports: [ + DxoPieChartShadowComponent + ], +}) +export class DxoPieChartShadowModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/size.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/size.ts new file mode 100644 index 000000000000..1c5c1dc81614 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartSizeComponent + ], + exports: [ + DxoPieChartSizeComponent + ], +}) +export class DxoPieChartSizeModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/small-values-grouping.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/small-values-grouping.ts new file mode 100644 index 000000000000..9f3ae208b4bc --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/small-values-grouping.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SmallValuesGroupingMode } from 'devextreme/viz/pie_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-small-values-grouping', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartSmallValuesGroupingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get groupName(): string { + return this._getOption('groupName'); + } + set groupName(value: string) { + this._setOption('groupName', value); + } + + @Input() + get mode(): SmallValuesGroupingMode { + return this._getOption('mode'); + } + set mode(value: SmallValuesGroupingMode) { + this._setOption('mode', value); + } + + @Input() + get threshold(): number | undefined { + return this._getOption('threshold'); + } + set threshold(value: number | undefined) { + this._setOption('threshold', value); + } + + @Input() + get topCount(): number | undefined { + return this._getOption('topCount'); + } + set topCount(value: number | undefined) { + this._setOption('topCount', value); + } + + + protected get _optionPath() { + return 'smallValuesGrouping'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartSmallValuesGroupingComponent + ], + exports: [ + DxoPieChartSmallValuesGroupingComponent + ], +}) +export class DxoPieChartSmallValuesGroupingModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts new file mode 100644 index 000000000000..9469afd90519 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartSubtitleComponent + ], + exports: [ + DxoPieChartSubtitleComponent + ], +}) +export class DxoPieChartSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts new file mode 100644 index 000000000000..0c7e03cfc8e8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment | undefined { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment | undefined) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): { bottom?: number, left?: number, right?: number, top?: number } | number { + return this._getOption('margin'); + } + set margin(value: { bottom?: number, left?: number, right?: number, top?: number } | number) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartTitleComponent + ], + exports: [ + DxoPieChartTitleComponent + ], +}) +export class DxoPieChartTitleModule { } diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/tooltip.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/tooltip.ts new file mode 100644 index 000000000000..cb16d23a2ec8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pie-chart/nested/tooltip.ts @@ -0,0 +1,211 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pie-chart-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPieChartTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get shared(): boolean { + return this._getOption('shared'); + } + set shared(value: boolean) { + this._setOption('shared', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPieChartTooltipComponent + ], + exports: [ + DxoPieChartTooltipComponent + ], +}) +export class DxoPieChartTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts index 7e9b61accdf2..72cbdfc1dfaa 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts @@ -42,6 +42,10 @@ import { DxoHeaderFilterModule } from 'devextreme-angular/ui/nested'; import { DxoSearchModule } from 'devextreme-angular/ui/nested'; import { DxoTextsModule } from 'devextreme-angular/ui/nested'; +import { DxoPivotGridFieldChooserHeaderFilterModule } from 'devextreme-angular/ui/pivot-grid-field-chooser/nested'; +import { DxoPivotGridFieldChooserSearchModule } from 'devextreme-angular/ui/pivot-grid-field-chooser/nested'; +import { DxoPivotGridFieldChooserTextsModule } from 'devextreme-angular/ui/pivot-grid-field-chooser/nested'; + @@ -527,6 +531,7 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -612,6 +617,9 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD DxoHeaderFilterModule, DxoSearchModule, DxoTextsModule, + DxoPivotGridFieldChooserHeaderFilterModule, + DxoPivotGridFieldChooserSearchModule, + DxoPivotGridFieldChooserTextsModule, DxIntegrationModule, DxTemplateModule ], @@ -623,6 +631,9 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD DxoHeaderFilterModule, DxoSearchModule, DxoTextsModule, + DxoPivotGridFieldChooserHeaderFilterModule, + DxoPivotGridFieldChooserSearchModule, + DxoPivotGridFieldChooserTextsModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/header-filter.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/header-filter.ts new file mode 100644 index 000000000000..a8081572a8ca --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/header-filter.ts @@ -0,0 +1,129 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HeaderFilterSearchConfig } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-field-chooser-header-filter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridFieldChooserHeaderFilterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get search(): HeaderFilterSearchConfig { + return this._getOption('search'); + } + set search(value: HeaderFilterSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get showRelevantValues(): boolean { + return this._getOption('showRelevantValues'); + } + set showRelevantValues(value: boolean) { + this._setOption('showRelevantValues', value); + } + + @Input() + get texts(): { cancel?: string, emptyValue?: string, ok?: string } { + return this._getOption('texts'); + } + set texts(value: { cancel?: string, emptyValue?: string, ok?: string }) { + this._setOption('texts', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'headerFilter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridFieldChooserHeaderFilterComponent + ], + exports: [ + DxoPivotGridFieldChooserHeaderFilterComponent + ], +}) +export class DxoPivotGridFieldChooserHeaderFilterModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/index.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/index.ts new file mode 100644 index 000000000000..9364cc80172d --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/index.ts @@ -0,0 +1,4 @@ +export * from './header-filter'; +export * from './search'; +export * from './texts'; + diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/ng-package.json b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/search.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/search.ts new file mode 100644 index 000000000000..f23643acfb2d --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/search.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-field-chooser-search', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridFieldChooserSearchComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get mode(): SearchMode { + return this._getOption('mode'); + } + set mode(value: SearchMode) { + this._setOption('mode', value); + } + + @Input() + get timeout(): number { + return this._getOption('timeout'); + } + set timeout(value: number) { + this._setOption('timeout', value); + } + + + protected get _optionPath() { + return 'search'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridFieldChooserSearchComponent + ], + exports: [ + DxoPivotGridFieldChooserSearchComponent + ], +}) +export class DxoPivotGridFieldChooserSearchModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/texts.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/texts.ts new file mode 100644 index 000000000000..93cf29d5621a --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/nested/texts.ts @@ -0,0 +1,128 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-field-chooser-texts', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridFieldChooserTextsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get cancel(): string { + return this._getOption('cancel'); + } + set cancel(value: string) { + this._setOption('cancel', value); + } + + @Input() + get emptyValue(): string { + return this._getOption('emptyValue'); + } + set emptyValue(value: string) { + this._setOption('emptyValue', value); + } + + @Input() + get ok(): string { + return this._getOption('ok'); + } + set ok(value: string) { + this._setOption('ok', value); + } + + @Input() + get allFields(): string { + return this._getOption('allFields'); + } + set allFields(value: string) { + this._setOption('allFields', value); + } + + @Input() + get columnFields(): string { + return this._getOption('columnFields'); + } + set columnFields(value: string) { + this._setOption('columnFields', value); + } + + @Input() + get dataFields(): string { + return this._getOption('dataFields'); + } + set dataFields(value: string) { + this._setOption('dataFields', value); + } + + @Input() + get filterFields(): string { + return this._getOption('filterFields'); + } + set filterFields(value: string) { + this._setOption('filterFields', value); + } + + @Input() + get rowFields(): string { + return this._getOption('rowFields'); + } + set rowFields(value: string) { + this._setOption('rowFields', value); + } + + + protected get _optionPath() { + return 'texts'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridFieldChooserTextsComponent + ], + exports: [ + DxoPivotGridFieldChooserTextsComponent + ], +}) +export class DxoPivotGridFieldChooserTextsModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/index.ts b/packages/devextreme-angular/src/ui/pivot-grid/index.ts index 55c13d0d6f6b..af4f4694f56f 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid/index.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid/index.ts @@ -52,6 +52,20 @@ import { DxoLoadPanelModule } from 'devextreme-angular/ui/nested'; import { DxoScrollingModule } from 'devextreme-angular/ui/nested'; import { DxoStateStoringModule } from 'devextreme-angular/ui/nested'; +import { DxoPivotGridDataSourceModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxiPivotGridFieldModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridFormatModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridHeaderFilterModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridStoreModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridExportModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridFieldChooserModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridTextsModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridFieldPanelModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridSearchModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridLoadPanelModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridScrollingModule } from 'devextreme-angular/ui/pivot-grid/nested'; +import { DxoPivotGridStateStoringModule } from 'devextreme-angular/ui/pivot-grid/nested'; + @@ -781,6 +795,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -890,6 +905,19 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh DxoLoadPanelModule, DxoScrollingModule, DxoStateStoringModule, + DxoPivotGridDataSourceModule, + DxiPivotGridFieldModule, + DxoPivotGridFormatModule, + DxoPivotGridHeaderFilterModule, + DxoPivotGridStoreModule, + DxoPivotGridExportModule, + DxoPivotGridFieldChooserModule, + DxoPivotGridTextsModule, + DxoPivotGridFieldPanelModule, + DxoPivotGridSearchModule, + DxoPivotGridLoadPanelModule, + DxoPivotGridScrollingModule, + DxoPivotGridStateStoringModule, DxIntegrationModule, DxTemplateModule ], @@ -911,6 +939,19 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh DxoLoadPanelModule, DxoScrollingModule, DxoStateStoringModule, + DxoPivotGridDataSourceModule, + DxiPivotGridFieldModule, + DxoPivotGridFormatModule, + DxoPivotGridHeaderFilterModule, + DxoPivotGridStoreModule, + DxoPivotGridExportModule, + DxoPivotGridFieldChooserModule, + DxoPivotGridTextsModule, + DxoPivotGridFieldPanelModule, + DxoPivotGridSearchModule, + DxoPivotGridLoadPanelModule, + DxoPivotGridScrollingModule, + DxoPivotGridStateStoringModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/data-source.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/data-source.ts new file mode 100644 index 000000000000..74ca86c841b2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/data-source.ts @@ -0,0 +1,157 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Store, StoreOptions } from 'devextreme/data'; +import XmlaStore, { XmlaStoreOptions } from 'devextreme/ui/pivot_grid/xmla_store'; +import { format } from 'devextreme/ui/widget/ui.widget'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiPivotGridFieldComponent } from './field-dxi'; + + +@Component({ + selector: 'dxo-pivot-grid-data-source', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridDataSourceComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get fields(): Array, format?: format | string, groupIndex?: number, groupInterval?: number | string, groupName?: string, headerFilter?: { allowSearch?: boolean, height?: number, width?: number }, isMeasure?: boolean, precision?: number, runningTotal?: string, selector?: Function, showGrandTotals?: boolean, showTotals?: boolean, showValues?: boolean, sortBy?: string, sortBySummaryField?: string, sortBySummaryPath?: Array, sortingMethod?: Function, sortOrder?: string, summaryDisplayMode?: string, summaryType?: string, visible?: boolean, width?: number, wordWrapEnabled?: boolean }> { + return this._getOption('fields'); + } + set fields(value: Array, format?: format | string, groupIndex?: number, groupInterval?: number | string, groupName?: string, headerFilter?: { allowSearch?: boolean, height?: number, width?: number }, isMeasure?: boolean, precision?: number, runningTotal?: string, selector?: Function, showGrandTotals?: boolean, showTotals?: boolean, showValues?: boolean, sortBy?: string, sortBySummaryField?: string, sortBySummaryPath?: Array, sortingMethod?: Function, sortOrder?: string, summaryDisplayMode?: string, summaryType?: string, visible?: boolean, width?: number, wordWrapEnabled?: boolean }>) { + this._setOption('fields', value); + } + + @Input() + get filter(): any { + return this._getOption('filter'); + } + set filter(value: any) { + this._setOption('filter', value); + } + + @Input() + get onChanged(): Function { + return this._getOption('onChanged'); + } + set onChanged(value: Function) { + this._setOption('onChanged', value); + } + + @Input() + get onFieldsPrepared(): Function { + return this._getOption('onFieldsPrepared'); + } + set onFieldsPrepared(value: Function) { + this._setOption('onFieldsPrepared', value); + } + + @Input() + get onLoadError(): Function { + return this._getOption('onLoadError'); + } + set onLoadError(value: Function) { + this._setOption('onLoadError', value); + } + + @Input() + get onLoadingChanged(): Function { + return this._getOption('onLoadingChanged'); + } + set onLoadingChanged(value: Function) { + this._setOption('onLoadingChanged', value); + } + + @Input() + get remoteOperations(): boolean { + return this._getOption('remoteOperations'); + } + set remoteOperations(value: boolean) { + this._setOption('remoteOperations', value); + } + + @Input() + get retrieveFields(): boolean { + return this._getOption('retrieveFields'); + } + set retrieveFields(value: boolean) { + this._setOption('retrieveFields', value); + } + + @Input() + get store(): Store | StoreOptions | XmlaStore | XmlaStoreOptions | { type?: string } | Array { + return this._getOption('store'); + } + set store(value: Store | StoreOptions | XmlaStore | XmlaStoreOptions | { type?: string } | Array) { + this._setOption('store', value); + } + + + protected get _optionPath() { + return 'dataSource'; + } + + + @ContentChildren(forwardRef(() => DxiPivotGridFieldComponent)) + get fieldsChildren(): QueryList { + return this._getOption('fields'); + } + set fieldsChildren(value) { + this.setChildren('fields', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + if ((console) && (console.warn)) { + console.warn('The nested \'dxo-pivot-grid-data-source\' component is deprecated in 17.2. ' + + 'Use the \'dataSource\' option instead. ' + + 'See:\nhttps://github.com/DevExpress/devextreme-angular/blob/master/CHANGELOG.md#17.2.3' + ); + } + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridDataSourceComponent + ], + exports: [ + DxoPivotGridDataSourceComponent + ], +}) +export class DxoPivotGridDataSourceModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/export.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/export.ts new file mode 100644 index 000000000000..950cecce77fb --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/export.ts @@ -0,0 +1,72 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridExportComponent + ], + exports: [ + DxoPivotGridExportComponent + ], +}) +export class DxoPivotGridExportModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/field-chooser.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/field-chooser.ts new file mode 100644 index 000000000000..7be47ea783d6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/field-chooser.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { FieldChooserLayout } from 'devextreme/common'; +import { ApplyChangesMode } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-field-chooser', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridFieldChooserComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get applyChangesMode(): ApplyChangesMode { + return this._getOption('applyChangesMode'); + } + set applyChangesMode(value: ApplyChangesMode) { + this._setOption('applyChangesMode', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get layout(): FieldChooserLayout { + return this._getOption('layout'); + } + set layout(value: FieldChooserLayout) { + this._setOption('layout', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get texts(): { allFields?: string, columnFields?: string, dataFields?: string, filterFields?: string, rowFields?: string } { + return this._getOption('texts'); + } + set texts(value: { allFields?: string, columnFields?: string, dataFields?: string, filterFields?: string, rowFields?: string }) { + this._setOption('texts', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fieldChooser'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridFieldChooserComponent + ], + exports: [ + DxoPivotGridFieldChooserComponent + ], +}) +export class DxoPivotGridFieldChooserModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/field-dxi.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/field-dxi.ts new file mode 100644 index 000000000000..bdb554c887e8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/field-dxi.ts @@ -0,0 +1,371 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { format } from 'devextreme/ui/widget/ui.widget'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-pivot-grid-field', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPivotGridFieldComponent extends CollectionNestedOption { + @Input() + get allowCrossGroupCalculation(): boolean { + return this._getOption('allowCrossGroupCalculation'); + } + set allowCrossGroupCalculation(value: boolean) { + this._setOption('allowCrossGroupCalculation', value); + } + + @Input() + get allowExpandAll(): boolean { + return this._getOption('allowExpandAll'); + } + set allowExpandAll(value: boolean) { + this._setOption('allowExpandAll', value); + } + + @Input() + get allowFiltering(): boolean { + return this._getOption('allowFiltering'); + } + set allowFiltering(value: boolean) { + this._setOption('allowFiltering', value); + } + + @Input() + get allowSorting(): boolean { + return this._getOption('allowSorting'); + } + set allowSorting(value: boolean) { + this._setOption('allowSorting', value); + } + + @Input() + get allowSortingBySummary(): boolean { + return this._getOption('allowSortingBySummary'); + } + set allowSortingBySummary(value: boolean) { + this._setOption('allowSortingBySummary', value); + } + + @Input() + get area(): string { + return this._getOption('area'); + } + set area(value: string) { + this._setOption('area', value); + } + + @Input() + get areaIndex(): number { + return this._getOption('areaIndex'); + } + set areaIndex(value: number) { + this._setOption('areaIndex', value); + } + + @Input() + get calculateCustomSummary(): Function { + return this._getOption('calculateCustomSummary'); + } + set calculateCustomSummary(value: Function) { + this._setOption('calculateCustomSummary', value); + } + + @Input() + get calculateSummaryValue(): Function { + return this._getOption('calculateSummaryValue'); + } + set calculateSummaryValue(value: Function) { + this._setOption('calculateSummaryValue', value); + } + + @Input() + get caption(): string { + return this._getOption('caption'); + } + set caption(value: string) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string { + return this._getOption('dataField'); + } + set dataField(value: string) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): string { + return this._getOption('dataType'); + } + set dataType(value: string) { + this._setOption('dataType', value); + } + + @Input() + get displayFolder(): string { + return this._getOption('displayFolder'); + } + set displayFolder(value: string) { + this._setOption('displayFolder', value); + } + + @Input() + get expanded(): boolean { + return this._getOption('expanded'); + } + set expanded(value: boolean) { + this._setOption('expanded', value); + } + + @Input() + get filterType(): string { + return this._getOption('filterType'); + } + set filterType(value: string) { + this._setOption('filterType', value); + } + + @Input() + get filterValues(): Array { + return this._getOption('filterValues'); + } + set filterValues(value: Array) { + this._setOption('filterValues', value); + } + + @Input() + get format(): format | string { + return this._getOption('format'); + } + set format(value: format | string) { + this._setOption('format', value); + } + + @Input() + get groupIndex(): number { + return this._getOption('groupIndex'); + } + set groupIndex(value: number) { + this._setOption('groupIndex', value); + } + + @Input() + get groupInterval(): number | string { + return this._getOption('groupInterval'); + } + set groupInterval(value: number | string) { + this._setOption('groupInterval', value); + } + + @Input() + get groupName(): string { + return this._getOption('groupName'); + } + set groupName(value: string) { + this._setOption('groupName', value); + } + + @Input() + get headerFilter(): { allowSearch?: boolean, height?: number, width?: number } { + return this._getOption('headerFilter'); + } + set headerFilter(value: { allowSearch?: boolean, height?: number, width?: number }) { + this._setOption('headerFilter', value); + } + + @Input() + get isMeasure(): boolean { + return this._getOption('isMeasure'); + } + set isMeasure(value: boolean) { + this._setOption('isMeasure', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get runningTotal(): string { + return this._getOption('runningTotal'); + } + set runningTotal(value: string) { + this._setOption('runningTotal', value); + } + + @Input() + get selector(): Function { + return this._getOption('selector'); + } + set selector(value: Function) { + this._setOption('selector', value); + } + + @Input() + get showGrandTotals(): boolean { + return this._getOption('showGrandTotals'); + } + set showGrandTotals(value: boolean) { + this._setOption('showGrandTotals', value); + } + + @Input() + get showTotals(): boolean { + return this._getOption('showTotals'); + } + set showTotals(value: boolean) { + this._setOption('showTotals', value); + } + + @Input() + get showValues(): boolean { + return this._getOption('showValues'); + } + set showValues(value: boolean) { + this._setOption('showValues', value); + } + + @Input() + get sortBy(): string { + return this._getOption('sortBy'); + } + set sortBy(value: string) { + this._setOption('sortBy', value); + } + + @Input() + get sortBySummaryField(): string { + return this._getOption('sortBySummaryField'); + } + set sortBySummaryField(value: string) { + this._setOption('sortBySummaryField', value); + } + + @Input() + get sortBySummaryPath(): Array { + return this._getOption('sortBySummaryPath'); + } + set sortBySummaryPath(value: Array) { + this._setOption('sortBySummaryPath', value); + } + + @Input() + get sortingMethod(): Function { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: Function) { + this._setOption('sortingMethod', value); + } + + @Input() + get sortOrder(): string { + return this._getOption('sortOrder'); + } + set sortOrder(value: string) { + this._setOption('sortOrder', value); + } + + @Input() + get summaryDisplayMode(): string { + return this._getOption('summaryDisplayMode'); + } + set summaryDisplayMode(value: string) { + this._setOption('summaryDisplayMode', value); + } + + @Input() + get summaryType(): string { + return this._getOption('summaryType'); + } + set summaryType(value: string) { + this._setOption('summaryType', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get wordWrapEnabled(): boolean { + return this._getOption('wordWrapEnabled'); + } + set wordWrapEnabled(value: boolean) { + this._setOption('wordWrapEnabled', value); + } + + + protected get _optionPath() { + return 'fields'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPivotGridFieldComponent + ], + exports: [ + DxiPivotGridFieldComponent + ], +}) +export class DxiPivotGridFieldModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/field-panel.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/field-panel.ts new file mode 100644 index 000000000000..a538708443ec --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/field-panel.ts @@ -0,0 +1,120 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-field-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridFieldPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowFieldDragging(): boolean { + return this._getOption('allowFieldDragging'); + } + set allowFieldDragging(value: boolean) { + this._setOption('allowFieldDragging', value); + } + + @Input() + get showColumnFields(): boolean { + return this._getOption('showColumnFields'); + } + set showColumnFields(value: boolean) { + this._setOption('showColumnFields', value); + } + + @Input() + get showDataFields(): boolean { + return this._getOption('showDataFields'); + } + set showDataFields(value: boolean) { + this._setOption('showDataFields', value); + } + + @Input() + get showFilterFields(): boolean { + return this._getOption('showFilterFields'); + } + set showFilterFields(value: boolean) { + this._setOption('showFilterFields', value); + } + + @Input() + get showRowFields(): boolean { + return this._getOption('showRowFields'); + } + set showRowFields(value: boolean) { + this._setOption('showRowFields', value); + } + + @Input() + get texts(): { columnFieldArea?: string, dataFieldArea?: string, filterFieldArea?: string, rowFieldArea?: string } { + return this._getOption('texts'); + } + set texts(value: { columnFieldArea?: string, dataFieldArea?: string, filterFieldArea?: string, rowFieldArea?: string }) { + this._setOption('texts', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'fieldPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridFieldPanelComponent + ], + exports: [ + DxoPivotGridFieldPanelComponent + ], +}) +export class DxoPivotGridFieldPanelModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/format.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/format.ts new file mode 100644 index 000000000000..071c3a67b139 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridFormatComponent + ], + exports: [ + DxoPivotGridFormatComponent + ], +}) +export class DxoPivotGridFormatModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/header-filter.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/header-filter.ts new file mode 100644 index 000000000000..8408448de98e --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/header-filter.ts @@ -0,0 +1,129 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HeaderFilterSearchConfig } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-header-filter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridHeaderFilterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get search(): HeaderFilterSearchConfig { + return this._getOption('search'); + } + set search(value: HeaderFilterSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get showRelevantValues(): boolean { + return this._getOption('showRelevantValues'); + } + set showRelevantValues(value: boolean) { + this._setOption('showRelevantValues', value); + } + + @Input() + get texts(): { cancel?: string, emptyValue?: string, ok?: string } { + return this._getOption('texts'); + } + set texts(value: { cancel?: string, emptyValue?: string, ok?: string }) { + this._setOption('texts', value); + } + + + protected get _optionPath() { + return 'headerFilter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridHeaderFilterComponent + ], + exports: [ + DxoPivotGridHeaderFilterComponent + ], +}) +export class DxoPivotGridHeaderFilterModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/index.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/index.ts new file mode 100644 index 000000000000..9edc72f199ce --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/index.ts @@ -0,0 +1,14 @@ +export * from './data-source'; +export * from './export'; +export * from './field-chooser'; +export * from './field-dxi'; +export * from './field-panel'; +export * from './format'; +export * from './header-filter'; +export * from './load-panel'; +export * from './scrolling'; +export * from './search'; +export * from './state-storing'; +export * from './store'; +export * from './texts'; + diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/load-panel.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/load-panel.ts new file mode 100644 index 000000000000..71a5961cfad3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/load-panel.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-load-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridLoadPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showIndicator(): boolean { + return this._getOption('showIndicator'); + } + set showIndicator(value: boolean) { + this._setOption('showIndicator', value); + } + + @Input() + get showPane(): boolean { + return this._getOption('showPane'); + } + set showPane(value: boolean) { + this._setOption('showPane', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'loadPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridLoadPanelComponent + ], + exports: [ + DxoPivotGridLoadPanelComponent + ], +}) +export class DxoPivotGridLoadPanelModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/ng-package.json b/packages/devextreme-angular/src/ui/pivot-grid/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/scrolling.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/scrolling.ts new file mode 100644 index 000000000000..354cc3f20208 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/scrolling.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode, ScrollMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-scrolling', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridScrollingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get mode(): ScrollMode { + return this._getOption('mode'); + } + set mode(value: ScrollMode) { + this._setOption('mode', value); + } + + @Input() + get useNative(): Mode | boolean { + return this._getOption('useNative'); + } + set useNative(value: Mode | boolean) { + this._setOption('useNative', value); + } + + + protected get _optionPath() { + return 'scrolling'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridScrollingComponent + ], + exports: [ + DxoPivotGridScrollingComponent + ], +}) +export class DxoPivotGridScrollingModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/search.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/search.ts new file mode 100644 index 000000000000..69a550d122fb --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/search.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-search', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridSearchComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get mode(): SearchMode { + return this._getOption('mode'); + } + set mode(value: SearchMode) { + this._setOption('mode', value); + } + + @Input() + get timeout(): number { + return this._getOption('timeout'); + } + set timeout(value: number) { + this._setOption('timeout', value); + } + + + protected get _optionPath() { + return 'search'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridSearchComponent + ], + exports: [ + DxoPivotGridSearchComponent + ], +}) +export class DxoPivotGridSearchModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts new file mode 100644 index 000000000000..42f060a1c0f9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { StateStoreType } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-state-storing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridStateStoringComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customLoad(): Function { + return this._getOption('customLoad'); + } + set customLoad(value: Function) { + this._setOption('customLoad', value); + } + + @Input() + get customSave(): Function { + return this._getOption('customSave'); + } + set customSave(value: Function) { + this._setOption('customSave', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get savingTimeout(): number { + return this._getOption('savingTimeout'); + } + set savingTimeout(value: number) { + this._setOption('savingTimeout', value); + } + + @Input() + get storageKey(): string { + return this._getOption('storageKey'); + } + set storageKey(value: string) { + this._setOption('storageKey', value); + } + + @Input() + get type(): StateStoreType { + return this._getOption('type'); + } + set type(value: StateStoreType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'stateStoring'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridStateStoringComponent + ], + exports: [ + DxoPivotGridStateStoringComponent + ], +}) +export class DxoPivotGridStateStoringModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/store.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/store.ts new file mode 100644 index 000000000000..0f3696b62e39 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/store.ts @@ -0,0 +1,72 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-store', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridStoreComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get type(): string { + return this._getOption('type'); + } + set type(value: string) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'store'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridStoreComponent + ], + exports: [ + DxoPivotGridStoreComponent + ], +}) +export class DxoPivotGridStoreModule { } diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/texts.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/texts.ts new file mode 100644 index 000000000000..3f507ba61481 --- /dev/null +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/texts.ts @@ -0,0 +1,248 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-pivot-grid-texts', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPivotGridTextsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allFields(): string { + return this._getOption('allFields'); + } + set allFields(value: string) { + this._setOption('allFields', value); + } + + @Input() + get columnFields(): string { + return this._getOption('columnFields'); + } + set columnFields(value: string) { + this._setOption('columnFields', value); + } + + @Input() + get dataFields(): string { + return this._getOption('dataFields'); + } + set dataFields(value: string) { + this._setOption('dataFields', value); + } + + @Input() + get filterFields(): string { + return this._getOption('filterFields'); + } + set filterFields(value: string) { + this._setOption('filterFields', value); + } + + @Input() + get rowFields(): string { + return this._getOption('rowFields'); + } + set rowFields(value: string) { + this._setOption('rowFields', value); + } + + @Input() + get columnFieldArea(): string { + return this._getOption('columnFieldArea'); + } + set columnFieldArea(value: string) { + this._setOption('columnFieldArea', value); + } + + @Input() + get dataFieldArea(): string { + return this._getOption('dataFieldArea'); + } + set dataFieldArea(value: string) { + this._setOption('dataFieldArea', value); + } + + @Input() + get filterFieldArea(): string { + return this._getOption('filterFieldArea'); + } + set filterFieldArea(value: string) { + this._setOption('filterFieldArea', value); + } + + @Input() + get rowFieldArea(): string { + return this._getOption('rowFieldArea'); + } + set rowFieldArea(value: string) { + this._setOption('rowFieldArea', value); + } + + @Input() + get cancel(): string { + return this._getOption('cancel'); + } + set cancel(value: string) { + this._setOption('cancel', value); + } + + @Input() + get emptyValue(): string { + return this._getOption('emptyValue'); + } + set emptyValue(value: string) { + this._setOption('emptyValue', value); + } + + @Input() + get ok(): string { + return this._getOption('ok'); + } + set ok(value: string) { + this._setOption('ok', value); + } + + @Input() + get collapseAll(): string { + return this._getOption('collapseAll'); + } + set collapseAll(value: string) { + this._setOption('collapseAll', value); + } + + @Input() + get dataNotAvailable(): string { + return this._getOption('dataNotAvailable'); + } + set dataNotAvailable(value: string) { + this._setOption('dataNotAvailable', value); + } + + @Input() + get expandAll(): string { + return this._getOption('expandAll'); + } + set expandAll(value: string) { + this._setOption('expandAll', value); + } + + @Input() + get exportToExcel(): string { + return this._getOption('exportToExcel'); + } + set exportToExcel(value: string) { + this._setOption('exportToExcel', value); + } + + @Input() + get grandTotal(): string { + return this._getOption('grandTotal'); + } + set grandTotal(value: string) { + this._setOption('grandTotal', value); + } + + @Input() + get noData(): string { + return this._getOption('noData'); + } + set noData(value: string) { + this._setOption('noData', value); + } + + @Input() + get removeAllSorting(): string { + return this._getOption('removeAllSorting'); + } + set removeAllSorting(value: string) { + this._setOption('removeAllSorting', value); + } + + @Input() + get showFieldChooser(): string { + return this._getOption('showFieldChooser'); + } + set showFieldChooser(value: string) { + this._setOption('showFieldChooser', value); + } + + @Input() + get sortColumnBySummary(): string { + return this._getOption('sortColumnBySummary'); + } + set sortColumnBySummary(value: string) { + this._setOption('sortColumnBySummary', value); + } + + @Input() + get sortRowBySummary(): string { + return this._getOption('sortRowBySummary'); + } + set sortRowBySummary(value: string) { + this._setOption('sortRowBySummary', value); + } + + @Input() + get total(): string { + return this._getOption('total'); + } + set total(value: string) { + this._setOption('total', value); + } + + + protected get _optionPath() { + return 'texts'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPivotGridTextsComponent + ], + exports: [ + DxoPivotGridTextsComponent + ], +}) +export class DxoPivotGridTextsModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/index.ts b/packages/devextreme-angular/src/ui/polar-chart/index.ts index 4d2dcf7f7d97..913b59752af4 100644 --- a/packages/devextreme-angular/src/ui/polar-chart/index.ts +++ b/packages/devextreme-angular/src/ui/polar-chart/index.ts @@ -93,9 +93,61 @@ import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxoValueAxisModule } from 'devextreme-angular/ui/nested'; import { DxoMinVisualRangeLengthModule } from 'devextreme-angular/ui/nested'; +import { DxoPolarChartAdaptiveLayoutModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartAnimationModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxiPolarChartAnnotationModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartBorderModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartFontModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartImageModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartShadowModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartArgumentAxisModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxiPolarChartConstantLineModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartLabelModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartConstantLineStyleModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartGridModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartFormatModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartMinorGridModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartMinorTickModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartMinorTickIntervalModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxiPolarChartStripModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartStripStyleModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartTickModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartTickIntervalModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartCommonAnnotationSettingsModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartCommonAxisSettingsModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartCommonSeriesSettingsModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartAreaModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartHoverStyleModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartHatchingModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartConnectorModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartPointModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartSelectionStyleModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartValueErrorBarModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartBarModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartColorModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartArgumentFormatModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartLineModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartScatterModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartStackedbarModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartDataPrepareSettingsModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartExportModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartLegendModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartMarginModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartTitleModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartSubtitleModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartLoadingIndicatorModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxiPolarChartSeriesModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartSeriesTemplateModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartSizeModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartTooltipModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartValueAxisModule } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxoPolarChartMinVisualRangeLengthModule } from 'devextreme-angular/ui/polar-chart/nested'; + import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested'; import { DxiSeriesComponent } from 'devextreme-angular/ui/nested'; +import { DxiPolarChartAnnotationComponent } from 'devextreme-angular/ui/polar-chart/nested'; +import { DxiPolarChartSeriesComponent } from 'devextreme-angular/ui/polar-chart/nested'; /** @@ -1046,23 +1098,46 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC - @ContentChildren(DxiAnnotationComponent) - get annotationsChildren(): QueryList { + @ContentChildren(DxiPolarChartAnnotationComponent) + get annotationsChildren(): QueryList { return this._getOption('annotations'); } set annotationsChildren(value) { + this.setContentChildren('annotations', value, 'DxiPolarChartAnnotationComponent'); this.setChildren('annotations', value); } - @ContentChildren(DxiSeriesComponent) - get seriesChildren(): QueryList { + @ContentChildren(DxiPolarChartSeriesComponent) + get seriesChildren(): QueryList { return this._getOption('series'); } set seriesChildren(value) { + this.setContentChildren('series', value, 'DxiPolarChartSeriesComponent'); this.setChildren('series', value); } + @ContentChildren(DxiAnnotationComponent) + get annotationsLegacyChildren(): QueryList { + return this._getOption('annotations'); + } + set annotationsLegacyChildren(value) { + if (this.checkContentChildren('annotations', value, 'DxiAnnotationComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiSeriesComponent) + get seriesLegacyChildren(): QueryList { + return this._getOption('series'); + } + set seriesLegacyChildren(value) { + if (this.checkContentChildren('series', value, 'DxiSeriesComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1235,6 +1310,55 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC DxoTooltipModule, DxoValueAxisModule, DxoMinVisualRangeLengthModule, + DxoPolarChartAdaptiveLayoutModule, + DxoPolarChartAnimationModule, + DxiPolarChartAnnotationModule, + DxoPolarChartBorderModule, + DxoPolarChartFontModule, + DxoPolarChartImageModule, + DxoPolarChartShadowModule, + DxoPolarChartArgumentAxisModule, + DxiPolarChartConstantLineModule, + DxoPolarChartLabelModule, + DxoPolarChartConstantLineStyleModule, + DxoPolarChartGridModule, + DxoPolarChartFormatModule, + DxoPolarChartMinorGridModule, + DxoPolarChartMinorTickModule, + DxoPolarChartMinorTickIntervalModule, + DxiPolarChartStripModule, + DxoPolarChartStripStyleModule, + DxoPolarChartTickModule, + DxoPolarChartTickIntervalModule, + DxoPolarChartCommonAnnotationSettingsModule, + DxoPolarChartCommonAxisSettingsModule, + DxoPolarChartCommonSeriesSettingsModule, + DxoPolarChartAreaModule, + DxoPolarChartHoverStyleModule, + DxoPolarChartHatchingModule, + DxoPolarChartConnectorModule, + DxoPolarChartPointModule, + DxoPolarChartSelectionStyleModule, + DxoPolarChartValueErrorBarModule, + DxoPolarChartBarModule, + DxoPolarChartColorModule, + DxoPolarChartArgumentFormatModule, + DxoPolarChartLineModule, + DxoPolarChartScatterModule, + DxoPolarChartStackedbarModule, + DxoPolarChartDataPrepareSettingsModule, + DxoPolarChartExportModule, + DxoPolarChartLegendModule, + DxoPolarChartMarginModule, + DxoPolarChartTitleModule, + DxoPolarChartSubtitleModule, + DxoPolarChartLoadingIndicatorModule, + DxiPolarChartSeriesModule, + DxoPolarChartSeriesTemplateModule, + DxoPolarChartSizeModule, + DxoPolarChartTooltipModule, + DxoPolarChartValueAxisModule, + DxoPolarChartMinVisualRangeLengthModule, DxIntegrationModule, DxTemplateModule ], @@ -1292,6 +1416,55 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC DxoTooltipModule, DxoValueAxisModule, DxoMinVisualRangeLengthModule, + DxoPolarChartAdaptiveLayoutModule, + DxoPolarChartAnimationModule, + DxiPolarChartAnnotationModule, + DxoPolarChartBorderModule, + DxoPolarChartFontModule, + DxoPolarChartImageModule, + DxoPolarChartShadowModule, + DxoPolarChartArgumentAxisModule, + DxiPolarChartConstantLineModule, + DxoPolarChartLabelModule, + DxoPolarChartConstantLineStyleModule, + DxoPolarChartGridModule, + DxoPolarChartFormatModule, + DxoPolarChartMinorGridModule, + DxoPolarChartMinorTickModule, + DxoPolarChartMinorTickIntervalModule, + DxiPolarChartStripModule, + DxoPolarChartStripStyleModule, + DxoPolarChartTickModule, + DxoPolarChartTickIntervalModule, + DxoPolarChartCommonAnnotationSettingsModule, + DxoPolarChartCommonAxisSettingsModule, + DxoPolarChartCommonSeriesSettingsModule, + DxoPolarChartAreaModule, + DxoPolarChartHoverStyleModule, + DxoPolarChartHatchingModule, + DxoPolarChartConnectorModule, + DxoPolarChartPointModule, + DxoPolarChartSelectionStyleModule, + DxoPolarChartValueErrorBarModule, + DxoPolarChartBarModule, + DxoPolarChartColorModule, + DxoPolarChartArgumentFormatModule, + DxoPolarChartLineModule, + DxoPolarChartScatterModule, + DxoPolarChartStackedbarModule, + DxoPolarChartDataPrepareSettingsModule, + DxoPolarChartExportModule, + DxoPolarChartLegendModule, + DxoPolarChartMarginModule, + DxoPolarChartTitleModule, + DxoPolarChartSubtitleModule, + DxoPolarChartLoadingIndicatorModule, + DxiPolarChartSeriesModule, + DxoPolarChartSeriesTemplateModule, + DxoPolarChartSizeModule, + DxoPolarChartTooltipModule, + DxoPolarChartValueAxisModule, + DxoPolarChartMinVisualRangeLengthModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/adaptive-layout.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/adaptive-layout.ts new file mode 100644 index 000000000000..75dbde39870f --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/adaptive-layout.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-adaptive-layout', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartAdaptiveLayoutComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get keepLabels(): boolean { + return this._getOption('keepLabels'); + } + set keepLabels(value: boolean) { + this._setOption('keepLabels', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'adaptiveLayout'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartAdaptiveLayoutComponent + ], + exports: [ + DxoPolarChartAdaptiveLayoutComponent + ], +}) +export class DxoPolarChartAdaptiveLayoutModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/animation.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/animation.ts new file mode 100644 index 000000000000..056d11a52f5f --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/animation.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationEaseMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): AnimationEaseMode { + return this._getOption('easing'); + } + set easing(value: AnimationEaseMode) { + this._setOption('easing', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get maxPointCountSupported(): number { + return this._getOption('maxPointCountSupported'); + } + set maxPointCountSupported(value: number) { + this._setOption('maxPointCountSupported', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartAnimationComponent + ], + exports: [ + DxoPolarChartAnimationComponent + ], +}) +export class DxoPolarChartAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/annotation-dxi.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/annotation-dxi.ts new file mode 100644 index 000000000000..906e1765a4c2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/annotation-dxi.ts @@ -0,0 +1,323 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-polar-chart-annotation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPolarChartAnnotationComponent extends CollectionNestedOption { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get angle(): number | undefined { + return this._getOption('angle'); + } + set angle(value: number | undefined) { + this._setOption('angle', value); + } + + @Input() + get argument(): Date | number | string | undefined { + return this._getOption('argument'); + } + set argument(value: Date | number | string | undefined) { + this._setOption('argument', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get radius(): number | undefined { + return this._getOption('radius'); + } + set radius(value: number | undefined) { + this._setOption('radius', value); + } + + @Input() + get series(): string | undefined { + return this._getOption('series'); + } + set series(value: string | undefined) { + this._setOption('series', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): Date | number | string | undefined { + return this._getOption('value'); + } + set value(value: Date | number | string | undefined) { + this._setOption('value', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'annotations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPolarChartAnnotationComponent + ], + exports: [ + DxiPolarChartAnnotationComponent + ], +}) +export class DxiPolarChartAnnotationModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/area.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/area.ts new file mode 100644 index 000000000000..a7222fd56837 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/area.ts @@ -0,0 +1,307 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-area', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartAreaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'area'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartAreaComponent + ], + exports: [ + DxoPolarChartAreaComponent + ], +}) +export class DxoPolarChartAreaModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/argument-axis.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/argument-axis.ts new file mode 100644 index 000000000000..6acdec6c2337 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/argument-axis.ts @@ -0,0 +1,335 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ArgumentAxisHoverMode, AxisScaleType, ChartsDataType, DashStyle, DiscreteAxisDivisionMode, Font, LabelOverlap, TimeInterval } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiPolarChartConstantLineComponent } from './constant-line-dxi'; +import { DxiPolarChartStripComponent } from './strip-dxi'; + + +@Component({ + selector: 'dxo-polar-chart-argument-axis', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartArgumentAxisComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get argumentType(): ChartsDataType | undefined { + return this._getOption('argumentType'); + } + set argumentType(value: ChartsDataType | undefined) { + this._setOption('argumentType', value); + } + + @Input() + get axisDivisionFactor(): number { + return this._getOption('axisDivisionFactor'); + } + set axisDivisionFactor(value: number) { + this._setOption('axisDivisionFactor', value); + } + + @Input() + get categories(): Array { + return this._getOption('categories'); + } + set categories(value: Array) { + this._setOption('categories', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get constantLines(): Array { + return this._getOption('constantLines'); + } + set constantLines(value: Array) { + this._setOption('constantLines', value); + } + + @Input() + get constantLineStyle(): { color?: string, dashStyle?: DashStyle, label?: { font?: Font, visible?: boolean }, width?: number } { + return this._getOption('constantLineStyle'); + } + set constantLineStyle(value: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, visible?: boolean }, width?: number }) { + this._setOption('constantLineStyle', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean | undefined { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean | undefined) { + this._setOption('endOnTick', value); + } + + @Input() + get firstPointOnStartAngle(): boolean { + return this._getOption('firstPointOnStartAngle'); + } + set firstPointOnStartAngle(value: boolean) { + this._setOption('firstPointOnStartAngle', value); + } + + @Input() + get grid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('grid'); + } + set grid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('grid', value); + } + + @Input() + get hoverMode(): ArgumentAxisHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: ArgumentAxisHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get label(): { customizeHint?: Function, customizeText?: Function, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: LabelOverlap, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { customizeHint?: Function, customizeText?: Function, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: LabelOverlap, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get linearThreshold(): number | undefined { + return this._getOption('linearThreshold'); + } + set linearThreshold(value: number | undefined) { + this._setOption('linearThreshold', value); + } + + @Input() + get logarithmBase(): number { + return this._getOption('logarithmBase'); + } + set logarithmBase(value: number) { + this._setOption('logarithmBase', value); + } + + @Input() + get minorGrid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('minorGrid'); + } + set minorGrid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('minorGrid', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickCount(): number | undefined { + return this._getOption('minorTickCount'); + } + set minorTickCount(value: number | undefined) { + this._setOption('minorTickCount', value); + } + + @Input() + get minorTickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minorTickInterval', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get originValue(): number | undefined { + return this._getOption('originValue'); + } + set originValue(value: number | undefined) { + this._setOption('originValue', value); + } + + @Input() + get period(): number | undefined { + return this._getOption('period'); + } + set period(value: number | undefined) { + this._setOption('period', value); + } + + @Input() + get startAngle(): number { + return this._getOption('startAngle'); + } + set startAngle(value: number) { + this._setOption('startAngle', value); + } + + @Input() + get strips(): Array { + return this._getOption('strips'); + } + set strips(value: Array) { + this._setOption('strips', value); + } + + @Input() + get stripStyle(): { label?: { font?: Font } } { + return this._getOption('stripStyle'); + } + set stripStyle(value: { label?: { font?: Font } }) { + this._setOption('stripStyle', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('tickInterval'); + } + set tickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('tickInterval', value); + } + + @Input() + get type(): AxisScaleType | undefined { + return this._getOption('type'); + } + set type(value: AxisScaleType | undefined) { + this._setOption('type', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'argumentAxis'; + } + + + @ContentChildren(forwardRef(() => DxiPolarChartConstantLineComponent)) + get constantLinesChildren(): QueryList { + return this._getOption('constantLines'); + } + set constantLinesChildren(value) { + this.setChildren('constantLines', value); + } + + @ContentChildren(forwardRef(() => DxiPolarChartStripComponent)) + get stripsChildren(): QueryList { + return this._getOption('strips'); + } + set stripsChildren(value) { + this.setChildren('strips', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartArgumentAxisComponent + ], + exports: [ + DxoPolarChartArgumentAxisComponent + ], +}) +export class DxoPolarChartArgumentAxisModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/argument-format.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/argument-format.ts new file mode 100644 index 000000000000..9f932b9fa7b8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/argument-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-argument-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartArgumentFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'argumentFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartArgumentFormatComponent + ], + exports: [ + DxoPolarChartArgumentFormatComponent + ], +}) +export class DxoPolarChartArgumentFormatModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/bar.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/bar.ts new file mode 100644 index 000000000000..62da52f73c66 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/bar.ts @@ -0,0 +1,307 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'bar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartBarComponent + ], + exports: [ + DxoPolarChartBarComponent + ], +}) +export class DxoPolarChartBarModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/border.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/border.ts new file mode 100644 index 000000000000..05c2c8da0c3a --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/border.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle | undefined { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle | undefined) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartBorderComponent + ], + exports: [ + DxoPolarChartBorderComponent + ], +}) +export class DxoPolarChartBorderModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/color.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/color.ts new file mode 100644 index 000000000000..9d183af11887 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'color'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartColorComponent + ], + exports: [ + DxoPolarChartColorComponent + ], +}) +export class DxoPolarChartColorModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/common-annotation-settings.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/common-annotation-settings.ts new file mode 100644 index 000000000000..9784cf588104 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/common-annotation-settings.ts @@ -0,0 +1,321 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-common-annotation-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartCommonAnnotationSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get angle(): number | undefined { + return this._getOption('angle'); + } + set angle(value: number | undefined) { + this._setOption('angle', value); + } + + @Input() + get argument(): Date | number | string | undefined { + return this._getOption('argument'); + } + set argument(value: Date | number | string | undefined) { + this._setOption('argument', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get radius(): number | undefined { + return this._getOption('radius'); + } + set radius(value: number | undefined) { + this._setOption('radius', value); + } + + @Input() + get series(): string | undefined { + return this._getOption('series'); + } + set series(value: string | undefined) { + this._setOption('series', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): Date | number | string | undefined { + return this._getOption('value'); + } + set value(value: Date | number | string | undefined) { + this._setOption('value', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'commonAnnotationSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartCommonAnnotationSettingsComponent + ], + exports: [ + DxoPolarChartCommonAnnotationSettingsComponent + ], +}) +export class DxoPolarChartCommonAnnotationSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/common-axis-settings.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/common-axis-settings.ts new file mode 100644 index 000000000000..c7894ff01f10 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/common-axis-settings.ts @@ -0,0 +1,185 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, DiscreteAxisDivisionMode, Font, LabelOverlap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-common-axis-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartCommonAxisSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get constantLineStyle(): { color?: string, dashStyle?: DashStyle, label?: { font?: Font, visible?: boolean }, width?: number } { + return this._getOption('constantLineStyle'); + } + set constantLineStyle(value: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, visible?: boolean }, width?: number }) { + this._setOption('constantLineStyle', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean | undefined { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean | undefined) { + this._setOption('endOnTick', value); + } + + @Input() + get grid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('grid'); + } + set grid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('grid', value); + } + + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get label(): { font?: Font, indentFromAxis?: number, overlappingBehavior?: LabelOverlap, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { font?: Font, indentFromAxis?: number, overlappingBehavior?: LabelOverlap, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get minorGrid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('minorGrid'); + } + set minorGrid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('minorGrid', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get stripStyle(): { label?: { font?: Font } } { + return this._getOption('stripStyle'); + } + set stripStyle(value: { label?: { font?: Font } }) { + this._setOption('stripStyle', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'commonAxisSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartCommonAxisSettingsComponent + ], + exports: [ + DxoPolarChartCommonAxisSettingsComponent + ], +}) +export class DxoPolarChartCommonAxisSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/common-series-settings.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/common-series-settings.ts new file mode 100644 index 000000000000..1c9642785667 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/common-series-settings.ts @@ -0,0 +1,307 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-common-series-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartCommonSeriesSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'commonSeriesSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartCommonSeriesSettingsComponent + ], + exports: [ + DxoPolarChartCommonSeriesSettingsComponent + ], +}) +export class DxoPolarChartCommonSeriesSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/connector.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/connector.ts new file mode 100644 index 000000000000..e15a13c46664 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/connector.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-connector', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartConnectorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'connector'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartConnectorComponent + ], + exports: [ + DxoPolarChartConnectorComponent + ], +}) +export class DxoPolarChartConnectorModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-dxi.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-dxi.ts new file mode 100644 index 000000000000..ebabd3d99a64 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-dxi.ts @@ -0,0 +1,115 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-polar-chart-constant-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPolarChartConstantLineComponent extends CollectionNestedOption { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get displayBehindSeries(): boolean { + return this._getOption('displayBehindSeries'); + } + set displayBehindSeries(value: boolean) { + this._setOption('displayBehindSeries', value); + } + + @Input() + get extendAxis(): boolean { + return this._getOption('extendAxis'); + } + set extendAxis(value: boolean) { + this._setOption('extendAxis', value); + } + + @Input() + get label(): { font?: Font, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { font?: Font, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get value(): Date | number | string | undefined { + return this._getOption('value'); + } + set value(value: Date | number | string | undefined) { + this._setOption('value', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'constantLines'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPolarChartConstantLineComponent + ], + exports: [ + DxiPolarChartConstantLineComponent + ], +}) +export class DxiPolarChartConstantLineModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-style.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-style.ts new file mode 100644 index 000000000000..badceae2432e --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/constant-line-style.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-constant-line-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartConstantLineStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get label(): { font?: Font, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { font?: Font, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'constantLineStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartConstantLineStyleComponent + ], + exports: [ + DxoPolarChartConstantLineStyleComponent + ], +}) +export class DxoPolarChartConstantLineStyleModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/data-prepare-settings.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/data-prepare-settings.ts new file mode 100644 index 000000000000..69bf639ba1a5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/data-prepare-settings.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-data-prepare-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartDataPrepareSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get checkTypeForAllData(): boolean { + return this._getOption('checkTypeForAllData'); + } + set checkTypeForAllData(value: boolean) { + this._setOption('checkTypeForAllData', value); + } + + @Input() + get convertToAxisDataType(): boolean { + return this._getOption('convertToAxisDataType'); + } + set convertToAxisDataType(value: boolean) { + this._setOption('convertToAxisDataType', value); + } + + @Input() + get sortingMethod(): boolean | Function { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: boolean | Function) { + this._setOption('sortingMethod', value); + } + + + protected get _optionPath() { + return 'dataPrepareSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartDataPrepareSettingsComponent + ], + exports: [ + DxoPolarChartDataPrepareSettingsComponent + ], +}) +export class DxoPolarChartDataPrepareSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/export.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/export.ts new file mode 100644 index 000000000000..b178158bd946 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartExportComponent + ], + exports: [ + DxoPolarChartExportComponent + ], +}) +export class DxoPolarChartExportModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/font.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/font.ts new file mode 100644 index 000000000000..727c7b9df4d4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartFontComponent + ], + exports: [ + DxoPolarChartFontComponent + ], +}) +export class DxoPolarChartFontModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/format.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/format.ts new file mode 100644 index 000000000000..f28a34276ca2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartFormatComponent + ], + exports: [ + DxoPolarChartFormatComponent + ], +}) +export class DxoPolarChartFormatModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/grid.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/grid.ts new file mode 100644 index 000000000000..ed01d6be026e --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/grid.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-grid', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartGridComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'grid'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartGridComponent + ], + exports: [ + DxoPolarChartGridComponent + ], +}) +export class DxoPolarChartGridModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/hatching.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/hatching.ts new file mode 100644 index 000000000000..51eb51a4ee1f --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/hatching.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-hatching', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartHatchingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get direction(): HatchDirection { + return this._getOption('direction'); + } + set direction(value: HatchDirection) { + this._setOption('direction', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get step(): number { + return this._getOption('step'); + } + set step(value: number) { + this._setOption('step', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'hatching'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartHatchingComponent + ], + exports: [ + DxoPolarChartHatchingComponent + ], +}) +export class DxoPolarChartHatchingModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/hover-style.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/hover-style.ts new file mode 100644 index 000000000000..93ebf2db3522 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/hover-style.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } | { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } | { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartHoverStyleComponent + ], + exports: [ + DxoPolarChartHoverStyleComponent + ], +}) +export class DxoPolarChartHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/image.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/image.ts new file mode 100644 index 000000000000..0eb30e66afd5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/image.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-image', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartImageComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get url(): string | undefined { + return this._getOption('url'); + } + set url(value: string | undefined) { + this._setOption('url', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'image'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartImageComponent + ], + exports: [ + DxoPolarChartImageComponent + ], +}) +export class DxoPolarChartImageModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/index.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/index.ts new file mode 100644 index 000000000000..0b6e2019fcfe --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/index.ts @@ -0,0 +1,50 @@ +export * from './adaptive-layout'; +export * from './animation'; +export * from './annotation-dxi'; +export * from './area'; +export * from './argument-axis'; +export * from './argument-format'; +export * from './bar'; +export * from './border'; +export * from './color'; +export * from './common-annotation-settings'; +export * from './common-axis-settings'; +export * from './common-series-settings'; +export * from './connector'; +export * from './constant-line-dxi'; +export * from './constant-line-style'; +export * from './data-prepare-settings'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './grid'; +export * from './hatching'; +export * from './hover-style'; +export * from './image'; +export * from './label'; +export * from './legend'; +export * from './line'; +export * from './loading-indicator'; +export * from './margin'; +export * from './min-visual-range-length'; +export * from './minor-grid'; +export * from './minor-tick-interval'; +export * from './minor-tick'; +export * from './point'; +export * from './scatter'; +export * from './selection-style'; +export * from './series-dxi'; +export * from './series-template'; +export * from './shadow'; +export * from './size'; +export * from './stackedbar'; +export * from './strip-dxi'; +export * from './strip-style'; +export * from './subtitle'; +export * from './tick-interval'; +export * from './tick'; +export * from './title'; +export * from './tooltip'; +export * from './value-axis'; +export * from './value-error-bar'; + diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/label.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/label.ts new file mode 100644 index 000000000000..8ed5c74ae901 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/label.ts @@ -0,0 +1,194 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font, LabelOverlap, RelativePosition } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get indentFromAxis(): number { + return this._getOption('indentFromAxis'); + } + set indentFromAxis(value: number) { + this._setOption('indentFromAxis', value); + } + + @Input() + get overlappingBehavior(): LabelOverlap { + return this._getOption('overlappingBehavior'); + } + set overlappingBehavior(value: LabelOverlap) { + this._setOption('overlappingBehavior', value); + } + + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get connector(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('connector'); + } + set connector(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('connector', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get position(): RelativePosition { + return this._getOption('position'); + } + set position(value: RelativePosition) { + this._setOption('position', value); + } + + @Input() + get rotationAngle(): number { + return this._getOption('rotationAngle'); + } + set rotationAngle(value: number) { + this._setOption('rotationAngle', value); + } + + @Input() + get showForZeroValues(): boolean { + return this._getOption('showForZeroValues'); + } + set showForZeroValues(value: boolean) { + this._setOption('showForZeroValues', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartLabelComponent + ], + exports: [ + DxoPolarChartLabelComponent + ], +}) +export class DxoPolarChartLabelModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts new file mode 100644 index 000000000000..b6213f88fb0a --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts @@ -0,0 +1,250 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Orientation, Position, VerticalEdge } from 'devextreme/common'; +import { DashStyle, Font, LegendHoverMode } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-legend', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartLegendComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get columnCount(): number { + return this._getOption('columnCount'); + } + set columnCount(value: number) { + this._setOption('columnCount', value); + } + + @Input() + get columnItemSpacing(): number { + return this._getOption('columnItemSpacing'); + } + set columnItemSpacing(value: number) { + this._setOption('columnItemSpacing', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeItems(): Function { + return this._getOption('customizeItems'); + } + set customizeItems(value: Function) { + this._setOption('customizeItems', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get hoverMode(): LegendHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: LegendHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get itemsAlignment(): HorizontalAlignment | undefined { + return this._getOption('itemsAlignment'); + } + set itemsAlignment(value: HorizontalAlignment | undefined) { + this._setOption('itemsAlignment', value); + } + + @Input() + get itemTextPosition(): Position | undefined { + return this._getOption('itemTextPosition'); + } + set itemTextPosition(value: Position | undefined) { + this._setOption('itemTextPosition', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get markerSize(): number { + return this._getOption('markerSize'); + } + set markerSize(value: number) { + this._setOption('markerSize', value); + } + + @Input() + get markerTemplate(): any | undefined { + return this._getOption('markerTemplate'); + } + set markerTemplate(value: any | undefined) { + this._setOption('markerTemplate', value); + } + + @Input() + get orientation(): Orientation | undefined { + return this._getOption('orientation'); + } + set orientation(value: Orientation | undefined) { + this._setOption('orientation', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get rowCount(): number { + return this._getOption('rowCount'); + } + set rowCount(value: number) { + this._setOption('rowCount', value); + } + + @Input() + get rowItemSpacing(): number { + return this._getOption('rowItemSpacing'); + } + set rowItemSpacing(value: number) { + this._setOption('rowItemSpacing', value); + } + + @Input() + get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } { + return this._getOption('title'); + } + set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) { + this._setOption('title', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'legend'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartLegendComponent + ], + exports: [ + DxoPolarChartLegendComponent + ], +}) +export class DxoPolarChartLegendModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/line.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/line.ts new file mode 100644 index 000000000000..6952edc0c6b6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/line.ts @@ -0,0 +1,307 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartLineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'line'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartLineComponent + ], + exports: [ + DxoPolarChartLineComponent + ], +}) +export class DxoPolarChartLineModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/loading-indicator.ts new file mode 100644 index 000000000000..75c7cb972d88 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartLoadingIndicatorComponent + ], + exports: [ + DxoPolarChartLoadingIndicatorComponent + ], +}) +export class DxoPolarChartLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/margin.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/margin.ts new file mode 100644 index 000000000000..864e701c84c9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartMarginComponent + ], + exports: [ + DxoPolarChartMarginComponent + ], +}) +export class DxoPolarChartMarginModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/min-visual-range-length.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/min-visual-range-length.ts new file mode 100644 index 000000000000..60a2f25c72f8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/min-visual-range-length.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-min-visual-range-length', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartMinVisualRangeLengthComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'minVisualRangeLength'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartMinVisualRangeLengthComponent + ], + exports: [ + DxoPolarChartMinVisualRangeLengthComponent + ], +}) +export class DxoPolarChartMinVisualRangeLengthModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/minor-grid.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/minor-grid.ts new file mode 100644 index 000000000000..e1f03dd6966b --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/minor-grid.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-minor-grid', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartMinorGridComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorGrid'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartMinorGridComponent + ], + exports: [ + DxoPolarChartMinorGridComponent + ], +}) +export class DxoPolarChartMinorGridModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick-interval.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick-interval.ts new file mode 100644 index 000000000000..6c896e804905 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-minor-tick-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartMinorTickIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'minorTickInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartMinorTickIntervalComponent + ], + exports: [ + DxoPolarChartMinorTickIntervalComponent + ], +}) +export class DxoPolarChartMinorTickIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick.ts new file mode 100644 index 000000000000..604fa1688623 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/minor-tick.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-minor-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartMinorTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get shift(): number { + return this._getOption('shift'); + } + set shift(value: number) { + this._setOption('shift', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorTick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartMinorTickComponent + ], + exports: [ + DxoPolarChartMinorTickComponent + ], +}) +export class DxoPolarChartMinorTickModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/ng-package.json b/packages/devextreme-angular/src/ui/polar-chart/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/point.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/point.ts new file mode 100644 index 000000000000..451ba846bc53 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/point.ts @@ -0,0 +1,145 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, PointInteractionMode, PointSymbol } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-point', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartPointComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hoverMode(): PointInteractionMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: PointInteractionMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get image(): string | undefined | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | undefined | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get selectionMode(): PointInteractionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: PointInteractionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get symbol(): PointSymbol { + return this._getOption('symbol'); + } + set symbol(value: PointSymbol) { + this._setOption('symbol', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'point'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartPointComponent + ], + exports: [ + DxoPolarChartPointComponent + ], +}) +export class DxoPolarChartPointModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/scatter.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/scatter.ts new file mode 100644 index 000000000000..dcf496fdaf1a --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/scatter.ts @@ -0,0 +1,307 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-scatter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartScatterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'scatter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartScatterComponent + ], + exports: [ + DxoPolarChartScatterComponent + ], +}) +export class DxoPolarChartScatterModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/selection-style.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/selection-style.ts new file mode 100644 index 000000000000..40fdd1efa6ea --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/selection-style.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-selection-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartSelectionStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean, width?: number } | { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean, width?: number } | { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'selectionStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartSelectionStyleComponent + ], + exports: [ + DxoPolarChartSelectionStyleComponent + ], +}) +export class DxoPolarChartSelectionStyleModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/series-dxi.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/series-dxi.ts new file mode 100644 index 000000000000..25a6ad1c3b22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/series-dxi.ts @@ -0,0 +1,277 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-polar-chart-series', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPolarChartSeriesComponent extends CollectionNestedOption { + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get tag(): any | undefined { + return this._getOption('tag'); + } + set tag(value: any | undefined) { + this._setOption('tag', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'series'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPolarChartSeriesComponent + ], + exports: [ + DxiPolarChartSeriesComponent + ], +}) +export class DxiPolarChartSeriesModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/series-template.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/series-template.ts new file mode 100644 index 000000000000..72c9aeb7f96e --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/series-template.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-series-template', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartSeriesTemplateComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeSeries(): Function { + return this._getOption('customizeSeries'); + } + set customizeSeries(value: Function) { + this._setOption('customizeSeries', value); + } + + @Input() + get nameField(): string { + return this._getOption('nameField'); + } + set nameField(value: string) { + this._setOption('nameField', value); + } + + + protected get _optionPath() { + return 'seriesTemplate'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartSeriesTemplateComponent + ], + exports: [ + DxoPolarChartSeriesTemplateComponent + ], +}) +export class DxoPolarChartSeriesTemplateModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/shadow.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/shadow.ts new file mode 100644 index 000000000000..8c9b379bd367 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartShadowComponent + ], + exports: [ + DxoPolarChartShadowComponent + ], +}) +export class DxoPolarChartShadowModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/size.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/size.ts new file mode 100644 index 000000000000..b843b5e81e9d --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartSizeComponent + ], + exports: [ + DxoPolarChartSizeComponent + ], +}) +export class DxoPolarChartSizeModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/stackedbar.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/stackedbar.ts new file mode 100644 index 000000000000..2a04c6edb9d9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/stackedbar.ts @@ -0,0 +1,307 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { PolarChartSeriesType } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-stackedbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartStackedbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closed(): boolean { + return this._getOption('closed'); + } + set closed(value: boolean) { + this._setOption('closed', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get label(): { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, image?: string | undefined | { height?: number, url?: string | undefined, width?: number }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): PolarChartSeriesType { + return this._getOption('type'); + } + set type(value: PolarChartSeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedbar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartStackedbarComponent + ], + exports: [ + DxoPolarChartStackedbarComponent + ], +}) +export class DxoPolarChartStackedbarModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/strip-dxi.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/strip-dxi.ts new file mode 100644 index 000000000000..846c98680469 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/strip-dxi.ts @@ -0,0 +1,91 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-polar-chart-strip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiPolarChartStripComponent extends CollectionNestedOption { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get endValue(): Date | number | string | undefined { + return this._getOption('endValue'); + } + set endValue(value: Date | number | string | undefined) { + this._setOption('endValue', value); + } + + @Input() + get label(): { font?: Font, text?: string | undefined } { + return this._getOption('label'); + } + set label(value: { font?: Font, text?: string | undefined }) { + this._setOption('label', value); + } + + @Input() + get startValue(): Date | number | string | undefined { + return this._getOption('startValue'); + } + set startValue(value: Date | number | string | undefined) { + this._setOption('startValue', value); + } + + + protected get _optionPath() { + return 'strips'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPolarChartStripComponent + ], + exports: [ + DxiPolarChartStripComponent + ], +}) +export class DxiPolarChartStripModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/strip-style.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/strip-style.ts new file mode 100644 index 000000000000..d0f2699159e0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/strip-style.ts @@ -0,0 +1,73 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-strip-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartStripStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get label(): { font?: Font } { + return this._getOption('label'); + } + set label(value: { font?: Font }) { + this._setOption('label', value); + } + + + protected get _optionPath() { + return 'stripStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartStripStyleComponent + ], + exports: [ + DxoPolarChartStripStyleComponent + ], +}) +export class DxoPolarChartStripStyleModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts new file mode 100644 index 000000000000..3369e99e625e --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartSubtitleComponent + ], + exports: [ + DxoPolarChartSubtitleComponent + ], +}) +export class DxoPolarChartSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/tick-interval.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/tick-interval.ts new file mode 100644 index 000000000000..00d9d1a89d50 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/tick-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-tick-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartTickIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'tickInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartTickIntervalComponent + ], + exports: [ + DxoPolarChartTickIntervalComponent + ], +}) +export class DxoPolarChartTickIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/tick.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/tick.ts new file mode 100644 index 000000000000..d573035fcaff --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/tick.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get length(): number { + return this._getOption('length'); + } + set length(value: number) { + this._setOption('length', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get shift(): number { + return this._getOption('shift'); + } + set shift(value: number) { + this._setOption('shift', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'tick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartTickComponent + ], + exports: [ + DxoPolarChartTickComponent + ], +}) +export class DxoPolarChartTickModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts new file mode 100644 index 000000000000..88a50eeeae77 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment | undefined { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment | undefined) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): { bottom?: number, left?: number, right?: number, top?: number } | number { + return this._getOption('margin'); + } + set margin(value: { bottom?: number, left?: number, right?: number, top?: number } | number) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartTitleComponent + ], + exports: [ + DxoPolarChartTitleComponent + ], +}) +export class DxoPolarChartTitleModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/tooltip.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/tooltip.ts new file mode 100644 index 000000000000..05b8199ac5dc --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/tooltip.ts @@ -0,0 +1,211 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get shared(): boolean { + return this._getOption('shared'); + } + set shared(value: boolean) { + this._setOption('shared', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartTooltipComponent + ], + exports: [ + DxoPolarChartTooltipComponent + ], +}) +export class DxoPolarChartTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/value-axis.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/value-axis.ts new file mode 100644 index 000000000000..9f13aee22148 --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/value-axis.ts @@ -0,0 +1,373 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AxisScaleType, ChartsDataType, DashStyle, DiscreteAxisDivisionMode, Font, LabelOverlap, TimeInterval, VisualRange } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ValueAxisVisualRangeUpdateMode } from 'devextreme/viz/polar_chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiPolarChartConstantLineComponent } from './constant-line-dxi'; +import { DxiPolarChartStripComponent } from './strip-dxi'; + + +@Component({ + selector: 'dxo-polar-chart-value-axis', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartValueAxisComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get axisDivisionFactor(): number { + return this._getOption('axisDivisionFactor'); + } + set axisDivisionFactor(value: number) { + this._setOption('axisDivisionFactor', value); + } + + @Input() + get categories(): Array { + return this._getOption('categories'); + } + set categories(value: Array) { + this._setOption('categories', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get constantLines(): Array { + return this._getOption('constantLines'); + } + set constantLines(value: Array) { + this._setOption('constantLines', value); + } + + @Input() + get constantLineStyle(): { color?: string, dashStyle?: DashStyle, label?: { font?: Font, visible?: boolean }, width?: number } { + return this._getOption('constantLineStyle'); + } + set constantLineStyle(value: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, visible?: boolean }, width?: number }) { + this._setOption('constantLineStyle', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean) { + this._setOption('endOnTick', value); + } + + @Input() + get grid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('grid'); + } + set grid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('grid', value); + } + + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get label(): { customizeHint?: Function, customizeText?: Function, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: LabelOverlap, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { customizeHint?: Function, customizeText?: Function, font?: Font, format?: Format | string | undefined, indentFromAxis?: number, overlappingBehavior?: LabelOverlap, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get linearThreshold(): number | undefined { + return this._getOption('linearThreshold'); + } + set linearThreshold(value: number | undefined) { + this._setOption('linearThreshold', value); + } + + @Input() + get logarithmBase(): number { + return this._getOption('logarithmBase'); + } + set logarithmBase(value: number) { + this._setOption('logarithmBase', value); + } + + @Input() + get maxValueMargin(): number | undefined { + return this._getOption('maxValueMargin'); + } + set maxValueMargin(value: number | undefined) { + this._setOption('maxValueMargin', value); + } + + @Input() + get minorGrid(): { color?: string, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('minorGrid'); + } + set minorGrid(value: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('minorGrid', value); + } + + @Input() + get minorTick(): { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickCount(): number | undefined { + return this._getOption('minorTickCount'); + } + set minorTickCount(value: number | undefined) { + this._setOption('minorTickCount', value); + } + + @Input() + get minorTickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minorTickInterval', value); + } + + @Input() + get minValueMargin(): number | undefined { + return this._getOption('minValueMargin'); + } + set minValueMargin(value: number | undefined) { + this._setOption('minValueMargin', value); + } + + @Input() + get minVisualRangeLength(): TimeInterval | number | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minVisualRangeLength'); + } + set minVisualRangeLength(value: TimeInterval | number | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minVisualRangeLength', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get showZero(): boolean | undefined { + return this._getOption('showZero'); + } + set showZero(value: boolean | undefined) { + this._setOption('showZero', value); + } + + @Input() + get strips(): Array { + return this._getOption('strips'); + } + set strips(value: Array) { + this._setOption('strips', value); + } + + @Input() + get stripStyle(): { label?: { font?: Font } } { + return this._getOption('stripStyle'); + } + set stripStyle(value: { label?: { font?: Font } }) { + this._setOption('stripStyle', value); + } + + @Input() + get tick(): { color?: string, length?: number, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, length?: number, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('tickInterval'); + } + set tickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('tickInterval', value); + } + + @Input() + get type(): AxisScaleType | undefined { + return this._getOption('type'); + } + set type(value: AxisScaleType | undefined) { + this._setOption('type', value); + } + + @Input() + get valueMarginsEnabled(): boolean { + return this._getOption('valueMarginsEnabled'); + } + set valueMarginsEnabled(value: boolean) { + this._setOption('valueMarginsEnabled', value); + } + + @Input() + get valueType(): ChartsDataType | undefined { + return this._getOption('valueType'); + } + set valueType(value: ChartsDataType | undefined) { + this._setOption('valueType', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visualRange(): VisualRange | Array { + return this._getOption('visualRange'); + } + set visualRange(value: VisualRange | Array) { + this._setOption('visualRange', value); + } + + @Input() + get visualRangeUpdateMode(): ValueAxisVisualRangeUpdateMode { + return this._getOption('visualRangeUpdateMode'); + } + set visualRangeUpdateMode(value: ValueAxisVisualRangeUpdateMode) { + this._setOption('visualRangeUpdateMode', value); + } + + @Input() + get wholeRange(): VisualRange | undefined | Array { + return this._getOption('wholeRange'); + } + set wholeRange(value: VisualRange | undefined | Array) { + this._setOption('wholeRange', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visualRangeChange: EventEmitter>; + protected get _optionPath() { + return 'valueAxis'; + } + + + @ContentChildren(forwardRef(() => DxiPolarChartConstantLineComponent)) + get constantLinesChildren(): QueryList { + return this._getOption('constantLines'); + } + set constantLinesChildren(value) { + this.setChildren('constantLines', value); + } + + @ContentChildren(forwardRef(() => DxiPolarChartStripComponent)) + get stripsChildren(): QueryList { + return this._getOption('strips'); + } + set stripsChildren(value) { + this.setChildren('strips', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'visualRangeChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartValueAxisComponent + ], + exports: [ + DxoPolarChartValueAxisComponent + ], +}) +export class DxoPolarChartValueAxisModule { } diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/value-error-bar.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/value-error-bar.ts new file mode 100644 index 000000000000..e3a89196df8d --- /dev/null +++ b/packages/devextreme-angular/src/ui/polar-chart/nested/value-error-bar.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-polar-chart-value-error-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPolarChartValueErrorBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get displayMode(): ValueErrorBarDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: ValueErrorBarDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get edgeLength(): number { + return this._getOption('edgeLength'); + } + set edgeLength(value: number) { + this._setOption('edgeLength', value); + } + + @Input() + get highValueField(): string | undefined { + return this._getOption('highValueField'); + } + set highValueField(value: string | undefined) { + this._setOption('highValueField', value); + } + + @Input() + get lineWidth(): number { + return this._getOption('lineWidth'); + } + set lineWidth(value: number) { + this._setOption('lineWidth', value); + } + + @Input() + get lowValueField(): string | undefined { + return this._getOption('lowValueField'); + } + set lowValueField(value: string | undefined) { + this._setOption('lowValueField', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get type(): ValueErrorBarType | undefined { + return this._getOption('type'); + } + set type(value: ValueErrorBarType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): number { + return this._getOption('value'); + } + set value(value: number) { + this._setOption('value', value); + } + + + protected get _optionPath() { + return 'valueErrorBar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPolarChartValueErrorBarComponent + ], + exports: [ + DxoPolarChartValueErrorBarComponent + ], +}) +export class DxoPolarChartValueErrorBarModule { } diff --git a/packages/devextreme-angular/src/ui/popover/index.ts b/packages/devextreme-angular/src/ui/popover/index.ts index 4717c5a5d7ca..2ec2c48316e1 100644 --- a/packages/devextreme-angular/src/ui/popover/index.ts +++ b/packages/devextreme-angular/src/ui/popover/index.ts @@ -56,11 +56,25 @@ import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; import { DxoHideEventModule } from 'devextreme-angular/ui/nested'; import { DxoShowEventModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemComponent } from 'devextreme-angular/ui/nested'; +import { DxoPopoverAnimationModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverHideModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverFromModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverPositionModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverAtModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverBoundaryOffsetModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverCollisionModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverMyModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverOffsetModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverToModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverShowModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverHideEventModule } from 'devextreme-angular/ui/popover/nested'; +import { DxoPopoverShowEventModule } from 'devextreme-angular/ui/popover/nested'; +import { DxiPopoverToolbarItemModule } from 'devextreme-angular/ui/popover/nested'; +import { DxiPopoverToolbarItemComponent } from 'devextreme-angular/ui/popover/nested'; + /** * [descr:dxPopover] @@ -775,17 +789,19 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan - @ContentChildren(DxiToolbarItemComponent) - get toolbarItemsChildren(): QueryList { + @ContentChildren(DxiPopoverToolbarItemComponent) + get toolbarItemsChildren(): QueryList { return this._getOption('toolbarItems'); } set toolbarItemsChildren(value) { + this.setContentChildren('toolbarItems', value, 'DxiPopoverToolbarItemComponent'); this.setChildren('toolbarItems', value); } + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -895,7 +911,20 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan DxoShowModule, DxoHideEventModule, DxoShowEventModule, - DxiToolbarItemModule, + DxoPopoverAnimationModule, + DxoPopoverHideModule, + DxoPopoverFromModule, + DxoPopoverPositionModule, + DxoPopoverAtModule, + DxoPopoverBoundaryOffsetModule, + DxoPopoverCollisionModule, + DxoPopoverMyModule, + DxoPopoverOffsetModule, + DxoPopoverToModule, + DxoPopoverShowModule, + DxoPopoverHideEventModule, + DxoPopoverShowEventModule, + DxiPopoverToolbarItemModule, DxIntegrationModule, DxTemplateModule ], @@ -917,7 +946,20 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan DxoShowModule, DxoHideEventModule, DxoShowEventModule, - DxiToolbarItemModule, + DxoPopoverAnimationModule, + DxoPopoverHideModule, + DxoPopoverFromModule, + DxoPopoverPositionModule, + DxoPopoverAtModule, + DxoPopoverBoundaryOffsetModule, + DxoPopoverCollisionModule, + DxoPopoverMyModule, + DxoPopoverOffsetModule, + DxoPopoverToModule, + DxoPopoverShowModule, + DxoPopoverHideEventModule, + DxoPopoverShowEventModule, + DxiPopoverToolbarItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/popover/nested/animation.ts b/packages/devextreme-angular/src/ui/popover/nested/animation.ts new file mode 100644 index 000000000000..d784bdadaf04 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverAnimationComponent + ], + exports: [ + DxoPopoverAnimationComponent + ], +}) +export class DxoPopoverAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/at.ts b/packages/devextreme-angular/src/ui/popover/nested/at.ts new file mode 100644 index 000000000000..25a1938dfb8e --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverAtComponent + ], + exports: [ + DxoPopoverAtComponent + ], +}) +export class DxoPopoverAtModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/popover/nested/boundary-offset.ts new file mode 100644 index 000000000000..3dac417eb706 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverBoundaryOffsetComponent + ], + exports: [ + DxoPopoverBoundaryOffsetComponent + ], +}) +export class DxoPopoverBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/collision.ts b/packages/devextreme-angular/src/ui/popover/nested/collision.ts new file mode 100644 index 000000000000..8c5b8e2f0a31 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverCollisionComponent + ], + exports: [ + DxoPopoverCollisionComponent + ], +}) +export class DxoPopoverCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/from.ts b/packages/devextreme-angular/src/ui/popover/nested/from.ts new file mode 100644 index 000000000000..dea87b235570 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverFromComponent + ], + exports: [ + DxoPopoverFromComponent + ], +}) +export class DxoPopoverFromModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/hide-event.ts b/packages/devextreme-angular/src/ui/popover/nested/hide-event.ts new file mode 100644 index 000000000000..17bbf9fec944 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/hide-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-hide-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverHideEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'hideEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverHideEventComponent + ], + exports: [ + DxoPopoverHideEventComponent + ], +}) +export class DxoPopoverHideEventModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/hide.ts b/packages/devextreme-angular/src/ui/popover/nested/hide.ts new file mode 100644 index 000000000000..10bed4c67518 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverHideComponent + ], + exports: [ + DxoPopoverHideComponent + ], +}) +export class DxoPopoverHideModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/index.ts b/packages/devextreme-angular/src/ui/popover/nested/index.ts new file mode 100644 index 000000000000..72c96c2fe0ed --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/index.ts @@ -0,0 +1,15 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './from'; +export * from './hide-event'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show-event'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/popover/nested/my.ts b/packages/devextreme-angular/src/ui/popover/nested/my.ts new file mode 100644 index 000000000000..52948d1289f7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverMyComponent + ], + exports: [ + DxoPopoverMyComponent + ], +}) +export class DxoPopoverMyModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/ng-package.json b/packages/devextreme-angular/src/ui/popover/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/popover/nested/offset.ts b/packages/devextreme-angular/src/ui/popover/nested/offset.ts new file mode 100644 index 000000000000..89557a9c8bd3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverOffsetComponent + ], + exports: [ + DxoPopoverOffsetComponent + ], +}) +export class DxoPopoverOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/position.ts b/packages/devextreme-angular/src/ui/popover/nested/position.ts new file mode 100644 index 000000000000..7e56a48e07b5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverPositionComponent + ], + exports: [ + DxoPopoverPositionComponent + ], +}) +export class DxoPopoverPositionModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/show-event.ts b/packages/devextreme-angular/src/ui/popover/nested/show-event.ts new file mode 100644 index 000000000000..bbd1a3dc7fc8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/show-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-show-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverShowEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverShowEventComponent + ], + exports: [ + DxoPopoverShowEventComponent + ], +}) +export class DxoPopoverShowEventModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/show.ts b/packages/devextreme-angular/src/ui/popover/nested/show.ts new file mode 100644 index 000000000000..4e13a29dd031 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverShowComponent + ], + exports: [ + DxoPopoverShowComponent + ], +}) +export class DxoPopoverShowModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/to.ts b/packages/devextreme-angular/src/ui/popover/nested/to.ts new file mode 100644 index 000000000000..4a9de746d777 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popover-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopoverToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopoverToComponent + ], + exports: [ + DxoPopoverToComponent + ], +}) +export class DxoPopoverToModule { } diff --git a/packages/devextreme-angular/src/ui/popover/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/popover/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..52556ec0e80b --- /dev/null +++ b/packages/devextreme-angular/src/ui/popover/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-popover-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiPopoverToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPopoverToolbarItemComponent + ], + exports: [ + DxiPopoverToolbarItemComponent + ], +}) +export class DxiPopoverToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/popup/index.ts b/packages/devextreme-angular/src/ui/popup/index.ts index 5dcbd07afbdc..f11aafd359b5 100644 --- a/packages/devextreme-angular/src/ui/popup/index.ts +++ b/packages/devextreme-angular/src/ui/popup/index.ts @@ -53,11 +53,23 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemComponent } from 'devextreme-angular/ui/nested'; +import { DxoPopupAnimationModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupHideModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupFromModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupPositionModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupAtModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupBoundaryOffsetModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupCollisionModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupMyModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupOffsetModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupToModule } from 'devextreme-angular/ui/popup/nested'; +import { DxoPopupShowModule } from 'devextreme-angular/ui/popup/nested'; +import { DxiPopupToolbarItemModule } from 'devextreme-angular/ui/popup/nested'; +import { DxiPopupToolbarItemComponent } from 'devextreme-angular/ui/popup/nested'; + /** * [descr:dxPopup] @@ -916,17 +928,19 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange - @ContentChildren(DxiToolbarItemComponent) - get toolbarItemsChildren(): QueryList { + @ContentChildren(DxiPopupToolbarItemComponent) + get toolbarItemsChildren(): QueryList { return this._getOption('toolbarItems'); } set toolbarItemsChildren(value) { + this.setContentChildren('toolbarItems', value, 'DxiPopupToolbarItemComponent'); this.setChildren('toolbarItems', value); } + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -1043,7 +1057,18 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxoPopupAnimationModule, + DxoPopupHideModule, + DxoPopupFromModule, + DxoPopupPositionModule, + DxoPopupAtModule, + DxoPopupBoundaryOffsetModule, + DxoPopupCollisionModule, + DxoPopupMyModule, + DxoPopupOffsetModule, + DxoPopupToModule, + DxoPopupShowModule, + DxiPopupToolbarItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1063,7 +1088,18 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, + DxoPopupAnimationModule, + DxoPopupHideModule, + DxoPopupFromModule, + DxoPopupPositionModule, + DxoPopupAtModule, + DxoPopupBoundaryOffsetModule, + DxoPopupCollisionModule, + DxoPopupMyModule, + DxoPopupOffsetModule, + DxoPopupToModule, + DxoPopupShowModule, + DxiPopupToolbarItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/popup/nested/animation.ts b/packages/devextreme-angular/src/ui/popup/nested/animation.ts new file mode 100644 index 000000000000..c2630d3bfad1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupAnimationComponent + ], + exports: [ + DxoPopupAnimationComponent + ], +}) +export class DxoPopupAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/at.ts b/packages/devextreme-angular/src/ui/popup/nested/at.ts new file mode 100644 index 000000000000..9360daac1818 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupAtComponent + ], + exports: [ + DxoPopupAtComponent + ], +}) +export class DxoPopupAtModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/popup/nested/boundary-offset.ts new file mode 100644 index 000000000000..7b510ba7d623 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupBoundaryOffsetComponent + ], + exports: [ + DxoPopupBoundaryOffsetComponent + ], +}) +export class DxoPopupBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/collision.ts b/packages/devextreme-angular/src/ui/popup/nested/collision.ts new file mode 100644 index 000000000000..9edb75160069 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupCollisionComponent + ], + exports: [ + DxoPopupCollisionComponent + ], +}) +export class DxoPopupCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/from.ts b/packages/devextreme-angular/src/ui/popup/nested/from.ts new file mode 100644 index 000000000000..be32f403443c --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupFromComponent + ], + exports: [ + DxoPopupFromComponent + ], +}) +export class DxoPopupFromModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/hide.ts b/packages/devextreme-angular/src/ui/popup/nested/hide.ts new file mode 100644 index 000000000000..6a2024401cbd --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupHideComponent + ], + exports: [ + DxoPopupHideComponent + ], +}) +export class DxoPopupHideModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/index.ts b/packages/devextreme-angular/src/ui/popup/nested/index.ts new file mode 100644 index 000000000000..d69945f773a8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/index.ts @@ -0,0 +1,13 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './from'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/popup/nested/my.ts b/packages/devextreme-angular/src/ui/popup/nested/my.ts new file mode 100644 index 000000000000..46e35dea80ff --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupMyComponent + ], + exports: [ + DxoPopupMyComponent + ], +}) +export class DxoPopupMyModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/ng-package.json b/packages/devextreme-angular/src/ui/popup/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/popup/nested/offset.ts b/packages/devextreme-angular/src/ui/popup/nested/offset.ts new file mode 100644 index 000000000000..1aef6bcb626f --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupOffsetComponent + ], + exports: [ + DxoPopupOffsetComponent + ], +}) +export class DxoPopupOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/position.ts b/packages/devextreme-angular/src/ui/popup/nested/position.ts new file mode 100644 index 000000000000..a711027831af --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupPositionComponent + ], + exports: [ + DxoPopupPositionComponent + ], +}) +export class DxoPopupPositionModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/show.ts b/packages/devextreme-angular/src/ui/popup/nested/show.ts new file mode 100644 index 000000000000..8daa6d6eee22 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupShowComponent + ], + exports: [ + DxoPopupShowComponent + ], +}) +export class DxoPopupShowModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/to.ts b/packages/devextreme-angular/src/ui/popup/nested/to.ts new file mode 100644 index 000000000000..45f10f0cfa6e --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-popup-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoPopupToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoPopupToComponent + ], + exports: [ + DxoPopupToComponent + ], +}) +export class DxoPopupToModule { } diff --git a/packages/devextreme-angular/src/ui/popup/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/popup/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..ebff95c605e5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/popup/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-popup-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiPopupToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiPopupToolbarItemComponent + ], + exports: [ + DxiPopupToolbarItemComponent + ], +}) +export class DxiPopupToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/progress-bar/index.ts b/packages/devextreme-angular/src/ui/progress-bar/index.ts index 5db888b7dd8d..3fcfd05a3e6a 100644 --- a/packages/devextreme-angular/src/ui/progress-bar/index.ts +++ b/packages/devextreme-angular/src/ui/progress-bar/index.ts @@ -47,6 +47,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxProgressBarComponent), @@ -553,6 +554,7 @@ export class DxProgressBarComponent extends DxComponent implements OnDestroy, Co + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/radio-group/index.ts b/packages/devextreme-angular/src/ui/radio-group/index.ts index a1e5f1a4fa2a..7dd95b1be053 100644 --- a/packages/devextreme-angular/src/ui/radio-group/index.ts +++ b/packages/devextreme-angular/src/ui/radio-group/index.ts @@ -49,8 +49,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiRadioGroupItemModule } from 'devextreme-angular/ui/radio-group/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiRadioGroupItemComponent } from 'devextreme-angular/ui/radio-group/nested'; @@ -689,15 +692,27 @@ export class DxRadioGroupComponent extends DxComponent implements OnDestroy, Con @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiRadioGroupItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiRadioGroupItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -815,6 +830,7 @@ export class DxRadioGroupComponent extends DxComponent implements OnDestroy, Con @NgModule({ imports: [ DxiItemModule, + DxiRadioGroupItemModule, DxIntegrationModule, DxTemplateModule ], @@ -824,6 +840,7 @@ export class DxRadioGroupComponent extends DxComponent implements OnDestroy, Con exports: [ DxRadioGroupComponent, DxiItemModule, + DxiRadioGroupItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/radio-group/nested/index.ts b/packages/devextreme-angular/src/ui/radio-group/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/radio-group/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/radio-group/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/radio-group/nested/item-dxi.ts new file mode 100644 index 000000000000..c1e0a2f03116 --- /dev/null +++ b/packages/devextreme-angular/src/ui/radio-group/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-radio-group-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiRadioGroupItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiRadioGroupItemComponent + ], + exports: [ + DxiRadioGroupItemComponent + ], +}) +export class DxiRadioGroupItemModule { } diff --git a/packages/devextreme-angular/src/ui/radio-group/nested/ng-package.json b/packages/devextreme-angular/src/ui/radio-group/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/radio-group/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/range-selector/index.ts b/packages/devextreme-angular/src/ui/range-selector/index.ts index 08be93b8a3e1..8ced51fe4c9e 100644 --- a/packages/devextreme-angular/src/ui/range-selector/index.ts +++ b/packages/devextreme-angular/src/ui/range-selector/index.ts @@ -118,6 +118,77 @@ import { DxoSliderMarkerModule } from 'devextreme-angular/ui/nested'; import { DxoTitleModule } from 'devextreme-angular/ui/nested'; import { DxoSubtitleModule } from 'devextreme-angular/ui/nested'; +import { DxoRangeSelectorBackgroundModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorImageModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorBehaviorModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorChartModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorCommonSeriesSettingsModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorAggregationModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorAreaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorBorderModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorHoverStyleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorHatchingModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorLabelModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorConnectorModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorPointModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorHeightModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorUrlModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorWidthModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSelectionStyleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorReductionModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorValueErrorBarModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorBarModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorBubbleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorCandlestickModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorColorModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFullstackedareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFullstackedbarModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFullstackedlineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFullstackedsplineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFullstackedsplineareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorArgumentFormatModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFontModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorFormatModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorLineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorRangeareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorRangebarModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorScatterModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSplineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSplineareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStackedareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStackedbarModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStackedlineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStackedsplineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStackedsplineareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStepareaModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSteplineModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorStockModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorDataPrepareSettingsModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxiRangeSelectorSeriesModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSeriesTemplateModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorValueAxisModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorExportModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorIndentModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorLoadingIndicatorModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorMarginModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorScaleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorAggregationIntervalModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxiRangeSelectorBreakModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorBreakStyleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorMarkerModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorMaxRangeModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorMinorTickModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorMinorTickIntervalModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorMinRangeModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorTickModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorTickIntervalModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorShutterModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSizeModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSliderHandleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSliderMarkerModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorTitleModule } from 'devextreme-angular/ui/range-selector/nested'; +import { DxoRangeSelectorSubtitleModule } from 'devextreme-angular/ui/range-selector/nested'; + @@ -733,6 +804,7 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy, + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -912,6 +984,76 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy, DxoSliderMarkerModule, DxoTitleModule, DxoSubtitleModule, + DxoRangeSelectorBackgroundModule, + DxoRangeSelectorImageModule, + DxoRangeSelectorBehaviorModule, + DxoRangeSelectorChartModule, + DxoRangeSelectorCommonSeriesSettingsModule, + DxoRangeSelectorAggregationModule, + DxoRangeSelectorAreaModule, + DxoRangeSelectorBorderModule, + DxoRangeSelectorHoverStyleModule, + DxoRangeSelectorHatchingModule, + DxoRangeSelectorLabelModule, + DxoRangeSelectorConnectorModule, + DxoRangeSelectorPointModule, + DxoRangeSelectorHeightModule, + DxoRangeSelectorUrlModule, + DxoRangeSelectorWidthModule, + DxoRangeSelectorSelectionStyleModule, + DxoRangeSelectorReductionModule, + DxoRangeSelectorValueErrorBarModule, + DxoRangeSelectorBarModule, + DxoRangeSelectorBubbleModule, + DxoRangeSelectorCandlestickModule, + DxoRangeSelectorColorModule, + DxoRangeSelectorFullstackedareaModule, + DxoRangeSelectorFullstackedbarModule, + DxoRangeSelectorFullstackedlineModule, + DxoRangeSelectorFullstackedsplineModule, + DxoRangeSelectorFullstackedsplineareaModule, + DxoRangeSelectorArgumentFormatModule, + DxoRangeSelectorFontModule, + DxoRangeSelectorFormatModule, + DxoRangeSelectorLineModule, + DxoRangeSelectorRangeareaModule, + DxoRangeSelectorRangebarModule, + DxoRangeSelectorScatterModule, + DxoRangeSelectorSplineModule, + DxoRangeSelectorSplineareaModule, + DxoRangeSelectorStackedareaModule, + DxoRangeSelectorStackedbarModule, + DxoRangeSelectorStackedlineModule, + DxoRangeSelectorStackedsplineModule, + DxoRangeSelectorStackedsplineareaModule, + DxoRangeSelectorStepareaModule, + DxoRangeSelectorSteplineModule, + DxoRangeSelectorStockModule, + DxoRangeSelectorDataPrepareSettingsModule, + DxiRangeSelectorSeriesModule, + DxoRangeSelectorSeriesTemplateModule, + DxoRangeSelectorValueAxisModule, + DxoRangeSelectorExportModule, + DxoRangeSelectorIndentModule, + DxoRangeSelectorLoadingIndicatorModule, + DxoRangeSelectorMarginModule, + DxoRangeSelectorScaleModule, + DxoRangeSelectorAggregationIntervalModule, + DxiRangeSelectorBreakModule, + DxoRangeSelectorBreakStyleModule, + DxoRangeSelectorMarkerModule, + DxoRangeSelectorMaxRangeModule, + DxoRangeSelectorMinorTickModule, + DxoRangeSelectorMinorTickIntervalModule, + DxoRangeSelectorMinRangeModule, + DxoRangeSelectorTickModule, + DxoRangeSelectorTickIntervalModule, + DxoRangeSelectorShutterModule, + DxoRangeSelectorSizeModule, + DxoRangeSelectorSliderHandleModule, + DxoRangeSelectorSliderMarkerModule, + DxoRangeSelectorTitleModule, + DxoRangeSelectorSubtitleModule, DxIntegrationModule, DxTemplateModule ], @@ -990,6 +1132,76 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy, DxoSliderMarkerModule, DxoTitleModule, DxoSubtitleModule, + DxoRangeSelectorBackgroundModule, + DxoRangeSelectorImageModule, + DxoRangeSelectorBehaviorModule, + DxoRangeSelectorChartModule, + DxoRangeSelectorCommonSeriesSettingsModule, + DxoRangeSelectorAggregationModule, + DxoRangeSelectorAreaModule, + DxoRangeSelectorBorderModule, + DxoRangeSelectorHoverStyleModule, + DxoRangeSelectorHatchingModule, + DxoRangeSelectorLabelModule, + DxoRangeSelectorConnectorModule, + DxoRangeSelectorPointModule, + DxoRangeSelectorHeightModule, + DxoRangeSelectorUrlModule, + DxoRangeSelectorWidthModule, + DxoRangeSelectorSelectionStyleModule, + DxoRangeSelectorReductionModule, + DxoRangeSelectorValueErrorBarModule, + DxoRangeSelectorBarModule, + DxoRangeSelectorBubbleModule, + DxoRangeSelectorCandlestickModule, + DxoRangeSelectorColorModule, + DxoRangeSelectorFullstackedareaModule, + DxoRangeSelectorFullstackedbarModule, + DxoRangeSelectorFullstackedlineModule, + DxoRangeSelectorFullstackedsplineModule, + DxoRangeSelectorFullstackedsplineareaModule, + DxoRangeSelectorArgumentFormatModule, + DxoRangeSelectorFontModule, + DxoRangeSelectorFormatModule, + DxoRangeSelectorLineModule, + DxoRangeSelectorRangeareaModule, + DxoRangeSelectorRangebarModule, + DxoRangeSelectorScatterModule, + DxoRangeSelectorSplineModule, + DxoRangeSelectorSplineareaModule, + DxoRangeSelectorStackedareaModule, + DxoRangeSelectorStackedbarModule, + DxoRangeSelectorStackedlineModule, + DxoRangeSelectorStackedsplineModule, + DxoRangeSelectorStackedsplineareaModule, + DxoRangeSelectorStepareaModule, + DxoRangeSelectorSteplineModule, + DxoRangeSelectorStockModule, + DxoRangeSelectorDataPrepareSettingsModule, + DxiRangeSelectorSeriesModule, + DxoRangeSelectorSeriesTemplateModule, + DxoRangeSelectorValueAxisModule, + DxoRangeSelectorExportModule, + DxoRangeSelectorIndentModule, + DxoRangeSelectorLoadingIndicatorModule, + DxoRangeSelectorMarginModule, + DxoRangeSelectorScaleModule, + DxoRangeSelectorAggregationIntervalModule, + DxiRangeSelectorBreakModule, + DxoRangeSelectorBreakStyleModule, + DxoRangeSelectorMarkerModule, + DxoRangeSelectorMaxRangeModule, + DxoRangeSelectorMinorTickModule, + DxoRangeSelectorMinorTickIntervalModule, + DxoRangeSelectorMinRangeModule, + DxoRangeSelectorTickModule, + DxoRangeSelectorTickIntervalModule, + DxoRangeSelectorShutterModule, + DxoRangeSelectorSizeModule, + DxoRangeSelectorSliderHandleModule, + DxoRangeSelectorSliderMarkerModule, + DxoRangeSelectorTitleModule, + DxoRangeSelectorSubtitleModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/aggregation-interval.ts b/packages/devextreme-angular/src/ui/range-selector/nested/aggregation-interval.ts new file mode 100644 index 000000000000..35904a1f1488 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/aggregation-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-aggregation-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorAggregationIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'aggregationInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorAggregationIntervalComponent + ], + exports: [ + DxoRangeSelectorAggregationIntervalComponent + ], +}) +export class DxoRangeSelectorAggregationIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/aggregation.ts b/packages/devextreme-angular/src/ui/range-selector/nested/aggregation.ts new file mode 100644 index 000000000000..8bec8546aac6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/aggregation.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartSeriesAggregationMethod } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-aggregation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorAggregationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get calculate(): Function | undefined { + return this._getOption('calculate'); + } + set calculate(value: Function | undefined) { + this._setOption('calculate', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get method(): ChartSeriesAggregationMethod { + return this._getOption('method'); + } + set method(value: ChartSeriesAggregationMethod) { + this._setOption('method', value); + } + + + protected get _optionPath() { + return 'aggregation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorAggregationComponent + ], + exports: [ + DxoRangeSelectorAggregationComponent + ], +}) +export class DxoRangeSelectorAggregationModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/area.ts b/packages/devextreme-angular/src/ui/range-selector/nested/area.ts new file mode 100644 index 000000000000..554d3be09d38 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/area.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-area', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorAreaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'area'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorAreaComponent + ], + exports: [ + DxoRangeSelectorAreaComponent + ], +}) +export class DxoRangeSelectorAreaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/argument-format.ts b/packages/devextreme-angular/src/ui/range-selector/nested/argument-format.ts new file mode 100644 index 000000000000..955a1fc51bd4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/argument-format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-argument-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorArgumentFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'argumentFormat'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorArgumentFormatComponent + ], + exports: [ + DxoRangeSelectorArgumentFormatComponent + ], +}) +export class DxoRangeSelectorArgumentFormatModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/background.ts b/packages/devextreme-angular/src/ui/range-selector/nested/background.ts new file mode 100644 index 000000000000..4a7670326e6e --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/background.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { BackgroundImageLocation } from 'devextreme/viz/range_selector'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-background', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorBackgroundComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get image(): { location?: BackgroundImageLocation, url?: string | undefined } { + return this._getOption('image'); + } + set image(value: { location?: BackgroundImageLocation, url?: string | undefined }) { + this._setOption('image', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'background'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorBackgroundComponent + ], + exports: [ + DxoRangeSelectorBackgroundComponent + ], +}) +export class DxoRangeSelectorBackgroundModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/bar.ts b/packages/devextreme-angular/src/ui/range-selector/nested/bar.ts new file mode 100644 index 000000000000..805a09d33c6a --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/bar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'bar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorBarComponent + ], + exports: [ + DxoRangeSelectorBarComponent + ], +}) +export class DxoRangeSelectorBarModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/behavior.ts b/packages/devextreme-angular/src/ui/range-selector/nested/behavior.ts new file mode 100644 index 000000000000..d374df1726af --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/behavior.ts @@ -0,0 +1,122 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SliderValueChangeMode } from 'devextreme/common'; +import { ValueChangedCallMode } from 'devextreme/viz/range_selector'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-behavior', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorBehaviorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSlidersSwap(): boolean { + return this._getOption('allowSlidersSwap'); + } + set allowSlidersSwap(value: boolean) { + this._setOption('allowSlidersSwap', value); + } + + @Input() + get animationEnabled(): boolean { + return this._getOption('animationEnabled'); + } + set animationEnabled(value: boolean) { + this._setOption('animationEnabled', value); + } + + @Input() + get callValueChanged(): ValueChangedCallMode { + return this._getOption('callValueChanged'); + } + set callValueChanged(value: ValueChangedCallMode) { + this._setOption('callValueChanged', value); + } + + @Input() + get manualRangeSelectionEnabled(): boolean { + return this._getOption('manualRangeSelectionEnabled'); + } + set manualRangeSelectionEnabled(value: boolean) { + this._setOption('manualRangeSelectionEnabled', value); + } + + @Input() + get moveSelectedRangeByClick(): boolean { + return this._getOption('moveSelectedRangeByClick'); + } + set moveSelectedRangeByClick(value: boolean) { + this._setOption('moveSelectedRangeByClick', value); + } + + @Input() + get snapToTicks(): boolean { + return this._getOption('snapToTicks'); + } + set snapToTicks(value: boolean) { + this._setOption('snapToTicks', value); + } + + @Input() + get valueChangeMode(): SliderValueChangeMode { + return this._getOption('valueChangeMode'); + } + set valueChangeMode(value: SliderValueChangeMode) { + this._setOption('valueChangeMode', value); + } + + + protected get _optionPath() { + return 'behavior'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorBehaviorComponent + ], + exports: [ + DxoRangeSelectorBehaviorComponent + ], +}) +export class DxoRangeSelectorBehaviorModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/border.ts b/packages/devextreme-angular/src/ui/range-selector/nested/border.ts new file mode 100644 index 000000000000..e39d3c6d6362 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/border.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle | undefined { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle | undefined) { + this._setOption('dashStyle', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorBorderComponent + ], + exports: [ + DxoRangeSelectorBorderComponent + ], +}) +export class DxoRangeSelectorBorderModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/break-dxi.ts b/packages/devextreme-angular/src/ui/range-selector/nested/break-dxi.ts new file mode 100644 index 000000000000..2bb66c6cae12 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/break-dxi.ts @@ -0,0 +1,74 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-range-selector-break', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiRangeSelectorBreakComponent extends CollectionNestedOption { + @Input() + get endValue(): Date | number | string | undefined { + return this._getOption('endValue'); + } + set endValue(value: Date | number | string | undefined) { + this._setOption('endValue', value); + } + + @Input() + get startValue(): Date | number | string | undefined { + return this._getOption('startValue'); + } + set startValue(value: Date | number | string | undefined) { + this._setOption('startValue', value); + } + + + protected get _optionPath() { + return 'breaks'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiRangeSelectorBreakComponent + ], + exports: [ + DxiRangeSelectorBreakComponent + ], +}) +export class DxiRangeSelectorBreakModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/break-style.ts b/packages/devextreme-angular/src/ui/range-selector/nested/break-style.ts new file mode 100644 index 000000000000..92ccb1fb42c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/break-style.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ScaleBreakLineStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-break-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorBreakStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get line(): ScaleBreakLineStyle { + return this._getOption('line'); + } + set line(value: ScaleBreakLineStyle) { + this._setOption('line', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'breakStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorBreakStyleComponent + ], + exports: [ + DxoRangeSelectorBreakStyleComponent + ], +}) +export class DxoRangeSelectorBreakStyleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/bubble.ts b/packages/devextreme-angular/src/ui/range-selector/nested/bubble.ts new file mode 100644 index 000000000000..ea9264b79075 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/bubble.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-bubble', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorBubbleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'bubble'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorBubbleComponent + ], + exports: [ + DxoRangeSelectorBubbleComponent + ], +}) +export class DxoRangeSelectorBubbleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/candlestick.ts b/packages/devextreme-angular/src/ui/range-selector/nested/candlestick.ts new file mode 100644 index 000000000000..b55ca38a49f0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/candlestick.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-candlestick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorCandlestickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'candlestick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorCandlestickComponent + ], + exports: [ + DxoRangeSelectorCandlestickComponent + ], +}) +export class DxoRangeSelectorCandlestickModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/chart.ts b/packages/devextreme-angular/src/ui/range-selector/nested/chart.ts new file mode 100644 index 000000000000..6ef57345ff3e --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/chart.ts @@ -0,0 +1,191 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ChartsDataType, Palette, PaletteExtensionMode } from 'devextreme/common/charts'; +import { ChartSeries } from 'devextreme/viz/common'; +import { ChartAxisScale } from 'devextreme/viz/range_selector'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiRangeSelectorSeriesComponent } from './series-dxi'; + + +@Component({ + selector: 'dxo-range-selector-chart', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorChartComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get barGroupPadding(): number { + return this._getOption('barGroupPadding'); + } + set barGroupPadding(value: number) { + this._setOption('barGroupPadding', value); + } + + @Input() + get barGroupWidth(): number | undefined { + return this._getOption('barGroupWidth'); + } + set barGroupWidth(value: number | undefined) { + this._setOption('barGroupWidth', value); + } + + @Input() + get bottomIndent(): number { + return this._getOption('bottomIndent'); + } + set bottomIndent(value: number) { + this._setOption('bottomIndent', value); + } + + @Input() + get commonSeriesSettings(): any { + return this._getOption('commonSeriesSettings'); + } + set commonSeriesSettings(value: any) { + this._setOption('commonSeriesSettings', value); + } + + @Input() + get dataPrepareSettings(): { checkTypeForAllData?: boolean, convertToAxisDataType?: boolean, sortingMethod?: boolean | Function } { + return this._getOption('dataPrepareSettings'); + } + set dataPrepareSettings(value: { checkTypeForAllData?: boolean, convertToAxisDataType?: boolean, sortingMethod?: boolean | Function }) { + this._setOption('dataPrepareSettings', value); + } + + @Input() + get maxBubbleSize(): number { + return this._getOption('maxBubbleSize'); + } + set maxBubbleSize(value: number) { + this._setOption('maxBubbleSize', value); + } + + @Input() + get minBubbleSize(): number { + return this._getOption('minBubbleSize'); + } + set minBubbleSize(value: number) { + this._setOption('minBubbleSize', value); + } + + @Input() + get negativesAsZeroes(): boolean { + return this._getOption('negativesAsZeroes'); + } + set negativesAsZeroes(value: boolean) { + this._setOption('negativesAsZeroes', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get paletteExtensionMode(): PaletteExtensionMode { + return this._getOption('paletteExtensionMode'); + } + set paletteExtensionMode(value: PaletteExtensionMode) { + this._setOption('paletteExtensionMode', value); + } + + @Input() + get series(): ChartSeries | any | undefined | Array { + return this._getOption('series'); + } + set series(value: ChartSeries | any | undefined | Array) { + this._setOption('series', value); + } + + @Input() + get seriesTemplate(): { customizeSeries?: Function, nameField?: string } { + return this._getOption('seriesTemplate'); + } + set seriesTemplate(value: { customizeSeries?: Function, nameField?: string }) { + this._setOption('seriesTemplate', value); + } + + @Input() + get topIndent(): number { + return this._getOption('topIndent'); + } + set topIndent(value: number) { + this._setOption('topIndent', value); + } + + @Input() + get valueAxis(): { inverted?: boolean, logarithmBase?: number, max?: number | undefined, min?: number | undefined, type?: ChartAxisScale | undefined, valueType?: ChartsDataType | undefined } { + return this._getOption('valueAxis'); + } + set valueAxis(value: { inverted?: boolean, logarithmBase?: number, max?: number | undefined, min?: number | undefined, type?: ChartAxisScale | undefined, valueType?: ChartsDataType | undefined }) { + this._setOption('valueAxis', value); + } + + + protected get _optionPath() { + return 'chart'; + } + + + @ContentChildren(forwardRef(() => DxiRangeSelectorSeriesComponent)) + get seriesChildren(): QueryList { + return this._getOption('series'); + } + set seriesChildren(value) { + this.setChildren('series', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorChartComponent + ], + exports: [ + DxoRangeSelectorChartComponent + ], +}) +export class DxoRangeSelectorChartModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/color.ts b/packages/devextreme-angular/src/ui/range-selector/nested/color.ts new file mode 100644 index 000000000000..648bc946ab2f --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/color.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-color', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorColorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get base(): string | undefined { + return this._getOption('base'); + } + set base(value: string | undefined) { + this._setOption('base', value); + } + + @Input() + get fillId(): string | undefined { + return this._getOption('fillId'); + } + set fillId(value: string | undefined) { + this._setOption('fillId', value); + } + + + protected get _optionPath() { + return 'color'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorColorComponent + ], + exports: [ + DxoRangeSelectorColorComponent + ], +}) +export class DxoRangeSelectorColorModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/common-series-settings.ts b/packages/devextreme-angular/src/ui/range-selector/nested/common-series-settings.ts new file mode 100644 index 000000000000..4e3a16e0c121 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/common-series-settings.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-common-series-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorCommonSeriesSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'commonSeriesSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorCommonSeriesSettingsComponent + ], + exports: [ + DxoRangeSelectorCommonSeriesSettingsComponent + ], +}) +export class DxoRangeSelectorCommonSeriesSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/connector.ts b/packages/devextreme-angular/src/ui/range-selector/nested/connector.ts new file mode 100644 index 000000000000..0e5cd720622b --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/connector.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-connector', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorConnectorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'connector'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorConnectorComponent + ], + exports: [ + DxoRangeSelectorConnectorComponent + ], +}) +export class DxoRangeSelectorConnectorModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/data-prepare-settings.ts b/packages/devextreme-angular/src/ui/range-selector/nested/data-prepare-settings.ts new file mode 100644 index 000000000000..d6ad8809ee94 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/data-prepare-settings.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-data-prepare-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorDataPrepareSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get checkTypeForAllData(): boolean { + return this._getOption('checkTypeForAllData'); + } + set checkTypeForAllData(value: boolean) { + this._setOption('checkTypeForAllData', value); + } + + @Input() + get convertToAxisDataType(): boolean { + return this._getOption('convertToAxisDataType'); + } + set convertToAxisDataType(value: boolean) { + this._setOption('convertToAxisDataType', value); + } + + @Input() + get sortingMethod(): boolean | Function { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: boolean | Function) { + this._setOption('sortingMethod', value); + } + + + protected get _optionPath() { + return 'dataPrepareSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorDataPrepareSettingsComponent + ], + exports: [ + DxoRangeSelectorDataPrepareSettingsComponent + ], +}) +export class DxoRangeSelectorDataPrepareSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/export.ts b/packages/devextreme-angular/src/ui/range-selector/nested/export.ts new file mode 100644 index 000000000000..33cf955a788c --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorExportComponent + ], + exports: [ + DxoRangeSelectorExportComponent + ], +}) +export class DxoRangeSelectorExportModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/font.ts b/packages/devextreme-angular/src/ui/range-selector/nested/font.ts new file mode 100644 index 000000000000..3a686d690787 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFontComponent + ], + exports: [ + DxoRangeSelectorFontComponent + ], +}) +export class DxoRangeSelectorFontModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/format.ts b/packages/devextreme-angular/src/ui/range-selector/nested/format.ts new file mode 100644 index 000000000000..19bc57d8a492 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFormatComponent + ], + exports: [ + DxoRangeSelectorFormatComponent + ], +}) +export class DxoRangeSelectorFormatModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedarea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedarea.ts new file mode 100644 index 000000000000..30b32b55d24b --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedarea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-fullstackedarea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFullstackedareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedarea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFullstackedareaComponent + ], + exports: [ + DxoRangeSelectorFullstackedareaComponent + ], +}) +export class DxoRangeSelectorFullstackedareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedbar.ts b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedbar.ts new file mode 100644 index 000000000000..0eac2ce17fb8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedbar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-fullstackedbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFullstackedbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedbar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFullstackedbarComponent + ], + exports: [ + DxoRangeSelectorFullstackedbarComponent + ], +}) +export class DxoRangeSelectorFullstackedbarModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedline.ts b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedline.ts new file mode 100644 index 000000000000..6cf81e18b213 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-fullstackedline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFullstackedlineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFullstackedlineComponent + ], + exports: [ + DxoRangeSelectorFullstackedlineComponent + ], +}) +export class DxoRangeSelectorFullstackedlineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedspline.ts b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedspline.ts new file mode 100644 index 000000000000..1f2e2df3e512 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedspline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-fullstackedspline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFullstackedsplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedspline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFullstackedsplineComponent + ], + exports: [ + DxoRangeSelectorFullstackedsplineComponent + ], +}) +export class DxoRangeSelectorFullstackedsplineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedsplinearea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedsplinearea.ts new file mode 100644 index 000000000000..e624671298fe --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/fullstackedsplinearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-fullstackedsplinearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorFullstackedsplineareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'fullstackedsplinearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorFullstackedsplineareaComponent + ], + exports: [ + DxoRangeSelectorFullstackedsplineareaComponent + ], +}) +export class DxoRangeSelectorFullstackedsplineareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/hatching.ts b/packages/devextreme-angular/src/ui/range-selector/nested/hatching.ts new file mode 100644 index 000000000000..f4e390a0cff0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/hatching.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-hatching', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorHatchingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get direction(): HatchDirection { + return this._getOption('direction'); + } + set direction(value: HatchDirection) { + this._setOption('direction', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get step(): number { + return this._getOption('step'); + } + set step(value: number) { + this._setOption('step', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'hatching'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorHatchingComponent + ], + exports: [ + DxoRangeSelectorHatchingComponent + ], +}) +export class DxoRangeSelectorHatchingModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/height.ts b/packages/devextreme-angular/src/ui/range-selector/nested/height.ts new file mode 100644 index 000000000000..0275600cebf1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/height.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-height', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorHeightComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get rangeMaxPoint(): number | undefined { + return this._getOption('rangeMaxPoint'); + } + set rangeMaxPoint(value: number | undefined) { + this._setOption('rangeMaxPoint', value); + } + + @Input() + get rangeMinPoint(): number | undefined { + return this._getOption('rangeMinPoint'); + } + set rangeMinPoint(value: number | undefined) { + this._setOption('rangeMinPoint', value); + } + + + protected get _optionPath() { + return 'height'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorHeightComponent + ], + exports: [ + DxoRangeSelectorHeightComponent + ], +}) +export class DxoRangeSelectorHeightModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/hover-style.ts b/packages/devextreme-angular/src/ui/range-selector/nested/hover-style.ts new file mode 100644 index 000000000000..100b8a94e3a8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/hover-style.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } | { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } | { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + @Input() + get size(): number | undefined { + return this._getOption('size'); + } + set size(value: number | undefined) { + this._setOption('size', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorHoverStyleComponent + ], + exports: [ + DxoRangeSelectorHoverStyleComponent + ], +}) +export class DxoRangeSelectorHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/image.ts b/packages/devextreme-angular/src/ui/range-selector/nested/image.ts new file mode 100644 index 000000000000..3e634502b7ac --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/image.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { BackgroundImageLocation } from 'devextreme/viz/range_selector'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-image', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorImageComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get location(): BackgroundImageLocation { + return this._getOption('location'); + } + set location(value: BackgroundImageLocation) { + this._setOption('location', value); + } + + @Input() + get url(): string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined } { + return this._getOption('url'); + } + set url(value: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }) { + this._setOption('url', value); + } + + @Input() + get height(): number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } { + return this._getOption('height'); + } + set height(value: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }) { + this._setOption('height', value); + } + + @Input() + get width(): number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } { + return this._getOption('width'); + } + set width(value: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'image'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorImageComponent + ], + exports: [ + DxoRangeSelectorImageComponent + ], +}) +export class DxoRangeSelectorImageModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/indent.ts b/packages/devextreme-angular/src/ui/range-selector/nested/indent.ts new file mode 100644 index 000000000000..b6476de83b43 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/indent.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-indent', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorIndentComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number | undefined { + return this._getOption('left'); + } + set left(value: number | undefined) { + this._setOption('left', value); + } + + @Input() + get right(): number | undefined { + return this._getOption('right'); + } + set right(value: number | undefined) { + this._setOption('right', value); + } + + + protected get _optionPath() { + return 'indent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorIndentComponent + ], + exports: [ + DxoRangeSelectorIndentComponent + ], +}) +export class DxoRangeSelectorIndentModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/index.ts b/packages/devextreme-angular/src/ui/range-selector/nested/index.ts new file mode 100644 index 000000000000..be5ff96b0003 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/index.ts @@ -0,0 +1,71 @@ +export * from './aggregation-interval'; +export * from './aggregation'; +export * from './area'; +export * from './argument-format'; +export * from './background'; +export * from './bar'; +export * from './behavior'; +export * from './border'; +export * from './break-dxi'; +export * from './break-style'; +export * from './bubble'; +export * from './candlestick'; +export * from './chart'; +export * from './color'; +export * from './common-series-settings'; +export * from './connector'; +export * from './data-prepare-settings'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './fullstackedarea'; +export * from './fullstackedbar'; +export * from './fullstackedline'; +export * from './fullstackedspline'; +export * from './fullstackedsplinearea'; +export * from './hatching'; +export * from './height'; +export * from './hover-style'; +export * from './image'; +export * from './indent'; +export * from './label'; +export * from './line'; +export * from './loading-indicator'; +export * from './margin'; +export * from './marker'; +export * from './max-range'; +export * from './min-range'; +export * from './minor-tick-interval'; +export * from './minor-tick'; +export * from './point'; +export * from './rangearea'; +export * from './rangebar'; +export * from './reduction'; +export * from './scale'; +export * from './scatter'; +export * from './selection-style'; +export * from './series-dxi'; +export * from './series-template'; +export * from './shutter'; +export * from './size'; +export * from './slider-handle'; +export * from './slider-marker'; +export * from './spline'; +export * from './splinearea'; +export * from './stackedarea'; +export * from './stackedbar'; +export * from './stackedline'; +export * from './stackedspline'; +export * from './stackedsplinearea'; +export * from './steparea'; +export * from './stepline'; +export * from './stock'; +export * from './subtitle'; +export * from './tick-interval'; +export * from './tick'; +export * from './title'; +export * from './url'; +export * from './value-axis'; +export * from './value-error-bar'; +export * from './width'; + diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/label.ts b/packages/devextreme-angular/src/ui/range-selector/nested/label.ts new file mode 100644 index 000000000000..2191f36fb65d --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/label.ts @@ -0,0 +1,203 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { DashStyle, Font, LabelOverlap, RelativePosition } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get alignment(): HorizontalAlignment { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment) { + this._setOption('alignment', value); + } + + @Input() + get argumentFormat(): Format | string | undefined { + return this._getOption('argumentFormat'); + } + set argumentFormat(value: Format | string | undefined) { + this._setOption('argumentFormat', value); + } + + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get connector(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('connector'); + } + set connector(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('connector', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get horizontalOffset(): number { + return this._getOption('horizontalOffset'); + } + set horizontalOffset(value: number) { + this._setOption('horizontalOffset', value); + } + + @Input() + get position(): RelativePosition { + return this._getOption('position'); + } + set position(value: RelativePosition) { + this._setOption('position', value); + } + + @Input() + get rotationAngle(): number { + return this._getOption('rotationAngle'); + } + set rotationAngle(value: number) { + this._setOption('rotationAngle', value); + } + + @Input() + get showForZeroValues(): boolean { + return this._getOption('showForZeroValues'); + } + set showForZeroValues(value: boolean) { + this._setOption('showForZeroValues', value); + } + + @Input() + get verticalOffset(): number { + return this._getOption('verticalOffset'); + } + set verticalOffset(value: number) { + this._setOption('verticalOffset', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get overlappingBehavior(): LabelOverlap { + return this._getOption('overlappingBehavior'); + } + set overlappingBehavior(value: LabelOverlap) { + this._setOption('overlappingBehavior', value); + } + + @Input() + get topIndent(): number { + return this._getOption('topIndent'); + } + set topIndent(value: number) { + this._setOption('topIndent', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorLabelComponent + ], + exports: [ + DxoRangeSelectorLabelComponent + ], +}) +export class DxoRangeSelectorLabelModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/line.ts b/packages/devextreme-angular/src/ui/range-selector/nested/line.ts new file mode 100644 index 000000000000..1be50b8336b6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/line.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-line', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorLineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'line'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorLineComponent + ], + exports: [ + DxoRangeSelectorLineComponent + ], +}) +export class DxoRangeSelectorLineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/range-selector/nested/loading-indicator.ts new file mode 100644 index 000000000000..5dfb6275dec6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorLoadingIndicatorComponent + ], + exports: [ + DxoRangeSelectorLoadingIndicatorComponent + ], +}) +export class DxoRangeSelectorLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/margin.ts b/packages/devextreme-angular/src/ui/range-selector/nested/margin.ts new file mode 100644 index 000000000000..3bfbc80ecdb4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorMarginComponent + ], + exports: [ + DxoRangeSelectorMarginComponent + ], +}) +export class DxoRangeSelectorMarginModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/marker.ts b/packages/devextreme-angular/src/ui/range-selector/nested/marker.ts new file mode 100644 index 000000000000..b275f8cb6787 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/marker.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-marker', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorMarkerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get label(): { customizeText?: Function, format?: Format | string | undefined } { + return this._getOption('label'); + } + set label(value: { customizeText?: Function, format?: Format | string | undefined }) { + this._setOption('label', value); + } + + @Input() + get separatorHeight(): number { + return this._getOption('separatorHeight'); + } + set separatorHeight(value: number) { + this._setOption('separatorHeight', value); + } + + @Input() + get textLeftIndent(): number { + return this._getOption('textLeftIndent'); + } + set textLeftIndent(value: number) { + this._setOption('textLeftIndent', value); + } + + @Input() + get textTopIndent(): number { + return this._getOption('textTopIndent'); + } + set textTopIndent(value: number) { + this._setOption('textTopIndent', value); + } + + @Input() + get topIndent(): number { + return this._getOption('topIndent'); + } + set topIndent(value: number) { + this._setOption('topIndent', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'marker'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorMarkerComponent + ], + exports: [ + DxoRangeSelectorMarkerComponent + ], +}) +export class DxoRangeSelectorMarkerModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/max-range.ts b/packages/devextreme-angular/src/ui/range-selector/nested/max-range.ts new file mode 100644 index 000000000000..35624230ae79 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/max-range.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-max-range', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorMaxRangeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'maxRange'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorMaxRangeComponent + ], + exports: [ + DxoRangeSelectorMaxRangeComponent + ], +}) +export class DxoRangeSelectorMaxRangeModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/min-range.ts b/packages/devextreme-angular/src/ui/range-selector/nested/min-range.ts new file mode 100644 index 000000000000..c347e0ad46d2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/min-range.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-min-range', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorMinRangeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'minRange'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorMinRangeComponent + ], + exports: [ + DxoRangeSelectorMinRangeComponent + ], +}) +export class DxoRangeSelectorMinRangeModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/minor-tick-interval.ts b/packages/devextreme-angular/src/ui/range-selector/nested/minor-tick-interval.ts new file mode 100644 index 000000000000..dac212ab3fd0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/minor-tick-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-minor-tick-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorMinorTickIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'minorTickInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorMinorTickIntervalComponent + ], + exports: [ + DxoRangeSelectorMinorTickIntervalComponent + ], +}) +export class DxoRangeSelectorMinorTickIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/minor-tick.ts b/packages/devextreme-angular/src/ui/range-selector/nested/minor-tick.ts new file mode 100644 index 000000000000..039f3661e7c3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/minor-tick.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-minor-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorMinorTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'minorTick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorMinorTickComponent + ], + exports: [ + DxoRangeSelectorMinorTickComponent + ], +}) +export class DxoRangeSelectorMinorTickModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/ng-package.json b/packages/devextreme-angular/src/ui/range-selector/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/point.ts b/packages/devextreme-angular/src/ui/range-selector/nested/point.ts new file mode 100644 index 000000000000..95ec2c4932b7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/point.ts @@ -0,0 +1,145 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, PointInteractionMode, PointSymbol } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-point', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorPointComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get hoverMode(): PointInteractionMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: PointInteractionMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }) { + this._setOption('hoverStyle', value); + } + + @Input() + get image(): string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } } { + return this._getOption('image'); + } + set image(value: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }) { + this._setOption('image', value); + } + + @Input() + get selectionMode(): PointInteractionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: PointInteractionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }) { + this._setOption('selectionStyle', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get symbol(): PointSymbol { + return this._getOption('symbol'); + } + set symbol(value: PointSymbol) { + this._setOption('symbol', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'point'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorPointComponent + ], + exports: [ + DxoRangeSelectorPointComponent + ], +}) +export class DxoRangeSelectorPointModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/rangearea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/rangearea.ts new file mode 100644 index 000000000000..6949c5cc83e9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/rangearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-rangearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorRangeareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'rangearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorRangeareaComponent + ], + exports: [ + DxoRangeSelectorRangeareaComponent + ], +}) +export class DxoRangeSelectorRangeareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/rangebar.ts b/packages/devextreme-angular/src/ui/range-selector/nested/rangebar.ts new file mode 100644 index 000000000000..7c5767223db5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/rangebar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-rangebar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorRangebarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'rangebar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorRangebarComponent + ], + exports: [ + DxoRangeSelectorRangebarComponent + ], +}) +export class DxoRangeSelectorRangebarModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/reduction.ts b/packages/devextreme-angular/src/ui/range-selector/nested/reduction.ts new file mode 100644 index 000000000000..48de996a1654 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/reduction.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-reduction', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorReductionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get level(): FinancialChartReductionLevel { + return this._getOption('level'); + } + set level(value: FinancialChartReductionLevel) { + this._setOption('level', value); + } + + + protected get _optionPath() { + return 'reduction'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorReductionComponent + ], + exports: [ + DxoRangeSelectorReductionComponent + ], +}) +export class DxoRangeSelectorReductionModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts b/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts new file mode 100644 index 000000000000..844d31d103be --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts @@ -0,0 +1,319 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ChartsDataType, DiscreteAxisDivisionMode, Font, LabelOverlap, ScaleBreak, ScaleBreakLineStyle, TimeInterval } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { AxisScale } from 'devextreme/viz/range_selector'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiRangeSelectorBreakComponent } from './break-dxi'; + + +@Component({ + selector: 'dxo-range-selector-scale', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorScaleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregateByCategory(): boolean { + return this._getOption('aggregateByCategory'); + } + set aggregateByCategory(value: boolean) { + this._setOption('aggregateByCategory', value); + } + + @Input() + get aggregationGroupWidth(): number | undefined { + return this._getOption('aggregationGroupWidth'); + } + set aggregationGroupWidth(value: number | undefined) { + this._setOption('aggregationGroupWidth', value); + } + + @Input() + get aggregationInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('aggregationInterval'); + } + set aggregationInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('aggregationInterval', value); + } + + @Input() + get allowDecimals(): boolean | undefined { + return this._getOption('allowDecimals'); + } + set allowDecimals(value: boolean | undefined) { + this._setOption('allowDecimals', value); + } + + @Input() + get breaks(): Array { + return this._getOption('breaks'); + } + set breaks(value: Array) { + this._setOption('breaks', value); + } + + @Input() + get breakStyle(): { color?: string, line?: ScaleBreakLineStyle, width?: number } { + return this._getOption('breakStyle'); + } + set breakStyle(value: { color?: string, line?: ScaleBreakLineStyle, width?: number }) { + this._setOption('breakStyle', value); + } + + @Input() + get categories(): Array { + return this._getOption('categories'); + } + set categories(value: Array) { + this._setOption('categories', value); + } + + @Input() + get discreteAxisDivisionMode(): DiscreteAxisDivisionMode { + return this._getOption('discreteAxisDivisionMode'); + } + set discreteAxisDivisionMode(value: DiscreteAxisDivisionMode) { + this._setOption('discreteAxisDivisionMode', value); + } + + @Input() + get endOnTick(): boolean { + return this._getOption('endOnTick'); + } + set endOnTick(value: boolean) { + this._setOption('endOnTick', value); + } + + @Input() + get endValue(): Date | number | string | undefined { + return this._getOption('endValue'); + } + set endValue(value: Date | number | string | undefined) { + this._setOption('endValue', value); + } + + @Input() + get holidays(): Array { + return this._getOption('holidays'); + } + set holidays(value: Array) { + this._setOption('holidays', value); + } + + @Input() + get label(): { customizeText?: Function, font?: Font, format?: Format | string | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { customizeText?: Function, font?: Font, format?: Format | string | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get linearThreshold(): number { + return this._getOption('linearThreshold'); + } + set linearThreshold(value: number) { + this._setOption('linearThreshold', value); + } + + @Input() + get logarithmBase(): number { + return this._getOption('logarithmBase'); + } + set logarithmBase(value: number) { + this._setOption('logarithmBase', value); + } + + @Input() + get marker(): { label?: { customizeText?: Function, format?: Format | string | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean } { + return this._getOption('marker'); + } + set marker(value: { label?: { customizeText?: Function, format?: Format | string | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }) { + this._setOption('marker', value); + } + + @Input() + get maxRange(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('maxRange'); + } + set maxRange(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('maxRange', value); + } + + @Input() + get minorTick(): { color?: string, opacity?: number, visible?: boolean, width?: number } { + return this._getOption('minorTick'); + } + set minorTick(value: { color?: string, opacity?: number, visible?: boolean, width?: number }) { + this._setOption('minorTick', value); + } + + @Input() + get minorTickCount(): number | undefined { + return this._getOption('minorTickCount'); + } + set minorTickCount(value: number | undefined) { + this._setOption('minorTickCount', value); + } + + @Input() + get minorTickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minorTickInterval'); + } + set minorTickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minorTickInterval', value); + } + + @Input() + get minRange(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('minRange'); + } + set minRange(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('minRange', value); + } + + @Input() + get placeholderHeight(): number | undefined { + return this._getOption('placeholderHeight'); + } + set placeholderHeight(value: number | undefined) { + this._setOption('placeholderHeight', value); + } + + @Input() + get showCustomBoundaryTicks(): boolean { + return this._getOption('showCustomBoundaryTicks'); + } + set showCustomBoundaryTicks(value: boolean) { + this._setOption('showCustomBoundaryTicks', value); + } + + @Input() + get singleWorkdays(): Array { + return this._getOption('singleWorkdays'); + } + set singleWorkdays(value: Array) { + this._setOption('singleWorkdays', value); + } + + @Input() + get startValue(): Date | number | string | undefined { + return this._getOption('startValue'); + } + set startValue(value: Date | number | string | undefined) { + this._setOption('startValue', value); + } + + @Input() + get tick(): { color?: string, opacity?: number, width?: number } { + return this._getOption('tick'); + } + set tick(value: { color?: string, opacity?: number, width?: number }) { + this._setOption('tick', value); + } + + @Input() + get tickInterval(): TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number } { + return this._getOption('tickInterval'); + } + set tickInterval(value: TimeInterval | number | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }) { + this._setOption('tickInterval', value); + } + + @Input() + get type(): AxisScale | undefined { + return this._getOption('type'); + } + set type(value: AxisScale | undefined) { + this._setOption('type', value); + } + + @Input() + get valueType(): ChartsDataType | undefined { + return this._getOption('valueType'); + } + set valueType(value: ChartsDataType | undefined) { + this._setOption('valueType', value); + } + + @Input() + get workdaysOnly(): boolean { + return this._getOption('workdaysOnly'); + } + set workdaysOnly(value: boolean) { + this._setOption('workdaysOnly', value); + } + + @Input() + get workWeek(): Array { + return this._getOption('workWeek'); + } + set workWeek(value: Array) { + this._setOption('workWeek', value); + } + + + protected get _optionPath() { + return 'scale'; + } + + + @ContentChildren(forwardRef(() => DxiRangeSelectorBreakComponent)) + get breaksChildren(): QueryList { + return this._getOption('breaks'); + } + set breaksChildren(value) { + this.setChildren('breaks', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorScaleComponent + ], + exports: [ + DxoRangeSelectorScaleComponent + ], +}) +export class DxoRangeSelectorScaleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/scatter.ts b/packages/devextreme-angular/src/ui/range-selector/nested/scatter.ts new file mode 100644 index 000000000000..cdbc39d9e1b0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/scatter.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-scatter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorScatterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'scatter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorScatterComponent + ], + exports: [ + DxoRangeSelectorScatterComponent + ], +}) +export class DxoRangeSelectorScatterModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/selection-style.ts b/packages/devextreme-angular/src/ui/range-selector/nested/selection-style.ts new file mode 100644 index 000000000000..e4d2ff8c739c --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/selection-style.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsColor, DashStyle, HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-selection-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSelectionStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean, width?: number } | { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean, width?: number } | { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get size(): number | undefined { + return this._getOption('size'); + } + set size(value: number | undefined) { + this._setOption('size', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get highlight(): boolean { + return this._getOption('highlight'); + } + set highlight(value: boolean) { + this._setOption('highlight', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'selectionStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSelectionStyleComponent + ], + exports: [ + DxoRangeSelectorSelectionStyleComponent + ], +}) +export class DxoRangeSelectorSelectionStyleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/series-dxi.ts b/packages/devextreme-angular/src/ui/range-selector/nested/series-dxi.ts new file mode 100644 index 000000000000..34a7743fa98c --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/series-dxi.ts @@ -0,0 +1,382 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-range-selector-series', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiRangeSelectorSeriesComponent extends CollectionNestedOption { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get tag(): any | undefined { + return this._getOption('tag'); + } + set tag(value: any | undefined) { + this._setOption('tag', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'series'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiRangeSelectorSeriesComponent + ], + exports: [ + DxiRangeSelectorSeriesComponent + ], +}) +export class DxiRangeSelectorSeriesModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/series-template.ts b/packages/devextreme-angular/src/ui/range-selector/nested/series-template.ts new file mode 100644 index 000000000000..e76fb7102d09 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/series-template.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-series-template', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSeriesTemplateComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeSeries(): Function { + return this._getOption('customizeSeries'); + } + set customizeSeries(value: Function) { + this._setOption('customizeSeries', value); + } + + @Input() + get nameField(): string { + return this._getOption('nameField'); + } + set nameField(value: string) { + this._setOption('nameField', value); + } + + + protected get _optionPath() { + return 'seriesTemplate'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSeriesTemplateComponent + ], + exports: [ + DxoRangeSelectorSeriesTemplateComponent + ], +}) +export class DxoRangeSelectorSeriesTemplateModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/shutter.ts b/packages/devextreme-angular/src/ui/range-selector/nested/shutter.ts new file mode 100644 index 000000000000..7d18ed05fb04 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/shutter.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-shutter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorShutterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shutter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorShutterComponent + ], + exports: [ + DxoRangeSelectorShutterComponent + ], +}) +export class DxoRangeSelectorShutterModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/size.ts b/packages/devextreme-angular/src/ui/range-selector/nested/size.ts new file mode 100644 index 000000000000..a55fccd7c81e --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSizeComponent + ], + exports: [ + DxoRangeSelectorSizeComponent + ], +}) +export class DxoRangeSelectorSizeModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/slider-handle.ts b/packages/devextreme-angular/src/ui/range-selector/nested/slider-handle.ts new file mode 100644 index 000000000000..e43698cde5bf --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/slider-handle.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-slider-handle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSliderHandleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'sliderHandle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSliderHandleComponent + ], + exports: [ + DxoRangeSelectorSliderHandleComponent + ], +}) +export class DxoRangeSelectorSliderHandleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/slider-marker.ts b/packages/devextreme-angular/src/ui/range-selector/nested/slider-marker.ts new file mode 100644 index 000000000000..0756b5e5289b --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/slider-marker.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-slider-marker', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSliderMarkerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get invalidRangeColor(): string { + return this._getOption('invalidRangeColor'); + } + set invalidRangeColor(value: string) { + this._setOption('invalidRangeColor', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get placeholderHeight(): number | undefined { + return this._getOption('placeholderHeight'); + } + set placeholderHeight(value: number | undefined) { + this._setOption('placeholderHeight', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'sliderMarker'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSliderMarkerComponent + ], + exports: [ + DxoRangeSelectorSliderMarkerComponent + ], +}) +export class DxoRangeSelectorSliderMarkerModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/spline.ts b/packages/devextreme-angular/src/ui/range-selector/nested/spline.ts new file mode 100644 index 000000000000..8bd564b0ad8c --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/spline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-spline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'spline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSplineComponent + ], + exports: [ + DxoRangeSelectorSplineComponent + ], +}) +export class DxoRangeSelectorSplineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/splinearea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/splinearea.ts new file mode 100644 index 000000000000..332546df3dd2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/splinearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-splinearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSplineareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'splinearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSplineareaComponent + ], + exports: [ + DxoRangeSelectorSplineareaComponent + ], +}) +export class DxoRangeSelectorSplineareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stackedarea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stackedarea.ts new file mode 100644 index 000000000000..659013727274 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stackedarea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stackedarea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStackedareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedarea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStackedareaComponent + ], + exports: [ + DxoRangeSelectorStackedareaComponent + ], +}) +export class DxoRangeSelectorStackedareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stackedbar.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stackedbar.ts new file mode 100644 index 000000000000..e79d121e7807 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stackedbar.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stackedbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStackedbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedbar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStackedbarComponent + ], + exports: [ + DxoRangeSelectorStackedbarComponent + ], +}) +export class DxoRangeSelectorStackedbarModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stackedline.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stackedline.ts new file mode 100644 index 000000000000..e05a88d5a20a --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stackedline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stackedline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStackedlineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStackedlineComponent + ], + exports: [ + DxoRangeSelectorStackedlineComponent + ], +}) +export class DxoRangeSelectorStackedlineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stackedspline.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stackedspline.ts new file mode 100644 index 000000000000..c8975c521442 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stackedspline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stackedspline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStackedsplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedspline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStackedsplineComponent + ], + exports: [ + DxoRangeSelectorStackedsplineComponent + ], +}) +export class DxoRangeSelectorStackedsplineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stackedsplinearea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stackedsplinearea.ts new file mode 100644 index 000000000000..01d6f5616f19 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stackedsplinearea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stackedsplinearea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStackedsplineareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stackedsplinearea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStackedsplineareaComponent + ], + exports: [ + DxoRangeSelectorStackedsplineareaComponent + ], +}) +export class DxoRangeSelectorStackedsplineareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/steparea.ts b/packages/devextreme-angular/src/ui/range-selector/nested/steparea.ts new file mode 100644 index 000000000000..0f2b1f1dec98 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/steparea.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-steparea', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStepareaComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'steparea'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStepareaComponent + ], + exports: [ + DxoRangeSelectorStepareaComponent + ], +}) +export class DxoRangeSelectorStepareaModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stepline.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stepline.ts new file mode 100644 index 000000000000..25fd1d53fa50 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stepline.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stepline', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSteplineComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stepline'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSteplineComponent + ], + exports: [ + DxoRangeSelectorSteplineComponent + ], +}) +export class DxoRangeSelectorSteplineModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/stock.ts b/packages/devextreme-angular/src/ui/range-selector/nested/stock.ts new file mode 100644 index 000000000000..260e6d0224fb --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/stock.ts @@ -0,0 +1,556 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment } from 'devextreme/common'; +import { ChartsColor, DashStyle, Font, HatchDirection, PointInteractionMode, PointSymbol, RelativePosition, SeriesHoverMode, SeriesSelectionMode, SeriesType, ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; +import { Format } from 'devextreme/localization'; +import { ChartSeriesAggregationMethod, FinancialChartReductionLevel } from 'devextreme/viz/chart'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-stock', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorStockComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aggregation(): { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod } { + return this._getOption('aggregation'); + } + set aggregation(value: { calculate?: Function | undefined, enabled?: boolean, method?: ChartSeriesAggregationMethod }) { + this._setOption('aggregation', value); + } + + @Input() + get area(): any { + return this._getOption('area'); + } + set area(value: any) { + this._setOption('area', value); + } + + @Input() + get argumentField(): string { + return this._getOption('argumentField'); + } + set argumentField(value: string) { + this._setOption('argumentField', value); + } + + @Input() + get axis(): string | undefined { + return this._getOption('axis'); + } + set axis(value: string | undefined) { + this._setOption('axis', value); + } + + @Input() + get bar(): any { + return this._getOption('bar'); + } + set bar(value: any) { + this._setOption('bar', value); + } + + @Input() + get barOverlapGroup(): string | undefined { + return this._getOption('barOverlapGroup'); + } + set barOverlapGroup(value: string | undefined) { + this._setOption('barOverlapGroup', value); + } + + @Input() + get barPadding(): number | undefined { + return this._getOption('barPadding'); + } + set barPadding(value: number | undefined) { + this._setOption('barPadding', value); + } + + @Input() + get barWidth(): number | undefined { + return this._getOption('barWidth'); + } + set barWidth(value: number | undefined) { + this._setOption('barWidth', value); + } + + @Input() + get border(): { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get bubble(): any { + return this._getOption('bubble'); + } + set bubble(value: any) { + this._setOption('bubble', value); + } + + @Input() + get candlestick(): any { + return this._getOption('candlestick'); + } + set candlestick(value: any) { + this._setOption('candlestick', value); + } + + @Input() + get closeValueField(): string { + return this._getOption('closeValueField'); + } + set closeValueField(value: string) { + this._setOption('closeValueField', value); + } + + @Input() + get color(): ChartsColor | string | undefined { + return this._getOption('color'); + } + set color(value: ChartsColor | string | undefined) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get fullstackedarea(): any { + return this._getOption('fullstackedarea'); + } + set fullstackedarea(value: any) { + this._setOption('fullstackedarea', value); + } + + @Input() + get fullstackedbar(): any { + return this._getOption('fullstackedbar'); + } + set fullstackedbar(value: any) { + this._setOption('fullstackedbar', value); + } + + @Input() + get fullstackedline(): any { + return this._getOption('fullstackedline'); + } + set fullstackedline(value: any) { + this._setOption('fullstackedline', value); + } + + @Input() + get fullstackedspline(): any { + return this._getOption('fullstackedspline'); + } + set fullstackedspline(value: any) { + this._setOption('fullstackedspline', value); + } + + @Input() + get fullstackedsplinearea(): any { + return this._getOption('fullstackedsplinearea'); + } + set fullstackedsplinearea(value: any) { + this._setOption('fullstackedsplinearea', value); + } + + @Input() + get highValueField(): string { + return this._getOption('highValueField'); + } + set highValueField(value: string) { + this._setOption('highValueField', value); + } + + @Input() + get hoverMode(): SeriesHoverMode { + return this._getOption('hoverMode'); + } + set hoverMode(value: SeriesHoverMode) { + this._setOption('hoverMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get ignoreEmptyPoints(): boolean { + return this._getOption('ignoreEmptyPoints'); + } + set ignoreEmptyPoints(value: boolean) { + this._setOption('ignoreEmptyPoints', value); + } + + @Input() + get innerColor(): string { + return this._getOption('innerColor'); + } + set innerColor(value: string) { + this._setOption('innerColor', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, argumentFormat?: Format | string | undefined, backgroundColor?: string | undefined, border?: { color?: string, dashStyle?: DashStyle, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: Function, displayFormat?: string | undefined, font?: Font, format?: Format | string | undefined, horizontalOffset?: number, position?: RelativePosition, rotationAngle?: number, showForZeroValues?: boolean, verticalOffset?: number, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get line(): any { + return this._getOption('line'); + } + set line(value: any) { + this._setOption('line', value); + } + + @Input() + get lowValueField(): string { + return this._getOption('lowValueField'); + } + set lowValueField(value: string) { + this._setOption('lowValueField', value); + } + + @Input() + get maxLabelCount(): number | undefined { + return this._getOption('maxLabelCount'); + } + set maxLabelCount(value: number | undefined) { + this._setOption('maxLabelCount', value); + } + + @Input() + get minBarSize(): number | undefined { + return this._getOption('minBarSize'); + } + set minBarSize(value: number | undefined) { + this._setOption('minBarSize', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get openValueField(): string { + return this._getOption('openValueField'); + } + set openValueField(value: string) { + this._setOption('openValueField', value); + } + + @Input() + get pane(): string { + return this._getOption('pane'); + } + set pane(value: string) { + this._setOption('pane', value); + } + + @Input() + get point(): { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean } { + return this._getOption('point'); + } + set point(value: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PointInteractionMode, hoverStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, image?: string | undefined | { height?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined }, url?: string | undefined | { rangeMaxPoint?: string | undefined, rangeMinPoint?: string | undefined }, width?: number | { rangeMaxPoint?: number | undefined, rangeMinPoint?: number | undefined } }, selectionMode?: PointInteractionMode, selectionStyle?: { border?: { color?: string | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, size?: number | undefined }, size?: number, symbol?: PointSymbol, visible?: boolean }) { + this._setOption('point', value); + } + + @Input() + get rangearea(): any { + return this._getOption('rangearea'); + } + set rangearea(value: any) { + this._setOption('rangearea', value); + } + + @Input() + get rangebar(): any { + return this._getOption('rangebar'); + } + set rangebar(value: any) { + this._setOption('rangebar', value); + } + + @Input() + get rangeValue1Field(): string { + return this._getOption('rangeValue1Field'); + } + set rangeValue1Field(value: string) { + this._setOption('rangeValue1Field', value); + } + + @Input() + get rangeValue2Field(): string { + return this._getOption('rangeValue2Field'); + } + set rangeValue2Field(value: string) { + this._setOption('rangeValue2Field', value); + } + + @Input() + get reduction(): { color?: string, level?: FinancialChartReductionLevel } { + return this._getOption('reduction'); + } + set reduction(value: { color?: string, level?: FinancialChartReductionLevel }) { + this._setOption('reduction', value); + } + + @Input() + get scatter(): any { + return this._getOption('scatter'); + } + set scatter(value: any) { + this._setOption('scatter', value); + } + + @Input() + get selectionMode(): SeriesSelectionMode { + return this._getOption('selectionMode'); + } + set selectionMode(value: SeriesSelectionMode) { + this._setOption('selectionMode', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string | undefined, dashStyle?: DashStyle, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, dashStyle?: DashStyle, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean, width?: number }) { + this._setOption('selectionStyle', value); + } + + @Input() + get showInLegend(): boolean { + return this._getOption('showInLegend'); + } + set showInLegend(value: boolean) { + this._setOption('showInLegend', value); + } + + @Input() + get sizeField(): string { + return this._getOption('sizeField'); + } + set sizeField(value: string) { + this._setOption('sizeField', value); + } + + @Input() + get spline(): any { + return this._getOption('spline'); + } + set spline(value: any) { + this._setOption('spline', value); + } + + @Input() + get splinearea(): any { + return this._getOption('splinearea'); + } + set splinearea(value: any) { + this._setOption('splinearea', value); + } + + @Input() + get stack(): string { + return this._getOption('stack'); + } + set stack(value: string) { + this._setOption('stack', value); + } + + @Input() + get stackedarea(): any { + return this._getOption('stackedarea'); + } + set stackedarea(value: any) { + this._setOption('stackedarea', value); + } + + @Input() + get stackedbar(): any { + return this._getOption('stackedbar'); + } + set stackedbar(value: any) { + this._setOption('stackedbar', value); + } + + @Input() + get stackedline(): any { + return this._getOption('stackedline'); + } + set stackedline(value: any) { + this._setOption('stackedline', value); + } + + @Input() + get stackedspline(): any { + return this._getOption('stackedspline'); + } + set stackedspline(value: any) { + this._setOption('stackedspline', value); + } + + @Input() + get stackedsplinearea(): any { + return this._getOption('stackedsplinearea'); + } + set stackedsplinearea(value: any) { + this._setOption('stackedsplinearea', value); + } + + @Input() + get steparea(): any { + return this._getOption('steparea'); + } + set steparea(value: any) { + this._setOption('steparea', value); + } + + @Input() + get stepline(): any { + return this._getOption('stepline'); + } + set stepline(value: any) { + this._setOption('stepline', value); + } + + @Input() + get stock(): any { + return this._getOption('stock'); + } + set stock(value: any) { + this._setOption('stock', value); + } + + @Input() + get tagField(): string { + return this._getOption('tagField'); + } + set tagField(value: string) { + this._setOption('tagField', value); + } + + @Input() + get type(): SeriesType { + return this._getOption('type'); + } + set type(value: SeriesType) { + this._setOption('type', value); + } + + @Input() + get valueErrorBar(): { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number } { + return this._getOption('valueErrorBar'); + } + set valueErrorBar(value: { color?: string, displayMode?: ValueErrorBarDisplayMode, edgeLength?: number, highValueField?: string | undefined, lineWidth?: number, lowValueField?: string | undefined, opacity?: number | undefined, type?: ValueErrorBarType | undefined, value?: number }) { + this._setOption('valueErrorBar', value); + } + + @Input() + get valueField(): string { + return this._getOption('valueField'); + } + set valueField(value: string) { + this._setOption('valueField', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'stock'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorStockComponent + ], + exports: [ + DxoRangeSelectorStockComponent + ], +}) +export class DxoRangeSelectorStockModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts b/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts new file mode 100644 index 000000000000..efdd28539ec1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorSubtitleComponent + ], + exports: [ + DxoRangeSelectorSubtitleComponent + ], +}) +export class DxoRangeSelectorSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/tick-interval.ts b/packages/devextreme-angular/src/ui/range-selector/nested/tick-interval.ts new file mode 100644 index 000000000000..0feedc1cd4ad --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/tick-interval.ts @@ -0,0 +1,136 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-tick-interval', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorTickIntervalComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get days(): number { + return this._getOption('days'); + } + set days(value: number) { + this._setOption('days', value); + } + + @Input() + get hours(): number { + return this._getOption('hours'); + } + set hours(value: number) { + this._setOption('hours', value); + } + + @Input() + get milliseconds(): number { + return this._getOption('milliseconds'); + } + set milliseconds(value: number) { + this._setOption('milliseconds', value); + } + + @Input() + get minutes(): number { + return this._getOption('minutes'); + } + set minutes(value: number) { + this._setOption('minutes', value); + } + + @Input() + get months(): number { + return this._getOption('months'); + } + set months(value: number) { + this._setOption('months', value); + } + + @Input() + get quarters(): number { + return this._getOption('quarters'); + } + set quarters(value: number) { + this._setOption('quarters', value); + } + + @Input() + get seconds(): number { + return this._getOption('seconds'); + } + set seconds(value: number) { + this._setOption('seconds', value); + } + + @Input() + get weeks(): number { + return this._getOption('weeks'); + } + set weeks(value: number) { + this._setOption('weeks', value); + } + + @Input() + get years(): number { + return this._getOption('years'); + } + set years(value: number) { + this._setOption('years', value); + } + + + protected get _optionPath() { + return 'tickInterval'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorTickIntervalComponent + ], + exports: [ + DxoRangeSelectorTickIntervalComponent + ], +}) +export class DxoRangeSelectorTickIntervalModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/tick.ts b/packages/devextreme-angular/src/ui/range-selector/nested/tick.ts new file mode 100644 index 000000000000..088e40b64e2a --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/tick.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-tick', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorTickComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'tick'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorTickComponent + ], + exports: [ + DxoRangeSelectorTickComponent + ], +}) +export class DxoRangeSelectorTickModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/title.ts b/packages/devextreme-angular/src/ui/range-selector/nested/title.ts new file mode 100644 index 000000000000..de2abea02355 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorTitleComponent + ], + exports: [ + DxoRangeSelectorTitleComponent + ], +}) +export class DxoRangeSelectorTitleModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/url.ts b/packages/devextreme-angular/src/ui/range-selector/nested/url.ts new file mode 100644 index 000000000000..30c82d2b9a21 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/url.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-url', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorUrlComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get rangeMaxPoint(): string | undefined { + return this._getOption('rangeMaxPoint'); + } + set rangeMaxPoint(value: string | undefined) { + this._setOption('rangeMaxPoint', value); + } + + @Input() + get rangeMinPoint(): string | undefined { + return this._getOption('rangeMinPoint'); + } + set rangeMinPoint(value: string | undefined) { + this._setOption('rangeMinPoint', value); + } + + + protected get _optionPath() { + return 'url'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorUrlComponent + ], + exports: [ + DxoRangeSelectorUrlComponent + ], +}) +export class DxoRangeSelectorUrlModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/value-axis.ts b/packages/devextreme-angular/src/ui/range-selector/nested/value-axis.ts new file mode 100644 index 000000000000..4b6163d9b435 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/value-axis.ts @@ -0,0 +1,114 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ChartsDataType } from 'devextreme/common/charts'; +import { ChartAxisScale } from 'devextreme/viz/range_selector'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-value-axis', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorValueAxisComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get inverted(): boolean { + return this._getOption('inverted'); + } + set inverted(value: boolean) { + this._setOption('inverted', value); + } + + @Input() + get logarithmBase(): number { + return this._getOption('logarithmBase'); + } + set logarithmBase(value: number) { + this._setOption('logarithmBase', value); + } + + @Input() + get max(): number | undefined { + return this._getOption('max'); + } + set max(value: number | undefined) { + this._setOption('max', value); + } + + @Input() + get min(): number | undefined { + return this._getOption('min'); + } + set min(value: number | undefined) { + this._setOption('min', value); + } + + @Input() + get type(): ChartAxisScale | undefined { + return this._getOption('type'); + } + set type(value: ChartAxisScale | undefined) { + this._setOption('type', value); + } + + @Input() + get valueType(): ChartsDataType | undefined { + return this._getOption('valueType'); + } + set valueType(value: ChartsDataType | undefined) { + this._setOption('valueType', value); + } + + + protected get _optionPath() { + return 'valueAxis'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorValueAxisComponent + ], + exports: [ + DxoRangeSelectorValueAxisComponent + ], +}) +export class DxoRangeSelectorValueAxisModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/value-error-bar.ts b/packages/devextreme-angular/src/ui/range-selector/nested/value-error-bar.ts new file mode 100644 index 000000000000..c4b5f2df81df --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/value-error-bar.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ValueErrorBarDisplayMode, ValueErrorBarType } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-value-error-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorValueErrorBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get displayMode(): ValueErrorBarDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: ValueErrorBarDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get edgeLength(): number { + return this._getOption('edgeLength'); + } + set edgeLength(value: number) { + this._setOption('edgeLength', value); + } + + @Input() + get highValueField(): string | undefined { + return this._getOption('highValueField'); + } + set highValueField(value: string | undefined) { + this._setOption('highValueField', value); + } + + @Input() + get lineWidth(): number { + return this._getOption('lineWidth'); + } + set lineWidth(value: number) { + this._setOption('lineWidth', value); + } + + @Input() + get lowValueField(): string | undefined { + return this._getOption('lowValueField'); + } + set lowValueField(value: string | undefined) { + this._setOption('lowValueField', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get type(): ValueErrorBarType | undefined { + return this._getOption('type'); + } + set type(value: ValueErrorBarType | undefined) { + this._setOption('type', value); + } + + @Input() + get value(): number { + return this._getOption('value'); + } + set value(value: number) { + this._setOption('value', value); + } + + + protected get _optionPath() { + return 'valueErrorBar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorValueErrorBarComponent + ], + exports: [ + DxoRangeSelectorValueErrorBarComponent + ], +}) +export class DxoRangeSelectorValueErrorBarModule { } diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/width.ts b/packages/devextreme-angular/src/ui/range-selector/nested/width.ts new file mode 100644 index 000000000000..aa139806cab4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-selector/nested/width.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-selector-width', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSelectorWidthComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get rangeMaxPoint(): number | undefined { + return this._getOption('rangeMaxPoint'); + } + set rangeMaxPoint(value: number | undefined) { + this._setOption('rangeMaxPoint', value); + } + + @Input() + get rangeMinPoint(): number | undefined { + return this._getOption('rangeMinPoint'); + } + set rangeMinPoint(value: number | undefined) { + this._setOption('rangeMinPoint', value); + } + + + protected get _optionPath() { + return 'width'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSelectorWidthComponent + ], + exports: [ + DxoRangeSelectorWidthComponent + ], +}) +export class DxoRangeSelectorWidthModule { } diff --git a/packages/devextreme-angular/src/ui/range-slider/index.ts b/packages/devextreme-angular/src/ui/range-slider/index.ts index 536c8798c710..d78bd13498f8 100644 --- a/packages/devextreme-angular/src/ui/range-slider/index.ts +++ b/packages/devextreme-angular/src/ui/range-slider/index.ts @@ -47,6 +47,10 @@ import { DxoLabelModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; +import { DxoRangeSliderLabelModule } from 'devextreme-angular/ui/range-slider/nested'; +import { DxoRangeSliderFormatModule } from 'devextreme-angular/ui/range-slider/nested'; +import { DxoRangeSliderTooltipModule } from 'devextreme-angular/ui/range-slider/nested'; + @@ -789,6 +793,7 @@ export class DxRangeSliderComponent extends DxComponent implements OnDestroy, Co + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -909,6 +914,9 @@ export class DxRangeSliderComponent extends DxComponent implements OnDestroy, Co DxoLabelModule, DxoFormatModule, DxoTooltipModule, + DxoRangeSliderLabelModule, + DxoRangeSliderFormatModule, + DxoRangeSliderTooltipModule, DxIntegrationModule, DxTemplateModule ], @@ -920,6 +928,9 @@ export class DxRangeSliderComponent extends DxComponent implements OnDestroy, Co DxoLabelModule, DxoFormatModule, DxoTooltipModule, + DxoRangeSliderLabelModule, + DxoRangeSliderFormatModule, + DxoRangeSliderTooltipModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/range-slider/nested/format.ts b/packages/devextreme-angular/src/ui/range-slider/nested/format.ts new file mode 100644 index 000000000000..6f7eaa7fed52 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-slider/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-slider-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSliderFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSliderFormatComponent + ], + exports: [ + DxoRangeSliderFormatComponent + ], +}) +export class DxoRangeSliderFormatModule { } diff --git a/packages/devextreme-angular/src/ui/range-slider/nested/index.ts b/packages/devextreme-angular/src/ui/range-slider/nested/index.ts new file mode 100644 index 000000000000..73381bdda89b --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-slider/nested/index.ts @@ -0,0 +1,4 @@ +export * from './format'; +export * from './label'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/range-slider/nested/label.ts b/packages/devextreme-angular/src/ui/range-slider/nested/label.ts new file mode 100644 index 000000000000..fda488a4f971 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-slider/nested/label.ts @@ -0,0 +1,90 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { VerticalEdge } from 'devextreme/common'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-slider-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSliderLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get position(): VerticalEdge { + return this._getOption('position'); + } + set position(value: VerticalEdge) { + this._setOption('position', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSliderLabelComponent + ], + exports: [ + DxoRangeSliderLabelComponent + ], +}) +export class DxoRangeSliderLabelModule { } diff --git a/packages/devextreme-angular/src/ui/range-slider/nested/ng-package.json b/packages/devextreme-angular/src/ui/range-slider/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-slider/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/range-slider/nested/tooltip.ts b/packages/devextreme-angular/src/ui/range-slider/nested/tooltip.ts new file mode 100644 index 000000000000..139adff12ef2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/range-slider/nested/tooltip.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TooltipShowMode, VerticalEdge } from 'devextreme/common'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-range-slider-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoRangeSliderTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get position(): VerticalEdge { + return this._getOption('position'); + } + set position(value: VerticalEdge) { + this._setOption('position', value); + } + + @Input() + get showMode(): TooltipShowMode { + return this._getOption('showMode'); + } + set showMode(value: TooltipShowMode) { + this._setOption('showMode', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoRangeSliderTooltipComponent + ], + exports: [ + DxoRangeSliderTooltipComponent + ], +}) +export class DxoRangeSliderTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/recurrence-editor/index.ts b/packages/devextreme-angular/src/ui/recurrence-editor/index.ts index 608aca9cd48a..cc9cd3939114 100644 --- a/packages/devextreme-angular/src/ui/recurrence-editor/index.ts +++ b/packages/devextreme-angular/src/ui/recurrence-editor/index.ts @@ -47,6 +47,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxRecurrenceEditorComponent), @@ -545,6 +546,7 @@ export class DxRecurrenceEditorComponent extends DxComponent implements OnDestro + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/resizable/index.ts b/packages/devextreme-angular/src/ui/resizable/index.ts index 597fa515cb6d..da4da3241d65 100644 --- a/packages/devextreme-angular/src/ui/resizable/index.ts +++ b/packages/devextreme-angular/src/ui/resizable/index.ts @@ -36,6 +36,7 @@ import { + /** * [descr:dxResizable] @@ -325,6 +326,7 @@ export class DxResizableComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/responsive-box/index.ts b/packages/devextreme-angular/src/ui/responsive-box/index.ts index 6634957430ae..879154828da6 100644 --- a/packages/devextreme-angular/src/ui/responsive-box/index.ts +++ b/packages/devextreme-angular/src/ui/responsive-box/index.ts @@ -45,10 +45,18 @@ import { DxiItemModule } from 'devextreme-angular/ui/nested'; import { DxiLocationModule } from 'devextreme-angular/ui/nested'; import { DxiRowModule } from 'devextreme-angular/ui/nested'; +import { DxiResponsiveBoxColModule } from 'devextreme-angular/ui/responsive-box/nested'; +import { DxiResponsiveBoxItemModule } from 'devextreme-angular/ui/responsive-box/nested'; +import { DxiResponsiveBoxLocationModule } from 'devextreme-angular/ui/responsive-box/nested'; +import { DxiResponsiveBoxRowModule } from 'devextreme-angular/ui/responsive-box/nested'; + import { DxiColComponent } from 'devextreme-angular/ui/nested'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; import { DxiRowComponent } from 'devextreme-angular/ui/nested'; +import { DxiResponsiveBoxColComponent } from 'devextreme-angular/ui/responsive-box/nested'; +import { DxiResponsiveBoxItemComponent } from 'devextreme-angular/ui/responsive-box/nested'; +import { DxiResponsiveBoxRowComponent } from 'devextreme-angular/ui/responsive-box/nested'; /** @@ -434,31 +442,65 @@ export class DxResponsiveBoxComponent extends DxCompone - @ContentChildren(DxiColComponent) - get colsChildren(): QueryList { + @ContentChildren(DxiResponsiveBoxColComponent) + get colsChildren(): QueryList { return this._getOption('cols'); } set colsChildren(value) { + this.setContentChildren('cols', value, 'DxiResponsiveBoxColComponent'); this.setChildren('cols', value); } - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiResponsiveBoxItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiResponsiveBoxItemComponent'); this.setChildren('items', value); } - @ContentChildren(DxiRowComponent) - get rowsChildren(): QueryList { + @ContentChildren(DxiResponsiveBoxRowComponent) + get rowsChildren(): QueryList { return this._getOption('rows'); } set rowsChildren(value) { + this.setContentChildren('rows', value, 'DxiResponsiveBoxRowComponent'); this.setChildren('rows', value); } + @ContentChildren(DxiColComponent) + get colsLegacyChildren(): QueryList { + return this._getOption('cols'); + } + set colsLegacyChildren(value) { + if (this.checkContentChildren('cols', value, 'DxiColComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiRowComponent) + get rowsLegacyChildren(): QueryList { + return this._getOption('rows'); + } + set rowsLegacyChildren(value) { + if (this.checkContentChildren('rows', value, 'DxiRowComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -550,6 +592,10 @@ export class DxResponsiveBoxComponent extends DxCompone DxiItemModule, DxiLocationModule, DxiRowModule, + DxiResponsiveBoxColModule, + DxiResponsiveBoxItemModule, + DxiResponsiveBoxLocationModule, + DxiResponsiveBoxRowModule, DxIntegrationModule, DxTemplateModule ], @@ -562,6 +608,10 @@ export class DxResponsiveBoxComponent extends DxCompone DxiItemModule, DxiLocationModule, DxiRowModule, + DxiResponsiveBoxColModule, + DxiResponsiveBoxItemModule, + DxiResponsiveBoxLocationModule, + DxiResponsiveBoxRowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/responsive-box/nested/col-dxi.ts b/packages/devextreme-angular/src/ui/responsive-box/nested/col-dxi.ts new file mode 100644 index 000000000000..f179ce9d8d4e --- /dev/null +++ b/packages/devextreme-angular/src/ui/responsive-box/nested/col-dxi.ts @@ -0,0 +1,90 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-responsive-box-col', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiResponsiveBoxColComponent extends CollectionNestedOption { + @Input() + get baseSize(): number | string { + return this._getOption('baseSize'); + } + set baseSize(value: number | string) { + this._setOption('baseSize', value); + } + + @Input() + get ratio(): number { + return this._getOption('ratio'); + } + set ratio(value: number) { + this._setOption('ratio', value); + } + + @Input() + get screen(): string | undefined { + return this._getOption('screen'); + } + set screen(value: string | undefined) { + this._setOption('screen', value); + } + + @Input() + get shrink(): number { + return this._getOption('shrink'); + } + set shrink(value: number) { + this._setOption('shrink', value); + } + + + protected get _optionPath() { + return 'cols'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiResponsiveBoxColComponent + ], + exports: [ + DxiResponsiveBoxColComponent + ], +}) +export class DxiResponsiveBoxColModule { } diff --git a/packages/devextreme-angular/src/ui/responsive-box/nested/index.ts b/packages/devextreme-angular/src/ui/responsive-box/nested/index.ts new file mode 100644 index 000000000000..7c1d51ca91e2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/responsive-box/nested/index.ts @@ -0,0 +1,5 @@ +export * from './col-dxi'; +export * from './item-dxi'; +export * from './location-dxi'; +export * from './row-dxi'; + diff --git a/packages/devextreme-angular/src/ui/responsive-box/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/responsive-box/nested/item-dxi.ts new file mode 100644 index 000000000000..cdbe3fc3c2eb --- /dev/null +++ b/packages/devextreme-angular/src/ui/responsive-box/nested/item-dxi.ts @@ -0,0 +1,139 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiResponsiveBoxLocationComponent } from './location-dxi'; + + +@Component({ + selector: 'dxi-responsive-box-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiResponsiveBoxItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get location(): Array { + return this._getOption('location'); + } + set location(value: Array) { + this._setOption('location', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiResponsiveBoxLocationComponent)) + get locationChildren(): QueryList { + return this._getOption('location'); + } + set locationChildren(value) { + this.setChildren('location', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiResponsiveBoxItemComponent + ], + exports: [ + DxiResponsiveBoxItemComponent + ], +}) +export class DxiResponsiveBoxItemModule { } diff --git a/packages/devextreme-angular/src/ui/responsive-box/nested/location-dxi.ts b/packages/devextreme-angular/src/ui/responsive-box/nested/location-dxi.ts new file mode 100644 index 000000000000..56cf8031956e --- /dev/null +++ b/packages/devextreme-angular/src/ui/responsive-box/nested/location-dxi.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-responsive-box-location', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiResponsiveBoxLocationComponent extends CollectionNestedOption { + @Input() + get col(): number { + return this._getOption('col'); + } + set col(value: number) { + this._setOption('col', value); + } + + @Input() + get colspan(): number | undefined { + return this._getOption('colspan'); + } + set colspan(value: number | undefined) { + this._setOption('colspan', value); + } + + @Input() + get row(): number { + return this._getOption('row'); + } + set row(value: number) { + this._setOption('row', value); + } + + @Input() + get rowspan(): number | undefined { + return this._getOption('rowspan'); + } + set rowspan(value: number | undefined) { + this._setOption('rowspan', value); + } + + @Input() + get screen(): string | undefined { + return this._getOption('screen'); + } + set screen(value: string | undefined) { + this._setOption('screen', value); + } + + + protected get _optionPath() { + return 'location'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiResponsiveBoxLocationComponent + ], + exports: [ + DxiResponsiveBoxLocationComponent + ], +}) +export class DxiResponsiveBoxLocationModule { } diff --git a/packages/devextreme-angular/src/ui/responsive-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/responsive-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/responsive-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/responsive-box/nested/row-dxi.ts b/packages/devextreme-angular/src/ui/responsive-box/nested/row-dxi.ts new file mode 100644 index 000000000000..5c347de1acfe --- /dev/null +++ b/packages/devextreme-angular/src/ui/responsive-box/nested/row-dxi.ts @@ -0,0 +1,90 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-responsive-box-row', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiResponsiveBoxRowComponent extends CollectionNestedOption { + @Input() + get baseSize(): number | string { + return this._getOption('baseSize'); + } + set baseSize(value: number | string) { + this._setOption('baseSize', value); + } + + @Input() + get ratio(): number { + return this._getOption('ratio'); + } + set ratio(value: number) { + this._setOption('ratio', value); + } + + @Input() + get screen(): string | undefined { + return this._getOption('screen'); + } + set screen(value: string | undefined) { + this._setOption('screen', value); + } + + @Input() + get shrink(): number { + return this._getOption('shrink'); + } + set shrink(value: number) { + this._setOption('shrink', value); + } + + + protected get _optionPath() { + return 'rows'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiResponsiveBoxRowComponent + ], + exports: [ + DxiResponsiveBoxRowComponent + ], +}) +export class DxiResponsiveBoxRowModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/index.ts b/packages/devextreme-angular/src/ui/sankey/index.ts index eaae8ff4bbd0..1edf292f2ab3 100644 --- a/packages/devextreme-angular/src/ui/sankey/index.ts +++ b/packages/devextreme-angular/src/ui/sankey/index.ts @@ -59,6 +59,24 @@ import { DxoSubtitleModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; +import { DxoSankeyAdaptiveLayoutModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyExportModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyLabelModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyBorderModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyFontModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyShadowModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyLinkModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyHoverStyleModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyHatchingModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyLoadingIndicatorModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyMarginModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyNodeModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeySizeModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyTitleModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeySubtitleModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyTooltipModule } from 'devextreme-angular/ui/sankey/nested'; +import { DxoSankeyFormatModule } from 'devextreme-angular/ui/sankey/nested'; + @@ -681,6 +699,7 @@ export class DxSankeyComponent extends DxComponent implements OnDestroy, OnChang + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -795,6 +814,23 @@ export class DxSankeyComponent extends DxComponent implements OnDestroy, OnChang DxoSubtitleModule, DxoTooltipModule, DxoFormatModule, + DxoSankeyAdaptiveLayoutModule, + DxoSankeyExportModule, + DxoSankeyLabelModule, + DxoSankeyBorderModule, + DxoSankeyFontModule, + DxoSankeyShadowModule, + DxoSankeyLinkModule, + DxoSankeyHoverStyleModule, + DxoSankeyHatchingModule, + DxoSankeyLoadingIndicatorModule, + DxoSankeyMarginModule, + DxoSankeyNodeModule, + DxoSankeySizeModule, + DxoSankeyTitleModule, + DxoSankeySubtitleModule, + DxoSankeyTooltipModule, + DxoSankeyFormatModule, DxIntegrationModule, DxTemplateModule ], @@ -820,6 +856,23 @@ export class DxSankeyComponent extends DxComponent implements OnDestroy, OnChang DxoSubtitleModule, DxoTooltipModule, DxoFormatModule, + DxoSankeyAdaptiveLayoutModule, + DxoSankeyExportModule, + DxoSankeyLabelModule, + DxoSankeyBorderModule, + DxoSankeyFontModule, + DxoSankeyShadowModule, + DxoSankeyLinkModule, + DxoSankeyHoverStyleModule, + DxoSankeyHatchingModule, + DxoSankeyLoadingIndicatorModule, + DxoSankeyMarginModule, + DxoSankeyNodeModule, + DxoSankeySizeModule, + DxoSankeyTitleModule, + DxoSankeySubtitleModule, + DxoSankeyTooltipModule, + DxoSankeyFormatModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/sankey/nested/adaptive-layout.ts b/packages/devextreme-angular/src/ui/sankey/nested/adaptive-layout.ts new file mode 100644 index 000000000000..ae1b508757e7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/adaptive-layout.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-adaptive-layout', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyAdaptiveLayoutComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get keepLabels(): boolean { + return this._getOption('keepLabels'); + } + set keepLabels(value: boolean) { + this._setOption('keepLabels', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'adaptiveLayout'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyAdaptiveLayoutComponent + ], + exports: [ + DxoSankeyAdaptiveLayoutComponent + ], +}) +export class DxoSankeyAdaptiveLayoutModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/border.ts b/packages/devextreme-angular/src/ui/sankey/nested/border.ts new file mode 100644 index 000000000000..d53b39aad2f7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/border.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get visible(): boolean | undefined { + return this._getOption('visible'); + } + set visible(value: boolean | undefined) { + this._setOption('visible', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyBorderComponent + ], + exports: [ + DxoSankeyBorderComponent + ], +}) +export class DxoSankeyBorderModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/export.ts b/packages/devextreme-angular/src/ui/sankey/nested/export.ts new file mode 100644 index 000000000000..b6c9c9bbf452 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyExportComponent + ], + exports: [ + DxoSankeyExportComponent + ], +}) +export class DxoSankeyExportModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/font.ts b/packages/devextreme-angular/src/ui/sankey/nested/font.ts new file mode 100644 index 000000000000..b56227b81679 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyFontComponent + ], + exports: [ + DxoSankeyFontComponent + ], +}) +export class DxoSankeyFontModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/format.ts b/packages/devextreme-angular/src/ui/sankey/nested/format.ts new file mode 100644 index 000000000000..2dd77e07c2e0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyFormatComponent + ], + exports: [ + DxoSankeyFormatComponent + ], +}) +export class DxoSankeyFormatModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/hatching.ts b/packages/devextreme-angular/src/ui/sankey/nested/hatching.ts new file mode 100644 index 000000000000..53ede88324b9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/hatching.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-hatching', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyHatchingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get direction(): HatchDirection { + return this._getOption('direction'); + } + set direction(value: HatchDirection) { + this._setOption('direction', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get step(): number { + return this._getOption('step'); + } + set step(value: number) { + this._setOption('step', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'hatching'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyHatchingComponent + ], + exports: [ + DxoSankeyHatchingComponent + ], +}) +export class DxoSankeyHatchingModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/hover-style.ts b/packages/devextreme-angular/src/ui/sankey/nested/hover-style.ts new file mode 100644 index 000000000000..5ebd000f1325 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/hover-style.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }) { + this._setOption('border', value); + } + + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get hatching(): { direction?: HatchDirection, opacity?: number, step?: number, width?: number } { + return this._getOption('hatching'); + } + set hatching(value: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }) { + this._setOption('hatching', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyHoverStyleComponent + ], + exports: [ + DxoSankeyHoverStyleComponent + ], +}) +export class DxoSankeyHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/index.ts b/packages/devextreme-angular/src/ui/sankey/nested/index.ts new file mode 100644 index 000000000000..c635f9fbe29a --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/index.ts @@ -0,0 +1,18 @@ +export * from './adaptive-layout'; +export * from './border'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './hatching'; +export * from './hover-style'; +export * from './label'; +export * from './link'; +export * from './loading-indicator'; +export * from './margin'; +export * from './node'; +export * from './shadow'; +export * from './size'; +export * from './subtitle'; +export * from './title'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/sankey/nested/label.ts b/packages/devextreme-angular/src/ui/sankey/nested/label.ts new file mode 100644 index 000000000000..7a3341b8a8ad --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/label.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalOffset(): number { + return this._getOption('horizontalOffset'); + } + set horizontalOffset(value: number) { + this._setOption('horizontalOffset', value); + } + + @Input() + get overlappingBehavior(): TextOverflow { + return this._getOption('overlappingBehavior'); + } + set overlappingBehavior(value: TextOverflow) { + this._setOption('overlappingBehavior', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get useNodeColors(): boolean { + return this._getOption('useNodeColors'); + } + set useNodeColors(value: boolean) { + this._setOption('useNodeColors', value); + } + + @Input() + get verticalOffset(): number { + return this._getOption('verticalOffset'); + } + set verticalOffset(value: number) { + this._setOption('verticalOffset', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyLabelComponent + ], + exports: [ + DxoSankeyLabelComponent + ], +}) +export class DxoSankeyLabelModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/link.ts b/packages/devextreme-angular/src/ui/sankey/nested/link.ts new file mode 100644 index 000000000000..9bf3b0f34981 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/link.ts @@ -0,0 +1,106 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; +import { SankeyColorMode } from 'devextreme/viz/sankey'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-link', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyLinkComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get colorMode(): SankeyColorMode { + return this._getOption('colorMode'); + } + set colorMode(value: SankeyColorMode) { + this._setOption('colorMode', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, color?: string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, opacity?: number } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, color?: string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, opacity?: number }) { + this._setOption('hoverStyle', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'link'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyLinkComponent + ], + exports: [ + DxoSankeyLinkComponent + ], +}) +export class DxoSankeyLinkModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/sankey/nested/loading-indicator.ts new file mode 100644 index 000000000000..98d5a48cdd2e --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyLoadingIndicatorComponent + ], + exports: [ + DxoSankeyLoadingIndicatorComponent + ], +}) +export class DxoSankeyLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/margin.ts b/packages/devextreme-angular/src/ui/sankey/nested/margin.ts new file mode 100644 index 000000000000..8c5e5b113b7e --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyMarginComponent + ], + exports: [ + DxoSankeyMarginComponent + ], +}) +export class DxoSankeyMarginModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/ng-package.json b/packages/devextreme-angular/src/ui/sankey/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/sankey/nested/node.ts b/packages/devextreme-angular/src/ui/sankey/nested/node.ts new file mode 100644 index 000000000000..224183e2e9c8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/node.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HatchDirection } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-node', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyNodeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, color?: string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, opacity?: number | undefined } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, visible?: boolean | undefined, width?: number | undefined }, color?: string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, opacity?: number | undefined }) { + this._setOption('hoverStyle', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get padding(): number { + return this._getOption('padding'); + } + set padding(value: number) { + this._setOption('padding', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'node'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyNodeComponent + ], + exports: [ + DxoSankeyNodeComponent + ], +}) +export class DxoSankeyNodeModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/shadow.ts b/packages/devextreme-angular/src/ui/sankey/nested/shadow.ts new file mode 100644 index 000000000000..9efd72b09349 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyShadowComponent + ], + exports: [ + DxoSankeyShadowComponent + ], +}) +export class DxoSankeyShadowModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/size.ts b/packages/devextreme-angular/src/ui/sankey/nested/size.ts new file mode 100644 index 000000000000..6b25c13add00 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeySizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeySizeComponent + ], + exports: [ + DxoSankeySizeComponent + ], +}) +export class DxoSankeySizeModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts b/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts new file mode 100644 index 000000000000..fe1b77a676b1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeySubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeySubtitleComponent + ], + exports: [ + DxoSankeySubtitleComponent + ], +}) +export class DxoSankeySubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/title.ts b/packages/devextreme-angular/src/ui/sankey/nested/title.ts new file mode 100644 index 000000000000..9860ea959948 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyTitleComponent + ], + exports: [ + DxoSankeyTitleComponent + ], +}) +export class DxoSankeyTitleModule { } diff --git a/packages/devextreme-angular/src/ui/sankey/nested/tooltip.ts b/packages/devextreme-angular/src/ui/sankey/nested/tooltip.ts new file mode 100644 index 000000000000..99c489edac87 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sankey/nested/tooltip.ts @@ -0,0 +1,203 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sankey-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSankeyTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeLinkTooltip(): Function | undefined { + return this._getOption('customizeLinkTooltip'); + } + set customizeLinkTooltip(value: Function | undefined) { + this._setOption('customizeLinkTooltip', value); + } + + @Input() + get customizeNodeTooltip(): Function | undefined { + return this._getOption('customizeNodeTooltip'); + } + set customizeNodeTooltip(value: Function | undefined) { + this._setOption('customizeNodeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get linkTooltipTemplate(): any | undefined { + return this._getOption('linkTooltipTemplate'); + } + set linkTooltipTemplate(value: any | undefined) { + this._setOption('linkTooltipTemplate', value); + } + + @Input() + get nodeTooltipTemplate(): any | undefined { + return this._getOption('nodeTooltipTemplate'); + } + set nodeTooltipTemplate(value: any | undefined) { + this._setOption('nodeTooltipTemplate', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSankeyTooltipComponent + ], + exports: [ + DxoSankeyTooltipComponent + ], +}) +export class DxoSankeyTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/scheduler/index.ts b/packages/devextreme-angular/src/ui/scheduler/index.ts index 3bc04f9bc502..91c6187cca33 100644 --- a/packages/devextreme-angular/src/ui/scheduler/index.ts +++ b/packages/devextreme-angular/src/ui/scheduler/index.ts @@ -46,9 +46,17 @@ import { DxiResourceModule } from 'devextreme-angular/ui/nested'; import { DxoScrollingModule } from 'devextreme-angular/ui/nested'; import { DxiViewModule } from 'devextreme-angular/ui/nested'; +import { DxoSchedulerAppointmentDraggingModule } from 'devextreme-angular/ui/scheduler/nested'; +import { DxoSchedulerEditingModule } from 'devextreme-angular/ui/scheduler/nested'; +import { DxiSchedulerResourceModule } from 'devextreme-angular/ui/scheduler/nested'; +import { DxoSchedulerScrollingModule } from 'devextreme-angular/ui/scheduler/nested'; +import { DxiSchedulerViewModule } from 'devextreme-angular/ui/scheduler/nested'; + import { DxiResourceComponent } from 'devextreme-angular/ui/nested'; import { DxiViewComponent } from 'devextreme-angular/ui/nested'; +import { DxiSchedulerResourceComponent } from 'devextreme-angular/ui/scheduler/nested'; +import { DxiSchedulerViewComponent } from 'devextreme-angular/ui/scheduler/nested'; /** @@ -1416,23 +1424,46 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh - @ContentChildren(DxiResourceComponent) - get resourcesChildren(): QueryList { + @ContentChildren(DxiSchedulerResourceComponent) + get resourcesChildren(): QueryList { return this._getOption('resources'); } set resourcesChildren(value) { + this.setContentChildren('resources', value, 'DxiSchedulerResourceComponent'); this.setChildren('resources', value); } - @ContentChildren(DxiViewComponent) - get viewsChildren(): QueryList { + @ContentChildren(DxiSchedulerViewComponent) + get viewsChildren(): QueryList { return this._getOption('views'); } set viewsChildren(value) { + this.setContentChildren('views', value, 'DxiSchedulerViewComponent'); this.setChildren('views', value); } + @ContentChildren(DxiResourceComponent) + get resourcesLegacyChildren(): QueryList { + return this._getOption('resources'); + } + set resourcesLegacyChildren(value) { + if (this.checkContentChildren('resources', value, 'DxiResourceComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiViewComponent) + get viewsLegacyChildren(): QueryList { + return this._getOption('views'); + } + set viewsLegacyChildren(value) { + if (this.checkContentChildren('views', value, 'DxiViewComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1582,6 +1613,11 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh DxiResourceModule, DxoScrollingModule, DxiViewModule, + DxoSchedulerAppointmentDraggingModule, + DxoSchedulerEditingModule, + DxiSchedulerResourceModule, + DxoSchedulerScrollingModule, + DxiSchedulerViewModule, DxIntegrationModule, DxTemplateModule ], @@ -1595,6 +1631,11 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh DxiResourceModule, DxoScrollingModule, DxiViewModule, + DxoSchedulerAppointmentDraggingModule, + DxoSchedulerEditingModule, + DxiSchedulerResourceModule, + DxoSchedulerScrollingModule, + DxiSchedulerViewModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/appointment-dragging.ts b/packages/devextreme-angular/src/ui/scheduler/nested/appointment-dragging.ts new file mode 100644 index 000000000000..a19b1942bac1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/appointment-dragging.ts @@ -0,0 +1,144 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-scheduler-appointment-dragging', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSchedulerAppointmentDraggingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get autoScroll(): boolean { + return this._getOption('autoScroll'); + } + set autoScroll(value: boolean) { + this._setOption('autoScroll', value); + } + + @Input() + get data(): any | undefined { + return this._getOption('data'); + } + set data(value: any | undefined) { + this._setOption('data', value); + } + + @Input() + get group(): string | undefined { + return this._getOption('group'); + } + set group(value: string | undefined) { + this._setOption('group', value); + } + + @Input() + get onAdd(): Function { + return this._getOption('onAdd'); + } + set onAdd(value: Function) { + this._setOption('onAdd', value); + } + + @Input() + get onDragEnd(): Function { + return this._getOption('onDragEnd'); + } + set onDragEnd(value: Function) { + this._setOption('onDragEnd', value); + } + + @Input() + get onDragMove(): Function { + return this._getOption('onDragMove'); + } + set onDragMove(value: Function) { + this._setOption('onDragMove', value); + } + + @Input() + get onDragStart(): Function { + return this._getOption('onDragStart'); + } + set onDragStart(value: Function) { + this._setOption('onDragStart', value); + } + + @Input() + get onRemove(): Function { + return this._getOption('onRemove'); + } + set onRemove(value: Function) { + this._setOption('onRemove', value); + } + + @Input() + get scrollSensitivity(): number { + return this._getOption('scrollSensitivity'); + } + set scrollSensitivity(value: number) { + this._setOption('scrollSensitivity', value); + } + + @Input() + get scrollSpeed(): number { + return this._getOption('scrollSpeed'); + } + set scrollSpeed(value: number) { + this._setOption('scrollSpeed', value); + } + + + protected get _optionPath() { + return 'appointmentDragging'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSchedulerAppointmentDraggingComponent + ], + exports: [ + DxoSchedulerAppointmentDraggingComponent + ], +}) +export class DxoSchedulerAppointmentDraggingModule { } diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/editing.ts b/packages/devextreme-angular/src/ui/scheduler/nested/editing.ts new file mode 100644 index 000000000000..7f7afeb7dcbf --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/editing.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-scheduler-editing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSchedulerEditingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowAdding(): boolean { + return this._getOption('allowAdding'); + } + set allowAdding(value: boolean) { + this._setOption('allowAdding', value); + } + + @Input() + get allowDeleting(): boolean { + return this._getOption('allowDeleting'); + } + set allowDeleting(value: boolean) { + this._setOption('allowDeleting', value); + } + + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get allowResizing(): boolean { + return this._getOption('allowResizing'); + } + set allowResizing(value: boolean) { + this._setOption('allowResizing', value); + } + + @Input() + get allowTimeZoneEditing(): boolean { + return this._getOption('allowTimeZoneEditing'); + } + set allowTimeZoneEditing(value: boolean) { + this._setOption('allowTimeZoneEditing', value); + } + + @Input() + get allowUpdating(): boolean { + return this._getOption('allowUpdating'); + } + set allowUpdating(value: boolean) { + this._setOption('allowUpdating', value); + } + + + protected get _optionPath() { + return 'editing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSchedulerEditingComponent + ], + exports: [ + DxoSchedulerEditingComponent + ], +}) +export class DxoSchedulerEditingModule { } diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/index.ts b/packages/devextreme-angular/src/ui/scheduler/nested/index.ts new file mode 100644 index 000000000000..71b2a60ad2f2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/index.ts @@ -0,0 +1,6 @@ +export * from './appointment-dragging'; +export * from './editing'; +export * from './resource-dxi'; +export * from './scrolling'; +export * from './view-dxi'; + diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/ng-package.json b/packages/devextreme-angular/src/ui/scheduler/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/resource-dxi.ts b/packages/devextreme-angular/src/ui/scheduler/nested/resource-dxi.ts new file mode 100644 index 000000000000..be83afea5444 --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/resource-dxi.ts @@ -0,0 +1,124 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-scheduler-resource', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiSchedulerResourceComponent extends CollectionNestedOption { + @Input() + get allowMultiple(): boolean { + return this._getOption('allowMultiple'); + } + set allowMultiple(value: boolean) { + this._setOption('allowMultiple', value); + } + + @Input() + get colorExpr(): string { + return this._getOption('colorExpr'); + } + set colorExpr(value: string) { + this._setOption('colorExpr', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get displayExpr(): Function | string { + return this._getOption('displayExpr'); + } + set displayExpr(value: Function | string) { + this._setOption('displayExpr', value); + } + + @Input() + get fieldExpr(): string { + return this._getOption('fieldExpr'); + } + set fieldExpr(value: string) { + this._setOption('fieldExpr', value); + } + + @Input() + get label(): string { + return this._getOption('label'); + } + set label(value: string) { + this._setOption('label', value); + } + + @Input() + get useColorAsDefault(): boolean { + return this._getOption('useColorAsDefault'); + } + set useColorAsDefault(value: boolean) { + this._setOption('useColorAsDefault', value); + } + + @Input() + get valueExpr(): Function | string { + return this._getOption('valueExpr'); + } + set valueExpr(value: Function | string) { + this._setOption('valueExpr', value); + } + + + protected get _optionPath() { + return 'resources'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiSchedulerResourceComponent + ], + exports: [ + DxiSchedulerResourceComponent + ], +}) +export class DxiSchedulerResourceModule { } diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/scrolling.ts b/packages/devextreme-angular/src/ui/scheduler/nested/scrolling.ts new file mode 100644 index 000000000000..3794730c4156 --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/scrolling.ts @@ -0,0 +1,73 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ScrollMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-scheduler-scrolling', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSchedulerScrollingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get mode(): ScrollMode { + return this._getOption('mode'); + } + set mode(value: ScrollMode) { + this._setOption('mode', value); + } + + + protected get _optionPath() { + return 'scrolling'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSchedulerScrollingComponent + ], + exports: [ + DxoSchedulerScrollingComponent + ], +}) +export class DxoSchedulerScrollingModule { } diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts b/packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts new file mode 100644 index 000000000000..5e0156511ae0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts @@ -0,0 +1,252 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { FirstDayOfWeek, Orientation } from 'devextreme/common'; +import { AllDayPanelMode, CellAppointmentsLimit, dxSchedulerScrolling, ViewType } from 'devextreme/ui/scheduler'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-scheduler-view', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiSchedulerViewComponent extends CollectionNestedOption { + @Input() + get agendaDuration(): number { + return this._getOption('agendaDuration'); + } + set agendaDuration(value: number) { + this._setOption('agendaDuration', value); + } + + @Input() + get allDayPanelMode(): AllDayPanelMode { + return this._getOption('allDayPanelMode'); + } + set allDayPanelMode(value: AllDayPanelMode) { + this._setOption('allDayPanelMode', value); + } + + @Input() + get appointmentCollectorTemplate(): any { + return this._getOption('appointmentCollectorTemplate'); + } + set appointmentCollectorTemplate(value: any) { + this._setOption('appointmentCollectorTemplate', value); + } + + @Input() + get appointmentTemplate(): any { + return this._getOption('appointmentTemplate'); + } + set appointmentTemplate(value: any) { + this._setOption('appointmentTemplate', value); + } + + @Input() + get appointmentTooltipTemplate(): any { + return this._getOption('appointmentTooltipTemplate'); + } + set appointmentTooltipTemplate(value: any) { + this._setOption('appointmentTooltipTemplate', value); + } + + @Input() + get cellDuration(): number { + return this._getOption('cellDuration'); + } + set cellDuration(value: number) { + this._setOption('cellDuration', value); + } + + @Input() + get dataCellTemplate(): any { + return this._getOption('dataCellTemplate'); + } + set dataCellTemplate(value: any) { + this._setOption('dataCellTemplate', value); + } + + @Input() + get dateCellTemplate(): any { + return this._getOption('dateCellTemplate'); + } + set dateCellTemplate(value: any) { + this._setOption('dateCellTemplate', value); + } + + @Input() + get dropDownAppointmentTemplate(): any { + return this._getOption('dropDownAppointmentTemplate'); + } + set dropDownAppointmentTemplate(value: any) { + this._setOption('dropDownAppointmentTemplate', value); + } + + @Input() + get endDayHour(): number { + return this._getOption('endDayHour'); + } + set endDayHour(value: number) { + this._setOption('endDayHour', value); + } + + @Input() + get firstDayOfWeek(): FirstDayOfWeek | undefined { + return this._getOption('firstDayOfWeek'); + } + set firstDayOfWeek(value: FirstDayOfWeek | undefined) { + this._setOption('firstDayOfWeek', value); + } + + @Input() + get groupByDate(): boolean { + return this._getOption('groupByDate'); + } + set groupByDate(value: boolean) { + this._setOption('groupByDate', value); + } + + @Input() + get groupOrientation(): Orientation { + return this._getOption('groupOrientation'); + } + set groupOrientation(value: Orientation) { + this._setOption('groupOrientation', value); + } + + @Input() + get groups(): Array { + return this._getOption('groups'); + } + set groups(value: Array) { + this._setOption('groups', value); + } + + @Input() + get intervalCount(): number { + return this._getOption('intervalCount'); + } + set intervalCount(value: number) { + this._setOption('intervalCount', value); + } + + @Input() + get maxAppointmentsPerCell(): CellAppointmentsLimit | number { + return this._getOption('maxAppointmentsPerCell'); + } + set maxAppointmentsPerCell(value: CellAppointmentsLimit | number) { + this._setOption('maxAppointmentsPerCell', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get resourceCellTemplate(): any { + return this._getOption('resourceCellTemplate'); + } + set resourceCellTemplate(value: any) { + this._setOption('resourceCellTemplate', value); + } + + @Input() + get scrolling(): dxSchedulerScrolling { + return this._getOption('scrolling'); + } + set scrolling(value: dxSchedulerScrolling) { + this._setOption('scrolling', value); + } + + @Input() + get startDate(): Date | number | string | undefined { + return this._getOption('startDate'); + } + set startDate(value: Date | number | string | undefined) { + this._setOption('startDate', value); + } + + @Input() + get startDayHour(): number { + return this._getOption('startDayHour'); + } + set startDayHour(value: number) { + this._setOption('startDayHour', value); + } + + @Input() + get timeCellTemplate(): any { + return this._getOption('timeCellTemplate'); + } + set timeCellTemplate(value: any) { + this._setOption('timeCellTemplate', value); + } + + @Input() + get type(): ViewType | undefined { + return this._getOption('type'); + } + set type(value: ViewType | undefined) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'views'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiSchedulerViewComponent + ], + exports: [ + DxiSchedulerViewComponent + ], +}) +export class DxiSchedulerViewModule { } diff --git a/packages/devextreme-angular/src/ui/scroll-view/index.ts b/packages/devextreme-angular/src/ui/scroll-view/index.ts index 92187705e062..40c1c9d1f4e6 100644 --- a/packages/devextreme-angular/src/ui/scroll-view/index.ts +++ b/packages/devextreme-angular/src/ui/scroll-view/index.ts @@ -36,6 +36,7 @@ import { + /** * [descr:dxScrollView] @@ -413,6 +414,7 @@ export class DxScrollViewComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/select-box/index.ts b/packages/devextreme-angular/src/ui/select-box/index.ts index 4ea8370fbf29..1bb801487355 100644 --- a/packages/devextreme-angular/src/ui/select-box/index.ts +++ b/packages/devextreme-angular/src/ui/select-box/index.ts @@ -63,12 +63,30 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiSelectBoxButtonModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxOptionsModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxDropDownOptionsModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxAnimationModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxHideModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxFromModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxPositionModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxAtModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxBoundaryOffsetModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxCollisionModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxMyModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxOffsetModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxToModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxoSelectBoxShowModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxiSelectBoxToolbarItemModule } from 'devextreme-angular/ui/select-box/nested'; +import { DxiSelectBoxItemModule } from 'devextreme-angular/ui/select-box/nested'; + import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiSelectBoxButtonComponent } from 'devextreme-angular/ui/select-box/nested'; +import { DxiSelectBoxItemComponent } from 'devextreme-angular/ui/select-box/nested'; @@ -1489,23 +1507,46 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiSelectBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiSelectBoxButtonComponent'); this.setChildren('buttons', value); } - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiSelectBoxItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiSelectBoxItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1688,8 +1729,23 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiSelectBoxButtonModule, + DxoSelectBoxOptionsModule, + DxoSelectBoxDropDownOptionsModule, + DxoSelectBoxAnimationModule, + DxoSelectBoxHideModule, + DxoSelectBoxFromModule, + DxoSelectBoxPositionModule, + DxoSelectBoxAtModule, + DxoSelectBoxBoundaryOffsetModule, + DxoSelectBoxCollisionModule, + DxoSelectBoxMyModule, + DxoSelectBoxOffsetModule, + DxoSelectBoxToModule, + DxoSelectBoxShowModule, + DxiSelectBoxToolbarItemModule, + DxiSelectBoxItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1712,8 +1768,23 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiSelectBoxButtonModule, + DxoSelectBoxOptionsModule, + DxoSelectBoxDropDownOptionsModule, + DxoSelectBoxAnimationModule, + DxoSelectBoxHideModule, + DxoSelectBoxFromModule, + DxoSelectBoxPositionModule, + DxoSelectBoxAtModule, + DxoSelectBoxBoundaryOffsetModule, + DxoSelectBoxCollisionModule, + DxoSelectBoxMyModule, + DxoSelectBoxOffsetModule, + DxoSelectBoxToModule, + DxoSelectBoxShowModule, + DxiSelectBoxToolbarItemModule, + DxiSelectBoxItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/select-box/nested/animation.ts b/packages/devextreme-angular/src/ui/select-box/nested/animation.ts new file mode 100644 index 000000000000..a7b9b5fe87d6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxAnimationComponent + ], + exports: [ + DxoSelectBoxAnimationComponent + ], +}) +export class DxoSelectBoxAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/at.ts b/packages/devextreme-angular/src/ui/select-box/nested/at.ts new file mode 100644 index 000000000000..dd31c68e8efa --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxAtComponent + ], + exports: [ + DxoSelectBoxAtComponent + ], +}) +export class DxoSelectBoxAtModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/select-box/nested/boundary-offset.ts new file mode 100644 index 000000000000..53066d33d5ac --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxBoundaryOffsetComponent + ], + exports: [ + DxoSelectBoxBoundaryOffsetComponent + ], +}) +export class DxoSelectBoxBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/select-box/nested/button-dxi.ts new file mode 100644 index 000000000000..6b5650eb5abe --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-select-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiSelectBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiSelectBoxButtonComponent + ], + exports: [ + DxiSelectBoxButtonComponent + ], +}) +export class DxiSelectBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/collision.ts b/packages/devextreme-angular/src/ui/select-box/nested/collision.ts new file mode 100644 index 000000000000..140a6d979619 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxCollisionComponent + ], + exports: [ + DxoSelectBoxCollisionComponent + ], +}) +export class DxoSelectBoxCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts new file mode 100644 index 000000000000..92cfe9527747 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiSelectBoxToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-select-box-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiSelectBoxToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxDropDownOptionsComponent + ], + exports: [ + DxoSelectBoxDropDownOptionsComponent + ], +}) +export class DxoSelectBoxDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/from.ts b/packages/devextreme-angular/src/ui/select-box/nested/from.ts new file mode 100644 index 000000000000..a59a2637f568 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxFromComponent + ], + exports: [ + DxoSelectBoxFromComponent + ], +}) +export class DxoSelectBoxFromModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/hide.ts b/packages/devextreme-angular/src/ui/select-box/nested/hide.ts new file mode 100644 index 000000000000..9edf70af1772 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxHideComponent + ], + exports: [ + DxoSelectBoxHideComponent + ], +}) +export class DxoSelectBoxHideModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/index.ts b/packages/devextreme-angular/src/ui/select-box/nested/index.ts new file mode 100644 index 000000000000..5d8a4c3bbef5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/index.ts @@ -0,0 +1,17 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/select-box/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/select-box/nested/item-dxi.ts new file mode 100644 index 000000000000..185d253858b3 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-select-box-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiSelectBoxItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiSelectBoxItemComponent + ], + exports: [ + DxiSelectBoxItemComponent + ], +}) +export class DxiSelectBoxItemModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/my.ts b/packages/devextreme-angular/src/ui/select-box/nested/my.ts new file mode 100644 index 000000000000..4f4cc5fa6807 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxMyComponent + ], + exports: [ + DxoSelectBoxMyComponent + ], +}) +export class DxoSelectBoxMyModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/select-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/select-box/nested/offset.ts b/packages/devextreme-angular/src/ui/select-box/nested/offset.ts new file mode 100644 index 000000000000..4999ba5584b9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxOffsetComponent + ], + exports: [ + DxoSelectBoxOffsetComponent + ], +}) +export class DxoSelectBoxOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/options.ts b/packages/devextreme-angular/src/ui/select-box/nested/options.ts new file mode 100644 index 000000000000..5365fb4073a7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxOptionsComponent + ], + exports: [ + DxoSelectBoxOptionsComponent + ], +}) +export class DxoSelectBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/position.ts b/packages/devextreme-angular/src/ui/select-box/nested/position.ts new file mode 100644 index 000000000000..3e67a4d3400d --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxPositionComponent + ], + exports: [ + DxoSelectBoxPositionComponent + ], +}) +export class DxoSelectBoxPositionModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/show.ts b/packages/devextreme-angular/src/ui/select-box/nested/show.ts new file mode 100644 index 000000000000..5c51245081f1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxShowComponent + ], + exports: [ + DxoSelectBoxShowComponent + ], +}) +export class DxoSelectBoxShowModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/to.ts b/packages/devextreme-angular/src/ui/select-box/nested/to.ts new file mode 100644 index 000000000000..3f32772932ff --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-select-box-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSelectBoxToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSelectBoxToComponent + ], + exports: [ + DxoSelectBoxToComponent + ], +}) +export class DxoSelectBoxToModule { } diff --git a/packages/devextreme-angular/src/ui/select-box/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/select-box/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..63b418b2f70a --- /dev/null +++ b/packages/devextreme-angular/src/ui/select-box/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-select-box-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiSelectBoxToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiSelectBoxToolbarItemComponent + ], + exports: [ + DxiSelectBoxToolbarItemComponent + ], +}) +export class DxiSelectBoxToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/slider/index.ts b/packages/devextreme-angular/src/ui/slider/index.ts index f4c4abb582fc..17e6a9e3ffa4 100644 --- a/packages/devextreme-angular/src/ui/slider/index.ts +++ b/packages/devextreme-angular/src/ui/slider/index.ts @@ -47,6 +47,10 @@ import { DxoLabelModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; +import { DxoSliderLabelModule } from 'devextreme-angular/ui/slider/nested'; +import { DxoSliderFormatModule } from 'devextreme-angular/ui/slider/nested'; +import { DxoSliderTooltipModule } from 'devextreme-angular/ui/slider/nested'; + @@ -729,6 +733,7 @@ export class DxSliderComponent extends DxComponent implements OnDestroy, Control + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -844,6 +849,9 @@ export class DxSliderComponent extends DxComponent implements OnDestroy, Control DxoLabelModule, DxoFormatModule, DxoTooltipModule, + DxoSliderLabelModule, + DxoSliderFormatModule, + DxoSliderTooltipModule, DxIntegrationModule, DxTemplateModule ], @@ -855,6 +863,9 @@ export class DxSliderComponent extends DxComponent implements OnDestroy, Control DxoLabelModule, DxoFormatModule, DxoTooltipModule, + DxoSliderLabelModule, + DxoSliderFormatModule, + DxoSliderTooltipModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/slider/nested/format.ts b/packages/devextreme-angular/src/ui/slider/nested/format.ts new file mode 100644 index 000000000000..dcfe0e0c0844 --- /dev/null +++ b/packages/devextreme-angular/src/ui/slider/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-slider-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSliderFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSliderFormatComponent + ], + exports: [ + DxoSliderFormatComponent + ], +}) +export class DxoSliderFormatModule { } diff --git a/packages/devextreme-angular/src/ui/slider/nested/index.ts b/packages/devextreme-angular/src/ui/slider/nested/index.ts new file mode 100644 index 000000000000..73381bdda89b --- /dev/null +++ b/packages/devextreme-angular/src/ui/slider/nested/index.ts @@ -0,0 +1,4 @@ +export * from './format'; +export * from './label'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/slider/nested/label.ts b/packages/devextreme-angular/src/ui/slider/nested/label.ts new file mode 100644 index 000000000000..892efda17c2a --- /dev/null +++ b/packages/devextreme-angular/src/ui/slider/nested/label.ts @@ -0,0 +1,90 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { VerticalEdge } from 'devextreme/common'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-slider-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSliderLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get position(): VerticalEdge { + return this._getOption('position'); + } + set position(value: VerticalEdge) { + this._setOption('position', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSliderLabelComponent + ], + exports: [ + DxoSliderLabelComponent + ], +}) +export class DxoSliderLabelModule { } diff --git a/packages/devextreme-angular/src/ui/slider/nested/ng-package.json b/packages/devextreme-angular/src/ui/slider/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/slider/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/slider/nested/tooltip.ts b/packages/devextreme-angular/src/ui/slider/nested/tooltip.ts new file mode 100644 index 000000000000..36612687ad5d --- /dev/null +++ b/packages/devextreme-angular/src/ui/slider/nested/tooltip.ts @@ -0,0 +1,98 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TooltipShowMode, VerticalEdge } from 'devextreme/common'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-slider-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSliderTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get position(): VerticalEdge { + return this._getOption('position'); + } + set position(value: VerticalEdge) { + this._setOption('position', value); + } + + @Input() + get showMode(): TooltipShowMode { + return this._getOption('showMode'); + } + set showMode(value: TooltipShowMode) { + this._setOption('showMode', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSliderTooltipComponent + ], + exports: [ + DxoSliderTooltipComponent + ], +}) +export class DxoSliderTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/sortable/index.ts b/packages/devextreme-angular/src/ui/sortable/index.ts index 29fe9de53d0a..4327f2efbcb6 100644 --- a/packages/devextreme-angular/src/ui/sortable/index.ts +++ b/packages/devextreme-angular/src/ui/sortable/index.ts @@ -35,6 +35,8 @@ import { import { DxoCursorOffsetModule } from 'devextreme-angular/ui/nested'; +import { DxoSortableCursorOffsetModule } from 'devextreme-angular/ui/sortable/nested'; + @@ -559,6 +561,7 @@ export class DxSortableComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -618,6 +621,7 @@ export class DxSortableComponent extends DxComponent implements OnDestroy { @NgModule({ imports: [ DxoCursorOffsetModule, + DxoSortableCursorOffsetModule, DxIntegrationModule, DxTemplateModule ], @@ -627,6 +631,7 @@ export class DxSortableComponent extends DxComponent implements OnDestroy { exports: [ DxSortableComponent, DxoCursorOffsetModule, + DxoSortableCursorOffsetModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/sortable/nested/cursor-offset.ts b/packages/devextreme-angular/src/ui/sortable/nested/cursor-offset.ts new file mode 100644 index 000000000000..c40844f223db --- /dev/null +++ b/packages/devextreme-angular/src/ui/sortable/nested/cursor-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sortable-cursor-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSortableCursorOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'cursorOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSortableCursorOffsetComponent + ], + exports: [ + DxoSortableCursorOffsetComponent + ], +}) +export class DxoSortableCursorOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/sortable/nested/index.ts b/packages/devextreme-angular/src/ui/sortable/nested/index.ts new file mode 100644 index 000000000000..844315b0f08d --- /dev/null +++ b/packages/devextreme-angular/src/ui/sortable/nested/index.ts @@ -0,0 +1,2 @@ +export * from './cursor-offset'; + diff --git a/packages/devextreme-angular/src/ui/sortable/nested/ng-package.json b/packages/devextreme-angular/src/ui/sortable/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sortable/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/sparkline/index.ts b/packages/devextreme-angular/src/ui/sparkline/index.ts index b0d99c5c32ae..c62e792ccf84 100644 --- a/packages/devextreme-angular/src/ui/sparkline/index.ts +++ b/packages/devextreme-angular/src/ui/sparkline/index.ts @@ -48,6 +48,14 @@ import { DxoFontModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; +import { DxoSparklineMarginModule } from 'devextreme-angular/ui/sparkline/nested'; +import { DxoSparklineSizeModule } from 'devextreme-angular/ui/sparkline/nested'; +import { DxoSparklineTooltipModule } from 'devextreme-angular/ui/sparkline/nested'; +import { DxoSparklineBorderModule } from 'devextreme-angular/ui/sparkline/nested'; +import { DxoSparklineFontModule } from 'devextreme-angular/ui/sparkline/nested'; +import { DxoSparklineFormatModule } from 'devextreme-angular/ui/sparkline/nested'; +import { DxoSparklineShadowModule } from 'devextreme-angular/ui/sparkline/nested'; + @@ -754,6 +762,7 @@ export class DxSparklineComponent extends DxComponent implements OnDestroy, OnCh + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -857,6 +866,13 @@ export class DxSparklineComponent extends DxComponent implements OnDestroy, OnCh DxoFontModule, DxoFormatModule, DxoShadowModule, + DxoSparklineMarginModule, + DxoSparklineSizeModule, + DxoSparklineTooltipModule, + DxoSparklineBorderModule, + DxoSparklineFontModule, + DxoSparklineFormatModule, + DxoSparklineShadowModule, DxIntegrationModule, DxTemplateModule ], @@ -872,6 +888,13 @@ export class DxSparklineComponent extends DxComponent implements OnDestroy, OnCh DxoFontModule, DxoFormatModule, DxoShadowModule, + DxoSparklineMarginModule, + DxoSparklineSizeModule, + DxoSparklineTooltipModule, + DxoSparklineBorderModule, + DxoSparklineFontModule, + DxoSparklineFormatModule, + DxoSparklineShadowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/border.ts b/packages/devextreme-angular/src/ui/sparkline/nested/border.ts new file mode 100644 index 000000000000..6250ed3a764d --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/border.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineBorderComponent + ], + exports: [ + DxoSparklineBorderComponent + ], +}) +export class DxoSparklineBorderModule { } diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/font.ts b/packages/devextreme-angular/src/ui/sparkline/nested/font.ts new file mode 100644 index 000000000000..450de3225576 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineFontComponent + ], + exports: [ + DxoSparklineFontComponent + ], +}) +export class DxoSparklineFontModule { } diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/format.ts b/packages/devextreme-angular/src/ui/sparkline/nested/format.ts new file mode 100644 index 000000000000..f31c5fb4b537 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineFormatComponent + ], + exports: [ + DxoSparklineFormatComponent + ], +}) +export class DxoSparklineFormatModule { } diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/index.ts b/packages/devextreme-angular/src/ui/sparkline/nested/index.ts new file mode 100644 index 000000000000..fc8dc7470507 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/index.ts @@ -0,0 +1,8 @@ +export * from './border'; +export * from './font'; +export * from './format'; +export * from './margin'; +export * from './shadow'; +export * from './size'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/margin.ts b/packages/devextreme-angular/src/ui/sparkline/nested/margin.ts new file mode 100644 index 000000000000..77d48043e849 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineMarginComponent + ], + exports: [ + DxoSparklineMarginComponent + ], +}) +export class DxoSparklineMarginModule { } diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/ng-package.json b/packages/devextreme-angular/src/ui/sparkline/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/shadow.ts b/packages/devextreme-angular/src/ui/sparkline/nested/shadow.ts new file mode 100644 index 000000000000..e7a79276e5fd --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineShadowComponent + ], + exports: [ + DxoSparklineShadowComponent + ], +}) +export class DxoSparklineShadowModule { } diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/size.ts b/packages/devextreme-angular/src/ui/sparkline/nested/size.ts new file mode 100644 index 000000000000..257f00148d81 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineSizeComponent + ], + exports: [ + DxoSparklineSizeComponent + ], +}) +export class DxoSparklineSizeModule { } diff --git a/packages/devextreme-angular/src/ui/sparkline/nested/tooltip.ts b/packages/devextreme-angular/src/ui/sparkline/nested/tooltip.ts new file mode 100644 index 000000000000..3e57f433ff76 --- /dev/null +++ b/packages/devextreme-angular/src/ui/sparkline/nested/tooltip.ts @@ -0,0 +1,195 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-sparkline-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSparklineTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get interactive(): boolean { + return this._getOption('interactive'); + } + set interactive(value: boolean) { + this._setOption('interactive', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSparklineTooltipComponent + ], + exports: [ + DxoSparklineTooltipComponent + ], +}) +export class DxoSparklineTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/speed-dial-action/index.ts b/packages/devextreme-angular/src/ui/speed-dial-action/index.ts index 5d40412556a6..9d6825cf5644 100644 --- a/packages/devextreme-angular/src/ui/speed-dial-action/index.ts +++ b/packages/devextreme-angular/src/ui/speed-dial-action/index.ts @@ -35,6 +35,7 @@ import { + /** * [descr:dxSpeedDialAction] @@ -336,6 +337,7 @@ export class DxSpeedDialActionComponent extends DxComponent implements OnDestroy + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/splitter/index.ts b/packages/devextreme-angular/src/ui/splitter/index.ts index 2a7dfa4fef57..7968cb7e6a8b 100644 --- a/packages/devextreme-angular/src/ui/splitter/index.ts +++ b/packages/devextreme-angular/src/ui/splitter/index.ts @@ -44,8 +44,12 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; import { DxoSplitterModule } from 'devextreme-angular/ui/nested'; +import { DxiSplitterItemModule } from 'devextreme-angular/ui/splitter/nested'; +import { DxoSplitterSplitterModule } from 'devextreme-angular/ui/splitter/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiSplitterItemComponent } from 'devextreme-angular/ui/splitter/nested'; /** @@ -423,15 +427,27 @@ export class DxSplitterComponent extends DxComponent im - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiSplitterItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiSplitterItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -519,6 +535,8 @@ export class DxSplitterComponent extends DxComponent im imports: [ DxiItemModule, DxoSplitterModule, + DxiSplitterItemModule, + DxoSplitterSplitterModule, DxIntegrationModule, DxTemplateModule ], @@ -529,6 +547,8 @@ export class DxSplitterComponent extends DxComponent im DxSplitterComponent, DxiItemModule, DxoSplitterModule, + DxiSplitterItemModule, + DxoSplitterSplitterModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/splitter/nested/index.ts b/packages/devextreme-angular/src/ui/splitter/nested/index.ts new file mode 100644 index 000000000000..1c12b7e8dbf5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/splitter/nested/index.ts @@ -0,0 +1,3 @@ +export * from './item-dxi'; +export * from './splitter'; + diff --git a/packages/devextreme-angular/src/ui/splitter/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/splitter/nested/item-dxi.ts new file mode 100644 index 000000000000..96bba2b1936b --- /dev/null +++ b/packages/devextreme-angular/src/ui/splitter/nested/item-dxi.ts @@ -0,0 +1,168 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { Properties as dxSplitterOptions } from 'devextreme/ui/splitter'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-splitter-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiSplitterItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get collapsed(): boolean { + return this._getOption('collapsed'); + } + set collapsed(value: boolean) { + this._setOption('collapsed', value); + } + + @Input() + get collapsedSize(): number | string | undefined { + return this._getOption('collapsedSize'); + } + set collapsedSize(value: number | string | undefined) { + this._setOption('collapsedSize', value); + } + + @Input() + get collapsible(): boolean { + return this._getOption('collapsible'); + } + set collapsible(value: boolean) { + this._setOption('collapsible', value); + } + + @Input() + get maxSize(): number | string | undefined { + return this._getOption('maxSize'); + } + set maxSize(value: number | string | undefined) { + this._setOption('maxSize', value); + } + + @Input() + get minSize(): number | string | undefined { + return this._getOption('minSize'); + } + set minSize(value: number | string | undefined) { + this._setOption('minSize', value); + } + + @Input() + get resizable(): boolean { + return this._getOption('resizable'); + } + set resizable(value: boolean) { + this._setOption('resizable', value); + } + + @Input() + get size(): number | string | undefined { + return this._getOption('size'); + } + set size(value: number | string | undefined) { + this._setOption('size', value); + } + + @Input() + get splitter(): dxSplitterOptions | undefined { + return this._getOption('splitter'); + } + set splitter(value: dxSplitterOptions | undefined) { + this._setOption('splitter', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiSplitterItemComponent + ], + exports: [ + DxiSplitterItemComponent + ], +}) +export class DxiSplitterItemModule { } diff --git a/packages/devextreme-angular/src/ui/splitter/nested/ng-package.json b/packages/devextreme-angular/src/ui/splitter/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/splitter/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/splitter/nested/splitter.ts b/packages/devextreme-angular/src/ui/splitter/nested/splitter.ts new file mode 100644 index 000000000000..929935d07716 --- /dev/null +++ b/packages/devextreme-angular/src/ui/splitter/nested/splitter.ts @@ -0,0 +1,293 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Orientation } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { ContentReadyEvent, DisposingEvent, dxSplitterItem, InitializedEvent, ItemClickEvent, ItemCollapsedEvent, ItemContextMenuEvent, ItemExpandedEvent, ItemRenderedEvent, OptionChangedEvent, Properties as dxSplitterOptions, ResizeEndEvent, ResizeEvent, ResizeStartEvent } from 'devextreme/ui/splitter'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiSplitterItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-splitter-splitter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoSplitterSplitterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowKeyboardNavigation(): boolean { + return this._getOption('allowKeyboardNavigation'); + } + set allowKeyboardNavigation(value: boolean) { + this._setOption('allowKeyboardNavigation', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemCollapsed(): ((e: ItemCollapsedEvent) => void) { + return this._getOption('onItemCollapsed'); + } + set onItemCollapsed(value: ((e: ItemCollapsedEvent) => void)) { + this._setOption('onItemCollapsed', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemExpanded(): ((e: ItemExpandedEvent) => void) { + return this._getOption('onItemExpanded'); + } + set onItemExpanded(value: ((e: ItemExpandedEvent) => void)) { + this._setOption('onItemExpanded', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): ((e: ResizeEvent) => void) { + return this._getOption('onResize'); + } + set onResize(value: ((e: ResizeEvent) => void)) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): ((e: ResizeEndEvent) => void) { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: ((e: ResizeEndEvent) => void)) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): ((e: ResizeStartEvent) => void) { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: ((e: ResizeStartEvent) => void)) { + this._setOption('onResizeStart', value); + } + + @Input() + get orientation(): Orientation { + return this._getOption('orientation'); + } + set orientation(value: Orientation) { + this._setOption('orientation', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get separatorSize(): number { + return this._getOption('separatorSize'); + } + set separatorSize(value: number) { + this._setOption('separatorSize', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + protected get _optionPath() { + return 'splitter'; + } + + + @ContentChildren(forwardRef(() => DxiSplitterItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'itemsChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoSplitterSplitterComponent + ], + exports: [ + DxoSplitterSplitterComponent + ], +}) +export class DxoSplitterSplitterModule { } diff --git a/packages/devextreme-angular/src/ui/switch/index.ts b/packages/devextreme-angular/src/ui/switch/index.ts index 91eea141e1e0..a166c1ce7f7f 100644 --- a/packages/devextreme-angular/src/ui/switch/index.ts +++ b/packages/devextreme-angular/src/ui/switch/index.ts @@ -47,6 +47,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxSwitchComponent), @@ -605,6 +606,7 @@ export class DxSwitchComponent extends DxComponent implements OnDestroy, Control + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/tab-panel/index.ts b/packages/devextreme-angular/src/ui/tab-panel/index.ts index c1908d072cc2..075bb468c4ed 100644 --- a/packages/devextreme-angular/src/ui/tab-panel/index.ts +++ b/packages/devextreme-angular/src/ui/tab-panel/index.ts @@ -43,8 +43,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiTabPanelItemModule } from 'devextreme-angular/ui/tab-panel/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiTabPanelItemComponent } from 'devextreme-angular/ui/tab-panel/nested'; /** @@ -782,15 +785,27 @@ export class DxTabPanelComponent extends DxComponent im - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiTabPanelItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiTabPanelItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -895,6 +910,7 @@ export class DxTabPanelComponent extends DxComponent im @NgModule({ imports: [ DxiItemModule, + DxiTabPanelItemModule, DxIntegrationModule, DxTemplateModule ], @@ -904,6 +920,7 @@ export class DxTabPanelComponent extends DxComponent im exports: [ DxTabPanelComponent, DxiItemModule, + DxiTabPanelItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tab-panel/nested/index.ts b/packages/devextreme-angular/src/ui/tab-panel/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/tab-panel/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/tab-panel/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tab-panel/nested/item-dxi.ts new file mode 100644 index 000000000000..d27068eb4476 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tab-panel/nested/item-dxi.ts @@ -0,0 +1,143 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tab-panel-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTabPanelItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTabPanelItemComponent + ], + exports: [ + DxiTabPanelItemComponent + ], +}) +export class DxiTabPanelItemModule { } diff --git a/packages/devextreme-angular/src/ui/tab-panel/nested/ng-package.json b/packages/devextreme-angular/src/ui/tab-panel/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tab-panel/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tabs/index.ts b/packages/devextreme-angular/src/ui/tabs/index.ts index 98ebde4ef0d6..63dd2e1c5af5 100644 --- a/packages/devextreme-angular/src/ui/tabs/index.ts +++ b/packages/devextreme-angular/src/ui/tabs/index.ts @@ -43,8 +43,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiTabsItemModule } from 'devextreme-angular/ui/tabs/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiTabsItemComponent } from 'devextreme-angular/ui/tabs/nested'; /** @@ -718,15 +721,27 @@ export class DxTabsComponent extends DxComponent implem - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiTabsItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiTabsItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -830,6 +845,7 @@ export class DxTabsComponent extends DxComponent implem @NgModule({ imports: [ DxiItemModule, + DxiTabsItemModule, DxIntegrationModule, DxTemplateModule ], @@ -839,6 +855,7 @@ export class DxTabsComponent extends DxComponent implem exports: [ DxTabsComponent, DxiItemModule, + DxiTabsItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tabs/nested/index.ts b/packages/devextreme-angular/src/ui/tabs/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/tabs/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/tabs/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tabs/nested/item-dxi.ts new file mode 100644 index 000000000000..8aec8023df8f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tabs/nested/item-dxi.ts @@ -0,0 +1,135 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tabs-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTabsItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTabsItemComponent + ], + exports: [ + DxiTabsItemComponent + ], +}) +export class DxiTabsItemModule { } diff --git a/packages/devextreme-angular/src/ui/tabs/nested/ng-package.json b/packages/devextreme-angular/src/ui/tabs/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tabs/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tag-box/index.ts b/packages/devextreme-angular/src/ui/tag-box/index.ts index d129db1e9ef8..e850b270838e 100644 --- a/packages/devextreme-angular/src/ui/tag-box/index.ts +++ b/packages/devextreme-angular/src/ui/tag-box/index.ts @@ -63,12 +63,30 @@ import { DxoMyModule } from 'devextreme-angular/ui/nested'; import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiTagBoxButtonModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxOptionsModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxDropDownOptionsModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxAnimationModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxHideModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxFromModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxPositionModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxAtModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxBoundaryOffsetModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxCollisionModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxMyModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxOffsetModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxToModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxoTagBoxShowModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxiTagBoxToolbarItemModule } from 'devextreme-angular/ui/tag-box/nested'; +import { DxiTagBoxItemModule } from 'devextreme-angular/ui/tag-box/nested'; + import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiTagBoxButtonComponent } from 'devextreme-angular/ui/tag-box/nested'; +import { DxiTagBoxItemComponent } from 'devextreme-angular/ui/tag-box/nested'; @@ -1621,23 +1639,46 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiTagBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiTagBoxButtonComponent'); this.setChildren('buttons', value); } - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiTagBoxItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiTagBoxItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1830,8 +1871,23 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiTagBoxButtonModule, + DxoTagBoxOptionsModule, + DxoTagBoxDropDownOptionsModule, + DxoTagBoxAnimationModule, + DxoTagBoxHideModule, + DxoTagBoxFromModule, + DxoTagBoxPositionModule, + DxoTagBoxAtModule, + DxoTagBoxBoundaryOffsetModule, + DxoTagBoxCollisionModule, + DxoTagBoxMyModule, + DxoTagBoxOffsetModule, + DxoTagBoxToModule, + DxoTagBoxShowModule, + DxiTagBoxToolbarItemModule, + DxiTagBoxItemModule, DxIntegrationModule, DxTemplateModule ], @@ -1854,8 +1910,23 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control DxoOffsetModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxiItemModule, + DxiTagBoxButtonModule, + DxoTagBoxOptionsModule, + DxoTagBoxDropDownOptionsModule, + DxoTagBoxAnimationModule, + DxoTagBoxHideModule, + DxoTagBoxFromModule, + DxoTagBoxPositionModule, + DxoTagBoxAtModule, + DxoTagBoxBoundaryOffsetModule, + DxoTagBoxCollisionModule, + DxoTagBoxMyModule, + DxoTagBoxOffsetModule, + DxoTagBoxToModule, + DxoTagBoxShowModule, + DxiTagBoxToolbarItemModule, + DxiTagBoxItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/animation.ts b/packages/devextreme-angular/src/ui/tag-box/nested/animation.ts new file mode 100644 index 000000000000..8f4d9c9aa83f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxAnimationComponent + ], + exports: [ + DxoTagBoxAnimationComponent + ], +}) +export class DxoTagBoxAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/at.ts b/packages/devextreme-angular/src/ui/tag-box/nested/at.ts new file mode 100644 index 000000000000..d1ebe9adfbce --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxAtComponent + ], + exports: [ + DxoTagBoxAtComponent + ], +}) +export class DxoTagBoxAtModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/tag-box/nested/boundary-offset.ts new file mode 100644 index 000000000000..32d65ca1d126 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxBoundaryOffsetComponent + ], + exports: [ + DxoTagBoxBoundaryOffsetComponent + ], +}) +export class DxoTagBoxBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/tag-box/nested/button-dxi.ts new file mode 100644 index 000000000000..3234ca92f4d7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tag-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTagBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTagBoxButtonComponent + ], + exports: [ + DxiTagBoxButtonComponent + ], +}) +export class DxiTagBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/collision.ts b/packages/devextreme-angular/src/ui/tag-box/nested/collision.ts new file mode 100644 index 000000000000..c75faa719140 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxCollisionComponent + ], + exports: [ + DxoTagBoxCollisionComponent + ], +}) +export class DxoTagBoxCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts new file mode 100644 index 000000000000..290f69a2d3a6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTagBoxToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-tag-box-drop-down-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'dropDownOptions'; + } + + + @ContentChildren(forwardRef(() => DxiTagBoxToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxDropDownOptionsComponent + ], + exports: [ + DxoTagBoxDropDownOptionsComponent + ], +}) +export class DxoTagBoxDropDownOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/from.ts b/packages/devextreme-angular/src/ui/tag-box/nested/from.ts new file mode 100644 index 000000000000..5dd638ed90e6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxFromComponent + ], + exports: [ + DxoTagBoxFromComponent + ], +}) +export class DxoTagBoxFromModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/hide.ts b/packages/devextreme-angular/src/ui/tag-box/nested/hide.ts new file mode 100644 index 000000000000..0387371bec07 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxHideComponent + ], + exports: [ + DxoTagBoxHideComponent + ], +}) +export class DxoTagBoxHideModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/index.ts b/packages/devextreme-angular/src/ui/tag-box/nested/index.ts new file mode 100644 index 000000000000..5d8a4c3bbef5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/index.ts @@ -0,0 +1,17 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './collision'; +export * from './drop-down-options'; +export * from './from'; +export * from './hide'; +export * from './item-dxi'; +export * from './my'; +export * from './offset'; +export * from './options'; +export * from './position'; +export * from './show'; +export * from './to'; +export * from './toolbar-item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tag-box/nested/item-dxi.ts new file mode 100644 index 000000000000..51583c3648c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tag-box-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTagBoxItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTagBoxItemComponent + ], + exports: [ + DxiTagBoxItemComponent + ], +}) +export class DxiTagBoxItemModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/my.ts b/packages/devextreme-angular/src/ui/tag-box/nested/my.ts new file mode 100644 index 000000000000..02a6614529bd --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxMyComponent + ], + exports: [ + DxoTagBoxMyComponent + ], +}) +export class DxoTagBoxMyModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/tag-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/offset.ts b/packages/devextreme-angular/src/ui/tag-box/nested/offset.ts new file mode 100644 index 000000000000..a897013941e5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxOffsetComponent + ], + exports: [ + DxoTagBoxOffsetComponent + ], +}) +export class DxoTagBoxOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/options.ts b/packages/devextreme-angular/src/ui/tag-box/nested/options.ts new file mode 100644 index 000000000000..7d4e4fab1f9f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxOptionsComponent + ], + exports: [ + DxoTagBoxOptionsComponent + ], +}) +export class DxoTagBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/position.ts b/packages/devextreme-angular/src/ui/tag-box/nested/position.ts new file mode 100644 index 000000000000..f93fa0177c8a --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxPositionComponent + ], + exports: [ + DxoTagBoxPositionComponent + ], +}) +export class DxoTagBoxPositionModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/show.ts b/packages/devextreme-angular/src/ui/tag-box/nested/show.ts new file mode 100644 index 000000000000..ddecc81ab6d0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxShowComponent + ], + exports: [ + DxoTagBoxShowComponent + ], +}) +export class DxoTagBoxShowModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/to.ts b/packages/devextreme-angular/src/ui/tag-box/nested/to.ts new file mode 100644 index 000000000000..ad95687a67b5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tag-box-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTagBoxToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTagBoxToComponent + ], + exports: [ + DxoTagBoxToComponent + ], +}) +export class DxoTagBoxToModule { } diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/tag-box/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..6436fd84c342 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tag-box/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tag-box-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTagBoxToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTagBoxToolbarItemComponent + ], + exports: [ + DxiTagBoxToolbarItemComponent + ], +}) +export class DxiTagBoxToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/text-area/index.ts b/packages/devextreme-angular/src/ui/text-area/index.ts index da552e2fe5de..2ceb7674d619 100644 --- a/packages/devextreme-angular/src/ui/text-area/index.ts +++ b/packages/devextreme-angular/src/ui/text-area/index.ts @@ -47,6 +47,7 @@ import { + const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxTextAreaComponent), @@ -885,6 +886,7 @@ export class DxTextAreaComponent extends DxComponent implements OnDestroy, Contr + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, diff --git a/packages/devextreme-angular/src/ui/text-box/index.ts b/packages/devextreme-angular/src/ui/text-box/index.ts index fd2ee587138c..3e185d7d0f6a 100644 --- a/packages/devextreme-angular/src/ui/text-box/index.ts +++ b/packages/devextreme-angular/src/ui/text-box/index.ts @@ -47,8 +47,12 @@ import { import { DxiButtonModule } from 'devextreme-angular/ui/nested'; import { DxoOptionsModule } from 'devextreme-angular/ui/nested'; +import { DxiTextBoxButtonModule } from 'devextreme-angular/ui/text-box/nested'; +import { DxoTextBoxOptionsModule } from 'devextreme-angular/ui/text-box/nested'; + import { DxiButtonComponent } from 'devextreme-angular/ui/nested'; +import { DxiTextBoxButtonComponent } from 'devextreme-angular/ui/text-box/nested'; @@ -1007,15 +1011,27 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro @HostListener('onBlur', ['$event']) touched = (_) => {}; - @ContentChildren(DxiButtonComponent) - get buttonsChildren(): QueryList { + @ContentChildren(DxiTextBoxButtonComponent) + get buttonsChildren(): QueryList { return this._getOption('buttons'); } set buttonsChildren(value) { + this.setContentChildren('buttons', value, 'DxiTextBoxButtonComponent'); this.setChildren('buttons', value); } + @ContentChildren(DxiButtonComponent) + get buttonsLegacyChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsLegacyChildren(value) { + if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1154,6 +1170,8 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro imports: [ DxiButtonModule, DxoOptionsModule, + DxiTextBoxButtonModule, + DxoTextBoxOptionsModule, DxIntegrationModule, DxTemplateModule ], @@ -1164,6 +1182,8 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro DxTextBoxComponent, DxiButtonModule, DxoOptionsModule, + DxiTextBoxButtonModule, + DxoTextBoxOptionsModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/text-box/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/text-box/nested/button-dxi.ts new file mode 100644 index 000000000000..c0044dfc7c86 --- /dev/null +++ b/packages/devextreme-angular/src/ui/text-box/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-text-box-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTextBoxButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTextBoxButtonComponent + ], + exports: [ + DxiTextBoxButtonComponent + ], +}) +export class DxiTextBoxButtonModule { } diff --git a/packages/devextreme-angular/src/ui/text-box/nested/index.ts b/packages/devextreme-angular/src/ui/text-box/nested/index.ts new file mode 100644 index 000000000000..976d29800a48 --- /dev/null +++ b/packages/devextreme-angular/src/ui/text-box/nested/index.ts @@ -0,0 +1,3 @@ +export * from './button-dxi'; +export * from './options'; + diff --git a/packages/devextreme-angular/src/ui/text-box/nested/ng-package.json b/packages/devextreme-angular/src/ui/text-box/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/text-box/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/text-box/nested/options.ts b/packages/devextreme-angular/src/ui/text-box/nested/options.ts new file mode 100644 index 000000000000..64a217f3fd27 --- /dev/null +++ b/packages/devextreme-angular/src/ui/text-box/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-text-box-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTextBoxOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTextBoxOptionsComponent + ], + exports: [ + DxoTextBoxOptionsComponent + ], +}) +export class DxoTextBoxOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tile-view/index.ts b/packages/devextreme-angular/src/ui/tile-view/index.ts index 91ddfc47ff86..8ed3619b9286 100644 --- a/packages/devextreme-angular/src/ui/tile-view/index.ts +++ b/packages/devextreme-angular/src/ui/tile-view/index.ts @@ -43,8 +43,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiTileViewItemModule } from 'devextreme-angular/ui/tile-view/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiTileViewItemComponent } from 'devextreme-angular/ui/tile-view/nested'; /** @@ -570,15 +573,27 @@ export class DxTileViewComponent extends DxComponent im - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiTileViewItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiTileViewItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -670,6 +685,7 @@ export class DxTileViewComponent extends DxComponent im @NgModule({ imports: [ DxiItemModule, + DxiTileViewItemModule, DxIntegrationModule, DxTemplateModule ], @@ -679,6 +695,7 @@ export class DxTileViewComponent extends DxComponent im exports: [ DxTileViewComponent, DxiItemModule, + DxiTileViewItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tile-view/nested/index.ts b/packages/devextreme-angular/src/ui/tile-view/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/tile-view/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/tile-view/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tile-view/nested/item-dxi.ts new file mode 100644 index 000000000000..85d5e96d63a7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tile-view/nested/item-dxi.ts @@ -0,0 +1,135 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tile-view-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTileViewItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get heightRatio(): number { + return this._getOption('heightRatio'); + } + set heightRatio(value: number) { + this._setOption('heightRatio', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widthRatio(): number { + return this._getOption('widthRatio'); + } + set widthRatio(value: number) { + this._setOption('widthRatio', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTileViewItemComponent + ], + exports: [ + DxiTileViewItemComponent + ], +}) +export class DxiTileViewItemModule { } diff --git a/packages/devextreme-angular/src/ui/tile-view/nested/ng-package.json b/packages/devextreme-angular/src/ui/tile-view/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tile-view/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/toast/index.ts b/packages/devextreme-angular/src/ui/toast/index.ts index e0ac9d96ac79..b0d47e663b72 100644 --- a/packages/devextreme-angular/src/ui/toast/index.ts +++ b/packages/devextreme-angular/src/ui/toast/index.ts @@ -45,6 +45,18 @@ import { DxoOffsetModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; +import { DxoToastAnimationModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastHideModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastFromModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastPositionModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastAtModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastBoundaryOffsetModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastCollisionModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastMyModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastOffsetModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastToModule } from 'devextreme-angular/ui/toast/nested'; +import { DxoToastShowModule } from 'devextreme-angular/ui/toast/nested'; + @@ -695,6 +707,7 @@ export class DxToastComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -769,6 +782,17 @@ export class DxToastComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, + DxoToastAnimationModule, + DxoToastHideModule, + DxoToastFromModule, + DxoToastPositionModule, + DxoToastAtModule, + DxoToastBoundaryOffsetModule, + DxoToastCollisionModule, + DxoToastMyModule, + DxoToastOffsetModule, + DxoToastToModule, + DxoToastShowModule, DxIntegrationModule, DxTemplateModule ], @@ -788,6 +812,17 @@ export class DxToastComponent extends DxComponent implements OnDestroy { DxoOffsetModule, DxoToModule, DxoShowModule, + DxoToastAnimationModule, + DxoToastHideModule, + DxoToastFromModule, + DxoToastPositionModule, + DxoToastAtModule, + DxoToastBoundaryOffsetModule, + DxoToastCollisionModule, + DxoToastMyModule, + DxoToastOffsetModule, + DxoToastToModule, + DxoToastShowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/toast/nested/animation.ts b/packages/devextreme-angular/src/ui/toast/nested/animation.ts new file mode 100644 index 000000000000..06dd2a36410d --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastAnimationComponent + ], + exports: [ + DxoToastAnimationComponent + ], +}) +export class DxoToastAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/at.ts b/packages/devextreme-angular/src/ui/toast/nested/at.ts new file mode 100644 index 000000000000..826843ae07f5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastAtComponent + ], + exports: [ + DxoToastAtComponent + ], +}) +export class DxoToastAtModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/toast/nested/boundary-offset.ts new file mode 100644 index 000000000000..5540555785a1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastBoundaryOffsetComponent + ], + exports: [ + DxoToastBoundaryOffsetComponent + ], +}) +export class DxoToastBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/collision.ts b/packages/devextreme-angular/src/ui/toast/nested/collision.ts new file mode 100644 index 000000000000..db4bc386a255 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastCollisionComponent + ], + exports: [ + DxoToastCollisionComponent + ], +}) +export class DxoToastCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/from.ts b/packages/devextreme-angular/src/ui/toast/nested/from.ts new file mode 100644 index 000000000000..05d6130081b4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastFromComponent + ], + exports: [ + DxoToastFromComponent + ], +}) +export class DxoToastFromModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/hide.ts b/packages/devextreme-angular/src/ui/toast/nested/hide.ts new file mode 100644 index 000000000000..894c271fc70c --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastHideComponent + ], + exports: [ + DxoToastHideComponent + ], +}) +export class DxoToastHideModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/index.ts b/packages/devextreme-angular/src/ui/toast/nested/index.ts new file mode 100644 index 000000000000..332a5a7d175b --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/index.ts @@ -0,0 +1,12 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './from'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show'; +export * from './to'; + diff --git a/packages/devextreme-angular/src/ui/toast/nested/my.ts b/packages/devextreme-angular/src/ui/toast/nested/my.ts new file mode 100644 index 000000000000..7644338ae8eb --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastMyComponent + ], + exports: [ + DxoToastMyComponent + ], +}) +export class DxoToastMyModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/ng-package.json b/packages/devextreme-angular/src/ui/toast/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/toast/nested/offset.ts b/packages/devextreme-angular/src/ui/toast/nested/offset.ts new file mode 100644 index 000000000000..88714f704f5c --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastOffsetComponent + ], + exports: [ + DxoToastOffsetComponent + ], +}) +export class DxoToastOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/position.ts b/packages/devextreme-angular/src/ui/toast/nested/position.ts new file mode 100644 index 000000000000..1fca98f4ebef --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastPositionComponent + ], + exports: [ + DxoToastPositionComponent + ], +}) +export class DxoToastPositionModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/show.ts b/packages/devextreme-angular/src/ui/toast/nested/show.ts new file mode 100644 index 000000000000..6f33ca133eb6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastShowComponent + ], + exports: [ + DxoToastShowComponent + ], +}) +export class DxoToastShowModule { } diff --git a/packages/devextreme-angular/src/ui/toast/nested/to.ts b/packages/devextreme-angular/src/ui/toast/nested/to.ts new file mode 100644 index 000000000000..879deac6622e --- /dev/null +++ b/packages/devextreme-angular/src/ui/toast/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-toast-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoToastToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoToastToComponent + ], + exports: [ + DxoToastToComponent + ], +}) +export class DxoToastToModule { } diff --git a/packages/devextreme-angular/src/ui/toolbar/index.ts b/packages/devextreme-angular/src/ui/toolbar/index.ts index 74461be728de..d1b89b659943 100644 --- a/packages/devextreme-angular/src/ui/toolbar/index.ts +++ b/packages/devextreme-angular/src/ui/toolbar/index.ts @@ -43,8 +43,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiToolbarItemModule } from 'devextreme-angular/ui/toolbar/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiToolbarItemComponent } from 'devextreme-angular/ui/toolbar/nested'; /** @@ -410,15 +413,27 @@ export class DxToolbarComponent extends DxComponent imp - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiToolbarItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiToolbarItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -502,6 +517,7 @@ export class DxToolbarComponent extends DxComponent imp @NgModule({ imports: [ DxiItemModule, + DxiToolbarItemModule, DxIntegrationModule, DxTemplateModule ], @@ -511,6 +527,7 @@ export class DxToolbarComponent extends DxComponent imp exports: [ DxToolbarComponent, DxiItemModule, + DxiToolbarItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/toolbar/nested/index.ts b/packages/devextreme-angular/src/ui/toolbar/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/toolbar/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/toolbar/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/toolbar/nested/item-dxi.ts new file mode 100644 index 000000000000..ae94a8b030cf --- /dev/null +++ b/packages/devextreme-angular/src/ui/toolbar/nested/item-dxi.ts @@ -0,0 +1,177 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiToolbarItemComponent + ], + exports: [ + DxiToolbarItemComponent + ], +}) +export class DxiToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/toolbar/nested/ng-package.json b/packages/devextreme-angular/src/ui/toolbar/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/toolbar/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tooltip/index.ts b/packages/devextreme-angular/src/ui/tooltip/index.ts index 958de1ae0102..e33c73836927 100644 --- a/packages/devextreme-angular/src/ui/tooltip/index.ts +++ b/packages/devextreme-angular/src/ui/tooltip/index.ts @@ -49,6 +49,20 @@ import { DxoShowModule } from 'devextreme-angular/ui/nested'; import { DxoHideEventModule } from 'devextreme-angular/ui/nested'; import { DxoShowEventModule } from 'devextreme-angular/ui/nested'; +import { DxoTooltipAnimationModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipHideModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipFromModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipPositionModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipAtModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipBoundaryOffsetModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipCollisionModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipMyModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipOffsetModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipToModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipShowModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipHideEventModule } from 'devextreme-angular/ui/tooltip/nested'; +import { DxoTooltipShowEventModule } from 'devextreme-angular/ui/tooltip/nested'; + @@ -639,6 +653,7 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, @@ -712,6 +727,19 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { DxoShowModule, DxoHideEventModule, DxoShowEventModule, + DxoTooltipAnimationModule, + DxoTooltipHideModule, + DxoTooltipFromModule, + DxoTooltipPositionModule, + DxoTooltipAtModule, + DxoTooltipBoundaryOffsetModule, + DxoTooltipCollisionModule, + DxoTooltipMyModule, + DxoTooltipOffsetModule, + DxoTooltipToModule, + DxoTooltipShowModule, + DxoTooltipHideEventModule, + DxoTooltipShowEventModule, DxIntegrationModule, DxTemplateModule ], @@ -733,6 +761,19 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { DxoShowModule, DxoHideEventModule, DxoShowEventModule, + DxoTooltipAnimationModule, + DxoTooltipHideModule, + DxoTooltipFromModule, + DxoTooltipPositionModule, + DxoTooltipAtModule, + DxoTooltipBoundaryOffsetModule, + DxoTooltipCollisionModule, + DxoTooltipMyModule, + DxoTooltipOffsetModule, + DxoTooltipToModule, + DxoTooltipShowModule, + DxoTooltipHideEventModule, + DxoTooltipShowEventModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/animation.ts b/packages/devextreme-angular/src/ui/tooltip/nested/animation.ts new file mode 100644 index 000000000000..270af13dfbda --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipAnimationComponent + ], + exports: [ + DxoTooltipAnimationComponent + ], +}) +export class DxoTooltipAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/at.ts b/packages/devextreme-angular/src/ui/tooltip/nested/at.ts new file mode 100644 index 000000000000..62547f337eb7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipAtComponent + ], + exports: [ + DxoTooltipAtComponent + ], +}) +export class DxoTooltipAtModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/tooltip/nested/boundary-offset.ts new file mode 100644 index 000000000000..c704f1bf8c2d --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipBoundaryOffsetComponent + ], + exports: [ + DxoTooltipBoundaryOffsetComponent + ], +}) +export class DxoTooltipBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/collision.ts b/packages/devextreme-angular/src/ui/tooltip/nested/collision.ts new file mode 100644 index 000000000000..ed6b3416ac00 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipCollisionComponent + ], + exports: [ + DxoTooltipCollisionComponent + ], +}) +export class DxoTooltipCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/from.ts b/packages/devextreme-angular/src/ui/tooltip/nested/from.ts new file mode 100644 index 000000000000..5144c70872ae --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipFromComponent + ], + exports: [ + DxoTooltipFromComponent + ], +}) +export class DxoTooltipFromModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/hide-event.ts b/packages/devextreme-angular/src/ui/tooltip/nested/hide-event.ts new file mode 100644 index 000000000000..7b6cbe9864f2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/hide-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-hide-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipHideEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'hideEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipHideEventComponent + ], + exports: [ + DxoTooltipHideEventComponent + ], +}) +export class DxoTooltipHideEventModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/hide.ts b/packages/devextreme-angular/src/ui/tooltip/nested/hide.ts new file mode 100644 index 000000000000..9e8cfaa51fd6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipHideComponent + ], + exports: [ + DxoTooltipHideComponent + ], +}) +export class DxoTooltipHideModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/index.ts b/packages/devextreme-angular/src/ui/tooltip/nested/index.ts new file mode 100644 index 000000000000..4230cb3f00db --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/index.ts @@ -0,0 +1,14 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './collision'; +export * from './from'; +export * from './hide-event'; +export * from './hide'; +export * from './my'; +export * from './offset'; +export * from './position'; +export * from './show-event'; +export * from './show'; +export * from './to'; + diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/my.ts b/packages/devextreme-angular/src/ui/tooltip/nested/my.ts new file mode 100644 index 000000000000..f7f436abc279 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipMyComponent + ], + exports: [ + DxoTooltipMyComponent + ], +}) +export class DxoTooltipMyModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/ng-package.json b/packages/devextreme-angular/src/ui/tooltip/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/offset.ts b/packages/devextreme-angular/src/ui/tooltip/nested/offset.ts new file mode 100644 index 000000000000..30fe4d359fe1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipOffsetComponent + ], + exports: [ + DxoTooltipOffsetComponent + ], +}) +export class DxoTooltipOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/position.ts b/packages/devextreme-angular/src/ui/tooltip/nested/position.ts new file mode 100644 index 000000000000..45a8923a96cd --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipPositionComponent + ], + exports: [ + DxoTooltipPositionComponent + ], +}) +export class DxoTooltipPositionModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/show-event.ts b/packages/devextreme-angular/src/ui/tooltip/nested/show-event.ts new file mode 100644 index 000000000000..453036b29667 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/show-event.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-show-event', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipShowEventComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get delay(): number | undefined { + return this._getOption('delay'); + } + set delay(value: number | undefined) { + this._setOption('delay', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'showEvent'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipShowEventComponent + ], + exports: [ + DxoTooltipShowEventComponent + ], +}) +export class DxoTooltipShowEventModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/show.ts b/packages/devextreme-angular/src/ui/tooltip/nested/show.ts new file mode 100644 index 000000000000..ec296e13e34d --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipShowComponent + ], + exports: [ + DxoTooltipShowComponent + ], +}) +export class DxoTooltipShowModule { } diff --git a/packages/devextreme-angular/src/ui/tooltip/nested/to.ts b/packages/devextreme-angular/src/ui/tooltip/nested/to.ts new file mode 100644 index 000000000000..9d90b605e8b5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tooltip/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tooltip-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTooltipToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTooltipToComponent + ], + exports: [ + DxoTooltipToComponent + ], +}) +export class DxoTooltipToModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index 0fda7d6ef9cb..1845ec0dcc32 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/index.ts @@ -80,7 +80,6 @@ import { DxoHideModule } from 'devextreme-angular/ui/nested'; import { DxoFromModule } from 'devextreme-angular/ui/nested'; import { DxoToModule } from 'devextreme-angular/ui/nested'; import { DxoShowModule } from 'devextreme-angular/ui/nested'; -import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested'; import { DxoFilterBuilderModule } from 'devextreme-angular/ui/nested'; import { DxiCustomOperationModule } from 'devextreme-angular/ui/nested'; import { DxiFieldModule } from 'devextreme-angular/ui/nested'; @@ -103,8 +102,65 @@ import { DxoSortingModule } from 'devextreme-angular/ui/nested'; import { DxoStateStoringModule } from 'devextreme-angular/ui/nested'; import { DxoToolbarModule } from 'devextreme-angular/ui/nested'; +import { DxoTreeListColumnChooserModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListPositionModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListAtModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListBoundaryOffsetModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListCollisionModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListMyModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListOffsetModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListSearchModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListSelectionModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListColumnFixingModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListTextsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListColumnModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListButtonModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListHeaderFilterModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListLookupModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFormatModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFormItemModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListLabelModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListValidationRuleModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListEditingModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListChangeModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFormModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListColCountByScreenModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListItemModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListTabPanelOptionsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListTabModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListButtonOptionsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListPopupModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListAnimationModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListHideModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFromModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListToModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListShowModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListToolbarItemModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFilterBuilderModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListCustomOperationModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListFieldModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFilterOperationDescriptionsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListGroupOperationDescriptionsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFilterBuilderPopupModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFilterPanelModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListFilterRowModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListOperationDescriptionsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListKeyboardNavigationModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListLoadPanelModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListPagerModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListPagingModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListRemoteOperationsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListRowDraggingModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListCursorOffsetModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListScrollingModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListSearchPanelModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListSortingModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListStateStoringModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListToolbarModule } from 'devextreme-angular/ui/tree-list/nested'; + import { DxiColumnComponent } from 'devextreme-angular/ui/nested'; +import { DxiTreeListColumnComponent } from 'devextreme-angular/ui/tree-list/nested'; /** @@ -1954,15 +2010,27 @@ export class DxTreeListComponent extends DxComponent - @ContentChildren(DxiColumnComponent) - get columnsChildren(): QueryList { + @ContentChildren(DxiTreeListColumnComponent) + get columnsChildren(): QueryList { return this._getOption('columns'); } set columnsChildren(value) { + this.setContentChildren('columns', value, 'DxiTreeListColumnComponent'); this.setChildren('columns', value); } + @ContentChildren(DxiColumnComponent) + get columnsLegacyChildren(): QueryList { + return this._getOption('columns'); + } + set columnsLegacyChildren(value) { + if (this.checkContentChildren('columns', value, 'DxiColumnComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -2176,7 +2244,6 @@ export class DxTreeListComponent extends DxComponent DxoFromModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxoFilterBuilderModule, DxiCustomOperationModule, DxiFieldModule, @@ -2198,6 +2265,61 @@ export class DxTreeListComponent extends DxComponent DxoSortingModule, DxoStateStoringModule, DxoToolbarModule, + DxoTreeListColumnChooserModule, + DxoTreeListPositionModule, + DxoTreeListAtModule, + DxoTreeListBoundaryOffsetModule, + DxoTreeListCollisionModule, + DxoTreeListMyModule, + DxoTreeListOffsetModule, + DxoTreeListSearchModule, + DxoTreeListSelectionModule, + DxoTreeListColumnFixingModule, + DxoTreeListTextsModule, + DxiTreeListColumnModule, + DxiTreeListButtonModule, + DxoTreeListHeaderFilterModule, + DxoTreeListLookupModule, + DxoTreeListFormatModule, + DxoTreeListFormItemModule, + DxoTreeListLabelModule, + DxiTreeListValidationRuleModule, + DxoTreeListEditingModule, + DxiTreeListChangeModule, + DxoTreeListFormModule, + DxoTreeListColCountByScreenModule, + DxiTreeListItemModule, + DxoTreeListTabPanelOptionsModule, + DxiTreeListTabModule, + DxoTreeListButtonOptionsModule, + DxoTreeListPopupModule, + DxoTreeListAnimationModule, + DxoTreeListHideModule, + DxoTreeListFromModule, + DxoTreeListToModule, + DxoTreeListShowModule, + DxiTreeListToolbarItemModule, + DxoTreeListFilterBuilderModule, + DxiTreeListCustomOperationModule, + DxiTreeListFieldModule, + DxoTreeListFilterOperationDescriptionsModule, + DxoTreeListGroupOperationDescriptionsModule, + DxoTreeListFilterBuilderPopupModule, + DxoTreeListFilterPanelModule, + DxoTreeListFilterRowModule, + DxoTreeListOperationDescriptionsModule, + DxoTreeListKeyboardNavigationModule, + DxoTreeListLoadPanelModule, + DxoTreeListPagerModule, + DxoTreeListPagingModule, + DxoTreeListRemoteOperationsModule, + DxoTreeListRowDraggingModule, + DxoTreeListCursorOffsetModule, + DxoTreeListScrollingModule, + DxoTreeListSearchPanelModule, + DxoTreeListSortingModule, + DxoTreeListStateStoringModule, + DxoTreeListToolbarModule, DxIntegrationModule, DxTemplateModule ], @@ -2239,7 +2361,6 @@ export class DxTreeListComponent extends DxComponent DxoFromModule, DxoToModule, DxoShowModule, - DxiToolbarItemModule, DxoFilterBuilderModule, DxiCustomOperationModule, DxiFieldModule, @@ -2261,6 +2382,61 @@ export class DxTreeListComponent extends DxComponent DxoSortingModule, DxoStateStoringModule, DxoToolbarModule, + DxoTreeListColumnChooserModule, + DxoTreeListPositionModule, + DxoTreeListAtModule, + DxoTreeListBoundaryOffsetModule, + DxoTreeListCollisionModule, + DxoTreeListMyModule, + DxoTreeListOffsetModule, + DxoTreeListSearchModule, + DxoTreeListSelectionModule, + DxoTreeListColumnFixingModule, + DxoTreeListTextsModule, + DxiTreeListColumnModule, + DxiTreeListButtonModule, + DxoTreeListHeaderFilterModule, + DxoTreeListLookupModule, + DxoTreeListFormatModule, + DxoTreeListFormItemModule, + DxoTreeListLabelModule, + DxiTreeListValidationRuleModule, + DxoTreeListEditingModule, + DxiTreeListChangeModule, + DxoTreeListFormModule, + DxoTreeListColCountByScreenModule, + DxiTreeListItemModule, + DxoTreeListTabPanelOptionsModule, + DxiTreeListTabModule, + DxoTreeListButtonOptionsModule, + DxoTreeListPopupModule, + DxoTreeListAnimationModule, + DxoTreeListHideModule, + DxoTreeListFromModule, + DxoTreeListToModule, + DxoTreeListShowModule, + DxiTreeListToolbarItemModule, + DxoTreeListFilterBuilderModule, + DxiTreeListCustomOperationModule, + DxiTreeListFieldModule, + DxoTreeListFilterOperationDescriptionsModule, + DxoTreeListGroupOperationDescriptionsModule, + DxoTreeListFilterBuilderPopupModule, + DxoTreeListFilterPanelModule, + DxoTreeListFilterRowModule, + DxoTreeListOperationDescriptionsModule, + DxoTreeListKeyboardNavigationModule, + DxoTreeListLoadPanelModule, + DxoTreeListPagerModule, + DxoTreeListPagingModule, + DxoTreeListRemoteOperationsModule, + DxoTreeListRowDraggingModule, + DxoTreeListCursorOffsetModule, + DxoTreeListScrollingModule, + DxoTreeListSearchPanelModule, + DxoTreeListSortingModule, + DxoTreeListStateStoringModule, + DxoTreeListToolbarModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/animation.ts b/packages/devextreme-angular/src/ui/tree-list/nested/animation.ts new file mode 100644 index 000000000000..54d3f19ca2bd --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/animation.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-animation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListAnimationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get hide(): AnimationConfig { + return this._getOption('hide'); + } + set hide(value: AnimationConfig) { + this._setOption('hide', value); + } + + @Input() + get show(): AnimationConfig { + return this._getOption('show'); + } + set show(value: AnimationConfig) { + this._setOption('show', value); + } + + + protected get _optionPath() { + return 'animation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListAnimationComponent + ], + exports: [ + DxoTreeListAnimationComponent + ], +}) +export class DxoTreeListAnimationModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/at.ts b/packages/devextreme-angular/src/ui/tree-list/nested/at.ts new file mode 100644 index 000000000000..58b602b74a72 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/at.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-at', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListAtComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'at'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListAtComponent + ], + exports: [ + DxoTreeListAtComponent + ], +}) +export class DxoTreeListAtModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/boundary-offset.ts b/packages/devextreme-angular/src/ui/tree-list/nested/boundary-offset.ts new file mode 100644 index 000000000000..4ce93019391d --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/boundary-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-boundary-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListBoundaryOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'boundaryOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListBoundaryOffsetComponent + ], + exports: [ + DxoTreeListBoundaryOffsetComponent + ], +}) +export class DxoTreeListBoundaryOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/button-dxi.ts new file mode 100644 index 000000000000..bad220777753 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/button-dxi.ts @@ -0,0 +1,131 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TreeListPredefinedColumnButton } from 'devextreme/ui/tree_list'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-list-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeListButtonComponent extends CollectionNestedOption { + @Input() + get cssClass(): string { + return this._getOption('cssClass'); + } + set cssClass(value: string) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean | Function { + return this._getOption('disabled'); + } + set disabled(value: boolean | Function) { + this._setOption('disabled', value); + } + + @Input() + get hint(): string { + return this._getOption('hint'); + } + set hint(value: string) { + this._setOption('hint', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get name(): TreeListPredefinedColumnButton | string { + return this._getOption('name'); + } + set name(value: TreeListPredefinedColumnButton | string) { + this._setOption('name', value); + } + + @Input() + get onClick(): Function { + return this._getOption('onClick'); + } + set onClick(value: Function) { + this._setOption('onClick', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean | Function { + return this._getOption('visible'); + } + set visible(value: boolean | Function) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListButtonComponent + ], + exports: [ + DxiTreeListButtonComponent + ], +}) +export class DxiTreeListButtonModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts new file mode 100644 index 000000000000..7b43dc6fbcd8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-button-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListButtonOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'buttonOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListButtonOptionsComponent + ], + exports: [ + DxoTreeListButtonOptionsComponent + ], +}) +export class DxoTreeListButtonOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/change-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/change-dxi.ts new file mode 100644 index 000000000000..82ec8c3de494 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/change-dxi.ts @@ -0,0 +1,99 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataChangeType } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-list-change', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeListChangeComponent extends CollectionNestedOption { + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get insertAfterKey(): any { + return this._getOption('insertAfterKey'); + } + set insertAfterKey(value: any) { + this._setOption('insertAfterKey', value); + } + + @Input() + get insertBeforeKey(): any { + return this._getOption('insertBeforeKey'); + } + set insertBeforeKey(value: any) { + this._setOption('insertBeforeKey', value); + } + + @Input() + get key(): any { + return this._getOption('key'); + } + set key(value: any) { + this._setOption('key', value); + } + + @Input() + get type(): DataChangeType { + return this._getOption('type'); + } + set type(value: DataChangeType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'changes'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListChangeComponent + ], + exports: [ + DxiTreeListChangeComponent + ], +}) +export class DxiTreeListChangeModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/col-count-by-screen.ts b/packages/devextreme-angular/src/ui/tree-list/nested/col-count-by-screen.ts new file mode 100644 index 000000000000..dc502cea4ac8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/col-count-by-screen.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-col-count-by-screen', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListColCountByScreenComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get lg(): number | undefined { + return this._getOption('lg'); + } + set lg(value: number | undefined) { + this._setOption('lg', value); + } + + @Input() + get md(): number | undefined { + return this._getOption('md'); + } + set md(value: number | undefined) { + this._setOption('md', value); + } + + @Input() + get sm(): number | undefined { + return this._getOption('sm'); + } + set sm(value: number | undefined) { + this._setOption('sm', value); + } + + @Input() + get xs(): number | undefined { + return this._getOption('xs'); + } + set xs(value: number | undefined) { + this._setOption('xs', value); + } + + + protected get _optionPath() { + return 'colCountByScreen'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListColCountByScreenComponent + ], + exports: [ + DxoTreeListColCountByScreenComponent + ], +}) +export class DxoTreeListColCountByScreenModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/collision.ts b/packages/devextreme-angular/src/ui/tree-list/nested/collision.ts new file mode 100644 index 000000000000..e9c9a7d53b97 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/collision.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-collision', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListCollisionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): CollisionResolution { + return this._getOption('x'); + } + set x(value: CollisionResolution) { + this._setOption('x', value); + } + + @Input() + get y(): CollisionResolution { + return this._getOption('y'); + } + set y(value: CollisionResolution) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'collision'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListCollisionComponent + ], + exports: [ + DxoTreeListCollisionComponent + ], +}) +export class DxoTreeListCollisionModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/column-chooser.ts b/packages/devextreme-angular/src/ui/tree-list/nested/column-chooser.ts new file mode 100644 index 000000000000..e20307da93a1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/column-chooser.ts @@ -0,0 +1,172 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; +import { SortOrder } from 'devextreme/common'; +import { ColumnChooserMode, ColumnChooserSearchConfig, ColumnChooserSelectionConfig } from 'devextreme/common/grids'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-column-chooser', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListColumnChooserComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get emptyPanelText(): string { + return this._getOption('emptyPanelText'); + } + set emptyPanelText(value: string) { + this._setOption('emptyPanelText', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get height(): number | string { + return this._getOption('height'); + } + set height(value: number | string) { + this._setOption('height', value); + } + + @Input() + get mode(): ColumnChooserMode { + return this._getOption('mode'); + } + set mode(value: ColumnChooserMode) { + this._setOption('mode', value); + } + + @Input() + get position(): PositionConfig | undefined { + return this._getOption('position'); + } + set position(value: PositionConfig | undefined) { + this._setOption('position', value); + } + + @Input() + get search(): ColumnChooserSearchConfig { + return this._getOption('search'); + } + set search(value: ColumnChooserSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get selection(): ColumnChooserSelectionConfig { + return this._getOption('selection'); + } + set selection(value: ColumnChooserSelectionConfig) { + this._setOption('selection', value); + } + + @Input() + get sortOrder(): SortOrder | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get width(): number | string { + return this._getOption('width'); + } + set width(value: number | string) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'columnChooser'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListColumnChooserComponent + ], + exports: [ + DxoTreeListColumnChooserComponent + ], +}) +export class DxoTreeListColumnChooserModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/column-dxi.ts new file mode 100644 index 000000000000..16d317acf455 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/column-dxi.ts @@ -0,0 +1,603 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AsyncRule, CompareRule, CustomRule, DataType, EmailRule, HorizontalAlignment, HorizontalEdge, NumericRule, PatternRule, RangeRule, RequiredRule, SearchMode, SortOrder, StringLengthRule } from 'devextreme/common'; +import { ColumnHeaderFilterSearchConfig, FilterOperation, FilterType, HeaderFilterGroupInterval, SelectedFilterOperation } from 'devextreme/common/grids'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { Format } from 'devextreme/localization'; +import { SimpleItem } from 'devextreme/ui/form'; +import { dxTreeListColumn, dxTreeListColumnButton, TreeListCommandColumnType, TreeListPredefinedColumnButton } from 'devextreme/ui/tree_list'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiTreeListButtonComponent } from './button-dxi'; +import { DxiTreeListValidationRuleComponent } from './validation-rule-dxi'; + + +@Component({ + selector: 'dxi-tree-list-column', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeListColumnComponent extends CollectionNestedOption { + @Input() + get alignment(): HorizontalAlignment | string | undefined { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment | string | undefined) { + this._setOption('alignment', value); + } + + @Input() + get allowEditing(): boolean { + return this._getOption('allowEditing'); + } + set allowEditing(value: boolean) { + this._setOption('allowEditing', value); + } + + @Input() + get allowFiltering(): boolean { + return this._getOption('allowFiltering'); + } + set allowFiltering(value: boolean) { + this._setOption('allowFiltering', value); + } + + @Input() + get allowFixing(): boolean { + return this._getOption('allowFixing'); + } + set allowFixing(value: boolean) { + this._setOption('allowFixing', value); + } + + @Input() + get allowHeaderFiltering(): boolean { + return this._getOption('allowHeaderFiltering'); + } + set allowHeaderFiltering(value: boolean) { + this._setOption('allowHeaderFiltering', value); + } + + @Input() + get allowHiding(): boolean { + return this._getOption('allowHiding'); + } + set allowHiding(value: boolean) { + this._setOption('allowHiding', value); + } + + @Input() + get allowReordering(): boolean { + return this._getOption('allowReordering'); + } + set allowReordering(value: boolean) { + this._setOption('allowReordering', value); + } + + @Input() + get allowResizing(): boolean { + return this._getOption('allowResizing'); + } + set allowResizing(value: boolean) { + this._setOption('allowResizing', value); + } + + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get allowSorting(): boolean { + return this._getOption('allowSorting'); + } + set allowSorting(value: boolean) { + this._setOption('allowSorting', value); + } + + @Input() + get buttons(): Array { + return this._getOption('buttons'); + } + set buttons(value: Array) { + this._setOption('buttons', value); + } + + @Input() + get calculateCellValue(): Function { + return this._getOption('calculateCellValue'); + } + set calculateCellValue(value: Function) { + this._setOption('calculateCellValue', value); + } + + @Input() + get calculateDisplayValue(): Function | string { + return this._getOption('calculateDisplayValue'); + } + set calculateDisplayValue(value: Function | string) { + this._setOption('calculateDisplayValue', value); + } + + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get calculateSortValue(): Function | string { + return this._getOption('calculateSortValue'); + } + set calculateSortValue(value: Function | string) { + this._setOption('calculateSortValue', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get cellTemplate(): any { + return this._getOption('cellTemplate'); + } + set cellTemplate(value: any) { + this._setOption('cellTemplate', value); + } + + @Input() + get columns(): Array { + return this._getOption('columns'); + } + set columns(value: Array) { + this._setOption('columns', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType | undefined { + return this._getOption('dataType'); + } + set dataType(value: DataType | undefined) { + this._setOption('dataType', value); + } + + @Input() + get editCellTemplate(): any { + return this._getOption('editCellTemplate'); + } + set editCellTemplate(value: any) { + this._setOption('editCellTemplate', value); + } + + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get encodeHtml(): boolean { + return this._getOption('encodeHtml'); + } + set encodeHtml(value: boolean) { + this._setOption('encodeHtml', value); + } + + @Input() + get falseText(): string { + return this._getOption('falseText'); + } + set falseText(value: string) { + this._setOption('falseText', value); + } + + @Input() + get filterOperations(): Array { + return this._getOption('filterOperations'); + } + set filterOperations(value: Array) { + this._setOption('filterOperations', value); + } + + @Input() + get filterType(): FilterType { + return this._getOption('filterType'); + } + set filterType(value: FilterType) { + this._setOption('filterType', value); + } + + @Input() + get filterValue(): any | undefined { + return this._getOption('filterValue'); + } + set filterValue(value: any | undefined) { + this._setOption('filterValue', value); + } + + @Input() + get filterValues(): Array { + return this._getOption('filterValues'); + } + set filterValues(value: Array) { + this._setOption('filterValues', value); + } + + @Input() + get fixed(): boolean { + return this._getOption('fixed'); + } + set fixed(value: boolean) { + this._setOption('fixed', value); + } + + @Input() + get fixedPosition(): HorizontalEdge | undefined { + return this._getOption('fixedPosition'); + } + set fixedPosition(value: HorizontalEdge | undefined) { + this._setOption('fixedPosition', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get formItem(): SimpleItem { + return this._getOption('formItem'); + } + set formItem(value: SimpleItem) { + this._setOption('formItem', value); + } + + @Input() + get headerCellTemplate(): any { + return this._getOption('headerCellTemplate'); + } + set headerCellTemplate(value: any) { + this._setOption('headerCellTemplate', value); + } + + @Input() + get headerFilter(): { allowSearch?: boolean, allowSelectAll?: boolean, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, groupInterval?: HeaderFilterGroupInterval | number | undefined, height?: number | string | undefined, search?: ColumnHeaderFilterSearchConfig, searchMode?: SearchMode, width?: number | string | undefined } { + return this._getOption('headerFilter'); + } + set headerFilter(value: { allowSearch?: boolean, allowSelectAll?: boolean, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, groupInterval?: HeaderFilterGroupInterval | number | undefined, height?: number | string | undefined, search?: ColumnHeaderFilterSearchConfig, searchMode?: SearchMode, width?: number | string | undefined }) { + this._setOption('headerFilter', value); + } + + @Input() + get hidingPriority(): number | undefined { + return this._getOption('hidingPriority'); + } + set hidingPriority(value: number | undefined) { + this._setOption('hidingPriority', value); + } + + @Input() + get isBand(): boolean | undefined { + return this._getOption('isBand'); + } + set isBand(value: boolean | undefined) { + this._setOption('isBand', value); + } + + @Input() + get lookup(): { allowClearing?: boolean, calculateCellValue?: Function, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: string | undefined } { + return this._getOption('lookup'); + } + set lookup(value: { allowClearing?: boolean, calculateCellValue?: Function, dataSource?: Store | DataSourceOptions | Function | null | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: string | undefined }) { + this._setOption('lookup', value); + } + + @Input() + get minWidth(): number | undefined { + return this._getOption('minWidth'); + } + set minWidth(value: number | undefined) { + this._setOption('minWidth', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get ownerBand(): number | undefined { + return this._getOption('ownerBand'); + } + set ownerBand(value: number | undefined) { + this._setOption('ownerBand', value); + } + + @Input() + get renderAsync(): boolean { + return this._getOption('renderAsync'); + } + set renderAsync(value: boolean) { + this._setOption('renderAsync', value); + } + + @Input() + get selectedFilterOperation(): SelectedFilterOperation | undefined { + return this._getOption('selectedFilterOperation'); + } + set selectedFilterOperation(value: SelectedFilterOperation | undefined) { + this._setOption('selectedFilterOperation', value); + } + + @Input() + get setCellValue(): Function { + return this._getOption('setCellValue'); + } + set setCellValue(value: Function) { + this._setOption('setCellValue', value); + } + + @Input() + get showEditorAlways(): boolean { + return this._getOption('showEditorAlways'); + } + set showEditorAlways(value: boolean) { + this._setOption('showEditorAlways', value); + } + + @Input() + get showInColumnChooser(): boolean { + return this._getOption('showInColumnChooser'); + } + set showInColumnChooser(value: boolean) { + this._setOption('showInColumnChooser', value); + } + + @Input() + get sortIndex(): number | undefined { + return this._getOption('sortIndex'); + } + set sortIndex(value: number | undefined) { + this._setOption('sortIndex', value); + } + + @Input() + get sortingMethod(): Function | undefined { + return this._getOption('sortingMethod'); + } + set sortingMethod(value: Function | undefined) { + this._setOption('sortingMethod', value); + } + + @Input() + get sortOrder(): SortOrder | string | undefined { + return this._getOption('sortOrder'); + } + set sortOrder(value: SortOrder | string | undefined) { + this._setOption('sortOrder', value); + } + + @Input() + get trueText(): string { + return this._getOption('trueText'); + } + set trueText(value: string) { + this._setOption('trueText', value); + } + + @Input() + get type(): TreeListCommandColumnType { + return this._getOption('type'); + } + set type(value: TreeListCommandColumnType) { + this._setOption('type', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterValueChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterValuesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedFilterOperationChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() sortIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() sortOrderChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleIndexChange: EventEmitter; + protected get _optionPath() { + return 'columns'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListButtonComponent)) + get buttonsChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsChildren(value) { + this.setChildren('buttons', value); + } + + @ContentChildren(forwardRef(() => DxiTreeListColumnComponent)) + get columnsChildren(): QueryList { + return this._getOption('columns'); + } + set columnsChildren(value) { + this.setChildren('columns', value); + } + + @ContentChildren(forwardRef(() => DxiTreeListValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'filterValueChange' }, + { emit: 'filterValuesChange' }, + { emit: 'selectedFilterOperationChange' }, + { emit: 'sortIndexChange' }, + { emit: 'sortOrderChange' }, + { emit: 'visibleChange' }, + { emit: 'visibleIndexChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListColumnComponent + ], + exports: [ + DxiTreeListColumnComponent + ], +}) +export class DxiTreeListColumnModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/column-fixing.ts b/packages/devextreme-angular/src/ui/tree-list/nested/column-fixing.ts new file mode 100644 index 000000000000..bb8866e950c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/column-fixing.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-column-fixing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListColumnFixingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get texts(): { fix?: string, leftPosition?: string, rightPosition?: string, unfix?: string } { + return this._getOption('texts'); + } + set texts(value: { fix?: string, leftPosition?: string, rightPosition?: string, unfix?: string }) { + this._setOption('texts', value); + } + + + protected get _optionPath() { + return 'columnFixing'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListColumnFixingComponent + ], + exports: [ + DxoTreeListColumnFixingComponent + ], +}) +export class DxoTreeListColumnFixingModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/cursor-offset.ts b/packages/devextreme-angular/src/ui/tree-list/nested/cursor-offset.ts new file mode 100644 index 000000000000..4f5cb236832c --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/cursor-offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-cursor-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListCursorOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'cursorOffset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListCursorOffsetComponent + ], + exports: [ + DxoTreeListCursorOffsetComponent + ], +}) +export class DxoTreeListCursorOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/custom-operation-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/custom-operation-dxi.ts new file mode 100644 index 000000000000..8ad97b51ad8a --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/custom-operation-dxi.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-list-custom-operation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeListCustomOperationComponent extends CollectionNestedOption { + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataTypes(): any | undefined | Array { + return this._getOption('dataTypes'); + } + set dataTypes(value: any | undefined | Array) { + this._setOption('dataTypes', value); + } + + @Input() + get editorTemplate(): any { + return this._getOption('editorTemplate'); + } + set editorTemplate(value: any) { + this._setOption('editorTemplate', value); + } + + @Input() + get hasValue(): boolean { + return this._getOption('hasValue'); + } + set hasValue(value: boolean) { + this._setOption('hasValue', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + + protected get _optionPath() { + return 'customOperations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListCustomOperationComponent + ], + exports: [ + DxiTreeListCustomOperationComponent + ], +}) +export class DxiTreeListCustomOperationModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/editing.ts b/packages/devextreme-angular/src/ui/tree-list/nested/editing.ts new file mode 100644 index 000000000000..b3dd63158f64 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/editing.ts @@ -0,0 +1,228 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { DataChange, GridsEditMode, GridsEditRefreshMode, StartEditAction } from 'devextreme/common/grids'; +import { Properties as dxFormOptions } from 'devextreme/ui/form'; +import { Properties as dxPopupOptions } from 'devextreme/ui/popup'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListChangeComponent } from './change-dxi'; + + +@Component({ + selector: 'dxo-tree-list-editing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListEditingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowAdding(): boolean | Function { + return this._getOption('allowAdding'); + } + set allowAdding(value: boolean | Function) { + this._setOption('allowAdding', value); + } + + @Input() + get allowDeleting(): boolean | Function { + return this._getOption('allowDeleting'); + } + set allowDeleting(value: boolean | Function) { + this._setOption('allowDeleting', value); + } + + @Input() + get allowUpdating(): boolean | Function { + return this._getOption('allowUpdating'); + } + set allowUpdating(value: boolean | Function) { + this._setOption('allowUpdating', value); + } + + @Input() + get changes(): Array { + return this._getOption('changes'); + } + set changes(value: Array) { + this._setOption('changes', value); + } + + @Input() + get confirmDelete(): boolean { + return this._getOption('confirmDelete'); + } + set confirmDelete(value: boolean) { + this._setOption('confirmDelete', value); + } + + @Input() + get editColumnName(): string { + return this._getOption('editColumnName'); + } + set editColumnName(value: string) { + this._setOption('editColumnName', value); + } + + @Input() + get editRowKey(): any { + return this._getOption('editRowKey'); + } + set editRowKey(value: any) { + this._setOption('editRowKey', value); + } + + @Input() + get form(): dxFormOptions { + return this._getOption('form'); + } + set form(value: dxFormOptions) { + this._setOption('form', value); + } + + @Input() + get mode(): GridsEditMode { + return this._getOption('mode'); + } + set mode(value: GridsEditMode) { + this._setOption('mode', value); + } + + @Input() + get popup(): dxPopupOptions { + return this._getOption('popup'); + } + set popup(value: dxPopupOptions) { + this._setOption('popup', value); + } + + @Input() + get refreshMode(): GridsEditRefreshMode { + return this._getOption('refreshMode'); + } + set refreshMode(value: GridsEditRefreshMode) { + this._setOption('refreshMode', value); + } + + @Input() + get selectTextOnEditStart(): boolean { + return this._getOption('selectTextOnEditStart'); + } + set selectTextOnEditStart(value: boolean) { + this._setOption('selectTextOnEditStart', value); + } + + @Input() + get startEditAction(): StartEditAction { + return this._getOption('startEditAction'); + } + set startEditAction(value: StartEditAction) { + this._setOption('startEditAction', value); + } + + @Input() + get texts(): { addRow?: string, addRowToNode?: string, cancelAllChanges?: string, cancelRowChanges?: string, confirmDeleteMessage?: string, confirmDeleteTitle?: string, deleteRow?: string, editRow?: string, saveAllChanges?: string, saveRowChanges?: string, undeleteRow?: string, validationCancelChanges?: string } { + return this._getOption('texts'); + } + set texts(value: { addRow?: string, addRowToNode?: string, cancelAllChanges?: string, cancelRowChanges?: string, confirmDeleteMessage?: string, confirmDeleteTitle?: string, deleteRow?: string, editRow?: string, saveAllChanges?: string, saveRowChanges?: string, undeleteRow?: string, validationCancelChanges?: string }) { + this._setOption('texts', value); + } + + @Input() + get useIcons(): boolean { + return this._getOption('useIcons'); + } + set useIcons(value: boolean) { + this._setOption('useIcons', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() changesChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() editColumnNameChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() editRowKeyChange: EventEmitter; + protected get _optionPath() { + return 'editing'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListChangeComponent)) + get changesChildren(): QueryList { + return this._getOption('changes'); + } + set changesChildren(value) { + this.setChildren('changes', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'changesChange' }, + { emit: 'editColumnNameChange' }, + { emit: 'editRowKeyChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListEditingComponent + ], + exports: [ + DxoTreeListEditingComponent + ], +}) +export class DxoTreeListEditingModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/field-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/field-dxi.ts new file mode 100644 index 000000000000..9f9b17c7aa03 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/field-dxi.ts @@ -0,0 +1,167 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DataType } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { Format } from 'devextreme/localization'; +import { FilterBuilderOperation } from 'devextreme/ui/filter_builder'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-list-field', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeListFieldComponent extends CollectionNestedOption { + @Input() + get calculateFilterExpression(): Function { + return this._getOption('calculateFilterExpression'); + } + set calculateFilterExpression(value: Function) { + this._setOption('calculateFilterExpression', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataType(): DataType { + return this._getOption('dataType'); + } + set dataType(value: DataType) { + this._setOption('dataType', value); + } + + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get editorTemplate(): any { + return this._getOption('editorTemplate'); + } + set editorTemplate(value: any) { + this._setOption('editorTemplate', value); + } + + @Input() + get falseText(): string { + return this._getOption('falseText'); + } + set falseText(value: string) { + this._setOption('falseText', value); + } + + @Input() + get filterOperations(): Array { + return this._getOption('filterOperations'); + } + set filterOperations(value: Array) { + this._setOption('filterOperations', value); + } + + @Input() + get format(): Format | string { + return this._getOption('format'); + } + set format(value: Format | string) { + this._setOption('format', value); + } + + @Input() + get lookup(): { allowClearing?: boolean, dataSource?: Store | DataSourceOptions | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: Function | string | undefined } { + return this._getOption('lookup'); + } + set lookup(value: { allowClearing?: boolean, dataSource?: Store | DataSourceOptions | undefined | Array, displayExpr?: Function | string | undefined, valueExpr?: Function | string | undefined }) { + this._setOption('lookup', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get trueText(): string { + return this._getOption('trueText'); + } + set trueText(value: string) { + this._setOption('trueText', value); + } + + + protected get _optionPath() { + return 'fields'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListFieldComponent + ], + exports: [ + DxiTreeListFieldComponent + ], +}) +export class DxiTreeListFieldModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts new file mode 100644 index 000000000000..7d18f8d90121 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-tree-list-filter-builder-popup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFilterBuilderPopupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'filterBuilderPopup'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFilterBuilderPopupComponent + ], + exports: [ + DxoTreeListFilterBuilderPopupComponent + ], +}) +export class DxoTreeListFilterBuilderPopupModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder.ts new file mode 100644 index 000000000000..d76f011c8bcc --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder.ts @@ -0,0 +1,315 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { ContentReadyEvent, DisposingEvent, dxFilterBuilderCustomOperation, dxFilterBuilderField, EditorPreparedEvent, EditorPreparingEvent, GroupOperation, InitializedEvent, OptionChangedEvent, ValueChangedEvent } from 'devextreme/ui/filter_builder'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListCustomOperationComponent } from './custom-operation-dxi'; +import { DxiTreeListFieldComponent } from './field-dxi'; + + +@Component({ + selector: 'dxo-tree-list-filter-builder', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFilterBuilderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get allowHierarchicalFields(): boolean { + return this._getOption('allowHierarchicalFields'); + } + set allowHierarchicalFields(value: boolean) { + this._setOption('allowHierarchicalFields', value); + } + + @Input() + get customOperations(): Array { + return this._getOption('customOperations'); + } + set customOperations(value: Array) { + this._setOption('customOperations', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get fields(): Array { + return this._getOption('fields'); + } + set fields(value: Array) { + this._setOption('fields', value); + } + + @Input() + get filterOperationDescriptions(): { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, isBlank?: string, isNotBlank?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string } { + return this._getOption('filterOperationDescriptions'); + } + set filterOperationDescriptions(value: { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, isBlank?: string, isNotBlank?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string }) { + this._setOption('filterOperationDescriptions', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get groupOperationDescriptions(): { and?: string, notAnd?: string, notOr?: string, or?: string } { + return this._getOption('groupOperationDescriptions'); + } + set groupOperationDescriptions(value: { and?: string, notAnd?: string, notOr?: string, or?: string }) { + this._setOption('groupOperationDescriptions', value); + } + + @Input() + get groupOperations(): any | Array { + return this._getOption('groupOperations'); + } + set groupOperations(value: any | Array) { + this._setOption('groupOperations', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxGroupLevel(): number | undefined { + return this._getOption('maxGroupLevel'); + } + set maxGroupLevel(value: number | undefined) { + this._setOption('maxGroupLevel', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onEditorPrepared(): ((e: EditorPreparedEvent) => void) { + return this._getOption('onEditorPrepared'); + } + set onEditorPrepared(value: ((e: EditorPreparedEvent) => void)) { + this._setOption('onEditorPrepared', value); + } + + @Input() + get onEditorPreparing(): ((e: EditorPreparingEvent) => void) { + return this._getOption('onEditorPreparing'); + } + set onEditorPreparing(value: ((e: EditorPreparingEvent) => void)) { + this._setOption('onEditorPreparing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get value(): any { + return this._getOption('value'); + } + set value(value: any) { + this._setOption('value', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter; + protected get _optionPath() { + return 'filterBuilder'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListCustomOperationComponent)) + get customOperationsChildren(): QueryList { + return this._getOption('customOperations'); + } + set customOperationsChildren(value) { + this.setChildren('customOperations', value); + } + + @ContentChildren(forwardRef(() => DxiTreeListFieldComponent)) + get fieldsChildren(): QueryList { + return this._getOption('fields'); + } + set fieldsChildren(value) { + this.setChildren('fields', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFilterBuilderComponent + ], + exports: [ + DxoTreeListFilterBuilderComponent + ], +}) +export class DxoTreeListFilterBuilderModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-operation-descriptions.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-operation-descriptions.ts new file mode 100644 index 000000000000..98247b52a479 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-operation-descriptions.ts @@ -0,0 +1,168 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-filter-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFilterOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get between(): string { + return this._getOption('between'); + } + set between(value: string) { + this._setOption('between', value); + } + + @Input() + get contains(): string { + return this._getOption('contains'); + } + set contains(value: string) { + this._setOption('contains', value); + } + + @Input() + get endsWith(): string { + return this._getOption('endsWith'); + } + set endsWith(value: string) { + this._setOption('endsWith', value); + } + + @Input() + get equal(): string { + return this._getOption('equal'); + } + set equal(value: string) { + this._setOption('equal', value); + } + + @Input() + get greaterThan(): string { + return this._getOption('greaterThan'); + } + set greaterThan(value: string) { + this._setOption('greaterThan', value); + } + + @Input() + get greaterThanOrEqual(): string { + return this._getOption('greaterThanOrEqual'); + } + set greaterThanOrEqual(value: string) { + this._setOption('greaterThanOrEqual', value); + } + + @Input() + get isBlank(): string { + return this._getOption('isBlank'); + } + set isBlank(value: string) { + this._setOption('isBlank', value); + } + + @Input() + get isNotBlank(): string { + return this._getOption('isNotBlank'); + } + set isNotBlank(value: string) { + this._setOption('isNotBlank', value); + } + + @Input() + get lessThan(): string { + return this._getOption('lessThan'); + } + set lessThan(value: string) { + this._setOption('lessThan', value); + } + + @Input() + get lessThanOrEqual(): string { + return this._getOption('lessThanOrEqual'); + } + set lessThanOrEqual(value: string) { + this._setOption('lessThanOrEqual', value); + } + + @Input() + get notContains(): string { + return this._getOption('notContains'); + } + set notContains(value: string) { + this._setOption('notContains', value); + } + + @Input() + get notEqual(): string { + return this._getOption('notEqual'); + } + set notEqual(value: string) { + this._setOption('notEqual', value); + } + + @Input() + get startsWith(): string { + return this._getOption('startsWith'); + } + set startsWith(value: string) { + this._setOption('startsWith', value); + } + + + protected get _optionPath() { + return 'filterOperationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFilterOperationDescriptionsComponent + ], + exports: [ + DxoTreeListFilterOperationDescriptionsComponent + ], +}) +export class DxoTreeListFilterOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-panel.ts new file mode 100644 index 000000000000..20b18fc9310e --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-panel.ts @@ -0,0 +1,109 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-filter-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFilterPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get filterEnabled(): boolean { + return this._getOption('filterEnabled'); + } + set filterEnabled(value: boolean) { + this._setOption('filterEnabled', value); + } + + @Input() + get texts(): { clearFilter?: string, createFilter?: string, filterEnabledHint?: string } { + return this._getOption('texts'); + } + set texts(value: { clearFilter?: string, createFilter?: string, filterEnabledHint?: string }) { + this._setOption('texts', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() filterEnabledChange: EventEmitter; + protected get _optionPath() { + return 'filterPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'filterEnabledChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFilterPanelComponent + ], + exports: [ + DxoTreeListFilterPanelComponent + ], +}) +export class DxoTreeListFilterPanelModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-row.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-row.ts new file mode 100644 index 000000000000..45200ebbaff2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-row.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ApplyFilterMode } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-filter-row', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFilterRowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get applyFilter(): ApplyFilterMode { + return this._getOption('applyFilter'); + } + set applyFilter(value: ApplyFilterMode) { + this._setOption('applyFilter', value); + } + + @Input() + get applyFilterText(): string { + return this._getOption('applyFilterText'); + } + set applyFilterText(value: string) { + this._setOption('applyFilterText', value); + } + + @Input() + get betweenEndText(): string { + return this._getOption('betweenEndText'); + } + set betweenEndText(value: string) { + this._setOption('betweenEndText', value); + } + + @Input() + get betweenStartText(): string { + return this._getOption('betweenStartText'); + } + set betweenStartText(value: string) { + this._setOption('betweenStartText', value); + } + + @Input() + get operationDescriptions(): { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string } { + return this._getOption('operationDescriptions'); + } + set operationDescriptions(value: { between?: string, contains?: string, endsWith?: string, equal?: string, greaterThan?: string, greaterThanOrEqual?: string, lessThan?: string, lessThanOrEqual?: string, notContains?: string, notEqual?: string, startsWith?: string }) { + this._setOption('operationDescriptions', value); + } + + @Input() + get resetOperationText(): string { + return this._getOption('resetOperationText'); + } + set resetOperationText(value: string) { + this._setOption('resetOperationText', value); + } + + @Input() + get showAllText(): string { + return this._getOption('showAllText'); + } + set showAllText(value: string) { + this._setOption('showAllText', value); + } + + @Input() + get showOperationChooser(): boolean { + return this._getOption('showOperationChooser'); + } + set showOperationChooser(value: boolean) { + this._setOption('showOperationChooser', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'filterRow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFilterRowComponent + ], + exports: [ + DxoTreeListFilterRowComponent + ], +}) +export class DxoTreeListFilterRowModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/form-item.ts b/packages/devextreme-angular/src/ui/tree-list/nested/form-item.ts new file mode 100644 index 000000000000..28570f39aa97 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/form-item.ts @@ -0,0 +1,190 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AsyncRule, CompareRule, CustomRule, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, StringLengthRule } from 'devextreme/common'; +import { FormItemComponent, FormItemType, LabelLocation } from 'devextreme/ui/form'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListValidationRuleComponent } from './validation-rule-dxi'; + + +@Component({ + selector: 'dxo-tree-list-form-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFormItemComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'formItem'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFormItemComponent + ], + exports: [ + DxoTreeListFormItemComponent + ], +}) +export class DxoTreeListFormItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/form.ts b/packages/devextreme-angular/src/ui/tree-list/nested/form.ts new file mode 100644 index 000000000000..b4132ba6f983 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/form.ts @@ -0,0 +1,411 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; +import { ButtonItem, ContentReadyEvent, DisposingEvent, EditorEnterKeyEvent, EmptyItem, FieldDataChangedEvent, FormLabelMode, GroupItem, InitializedEvent, LabelLocation, OptionChangedEvent, SimpleItem, TabbedItem } from 'devextreme/ui/form'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-tree-list-form', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFormComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get alignItemLabelsInAllGroups(): boolean { + return this._getOption('alignItemLabelsInAllGroups'); + } + set alignItemLabelsInAllGroups(value: boolean) { + this._setOption('alignItemLabelsInAllGroups', value); + } + + @Input() + get colCount(): Mode | number { + return this._getOption('colCount'); + } + set colCount(value: Mode | number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get customizeItem(): Function { + return this._getOption('customizeItem'); + } + set customizeItem(value: Function) { + this._setOption('customizeItem', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get formData(): any { + return this._getOption('formData'); + } + set formData(value: any) { + this._setOption('formData', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get labelLocation(): LabelLocation { + return this._getOption('labelLocation'); + } + set labelLocation(value: LabelLocation) { + this._setOption('labelLocation', value); + } + + @Input() + get labelMode(): FormLabelMode { + return this._getOption('labelMode'); + } + set labelMode(value: FormLabelMode) { + this._setOption('labelMode', value); + } + + @Input() + get minColWidth(): number { + return this._getOption('minColWidth'); + } + set minColWidth(value: number) { + this._setOption('minColWidth', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) { + return this._getOption('onEditorEnterKey'); + } + set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void)) { + this._setOption('onEditorEnterKey', value); + } + + @Input() + get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) { + return this._getOption('onFieldDataChanged'); + } + set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void)) { + this._setOption('onFieldDataChanged', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get optionalMark(): string { + return this._getOption('optionalMark'); + } + set optionalMark(value: string) { + this._setOption('optionalMark', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get requiredMark(): string { + return this._getOption('requiredMark'); + } + set requiredMark(value: string) { + this._setOption('requiredMark', value); + } + + @Input() + get requiredMessage(): string { + return this._getOption('requiredMessage'); + } + set requiredMessage(value: string) { + this._setOption('requiredMessage', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get screenByWidth(): Function { + return this._getOption('screenByWidth'); + } + set screenByWidth(value: Function) { + this._setOption('screenByWidth', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get showColonAfterLabel(): boolean { + return this._getOption('showColonAfterLabel'); + } + set showColonAfterLabel(value: boolean) { + this._setOption('showColonAfterLabel', value); + } + + @Input() + get showOptionalMark(): boolean { + return this._getOption('showOptionalMark'); + } + set showOptionalMark(value: boolean) { + this._setOption('showOptionalMark', value); + } + + @Input() + get showRequiredMark(): boolean { + return this._getOption('showRequiredMark'); + } + set showRequiredMark(value: boolean) { + this._setOption('showRequiredMark', value); + } + + @Input() + get showValidationSummary(): boolean { + return this._getOption('showValidationSummary'); + } + set showValidationSummary(value: boolean) { + this._setOption('showValidationSummary', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() formDataChange: EventEmitter; + protected get _optionPath() { + return 'form'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'formDataChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFormComponent + ], + exports: [ + DxoTreeListFormComponent + ], +}) +export class DxoTreeListFormModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/format.ts b/packages/devextreme-angular/src/ui/tree-list/nested/format.ts new file mode 100644 index 000000000000..4035303aee0b --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFormatComponent + ], + exports: [ + DxoTreeListFormatComponent + ], +}) +export class DxoTreeListFormatModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/from.ts b/packages/devextreme-angular/src/ui/tree-list/nested/from.ts new file mode 100644 index 000000000000..24e6b43c3f34 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/from.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-from', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListFromComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'from'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListFromComponent + ], + exports: [ + DxoTreeListFromComponent + ], +}) +export class DxoTreeListFromModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/group-operation-descriptions.ts b/packages/devextreme-angular/src/ui/tree-list/nested/group-operation-descriptions.ts new file mode 100644 index 000000000000..7eb123828a6d --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/group-operation-descriptions.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-group-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListGroupOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get and(): string { + return this._getOption('and'); + } + set and(value: string) { + this._setOption('and', value); + } + + @Input() + get notAnd(): string { + return this._getOption('notAnd'); + } + set notAnd(value: string) { + this._setOption('notAnd', value); + } + + @Input() + get notOr(): string { + return this._getOption('notOr'); + } + set notOr(value: string) { + this._setOption('notOr', value); + } + + @Input() + get or(): string { + return this._getOption('or'); + } + set or(value: string) { + this._setOption('or', value); + } + + + protected get _optionPath() { + return 'groupOperationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListGroupOperationDescriptionsComponent + ], + exports: [ + DxoTreeListGroupOperationDescriptionsComponent + ], +}) +export class DxoTreeListGroupOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/header-filter.ts b/packages/devextreme-angular/src/ui/tree-list/nested/header-filter.ts new file mode 100644 index 000000000000..5d282c7e1e05 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/header-filter.ts @@ -0,0 +1,156 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; +import { ColumnHeaderFilterSearchConfig, HeaderFilterGroupInterval, HeaderFilterSearchConfig } from 'devextreme/common/grids'; +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-header-filter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListHeaderFilterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSearch(): boolean { + return this._getOption('allowSearch'); + } + set allowSearch(value: boolean) { + this._setOption('allowSearch', value); + } + + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get dataSource(): Store | DataSourceOptions | Function | null | undefined | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSourceOptions | Function | null | undefined | Array) { + this._setOption('dataSource', value); + } + + @Input() + get groupInterval(): HeaderFilterGroupInterval | number | undefined { + return this._getOption('groupInterval'); + } + set groupInterval(value: HeaderFilterGroupInterval | number | undefined) { + this._setOption('groupInterval', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get search(): ColumnHeaderFilterSearchConfig | HeaderFilterSearchConfig { + return this._getOption('search'); + } + set search(value: ColumnHeaderFilterSearchConfig | HeaderFilterSearchConfig) { + this._setOption('search', value); + } + + @Input() + get searchMode(): SearchMode { + return this._getOption('searchMode'); + } + set searchMode(value: SearchMode) { + this._setOption('searchMode', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + @Input() + get searchTimeout(): number { + return this._getOption('searchTimeout'); + } + set searchTimeout(value: number) { + this._setOption('searchTimeout', value); + } + + @Input() + get texts(): { cancel?: string, emptyValue?: string, ok?: string } { + return this._getOption('texts'); + } + set texts(value: { cancel?: string, emptyValue?: string, ok?: string }) { + this._setOption('texts', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'headerFilter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListHeaderFilterComponent + ], + exports: [ + DxoTreeListHeaderFilterComponent + ], +}) +export class DxoTreeListHeaderFilterModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/hide.ts b/packages/devextreme-angular/src/ui/tree-list/nested/hide.ts new file mode 100644 index 000000000000..ee6adbac8f32 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/hide.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-hide', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListHideComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'hide'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListHideComponent + ], + exports: [ + DxoTreeListHideComponent + ], +}) +export class DxoTreeListHideModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/index.ts b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts new file mode 100644 index 000000000000..a1255c64c022 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts @@ -0,0 +1,56 @@ +export * from './animation'; +export * from './at'; +export * from './boundary-offset'; +export * from './button-dxi'; +export * from './button-options'; +export * from './change-dxi'; +export * from './col-count-by-screen'; +export * from './collision'; +export * from './column-chooser'; +export * from './column-dxi'; +export * from './column-fixing'; +export * from './cursor-offset'; +export * from './custom-operation-dxi'; +export * from './editing'; +export * from './field-dxi'; +export * from './filter-builder-popup'; +export * from './filter-builder'; +export * from './filter-operation-descriptions'; +export * from './filter-panel'; +export * from './filter-row'; +export * from './form-item'; +export * from './form'; +export * from './format'; +export * from './from'; +export * from './group-operation-descriptions'; +export * from './header-filter'; +export * from './hide'; +export * from './item-dxi'; +export * from './keyboard-navigation'; +export * from './label'; +export * from './load-panel'; +export * from './lookup'; +export * from './my'; +export * from './offset'; +export * from './operation-descriptions'; +export * from './pager'; +export * from './paging'; +export * from './popup'; +export * from './position'; +export * from './remote-operations'; +export * from './row-dragging'; +export * from './scrolling'; +export * from './search-panel'; +export * from './search'; +export * from './selection'; +export * from './show'; +export * from './sorting'; +export * from './state-storing'; +export * from './tab-dxi'; +export * from './tab-panel-options'; +export * from './texts'; +export * from './to'; +export * from './toolbar-item-dxi'; +export * from './toolbar'; +export * from './validation-rule-dxi'; + diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts new file mode 100644 index 000000000000..c0054371fda4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts @@ -0,0 +1,418 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { AsyncRule, CompareRule, CustomRule, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, StringLengthRule, ToolbarItemComponent, ToolbarItemLocation, VerticalAlignment } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; +import { ButtonItem, EmptyItem, FormItemComponent, FormItemType, GroupItem, LabelLocation, SimpleItem, TabbedItem } from 'devextreme/ui/form'; +import { Properties as dxTabPanelOptions } from 'devextreme/ui/tab_panel'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; +import { TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiTreeListValidationRuleComponent } from './validation-rule-dxi'; +import { DxiTreeListTabComponent } from './tab-dxi'; + + +@Component({ + selector: 'dxi-tree-list-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTreeListItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined | TreeListPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: string | undefined | TreeListPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get captionTemplate(): any { + return this._getOption('captionTemplate'); + } + set captionTemplate(value: any) { + this._setOption('captionTemplate', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): Array, tabTemplate?: any | undefined, template?: any | undefined, title?: string | undefined }> { + return this._getOption('tabs'); + } + set tabs(value: Array, tabTemplate?: any | undefined, template?: any | undefined, title?: string | undefined }>) { + this._setOption('tabs', value); + } + + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListValidationRuleComponent)) + get validationRulesChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesChildren(value) { + this.setChildren('validationRules', value); + } + + @ContentChildren(forwardRef(() => DxiTreeListItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + @ContentChildren(forwardRef(() => DxiTreeListTabComponent)) + get tabsChildren(): QueryList { + return this._getOption('tabs'); + } + set tabsChildren(value) { + this.setChildren('tabs', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListItemComponent + ], + exports: [ + DxiTreeListItemComponent + ], +}) +export class DxiTreeListItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/keyboard-navigation.ts b/packages/devextreme-angular/src/ui/tree-list/nested/keyboard-navigation.ts new file mode 100644 index 000000000000..8c87299fe9fc --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/keyboard-navigation.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { EnterKeyAction, EnterKeyDirection } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-keyboard-navigation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListKeyboardNavigationComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editOnKeyPress(): boolean { + return this._getOption('editOnKeyPress'); + } + set editOnKeyPress(value: boolean) { + this._setOption('editOnKeyPress', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get enterKeyAction(): EnterKeyAction { + return this._getOption('enterKeyAction'); + } + set enterKeyAction(value: EnterKeyAction) { + this._setOption('enterKeyAction', value); + } + + @Input() + get enterKeyDirection(): EnterKeyDirection { + return this._getOption('enterKeyDirection'); + } + set enterKeyDirection(value: EnterKeyDirection) { + this._setOption('enterKeyDirection', value); + } + + + protected get _optionPath() { + return 'keyboardNavigation'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListKeyboardNavigationComponent + ], + exports: [ + DxoTreeListKeyboardNavigationComponent + ], +}) +export class DxoTreeListKeyboardNavigationModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/label.ts b/packages/devextreme-angular/src/ui/tree-list/nested/label.ts new file mode 100644 index 000000000000..ae2789859477 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/label.ts @@ -0,0 +1,135 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { HorizontalAlignment } from 'devextreme/common'; +import { LabelLocation } from 'devextreme/ui/form'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-label', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoTreeListLabelComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get alignment(): HorizontalAlignment { + return this._getOption('alignment'); + } + set alignment(value: HorizontalAlignment) { + this._setOption('alignment', value); + } + + @Input() + get location(): LabelLocation { + return this._getOption('location'); + } + set location(value: LabelLocation) { + this._setOption('location', value); + } + + @Input() + get showColon(): boolean { + return this._getOption('showColon'); + } + set showColon(value: boolean) { + this._setOption('showColon', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListLabelComponent + ], + exports: [ + DxoTreeListLabelComponent + ], +}) +export class DxoTreeListLabelModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts new file mode 100644 index 000000000000..ea1b7a7441a0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/load-panel.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-load-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListLoadPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): Mode | boolean { + return this._getOption('enabled'); + } + set enabled(value: Mode | boolean) { + this._setOption('enabled', value); + } + + @Input() + get height(): number | string { + return this._getOption('height'); + } + set height(value: number | string) { + this._setOption('height', value); + } + + @Input() + get indicatorSrc(): string { + return this._getOption('indicatorSrc'); + } + set indicatorSrc(value: string) { + this._setOption('indicatorSrc', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showIndicator(): boolean { + return this._getOption('showIndicator'); + } + set showIndicator(value: boolean) { + this._setOption('showIndicator', value); + } + + @Input() + get showPane(): boolean { + return this._getOption('showPane'); + } + set showPane(value: boolean) { + this._setOption('showPane', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get width(): number | string { + return this._getOption('width'); + } + set width(value: number | string) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'loadPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListLoadPanelComponent + ], + exports: [ + DxoTreeListLoadPanelComponent + ], +}) +export class DxoTreeListLoadPanelModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/lookup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/lookup.ts new file mode 100644 index 000000000000..a7fc6cd288a6 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/lookup.ts @@ -0,0 +1,106 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Store } from 'devextreme/data'; +import { Options as DataSourceOptions } from 'devextreme/data/data_source'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-lookup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListLookupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowClearing(): boolean { + return this._getOption('allowClearing'); + } + set allowClearing(value: boolean) { + this._setOption('allowClearing', value); + } + + @Input() + get calculateCellValue(): Function { + return this._getOption('calculateCellValue'); + } + set calculateCellValue(value: Function) { + this._setOption('calculateCellValue', value); + } + + @Input() + get dataSource(): Store | DataSourceOptions | Function | null | undefined | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSourceOptions | Function | null | undefined | Array) { + this._setOption('dataSource', value); + } + + @Input() + get displayExpr(): Function | string | undefined { + return this._getOption('displayExpr'); + } + set displayExpr(value: Function | string | undefined) { + this._setOption('displayExpr', value); + } + + @Input() + get valueExpr(): string | undefined | Function { + return this._getOption('valueExpr'); + } + set valueExpr(value: string | undefined | Function) { + this._setOption('valueExpr', value); + } + + + protected get _optionPath() { + return 'lookup'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListLookupComponent + ], + exports: [ + DxoTreeListLookupComponent + ], +}) +export class DxoTreeListLookupModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/my.ts b/packages/devextreme-angular/src/ui/tree-list/nested/my.ts new file mode 100644 index 000000000000..8240fea27673 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/my.ts @@ -0,0 +1,81 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-my', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListMyComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): HorizontalAlignment { + return this._getOption('x'); + } + set x(value: HorizontalAlignment) { + this._setOption('x', value); + } + + @Input() + get y(): VerticalAlignment { + return this._getOption('y'); + } + set y(value: VerticalAlignment) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'my'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListMyComponent + ], + exports: [ + DxoTreeListMyComponent + ], +}) +export class DxoTreeListMyModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/ng-package.json b/packages/devextreme-angular/src/ui/tree-list/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/offset.ts b/packages/devextreme-angular/src/ui/tree-list/nested/offset.ts new file mode 100644 index 000000000000..2507d0f67268 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/offset.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-offset', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListOffsetComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get x(): number { + return this._getOption('x'); + } + set x(value: number) { + this._setOption('x', value); + } + + @Input() + get y(): number { + return this._getOption('y'); + } + set y(value: number) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'offset'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListOffsetComponent + ], + exports: [ + DxoTreeListOffsetComponent + ], +}) +export class DxoTreeListOffsetModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/operation-descriptions.ts b/packages/devextreme-angular/src/ui/tree-list/nested/operation-descriptions.ts new file mode 100644 index 000000000000..e459a5c4e823 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/operation-descriptions.ts @@ -0,0 +1,152 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-operation-descriptions', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListOperationDescriptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get between(): string { + return this._getOption('between'); + } + set between(value: string) { + this._setOption('between', value); + } + + @Input() + get contains(): string { + return this._getOption('contains'); + } + set contains(value: string) { + this._setOption('contains', value); + } + + @Input() + get endsWith(): string { + return this._getOption('endsWith'); + } + set endsWith(value: string) { + this._setOption('endsWith', value); + } + + @Input() + get equal(): string { + return this._getOption('equal'); + } + set equal(value: string) { + this._setOption('equal', value); + } + + @Input() + get greaterThan(): string { + return this._getOption('greaterThan'); + } + set greaterThan(value: string) { + this._setOption('greaterThan', value); + } + + @Input() + get greaterThanOrEqual(): string { + return this._getOption('greaterThanOrEqual'); + } + set greaterThanOrEqual(value: string) { + this._setOption('greaterThanOrEqual', value); + } + + @Input() + get lessThan(): string { + return this._getOption('lessThan'); + } + set lessThan(value: string) { + this._setOption('lessThan', value); + } + + @Input() + get lessThanOrEqual(): string { + return this._getOption('lessThanOrEqual'); + } + set lessThanOrEqual(value: string) { + this._setOption('lessThanOrEqual', value); + } + + @Input() + get notContains(): string { + return this._getOption('notContains'); + } + set notContains(value: string) { + this._setOption('notContains', value); + } + + @Input() + get notEqual(): string { + return this._getOption('notEqual'); + } + set notEqual(value: string) { + this._setOption('notEqual', value); + } + + @Input() + get startsWith(): string { + return this._getOption('startsWith'); + } + set startsWith(value: string) { + this._setOption('startsWith', value); + } + + + protected get _optionPath() { + return 'operationDescriptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListOperationDescriptionsComponent + ], + exports: [ + DxoTreeListOperationDescriptionsComponent + ], +}) +export class DxoTreeListOperationDescriptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/pager.ts b/packages/devextreme-angular/src/ui/tree-list/nested/pager.ts new file mode 100644 index 000000000000..ad7c08c84324 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/pager.ts @@ -0,0 +1,130 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode } from 'devextreme/common'; +import { PagerDisplayMode, PagerPageSize } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-pager', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListPagerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowedPageSizes(): Mode | Array { + return this._getOption('allowedPageSizes'); + } + set allowedPageSizes(value: Mode | Array) { + this._setOption('allowedPageSizes', value); + } + + @Input() + get displayMode(): PagerDisplayMode { + return this._getOption('displayMode'); + } + set displayMode(value: PagerDisplayMode) { + this._setOption('displayMode', value); + } + + @Input() + get infoText(): string { + return this._getOption('infoText'); + } + set infoText(value: string) { + this._setOption('infoText', value); + } + + @Input() + get label(): string { + return this._getOption('label'); + } + set label(value: string) { + this._setOption('label', value); + } + + @Input() + get showInfo(): boolean { + return this._getOption('showInfo'); + } + set showInfo(value: boolean) { + this._setOption('showInfo', value); + } + + @Input() + get showNavigationButtons(): boolean { + return this._getOption('showNavigationButtons'); + } + set showNavigationButtons(value: boolean) { + this._setOption('showNavigationButtons', value); + } + + @Input() + get showPageSizeSelector(): boolean { + return this._getOption('showPageSizeSelector'); + } + set showPageSizeSelector(value: boolean) { + this._setOption('showPageSizeSelector', value); + } + + @Input() + get visible(): Mode | boolean { + return this._getOption('visible'); + } + set visible(value: Mode | boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'pager'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListPagerComponent + ], + exports: [ + DxoTreeListPagerComponent + ], +}) +export class DxoTreeListPagerModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/paging.ts b/packages/devextreme-angular/src/ui/tree-list/nested/paging.ts new file mode 100644 index 000000000000..cae6776a78c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/paging.ts @@ -0,0 +1,109 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-paging', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListPagingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get pageIndex(): number { + return this._getOption('pageIndex'); + } + set pageIndex(value: number) { + this._setOption('pageIndex', value); + } + + @Input() + get pageSize(): number { + return this._getOption('pageSize'); + } + set pageSize(value: number) { + this._setOption('pageSize', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() pageIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() pageSizeChange: EventEmitter; + protected get _optionPath() { + return 'paging'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'pageIndexChange' }, + { emit: 'pageSizeChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListPagingComponent + ], + exports: [ + DxoTreeListPagingComponent + ], +}) +export class DxoTreeListPagingModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts new file mode 100644 index 000000000000..de615a2d946c --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts @@ -0,0 +1,511 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { AnimationConfig } from 'devextreme/animation/fx'; +import { PositionConfig } from 'devextreme/animation/position'; +import { PositionAlignment, ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListToolbarItemComponent } from './toolbar-item-dxi'; + + +@Component({ + selector: 'dxo-tree-list-popup', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get animation(): { hide?: AnimationConfig, show?: AnimationConfig } { + return this._getOption('animation'); + } + set animation(value: { hide?: AnimationConfig, show?: AnimationConfig }) { + this._setOption('animation', value); + } + + @Input() + get closeOnOutsideClick(): boolean | Function { + return this._getOption('closeOnOutsideClick'); + } + set closeOnOutsideClick(value: boolean | Function) { + this._setOption('closeOnOutsideClick', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any) { + this._setOption('contentTemplate', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get dragAndResizeArea(): UserDefinedElement | string | undefined { + return this._getOption('dragAndResizeArea'); + } + set dragAndResizeArea(value: UserDefinedElement | string | undefined) { + this._setOption('dragAndResizeArea', value); + } + + @Input() + get dragEnabled(): boolean { + return this._getOption('dragEnabled'); + } + set dragEnabled(value: boolean) { + this._setOption('dragEnabled', value); + } + + @Input() + get dragOutsideBoundary(): boolean { + return this._getOption('dragOutsideBoundary'); + } + set dragOutsideBoundary(value: boolean) { + this._setOption('dragOutsideBoundary', value); + } + + @Input() + get enableBodyScroll(): boolean { + return this._getOption('enableBodyScroll'); + } + set enableBodyScroll(value: boolean) { + this._setOption('enableBodyScroll', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get fullScreen(): boolean { + return this._getOption('fullScreen'); + } + set fullScreen(value: boolean) { + this._setOption('fullScreen', value); + } + + @Input() + get height(): number | Function | string { + return this._getOption('height'); + } + set height(value: number | Function | string) { + this._setOption('height', value); + } + + @Input() + get hideOnOutsideClick(): boolean | Function { + return this._getOption('hideOnOutsideClick'); + } + set hideOnOutsideClick(value: boolean | Function) { + this._setOption('hideOnOutsideClick', value); + } + + @Input() + get hideOnParentScroll(): boolean { + return this._getOption('hideOnParentScroll'); + } + set hideOnParentScroll(value: boolean) { + this._setOption('hideOnParentScroll', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get maxHeight(): number | Function | string { + return this._getOption('maxHeight'); + } + set maxHeight(value: number | Function | string) { + this._setOption('maxHeight', value); + } + + @Input() + get maxWidth(): number | Function | string { + return this._getOption('maxWidth'); + } + set maxWidth(value: number | Function | string) { + this._setOption('maxWidth', value); + } + + @Input() + get minHeight(): number | Function | string { + return this._getOption('minHeight'); + } + set minHeight(value: number | Function | string) { + this._setOption('minHeight', value); + } + + @Input() + get minWidth(): number | Function | string { + return this._getOption('minWidth'); + } + set minWidth(value: number | Function | string) { + this._setOption('minWidth', value); + } + + @Input() + get onContentReady(): Function { + return this._getOption('onContentReady'); + } + set onContentReady(value: Function) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): Function { + return this._getOption('onDisposing'); + } + set onDisposing(value: Function) { + this._setOption('onDisposing', value); + } + + @Input() + get onHidden(): Function { + return this._getOption('onHidden'); + } + set onHidden(value: Function) { + this._setOption('onHidden', value); + } + + @Input() + get onHiding(): Function { + return this._getOption('onHiding'); + } + set onHiding(value: Function) { + this._setOption('onHiding', value); + } + + @Input() + get onInitialized(): Function { + return this._getOption('onInitialized'); + } + set onInitialized(value: Function) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): Function { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: Function) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onResize(): Function { + return this._getOption('onResize'); + } + set onResize(value: Function) { + this._setOption('onResize', value); + } + + @Input() + get onResizeEnd(): Function { + return this._getOption('onResizeEnd'); + } + set onResizeEnd(value: Function) { + this._setOption('onResizeEnd', value); + } + + @Input() + get onResizeStart(): Function { + return this._getOption('onResizeStart'); + } + set onResizeStart(value: Function) { + this._setOption('onResizeStart', value); + } + + @Input() + get onShowing(): Function { + return this._getOption('onShowing'); + } + set onShowing(value: Function) { + this._setOption('onShowing', value); + } + + @Input() + get onShown(): Function { + return this._getOption('onShown'); + } + set onShown(value: Function) { + this._setOption('onShown', value); + } + + @Input() + get onTitleRendered(): Function { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: Function) { + this._setOption('onTitleRendered', value); + } + + @Input() + get position(): PositionAlignment | PositionConfig | Function { + return this._getOption('position'); + } + set position(value: PositionAlignment | PositionConfig | Function) { + this._setOption('position', value); + } + + @Input() + get resizeEnabled(): boolean { + return this._getOption('resizeEnabled'); + } + set resizeEnabled(value: boolean) { + this._setOption('resizeEnabled', value); + } + + @Input() + get restorePosition(): boolean { + return this._getOption('restorePosition'); + } + set restorePosition(value: boolean) { + this._setOption('restorePosition', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get shading(): boolean { + return this._getOption('shading'); + } + set shading(value: boolean) { + this._setOption('shading', value); + } + + @Input() + get shadingColor(): string { + return this._getOption('shadingColor'); + } + set shadingColor(value: string) { + this._setOption('shadingColor', value); + } + + @Input() + get showCloseButton(): boolean { + return this._getOption('showCloseButton'); + } + set showCloseButton(value: boolean) { + this._setOption('showCloseButton', value); + } + + @Input() + get showTitle(): boolean { + return this._getOption('showTitle'); + } + set showTitle(value: boolean) { + this._setOption('showTitle', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get titleTemplate(): any { + return this._getOption('titleTemplate'); + } + set titleTemplate(value: any) { + this._setOption('titleTemplate', value); + } + + @Input() + get toolbarItems(): Array { + return this._getOption('toolbarItems'); + } + set toolbarItems(value: Array) { + this._setOption('toolbarItems', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string { + return this._getOption('width'); + } + set width(value: number | Function | string) { + this._setOption('width', value); + } + + @Input() + get wrapperAttr(): any { + return this._getOption('wrapperAttr'); + } + set wrapperAttr(value: any) { + this._setOption('wrapperAttr', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() heightChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() positionChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() visibleChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() widthChange: EventEmitter; + protected get _optionPath() { + return 'popup'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListToolbarItemComponent)) + get toolbarItemsChildren(): QueryList { + return this._getOption('toolbarItems'); + } + set toolbarItemsChildren(value) { + this.setChildren('toolbarItems', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'heightChange' }, + { emit: 'positionChange' }, + { emit: 'visibleChange' }, + { emit: 'widthChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListPopupComponent + ], + exports: [ + DxoTreeListPopupComponent + ], +}) +export class DxoTreeListPopupModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/position.ts b/packages/devextreme-angular/src/ui/tree-list/nested/position.ts new file mode 100644 index 000000000000..1176941f641a --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/position.ts @@ -0,0 +1,123 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { CollisionResolution, CollisionResolutionCombination } from 'devextreme/animation/position'; +import { HorizontalAlignment, PositionAlignment, VerticalAlignment } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-position', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListPositionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get at(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('at'); + } + set at(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('at', value); + } + + @Input() + get boundary(): UserDefinedElement | string | Window { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | Window) { + this._setOption('boundary', value); + } + + @Input() + get boundaryOffset(): string | { x?: number, y?: number } { + return this._getOption('boundaryOffset'); + } + set boundaryOffset(value: string | { x?: number, y?: number }) { + this._setOption('boundaryOffset', value); + } + + @Input() + get collision(): CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution } { + return this._getOption('collision'); + } + set collision(value: CollisionResolutionCombination | { x?: CollisionResolution, y?: CollisionResolution }) { + this._setOption('collision', value); + } + + @Input() + get my(): PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment } { + return this._getOption('my'); + } + set my(value: PositionAlignment | { x?: HorizontalAlignment, y?: VerticalAlignment }) { + this._setOption('my', value); + } + + @Input() + get of(): UserDefinedElement | string | Window { + return this._getOption('of'); + } + set of(value: UserDefinedElement | string | Window) { + this._setOption('of', value); + } + + @Input() + get offset(): string | { x?: number, y?: number } { + return this._getOption('offset'); + } + set offset(value: string | { x?: number, y?: number }) { + this._setOption('offset', value); + } + + + protected get _optionPath() { + return 'position'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListPositionComponent + ], + exports: [ + DxoTreeListPositionComponent + ], +}) +export class DxoTreeListPositionModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/remote-operations.ts b/packages/devextreme-angular/src/ui/tree-list/nested/remote-operations.ts new file mode 100644 index 000000000000..6f017c233fac --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/remote-operations.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-remote-operations', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListRemoteOperationsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get filtering(): boolean { + return this._getOption('filtering'); + } + set filtering(value: boolean) { + this._setOption('filtering', value); + } + + @Input() + get grouping(): boolean { + return this._getOption('grouping'); + } + set grouping(value: boolean) { + this._setOption('grouping', value); + } + + @Input() + get sorting(): boolean { + return this._getOption('sorting'); + } + set sorting(value: boolean) { + this._setOption('sorting', value); + } + + + protected get _optionPath() { + return 'remoteOperations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListRemoteOperationsComponent + ], + exports: [ + DxoTreeListRemoteOperationsComponent + ], +}) +export class DxoTreeListRemoteOperationsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/row-dragging.ts b/packages/devextreme-angular/src/ui/tree-list/nested/row-dragging.ts new file mode 100644 index 000000000000..0c02fa98741f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/row-dragging.ts @@ -0,0 +1,250 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DragDirection, DragHighlight } from 'devextreme/common'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-row-dragging', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListRowDraggingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDropInsideItem(): boolean { + return this._getOption('allowDropInsideItem'); + } + set allowDropInsideItem(value: boolean) { + this._setOption('allowDropInsideItem', value); + } + + @Input() + get allowReordering(): boolean { + return this._getOption('allowReordering'); + } + set allowReordering(value: boolean) { + this._setOption('allowReordering', value); + } + + @Input() + get autoScroll(): boolean { + return this._getOption('autoScroll'); + } + set autoScroll(value: boolean) { + this._setOption('autoScroll', value); + } + + @Input() + get boundary(): UserDefinedElement | string | undefined { + return this._getOption('boundary'); + } + set boundary(value: UserDefinedElement | string | undefined) { + this._setOption('boundary', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get cursorOffset(): string | { x?: number, y?: number } { + return this._getOption('cursorOffset'); + } + set cursorOffset(value: string | { x?: number, y?: number }) { + this._setOption('cursorOffset', value); + } + + @Input() + get data(): any | undefined { + return this._getOption('data'); + } + set data(value: any | undefined) { + this._setOption('data', value); + } + + @Input() + get dragDirection(): DragDirection { + return this._getOption('dragDirection'); + } + set dragDirection(value: DragDirection) { + this._setOption('dragDirection', value); + } + + @Input() + get dragTemplate(): any | undefined { + return this._getOption('dragTemplate'); + } + set dragTemplate(value: any | undefined) { + this._setOption('dragTemplate', value); + } + + @Input() + get dropFeedbackMode(): DragHighlight { + return this._getOption('dropFeedbackMode'); + } + set dropFeedbackMode(value: DragHighlight) { + this._setOption('dropFeedbackMode', value); + } + + @Input() + get filter(): string { + return this._getOption('filter'); + } + set filter(value: string) { + this._setOption('filter', value); + } + + @Input() + get group(): string | undefined { + return this._getOption('group'); + } + set group(value: string | undefined) { + this._setOption('group', value); + } + + @Input() + get handle(): string { + return this._getOption('handle'); + } + set handle(value: string) { + this._setOption('handle', value); + } + + @Input() + get onAdd(): Function { + return this._getOption('onAdd'); + } + set onAdd(value: Function) { + this._setOption('onAdd', value); + } + + @Input() + get onDragChange(): Function { + return this._getOption('onDragChange'); + } + set onDragChange(value: Function) { + this._setOption('onDragChange', value); + } + + @Input() + get onDragEnd(): Function { + return this._getOption('onDragEnd'); + } + set onDragEnd(value: Function) { + this._setOption('onDragEnd', value); + } + + @Input() + get onDragMove(): Function { + return this._getOption('onDragMove'); + } + set onDragMove(value: Function) { + this._setOption('onDragMove', value); + } + + @Input() + get onDragStart(): Function { + return this._getOption('onDragStart'); + } + set onDragStart(value: Function) { + this._setOption('onDragStart', value); + } + + @Input() + get onRemove(): Function { + return this._getOption('onRemove'); + } + set onRemove(value: Function) { + this._setOption('onRemove', value); + } + + @Input() + get onReorder(): Function { + return this._getOption('onReorder'); + } + set onReorder(value: Function) { + this._setOption('onReorder', value); + } + + @Input() + get scrollSensitivity(): number { + return this._getOption('scrollSensitivity'); + } + set scrollSensitivity(value: number) { + this._setOption('scrollSensitivity', value); + } + + @Input() + get scrollSpeed(): number { + return this._getOption('scrollSpeed'); + } + set scrollSpeed(value: number) { + this._setOption('scrollSpeed', value); + } + + @Input() + get showDragIcons(): boolean { + return this._getOption('showDragIcons'); + } + set showDragIcons(value: boolean) { + this._setOption('showDragIcons', value); + } + + + protected get _optionPath() { + return 'rowDragging'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListRowDraggingComponent + ], + exports: [ + DxoTreeListRowDraggingComponent + ], +}) +export class DxoTreeListRowDraggingModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/scrolling.ts b/packages/devextreme-angular/src/ui/tree-list/nested/scrolling.ts new file mode 100644 index 000000000000..8e2bcb557a2a --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/scrolling.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Mode, ScrollbarMode, ScrollMode } from 'devextreme/common'; +import { DataRenderMode } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-scrolling', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListScrollingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get columnRenderingMode(): DataRenderMode { + return this._getOption('columnRenderingMode'); + } + set columnRenderingMode(value: DataRenderMode) { + this._setOption('columnRenderingMode', value); + } + + @Input() + get mode(): ScrollMode { + return this._getOption('mode'); + } + set mode(value: ScrollMode) { + this._setOption('mode', value); + } + + @Input() + get preloadEnabled(): boolean { + return this._getOption('preloadEnabled'); + } + set preloadEnabled(value: boolean) { + this._setOption('preloadEnabled', value); + } + + @Input() + get renderAsync(): boolean | undefined { + return this._getOption('renderAsync'); + } + set renderAsync(value: boolean | undefined) { + this._setOption('renderAsync', value); + } + + @Input() + get rowRenderingMode(): DataRenderMode { + return this._getOption('rowRenderingMode'); + } + set rowRenderingMode(value: DataRenderMode) { + this._setOption('rowRenderingMode', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollByThumb(): boolean { + return this._getOption('scrollByThumb'); + } + set scrollByThumb(value: boolean) { + this._setOption('scrollByThumb', value); + } + + @Input() + get showScrollbar(): ScrollbarMode { + return this._getOption('showScrollbar'); + } + set showScrollbar(value: ScrollbarMode) { + this._setOption('showScrollbar', value); + } + + @Input() + get useNative(): Mode | boolean { + return this._getOption('useNative'); + } + set useNative(value: Mode | boolean) { + this._setOption('useNative', value); + } + + + protected get _optionPath() { + return 'scrolling'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListScrollingComponent + ], + exports: [ + DxoTreeListScrollingComponent + ], +}) +export class DxoTreeListScrollingModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/search-panel.ts b/packages/devextreme-angular/src/ui/tree-list/nested/search-panel.ts new file mode 100644 index 000000000000..28b93ed50694 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/search-panel.ts @@ -0,0 +1,133 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-search-panel', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListSearchPanelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get highlightCaseSensitive(): boolean { + return this._getOption('highlightCaseSensitive'); + } + set highlightCaseSensitive(value: boolean) { + this._setOption('highlightCaseSensitive', value); + } + + @Input() + get highlightSearchText(): boolean { + return this._getOption('highlightSearchText'); + } + set highlightSearchText(value: boolean) { + this._setOption('highlightSearchText', value); + } + + @Input() + get placeholder(): string { + return this._getOption('placeholder'); + } + set placeholder(value: string) { + this._setOption('placeholder', value); + } + + @Input() + get searchVisibleColumnsOnly(): boolean { + return this._getOption('searchVisibleColumnsOnly'); + } + set searchVisibleColumnsOnly(value: boolean) { + this._setOption('searchVisibleColumnsOnly', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | string { + return this._getOption('width'); + } + set width(value: number | string) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() textChange: EventEmitter; + protected get _optionPath() { + return 'searchPanel'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'textChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListSearchPanelComponent + ], + exports: [ + DxoTreeListSearchPanelComponent + ], +}) +export class DxoTreeListSearchPanelModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/search.ts b/packages/devextreme-angular/src/ui/tree-list/nested/search.ts new file mode 100644 index 000000000000..595c59895d94 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/search.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SearchMode } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-search', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListSearchComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get editorOptions(): any { + return this._getOption('editorOptions'); + } + set editorOptions(value: any) { + this._setOption('editorOptions', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get timeout(): number { + return this._getOption('timeout'); + } + set timeout(value: number) { + this._setOption('timeout', value); + } + + @Input() + get mode(): SearchMode { + return this._getOption('mode'); + } + set mode(value: SearchMode) { + this._setOption('mode', value); + } + + @Input() + get searchExpr(): Function | string | undefined | Array { + return this._getOption('searchExpr'); + } + set searchExpr(value: Function | string | undefined | Array) { + this._setOption('searchExpr', value); + } + + + protected get _optionPath() { + return 'search'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListSearchComponent + ], + exports: [ + DxoTreeListSearchComponent + ], +}) +export class DxoTreeListSearchModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/selection.ts b/packages/devextreme-angular/src/ui/tree-list/nested/selection.ts new file mode 100644 index 000000000000..acc5d47d8694 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/selection.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SingleMultipleOrNone } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-selection', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListSelectionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowSelectAll(): boolean { + return this._getOption('allowSelectAll'); + } + set allowSelectAll(value: boolean) { + this._setOption('allowSelectAll', value); + } + + @Input() + get recursive(): boolean { + return this._getOption('recursive'); + } + set recursive(value: boolean) { + this._setOption('recursive', value); + } + + @Input() + get selectByClick(): boolean { + return this._getOption('selectByClick'); + } + set selectByClick(value: boolean) { + this._setOption('selectByClick', value); + } + + @Input() + get mode(): SingleMultipleOrNone { + return this._getOption('mode'); + } + set mode(value: SingleMultipleOrNone) { + this._setOption('mode', value); + } + + + protected get _optionPath() { + return 'selection'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListSelectionComponent + ], + exports: [ + DxoTreeListSelectionComponent + ], +}) +export class DxoTreeListSelectionModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/show.ts b/packages/devextreme-angular/src/ui/tree-list/nested/show.ts new file mode 100644 index 000000000000..4b0c3c3d7808 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/show.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnimationState, AnimationType } from 'devextreme/animation/fx'; +import { Direction } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-show', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListShowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get complete(): Function { + return this._getOption('complete'); + } + set complete(value: Function) { + this._setOption('complete', value); + } + + @Input() + get delay(): number { + return this._getOption('delay'); + } + set delay(value: number) { + this._setOption('delay', value); + } + + @Input() + get direction(): Direction | undefined { + return this._getOption('direction'); + } + set direction(value: Direction | undefined) { + this._setOption('direction', value); + } + + @Input() + get duration(): number { + return this._getOption('duration'); + } + set duration(value: number) { + this._setOption('duration', value); + } + + @Input() + get easing(): string { + return this._getOption('easing'); + } + set easing(value: string) { + this._setOption('easing', value); + } + + @Input() + get from(): AnimationState { + return this._getOption('from'); + } + set from(value: AnimationState) { + this._setOption('from', value); + } + + @Input() + get staggerDelay(): number | undefined { + return this._getOption('staggerDelay'); + } + set staggerDelay(value: number | undefined) { + this._setOption('staggerDelay', value); + } + + @Input() + get start(): Function { + return this._getOption('start'); + } + set start(value: Function) { + this._setOption('start', value); + } + + @Input() + get to(): AnimationState { + return this._getOption('to'); + } + set to(value: AnimationState) { + this._setOption('to', value); + } + + @Input() + get type(): AnimationType { + return this._getOption('type'); + } + set type(value: AnimationType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'show'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListShowComponent + ], + exports: [ + DxoTreeListShowComponent + ], +}) +export class DxoTreeListShowModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/sorting.ts b/packages/devextreme-angular/src/ui/tree-list/nested/sorting.ts new file mode 100644 index 000000000000..30548afa74cd --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/sorting.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SingleMultipleOrNone } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-sorting', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListSortingComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get ascendingText(): string { + return this._getOption('ascendingText'); + } + set ascendingText(value: string) { + this._setOption('ascendingText', value); + } + + @Input() + get clearText(): string { + return this._getOption('clearText'); + } + set clearText(value: string) { + this._setOption('clearText', value); + } + + @Input() + get descendingText(): string { + return this._getOption('descendingText'); + } + set descendingText(value: string) { + this._setOption('descendingText', value); + } + + @Input() + get mode(): SingleMultipleOrNone { + return this._getOption('mode'); + } + set mode(value: SingleMultipleOrNone) { + this._setOption('mode', value); + } + + @Input() + get showSortIndexes(): boolean { + return this._getOption('showSortIndexes'); + } + set showSortIndexes(value: boolean) { + this._setOption('showSortIndexes', value); + } + + + protected get _optionPath() { + return 'sorting'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListSortingComponent + ], + exports: [ + DxoTreeListSortingComponent + ], +}) +export class DxoTreeListSortingModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/state-storing.ts b/packages/devextreme-angular/src/ui/tree-list/nested/state-storing.ts new file mode 100644 index 000000000000..64a9bb0e81c9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/state-storing.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { StateStoreType } from 'devextreme/common/grids'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-state-storing', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListStateStoringComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get customLoad(): Function { + return this._getOption('customLoad'); + } + set customLoad(value: Function) { + this._setOption('customLoad', value); + } + + @Input() + get customSave(): Function { + return this._getOption('customSave'); + } + set customSave(value: Function) { + this._setOption('customSave', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get savingTimeout(): number { + return this._getOption('savingTimeout'); + } + set savingTimeout(value: number) { + this._setOption('savingTimeout', value); + } + + @Input() + get storageKey(): string { + return this._getOption('storageKey'); + } + set storageKey(value: string) { + this._setOption('storageKey', value); + } + + @Input() + get type(): StateStoreType { + return this._getOption('type'); + } + set type(value: StateStoreType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'stateStoring'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListStateStoringComponent + ], + exports: [ + DxoTreeListStateStoringComponent + ], +}) +export class DxoTreeListStateStoringModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts new file mode 100644 index 000000000000..f3bd395e9c23 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts @@ -0,0 +1,172 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ButtonItem, EmptyItem, GroupItem, SimpleItem, TabbedItem } from 'devextreme/ui/form'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; +import { DxiTreeListItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxi-tree-list-tab', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTreeListTabComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get badge(): string | undefined { + return this._getOption('badge'); + } + set badge(value: string | undefined) { + this._setOption('badge', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabTemplate(): any | undefined { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any | undefined) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get title(): string | undefined { + return this._getOption('title'); + } + set title(value: string | undefined) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListTabComponent + ], + exports: [ + DxiTreeListTabComponent + ], +}) +export class DxiTreeListTabModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts new file mode 100644 index 000000000000..81f251bdb2f5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts @@ -0,0 +1,453 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common'; +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-tree-list-tab-panel-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListTabPanelOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get animationEnabled(): boolean { + return this._getOption('animationEnabled'); + } + set animationEnabled(value: boolean) { + this._setOption('animationEnabled', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get iconPosition(): TabsIconPosition { + return this._getOption('iconPosition'); + } + set iconPosition(value: TabsIconPosition) { + this._setOption('iconPosition', value); + } + + @Input() + get itemHoldTimeout(): number { + return this._getOption('itemHoldTimeout'); + } + set itemHoldTimeout(value: number) { + this._setOption('itemHoldTimeout', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get itemTitleTemplate(): any { + return this._getOption('itemTitleTemplate'); + } + set itemTitleTemplate(value: any) { + this._setOption('itemTitleTemplate', value); + } + + @Input() + get loop(): boolean { + return this._getOption('loop'); + } + set loop(value: boolean) { + this._setOption('loop', value); + } + + @Input() + get noDataText(): string { + return this._getOption('noDataText'); + } + set noDataText(value: string) { + this._setOption('noDataText', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemHold(): ((e: ItemHoldEvent) => void) { + return this._getOption('onItemHold'); + } + set onItemHold(value: ((e: ItemHoldEvent) => void)) { + this._setOption('onItemHold', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onSelectionChanged(): ((e: SelectionChangedEvent) => void) { + return this._getOption('onSelectionChanged'); + } + set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) { + this._setOption('onSelectionChanged', value); + } + + @Input() + get onTitleClick(): ((e: TitleClickEvent) => void) { + return this._getOption('onTitleClick'); + } + set onTitleClick(value: ((e: TitleClickEvent) => void)) { + this._setOption('onTitleClick', value); + } + + @Input() + get onTitleHold(): ((e: TitleHoldEvent) => void) { + return this._getOption('onTitleHold'); + } + set onTitleHold(value: ((e: TitleHoldEvent) => void)) { + this._setOption('onTitleHold', value); + } + + @Input() + get onTitleRendered(): ((e: TitleRenderedEvent) => void) { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) { + this._setOption('onTitleRendered', value); + } + + @Input() + get repaintChangesOnly(): boolean { + return this._getOption('repaintChangesOnly'); + } + set repaintChangesOnly(value: boolean) { + this._setOption('repaintChangesOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get selectedIndex(): number { + return this._getOption('selectedIndex'); + } + set selectedIndex(value: number) { + this._setOption('selectedIndex', value); + } + + @Input() + get selectedItem(): any { + return this._getOption('selectedItem'); + } + set selectedItem(value: any) { + this._setOption('selectedItem', value); + } + + @Input() + get showNavButtons(): boolean { + return this._getOption('showNavButtons'); + } + set showNavButtons(value: boolean) { + this._setOption('showNavButtons', value); + } + + @Input() + get stylingMode(): TabsStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: TabsStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get swipeEnabled(): boolean { + return this._getOption('swipeEnabled'); + } + set swipeEnabled(value: boolean) { + this._setOption('swipeEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get tabsPosition(): Position { + return this._getOption('tabsPosition'); + } + set tabsPosition(value: Position) { + this._setOption('tabsPosition', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedItemChange: EventEmitter; + protected get _optionPath() { + return 'tabPanelOptions'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'itemsChange' }, + { emit: 'selectedIndexChange' }, + { emit: 'selectedItemChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListTabPanelOptionsComponent + ], + exports: [ + DxoTreeListTabPanelOptionsComponent + ], +}) +export class DxoTreeListTabPanelOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/texts.ts b/packages/devextreme-angular/src/ui/tree-list/nested/texts.ts new file mode 100644 index 000000000000..6d6b4f9c4eb1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/texts.ts @@ -0,0 +1,240 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-texts', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListTextsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get fix(): string { + return this._getOption('fix'); + } + set fix(value: string) { + this._setOption('fix', value); + } + + @Input() + get leftPosition(): string { + return this._getOption('leftPosition'); + } + set leftPosition(value: string) { + this._setOption('leftPosition', value); + } + + @Input() + get rightPosition(): string { + return this._getOption('rightPosition'); + } + set rightPosition(value: string) { + this._setOption('rightPosition', value); + } + + @Input() + get unfix(): string { + return this._getOption('unfix'); + } + set unfix(value: string) { + this._setOption('unfix', value); + } + + @Input() + get addRow(): string { + return this._getOption('addRow'); + } + set addRow(value: string) { + this._setOption('addRow', value); + } + + @Input() + get addRowToNode(): string { + return this._getOption('addRowToNode'); + } + set addRowToNode(value: string) { + this._setOption('addRowToNode', value); + } + + @Input() + get cancelAllChanges(): string { + return this._getOption('cancelAllChanges'); + } + set cancelAllChanges(value: string) { + this._setOption('cancelAllChanges', value); + } + + @Input() + get cancelRowChanges(): string { + return this._getOption('cancelRowChanges'); + } + set cancelRowChanges(value: string) { + this._setOption('cancelRowChanges', value); + } + + @Input() + get confirmDeleteMessage(): string { + return this._getOption('confirmDeleteMessage'); + } + set confirmDeleteMessage(value: string) { + this._setOption('confirmDeleteMessage', value); + } + + @Input() + get confirmDeleteTitle(): string { + return this._getOption('confirmDeleteTitle'); + } + set confirmDeleteTitle(value: string) { + this._setOption('confirmDeleteTitle', value); + } + + @Input() + get deleteRow(): string { + return this._getOption('deleteRow'); + } + set deleteRow(value: string) { + this._setOption('deleteRow', value); + } + + @Input() + get editRow(): string { + return this._getOption('editRow'); + } + set editRow(value: string) { + this._setOption('editRow', value); + } + + @Input() + get saveAllChanges(): string { + return this._getOption('saveAllChanges'); + } + set saveAllChanges(value: string) { + this._setOption('saveAllChanges', value); + } + + @Input() + get saveRowChanges(): string { + return this._getOption('saveRowChanges'); + } + set saveRowChanges(value: string) { + this._setOption('saveRowChanges', value); + } + + @Input() + get undeleteRow(): string { + return this._getOption('undeleteRow'); + } + set undeleteRow(value: string) { + this._setOption('undeleteRow', value); + } + + @Input() + get validationCancelChanges(): string { + return this._getOption('validationCancelChanges'); + } + set validationCancelChanges(value: string) { + this._setOption('validationCancelChanges', value); + } + + @Input() + get clearFilter(): string { + return this._getOption('clearFilter'); + } + set clearFilter(value: string) { + this._setOption('clearFilter', value); + } + + @Input() + get createFilter(): string { + return this._getOption('createFilter'); + } + set createFilter(value: string) { + this._setOption('createFilter', value); + } + + @Input() + get filterEnabledHint(): string { + return this._getOption('filterEnabledHint'); + } + set filterEnabledHint(value: string) { + this._setOption('filterEnabledHint', value); + } + + @Input() + get cancel(): string { + return this._getOption('cancel'); + } + set cancel(value: string) { + this._setOption('cancel', value); + } + + @Input() + get emptyValue(): string { + return this._getOption('emptyValue'); + } + set emptyValue(value: string) { + this._setOption('emptyValue', value); + } + + @Input() + get ok(): string { + return this._getOption('ok'); + } + set ok(value: string) { + this._setOption('ok', value); + } + + + protected get _optionPath() { + return 'texts'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListTextsComponent + ], + exports: [ + DxoTreeListTextsComponent + ], +}) +export class DxoTreeListTextsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/to.ts b/packages/devextreme-angular/src/ui/tree-list/nested/to.ts new file mode 100644 index 000000000000..035eabc3a27b --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/to.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { PositionConfig } from 'devextreme/animation/position'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-to', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListToComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get position(): PositionConfig { + return this._getOption('position'); + } + set position(value: PositionConfig) { + this._setOption('position', value); + } + + @Input() + get scale(): number { + return this._getOption('scale'); + } + set scale(value: number) { + this._setOption('scale', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'to'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListToComponent + ], + exports: [ + DxoTreeListToComponent + ], +}) +export class DxoTreeListToModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/toolbar-item-dxi.ts new file mode 100644 index 000000000000..de71cdfa924d --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/toolbar-item-dxi.ts @@ -0,0 +1,186 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common'; +import { ToolbarLocation } from 'devextreme/ui/popup'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-list-toolbar-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiTreeListToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get toolbar(): ToolbarLocation { + return this._getOption('toolbar'); + } + set toolbar(value: ToolbarLocation) { + this._setOption('toolbar', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'toolbarItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListToolbarItemComponent + ], + exports: [ + DxiTreeListToolbarItemComponent + ], +}) +export class DxiTreeListToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/toolbar.ts b/packages/devextreme-angular/src/ui/tree-list/nested/toolbar.ts new file mode 100644 index 000000000000..e397a138dc06 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/toolbar.ts @@ -0,0 +1,101 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxTreeListToolbarItem, TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeListItemComponent } from './item-dxi'; + + +@Component({ + selector: 'dxo-tree-list-toolbar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeListToolbarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get visible(): boolean | undefined { + return this._getOption('visible'); + } + set visible(value: boolean | undefined) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'toolbar'; + } + + + @ContentChildren(forwardRef(() => DxiTreeListItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeListToolbarComponent + ], + exports: [ + DxoTreeListToolbarComponent + ], +}) +export class DxoTreeListToolbarModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/validation-rule-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/validation-rule-dxi.ts new file mode 100644 index 000000000000..7776e7103c73 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/validation-rule-dxi.ts @@ -0,0 +1,147 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ComparisonOperator, ValidationRuleType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-list-validation-rule', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeListValidationRuleComponent extends CollectionNestedOption { + @Input() + get message(): string { + return this._getOption('message'); + } + set message(value: string) { + this._setOption('message', value); + } + + @Input() + get trim(): boolean { + return this._getOption('trim'); + } + set trim(value: boolean) { + this._setOption('trim', value); + } + + @Input() + get type(): ValidationRuleType { + return this._getOption('type'); + } + set type(value: ValidationRuleType) { + this._setOption('type', value); + } + + @Input() + get ignoreEmptyValue(): boolean { + return this._getOption('ignoreEmptyValue'); + } + set ignoreEmptyValue(value: boolean) { + this._setOption('ignoreEmptyValue', value); + } + + @Input() + get max(): Date | number | string { + return this._getOption('max'); + } + set max(value: Date | number | string) { + this._setOption('max', value); + } + + @Input() + get min(): Date | number | string { + return this._getOption('min'); + } + set min(value: Date | number | string) { + this._setOption('min', value); + } + + @Input() + get reevaluate(): boolean { + return this._getOption('reevaluate'); + } + set reevaluate(value: boolean) { + this._setOption('reevaluate', value); + } + + @Input() + get validationCallback(): Function { + return this._getOption('validationCallback'); + } + set validationCallback(value: Function) { + this._setOption('validationCallback', value); + } + + @Input() + get comparisonTarget(): Function { + return this._getOption('comparisonTarget'); + } + set comparisonTarget(value: Function) { + this._setOption('comparisonTarget', value); + } + + @Input() + get comparisonType(): ComparisonOperator { + return this._getOption('comparisonType'); + } + set comparisonType(value: ComparisonOperator) { + this._setOption('comparisonType', value); + } + + @Input() + get pattern(): RegExp | string { + return this._getOption('pattern'); + } + set pattern(value: RegExp | string) { + this._setOption('pattern', value); + } + + + protected get _optionPath() { + return 'validationRules'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeListValidationRuleComponent + ], + exports: [ + DxiTreeListValidationRuleComponent + ], +}) +export class DxiTreeListValidationRuleModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/index.ts b/packages/devextreme-angular/src/ui/tree-map/index.ts index bcc10e13e275..8af372b9ea53 100644 --- a/packages/devextreme-angular/src/ui/tree-map/index.ts +++ b/packages/devextreme-angular/src/ui/tree-map/index.ts @@ -59,6 +59,24 @@ import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; import { DxoFormatModule } from 'devextreme-angular/ui/nested'; import { DxoShadowModule } from 'devextreme-angular/ui/nested'; +import { DxoTreeMapColorizerModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapExportModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapGroupModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapBorderModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapHoverStyleModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapLabelModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapFontModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapSelectionStyleModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapLoadingIndicatorModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapSizeModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapTileModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapTitleModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapMarginModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapSubtitleModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapTooltipModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapFormatModule } from 'devextreme-angular/ui/tree-map/nested'; +import { DxoTreeMapShadowModule } from 'devextreme-angular/ui/tree-map/nested'; + @@ -737,6 +755,7 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, @@ -851,6 +870,23 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan DxoTooltipModule, DxoFormatModule, DxoShadowModule, + DxoTreeMapColorizerModule, + DxoTreeMapExportModule, + DxoTreeMapGroupModule, + DxoTreeMapBorderModule, + DxoTreeMapHoverStyleModule, + DxoTreeMapLabelModule, + DxoTreeMapFontModule, + DxoTreeMapSelectionStyleModule, + DxoTreeMapLoadingIndicatorModule, + DxoTreeMapSizeModule, + DxoTreeMapTileModule, + DxoTreeMapTitleModule, + DxoTreeMapMarginModule, + DxoTreeMapSubtitleModule, + DxoTreeMapTooltipModule, + DxoTreeMapFormatModule, + DxoTreeMapShadowModule, DxIntegrationModule, DxTemplateModule ], @@ -876,6 +912,23 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan DxoTooltipModule, DxoFormatModule, DxoShadowModule, + DxoTreeMapColorizerModule, + DxoTreeMapExportModule, + DxoTreeMapGroupModule, + DxoTreeMapBorderModule, + DxoTreeMapHoverStyleModule, + DxoTreeMapLabelModule, + DxoTreeMapFontModule, + DxoTreeMapSelectionStyleModule, + DxoTreeMapLoadingIndicatorModule, + DxoTreeMapSizeModule, + DxoTreeMapTileModule, + DxoTreeMapTitleModule, + DxoTreeMapMarginModule, + DxoTreeMapSubtitleModule, + DxoTreeMapTooltipModule, + DxoTreeMapFormatModule, + DxoTreeMapShadowModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/border.ts b/packages/devextreme-angular/src/ui/tree-map/nested/border.ts new file mode 100644 index 000000000000..789dd6b1845b --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/border.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapBorderComponent + ], + exports: [ + DxoTreeMapBorderComponent + ], +}) +export class DxoTreeMapBorderModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts b/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts new file mode 100644 index 000000000000..1c0e8a46c57f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts @@ -0,0 +1,114 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Palette, PaletteExtensionMode } from 'devextreme/common/charts'; +import { TreeMapColorizerType } from 'devextreme/viz/tree_map'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-colorizer', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapColorizerComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get colorCodeField(): string | undefined { + return this._getOption('colorCodeField'); + } + set colorCodeField(value: string | undefined) { + this._setOption('colorCodeField', value); + } + + @Input() + get colorizeGroups(): boolean { + return this._getOption('colorizeGroups'); + } + set colorizeGroups(value: boolean) { + this._setOption('colorizeGroups', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get paletteExtensionMode(): PaletteExtensionMode { + return this._getOption('paletteExtensionMode'); + } + set paletteExtensionMode(value: PaletteExtensionMode) { + this._setOption('paletteExtensionMode', value); + } + + @Input() + get range(): Array { + return this._getOption('range'); + } + set range(value: Array) { + this._setOption('range', value); + } + + @Input() + get type(): TreeMapColorizerType | undefined { + return this._getOption('type'); + } + set type(value: TreeMapColorizerType | undefined) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'colorizer'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapColorizerComponent + ], + exports: [ + DxoTreeMapColorizerComponent + ], +}) +export class DxoTreeMapColorizerModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/export.ts b/packages/devextreme-angular/src/ui/tree-map/nested/export.ts new file mode 100644 index 000000000000..c3af8ac4ed4f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapExportComponent + ], + exports: [ + DxoTreeMapExportComponent + ], +}) +export class DxoTreeMapExportModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/font.ts b/packages/devextreme-angular/src/ui/tree-map/nested/font.ts new file mode 100644 index 000000000000..608b5b0bd500 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapFontComponent + ], + exports: [ + DxoTreeMapFontComponent + ], +}) +export class DxoTreeMapFontModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/format.ts b/packages/devextreme-angular/src/ui/tree-map/nested/format.ts new file mode 100644 index 000000000000..5ab97648f514 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/format.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Format } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-format', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapFormatComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get currency(): string { + return this._getOption('currency'); + } + set currency(value: string) { + this._setOption('currency', value); + } + + @Input() + get formatter(): Function { + return this._getOption('formatter'); + } + set formatter(value: Function) { + this._setOption('formatter', value); + } + + @Input() + get parser(): Function { + return this._getOption('parser'); + } + set parser(value: Function) { + this._setOption('parser', value); + } + + @Input() + get precision(): number { + return this._getOption('precision'); + } + set precision(value: number) { + this._setOption('precision', value); + } + + @Input() + get type(): Format | string { + return this._getOption('type'); + } + set type(value: Format | string) { + this._setOption('type', value); + } + + @Input() + get useCurrencyAccountingStyle(): boolean { + return this._getOption('useCurrencyAccountingStyle'); + } + set useCurrencyAccountingStyle(value: boolean) { + this._setOption('useCurrencyAccountingStyle', value); + } + + + protected get _optionPath() { + return 'format'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapFormatComponent + ], + exports: [ + DxoTreeMapFormatComponent + ], +}) +export class DxoTreeMapFormatModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/group.ts b/packages/devextreme-angular/src/ui/tree-map/nested/group.ts new file mode 100644 index 000000000000..e4c5af32aa6c --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/group.ts @@ -0,0 +1,129 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-group', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapGroupComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get headerHeight(): number | undefined { + return this._getOption('headerHeight'); + } + set headerHeight(value: number | undefined) { + this._setOption('headerHeight', value); + } + + @Input() + get hoverEnabled(): boolean | undefined { + return this._getOption('hoverEnabled'); + } + set hoverEnabled(value: boolean | undefined) { + this._setOption('hoverEnabled', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, width?: number | undefined }, color?: string | undefined } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, width?: number | undefined }, color?: string | undefined }) { + this._setOption('hoverStyle', value); + } + + @Input() + get label(): { font?: Font, textOverflow?: TextOverflow, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { font?: Font, textOverflow?: TextOverflow, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get padding(): number { + return this._getOption('padding'); + } + set padding(value: number) { + this._setOption('padding', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string, width?: number | undefined }, color?: string | undefined } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string, width?: number | undefined }, color?: string | undefined }) { + this._setOption('selectionStyle', value); + } + + + protected get _optionPath() { + return 'group'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapGroupComponent + ], + exports: [ + DxoTreeMapGroupComponent + ], +}) +export class DxoTreeMapGroupModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/hover-style.ts b/packages/devextreme-angular/src/ui/tree-map/nested/hover-style.ts new file mode 100644 index 000000000000..9ec531b2ad9e --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/hover-style.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-hover-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapHoverStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string | undefined, width?: number | undefined } { + return this._getOption('border'); + } + set border(value: { color?: string | undefined, width?: number | undefined }) { + this._setOption('border', value); + } + + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + + protected get _optionPath() { + return 'hoverStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapHoverStyleComponent + ], + exports: [ + DxoTreeMapHoverStyleComponent + ], +}) +export class DxoTreeMapHoverStyleModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/index.ts b/packages/devextreme-angular/src/ui/tree-map/nested/index.ts new file mode 100644 index 000000000000..d329a7eb9677 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/index.ts @@ -0,0 +1,18 @@ +export * from './border'; +export * from './colorizer'; +export * from './export'; +export * from './font'; +export * from './format'; +export * from './group'; +export * from './hover-style'; +export * from './label'; +export * from './loading-indicator'; +export * from './margin'; +export * from './selection-style'; +export * from './shadow'; +export * from './size'; +export * from './subtitle'; +export * from './tile'; +export * from './title'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/label.ts b/packages/devextreme-angular/src/ui/tree-map/nested/label.ts new file mode 100644 index 000000000000..eed9c177829f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/label.ts @@ -0,0 +1,97 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapLabelComponent + ], + exports: [ + DxoTreeMapLabelComponent + ], +}) +export class DxoTreeMapLabelModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/tree-map/nested/loading-indicator.ts new file mode 100644 index 000000000000..8d9fe3bdaef5 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapLoadingIndicatorComponent + ], + exports: [ + DxoTreeMapLoadingIndicatorComponent + ], +}) +export class DxoTreeMapLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/margin.ts b/packages/devextreme-angular/src/ui/tree-map/nested/margin.ts new file mode 100644 index 000000000000..b09b8905613a --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapMarginComponent + ], + exports: [ + DxoTreeMapMarginComponent + ], +}) +export class DxoTreeMapMarginModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/ng-package.json b/packages/devextreme-angular/src/ui/tree-map/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/selection-style.ts b/packages/devextreme-angular/src/ui/tree-map/nested/selection-style.ts new file mode 100644 index 000000000000..260754974e7a --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/selection-style.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-selection-style', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapSelectionStyleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, width?: number | undefined } { + return this._getOption('border'); + } + set border(value: { color?: string, width?: number | undefined }) { + this._setOption('border', value); + } + + @Input() + get color(): string | undefined { + return this._getOption('color'); + } + set color(value: string | undefined) { + this._setOption('color', value); + } + + + protected get _optionPath() { + return 'selectionStyle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapSelectionStyleComponent + ], + exports: [ + DxoTreeMapSelectionStyleComponent + ], +}) +export class DxoTreeMapSelectionStyleModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/shadow.ts b/packages/devextreme-angular/src/ui/tree-map/nested/shadow.ts new file mode 100644 index 000000000000..60240ed1bdb1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapShadowComponent + ], + exports: [ + DxoTreeMapShadowComponent + ], +}) +export class DxoTreeMapShadowModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/size.ts b/packages/devextreme-angular/src/ui/tree-map/nested/size.ts new file mode 100644 index 000000000000..80bbc2962148 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapSizeComponent + ], + exports: [ + DxoTreeMapSizeComponent + ], +}) +export class DxoTreeMapSizeModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts b/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts new file mode 100644 index 000000000000..1c204f9fe13b --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapSubtitleComponent + ], + exports: [ + DxoTreeMapSubtitleComponent + ], +}) +export class DxoTreeMapSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/tile.ts b/packages/devextreme-angular/src/ui/tree-map/nested/tile.ts new file mode 100644 index 000000000000..bb2551bbbd10 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/tile.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-tile', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapTileComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get border(): { color?: string, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get hoverStyle(): { border?: { color?: string | undefined, width?: number | undefined }, color?: string | undefined } { + return this._getOption('hoverStyle'); + } + set hoverStyle(value: { border?: { color?: string | undefined, width?: number | undefined }, color?: string | undefined }) { + this._setOption('hoverStyle', value); + } + + @Input() + get label(): { font?: Font, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap } { + return this._getOption('label'); + } + set label(value: { font?: Font, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }) { + this._setOption('label', value); + } + + @Input() + get selectionStyle(): { border?: { color?: string, width?: number | undefined }, color?: string | undefined } { + return this._getOption('selectionStyle'); + } + set selectionStyle(value: { border?: { color?: string, width?: number | undefined }, color?: string | undefined }) { + this._setOption('selectionStyle', value); + } + + + protected get _optionPath() { + return 'tile'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapTileComponent + ], + exports: [ + DxoTreeMapTileComponent + ], +}) +export class DxoTreeMapTileModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/title.ts b/packages/devextreme-angular/src/ui/tree-map/nested/title.ts new file mode 100644 index 000000000000..60a5f61d2e7c --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapTitleComponent + ], + exports: [ + DxoTreeMapTitleComponent + ], +}) +export class DxoTreeMapTitleModule { } diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/tooltip.ts b/packages/devextreme-angular/src/ui/tree-map/nested/tooltip.ts new file mode 100644 index 000000000000..d0be30eb0044 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-map/nested/tooltip.ts @@ -0,0 +1,187 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; +import { Format } from 'devextreme/localization'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-map-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeMapTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get format(): Format | string | undefined { + return this._getOption('format'); + } + set format(value: Format | string | undefined) { + this._setOption('format', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeMapTooltipComponent + ], + exports: [ + DxoTreeMapTooltipComponent + ], +}) +export class DxoTreeMapTooltipModule { } diff --git a/packages/devextreme-angular/src/ui/tree-view/index.ts b/packages/devextreme-angular/src/ui/tree-view/index.ts index d7dc21920db6..4895cd7b6d9b 100644 --- a/packages/devextreme-angular/src/ui/tree-view/index.ts +++ b/packages/devextreme-angular/src/ui/tree-view/index.ts @@ -47,8 +47,14 @@ import { DxoSearchEditorOptionsModule } from 'devextreme-angular/ui/nested'; import { DxiButtonModule } from 'devextreme-angular/ui/nested'; import { DxoOptionsModule } from 'devextreme-angular/ui/nested'; +import { DxiTreeViewItemModule } from 'devextreme-angular/ui/tree-view/nested'; +import { DxoTreeViewSearchEditorOptionsModule } from 'devextreme-angular/ui/tree-view/nested'; +import { DxiTreeViewButtonModule } from 'devextreme-angular/ui/tree-view/nested'; +import { DxoTreeViewOptionsModule } from 'devextreme-angular/ui/tree-view/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiTreeViewItemComponent } from 'devextreme-angular/ui/tree-view/nested'; /** @@ -1134,15 +1140,27 @@ export class DxTreeViewComponent extends DxComponent implements OnDe - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiTreeViewItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiTreeViewItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -1270,6 +1288,10 @@ export class DxTreeViewComponent extends DxComponent implements OnDe DxoSearchEditorOptionsModule, DxiButtonModule, DxoOptionsModule, + DxiTreeViewItemModule, + DxoTreeViewSearchEditorOptionsModule, + DxiTreeViewButtonModule, + DxoTreeViewOptionsModule, DxIntegrationModule, DxTemplateModule ], @@ -1282,6 +1304,10 @@ export class DxTreeViewComponent extends DxComponent implements OnDe DxoSearchEditorOptionsModule, DxiButtonModule, DxoOptionsModule, + DxiTreeViewItemModule, + DxoTreeViewSearchEditorOptionsModule, + DxiTreeViewButtonModule, + DxoTreeViewOptionsModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/button-dxi.ts b/packages/devextreme-angular/src/ui/tree-view/nested/button-dxi.ts new file mode 100644 index 000000000000..fe5e610ad3a9 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-view/nested/button-dxi.ts @@ -0,0 +1,84 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { TextEditorButtonLocation } from 'devextreme/common'; +import { Properties as dxButtonOptions } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-view-button', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeViewButtonComponent extends CollectionNestedOption { + @Input() + get location(): TextEditorButtonLocation { + return this._getOption('location'); + } + set location(value: TextEditorButtonLocation) { + this._setOption('location', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get options(): dxButtonOptions | undefined { + return this._getOption('options'); + } + set options(value: dxButtonOptions | undefined) { + this._setOption('options', value); + } + + + protected get _optionPath() { + return 'buttons'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeViewButtonComponent + ], + exports: [ + DxiTreeViewButtonComponent + ], +}) +export class DxiTreeViewButtonModule { } diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/index.ts b/packages/devextreme-angular/src/ui/tree-view/nested/index.ts new file mode 100644 index 000000000000..4699f8cc0415 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-view/nested/index.ts @@ -0,0 +1,5 @@ +export * from './button-dxi'; +export * from './item-dxi'; +export * from './options'; +export * from './search-editor-options'; + diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tree-view/nested/item-dxi.ts new file mode 100644 index 000000000000..968dafb884f2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-view/nested/item-dxi.ts @@ -0,0 +1,166 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { dxTreeViewItem } from 'devextreme/ui/tree_view'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-tree-view-item', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiTreeViewItemComponent extends CollectionNestedOption { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get expanded(): boolean { + return this._getOption('expanded'); + } + set expanded(value: boolean) { + this._setOption('expanded', value); + } + + @Input() + get hasItems(): boolean | undefined { + return this._getOption('hasItems'); + } + set hasItems(value: boolean | undefined) { + this._setOption('hasItems', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get id(): number | string | undefined { + return this._getOption('id'); + } + set id(value: number | string | undefined) { + this._setOption('id', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get parentId(): number | string | undefined { + return this._getOption('parentId'); + } + set parentId(value: number | string | undefined) { + this._setOption('parentId', value); + } + + @Input() + get selected(): boolean { + return this._getOption('selected'); + } + set selected(value: boolean) { + this._setOption('selected', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + @ContentChildren(forwardRef(() => DxiTreeViewItemComponent)) + get itemsChildren(): QueryList { + return this._getOption('items'); + } + set itemsChildren(value) { + this.setChildren('items', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiTreeViewItemComponent + ], + exports: [ + DxiTreeViewItemComponent + ], +}) +export class DxiTreeViewItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/ng-package.json b/packages/devextreme-angular/src/ui/tree-view/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-view/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/options.ts b/packages/devextreme-angular/src/ui/tree-view/nested/options.ts new file mode 100644 index 000000000000..89c1fa22fdcb --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-view/nested/options.ts @@ -0,0 +1,258 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ButtonStyle, ButtonType } from 'devextreme/common'; +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-view-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeViewOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType { + return this._getOption('type'); + } + set type(value: ButtonType) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'options'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeViewOptionsComponent + ], + exports: [ + DxoTreeViewOptionsComponent + ], +}) +export class DxoTreeViewOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts b/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts new file mode 100644 index 000000000000..f0e12c2dbedb --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts @@ -0,0 +1,539 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + forwardRef, + QueryList +} from '@angular/core'; + + + + +import { EditorStyle, LabelMode, MaskMode, Position, TextBoxPredefinedButton, TextEditorButton, ValidationMessageMode, ValidationStatus } from 'devextreme/common'; +import { ChangeEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OptionChangedEvent, PasteEvent, TextBoxType, ValueChangedEvent } from 'devextreme/ui/text_box'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; +import { DxiTreeViewButtonComponent } from './button-dxi'; + + +@Component({ + selector: 'dxo-tree-view-search-editor-options', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoTreeViewSearchEditorOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get buttons(): Array { + return this._getOption('buttons'); + } + set buttons(value: Array) { + this._setOption('buttons', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): any { + return this._getOption('elementAttr'); + } + set elementAttr(value: any) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | Function | string | undefined { + return this._getOption('height'); + } + set height(value: number | Function | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get inputAttr(): any { + return this._getOption('inputAttr'); + } + set inputAttr(value: any) { + this._setOption('inputAttr', value); + } + + @Input() + get isDirty(): boolean { + return this._getOption('isDirty'); + } + set isDirty(value: boolean) { + this._setOption('isDirty', value); + } + + @Input() + get isValid(): boolean { + return this._getOption('isValid'); + } + set isValid(value: boolean) { + this._setOption('isValid', value); + } + + @Input() + get label(): string { + return this._getOption('label'); + } + set label(value: string) { + this._setOption('label', value); + } + + @Input() + get labelMode(): LabelMode { + return this._getOption('labelMode'); + } + set labelMode(value: LabelMode) { + this._setOption('labelMode', value); + } + + @Input() + get mask(): string { + return this._getOption('mask'); + } + set mask(value: string) { + this._setOption('mask', value); + } + + @Input() + get maskChar(): string { + return this._getOption('maskChar'); + } + set maskChar(value: string) { + this._setOption('maskChar', value); + } + + @Input() + get maskInvalidMessage(): string { + return this._getOption('maskInvalidMessage'); + } + set maskInvalidMessage(value: string) { + this._setOption('maskInvalidMessage', value); + } + + @Input() + get maskRules(): any { + return this._getOption('maskRules'); + } + set maskRules(value: any) { + this._setOption('maskRules', value); + } + + @Input() + get maxLength(): number | string { + return this._getOption('maxLength'); + } + set maxLength(value: number | string) { + this._setOption('maxLength', value); + } + + @Input() + get mode(): TextBoxType { + return this._getOption('mode'); + } + set mode(value: TextBoxType) { + this._setOption('mode', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + @Input() + get onChange(): ((e: ChangeEvent) => void) { + return this._getOption('onChange'); + } + set onChange(value: ((e: ChangeEvent) => void)) { + this._setOption('onChange', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onCopy(): ((e: CopyEvent) => void) { + return this._getOption('onCopy'); + } + set onCopy(value: ((e: CopyEvent) => void)) { + this._setOption('onCopy', value); + } + + @Input() + get onCut(): ((e: CutEvent) => void) { + return this._getOption('onCut'); + } + set onCut(value: ((e: CutEvent) => void)) { + this._setOption('onCut', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onEnterKey(): ((e: EnterKeyEvent) => void) { + return this._getOption('onEnterKey'); + } + set onEnterKey(value: ((e: EnterKeyEvent) => void)) { + this._setOption('onEnterKey', value); + } + + @Input() + get onFocusIn(): ((e: FocusInEvent) => void) { + return this._getOption('onFocusIn'); + } + set onFocusIn(value: ((e: FocusInEvent) => void)) { + this._setOption('onFocusIn', value); + } + + @Input() + get onFocusOut(): ((e: FocusOutEvent) => void) { + return this._getOption('onFocusOut'); + } + set onFocusOut(value: ((e: FocusOutEvent) => void)) { + this._setOption('onFocusOut', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onInput(): ((e: InputEvent) => void) { + return this._getOption('onInput'); + } + set onInput(value: ((e: InputEvent) => void)) { + this._setOption('onInput', value); + } + + @Input() + get onKeyDown(): ((e: KeyDownEvent) => void) { + return this._getOption('onKeyDown'); + } + set onKeyDown(value: ((e: KeyDownEvent) => void)) { + this._setOption('onKeyDown', value); + } + + @Input() + get onKeyUp(): ((e: KeyUpEvent) => void) { + return this._getOption('onKeyUp'); + } + set onKeyUp(value: ((e: KeyUpEvent) => void)) { + this._setOption('onKeyUp', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onPaste(): ((e: PasteEvent) => void) { + return this._getOption('onPaste'); + } + set onPaste(value: ((e: PasteEvent) => void)) { + this._setOption('onPaste', value); + } + + @Input() + get onValueChanged(): ((e: ValueChangedEvent) => void) { + return this._getOption('onValueChanged'); + } + set onValueChanged(value: ((e: ValueChangedEvent) => void)) { + this._setOption('onValueChanged', value); + } + + @Input() + get placeholder(): string { + return this._getOption('placeholder'); + } + set placeholder(value: string) { + this._setOption('placeholder', value); + } + + @Input() + get readOnly(): boolean { + return this._getOption('readOnly'); + } + set readOnly(value: boolean) { + this._setOption('readOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get showClearButton(): boolean { + return this._getOption('showClearButton'); + } + set showClearButton(value: boolean) { + this._setOption('showClearButton', value); + } + + @Input() + get showMaskMode(): MaskMode { + return this._getOption('showMaskMode'); + } + set showMaskMode(value: MaskMode) { + this._setOption('showMaskMode', value); + } + + @Input() + get spellcheck(): boolean { + return this._getOption('spellcheck'); + } + set spellcheck(value: boolean) { + this._setOption('spellcheck', value); + } + + @Input() + get stylingMode(): EditorStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: EditorStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get useMaskedValue(): boolean { + return this._getOption('useMaskedValue'); + } + set useMaskedValue(value: boolean) { + this._setOption('useMaskedValue', value); + } + + @Input() + get validationError(): any { + return this._getOption('validationError'); + } + set validationError(value: any) { + this._setOption('validationError', value); + } + + @Input() + get validationErrors(): Array { + return this._getOption('validationErrors'); + } + set validationErrors(value: Array) { + this._setOption('validationErrors', value); + } + + @Input() + get validationMessageMode(): ValidationMessageMode { + return this._getOption('validationMessageMode'); + } + set validationMessageMode(value: ValidationMessageMode) { + this._setOption('validationMessageMode', value); + } + + @Input() + get validationMessagePosition(): Position { + return this._getOption('validationMessagePosition'); + } + set validationMessagePosition(value: Position) { + this._setOption('validationMessagePosition', value); + } + + @Input() + get validationStatus(): ValidationStatus { + return this._getOption('validationStatus'); + } + set validationStatus(value: ValidationStatus) { + this._setOption('validationStatus', value); + } + + @Input() + get value(): string { + return this._getOption('value'); + } + set value(value: string) { + this._setOption('value', value); + } + + @Input() + get valueChangeEvent(): string { + return this._getOption('valueChangeEvent'); + } + set valueChangeEvent(value: string) { + this._setOption('valueChangeEvent', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | Function | string | undefined { + return this._getOption('width'); + } + set width(value: number | Function | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() textChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() valueChange: EventEmitter; + protected get _optionPath() { + return 'searchEditorOptions'; + } + + + @ContentChildren(forwardRef(() => DxiTreeViewButtonComponent)) + get buttonsChildren(): QueryList { + return this._getOption('buttons'); + } + set buttonsChildren(value) { + this.setChildren('buttons', value); + } + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'textChange' }, + { emit: 'valueChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoTreeViewSearchEditorOptionsComponent + ], + exports: [ + DxoTreeViewSearchEditorOptionsComponent + ], +}) +export class DxoTreeViewSearchEditorOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/validation-group/index.ts b/packages/devextreme-angular/src/ui/validation-group/index.ts index e4602f902c03..4f53963e8747 100644 --- a/packages/devextreme-angular/src/ui/validation-group/index.ts +++ b/packages/devextreme-angular/src/ui/validation-group/index.ts @@ -35,6 +35,7 @@ import { + /** * [descr:dxValidationGroup] @@ -140,6 +141,7 @@ export class DxValidationGroupComponent extends DxComponent implements OnDestroy + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, optionHost: NestedOptionHost, diff --git a/packages/devextreme-angular/src/ui/validation-summary/index.ts b/packages/devextreme-angular/src/ui/validation-summary/index.ts index d9bfdc2a8ebf..3712b0983453 100644 --- a/packages/devextreme-angular/src/ui/validation-summary/index.ts +++ b/packages/devextreme-angular/src/ui/validation-summary/index.ts @@ -40,8 +40,11 @@ import { import { DxiItemModule } from 'devextreme-angular/ui/nested'; +import { DxiValidationSummaryItemModule } from 'devextreme-angular/ui/validation-summary/nested'; + import { DxiItemComponent } from 'devextreme-angular/ui/nested'; +import { DxiValidationSummaryItemComponent } from 'devextreme-angular/ui/validation-summary/nested'; /** @@ -203,15 +206,27 @@ export class DxValidationSummaryComponent extends DxCom - @ContentChildren(DxiItemComponent) - get itemsChildren(): QueryList { + @ContentChildren(DxiValidationSummaryItemComponent) + get itemsChildren(): QueryList { return this._getOption('items'); } set itemsChildren(value) { + this.setContentChildren('items', value, 'DxiValidationSummaryItemComponent'); this.setChildren('items', value); } + @ContentChildren(DxiItemComponent) + get itemsLegacyChildren(): QueryList { + return this._getOption('items'); + } + set itemsLegacyChildren(value) { + if (this.checkContentChildren('items', value, 'DxiItemComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -281,6 +296,7 @@ export class DxValidationSummaryComponent extends DxCom @NgModule({ imports: [ DxiItemModule, + DxiValidationSummaryItemModule, DxIntegrationModule, DxTemplateModule ], @@ -290,6 +306,7 @@ export class DxValidationSummaryComponent extends DxCom exports: [ DxValidationSummaryComponent, DxiItemModule, + DxiValidationSummaryItemModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/validation-summary/nested/index.ts b/packages/devextreme-angular/src/ui/validation-summary/nested/index.ts new file mode 100644 index 000000000000..503ffa9357be --- /dev/null +++ b/packages/devextreme-angular/src/ui/validation-summary/nested/index.ts @@ -0,0 +1,2 @@ +export * from './item-dxi'; + diff --git a/packages/devextreme-angular/src/ui/validation-summary/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/validation-summary/nested/item-dxi.ts new file mode 100644 index 000000000000..b7efa3a07bc8 --- /dev/null +++ b/packages/devextreme-angular/src/ui/validation-summary/nested/item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-validation-summary-item', + template: '', + styles: [':host { display: block; }'], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxiValidationSummaryItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiValidationSummaryItemComponent + ], + exports: [ + DxiValidationSummaryItemComponent + ], +}) +export class DxiValidationSummaryItemModule { } diff --git a/packages/devextreme-angular/src/ui/validation-summary/nested/ng-package.json b/packages/devextreme-angular/src/ui/validation-summary/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/validation-summary/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/validator/index.ts b/packages/devextreme-angular/src/ui/validator/index.ts index 5f34bc484617..a0b9a10c4d3d 100644 --- a/packages/devextreme-angular/src/ui/validator/index.ts +++ b/packages/devextreme-angular/src/ui/validator/index.ts @@ -43,8 +43,12 @@ import { import { DxoAdapterModule } from 'devextreme-angular/ui/nested'; import { DxiValidationRuleModule } from 'devextreme-angular/ui/nested'; +import { DxoValidatorAdapterModule } from 'devextreme-angular/ui/validator/nested'; +import { DxiValidatorValidationRuleModule } from 'devextreme-angular/ui/validator/nested'; + import { DxiValidationRuleComponent } from 'devextreme-angular/ui/nested'; +import { DxiValidatorValidationRuleComponent } from 'devextreme-angular/ui/validator/nested'; /** @@ -238,15 +242,27 @@ export class DxValidatorComponent extends DxComponentExtension implements OnDest - @ContentChildren(DxiValidationRuleComponent) - get validationRulesChildren(): QueryList { + @ContentChildren(DxiValidatorValidationRuleComponent) + get validationRulesChildren(): QueryList { return this._getOption('validationRules'); } set validationRulesChildren(value) { + this.setContentChildren('validationRules', value, 'DxiValidatorValidationRuleComponent'); this.setChildren('validationRules', value); } + @ContentChildren(DxiValidationRuleComponent) + get validationRulesLegacyChildren(): QueryList { + return this._getOption('validationRules'); + } + set validationRulesLegacyChildren(value) { + if (this.checkContentChildren('validationRules', value, 'DxiValidationRuleComponent')) { + this.setChildren('items', value); + } + } + + parentElement: any; @@ -334,6 +350,8 @@ export class DxValidatorComponent extends DxComponentExtension implements OnDest imports: [ DxoAdapterModule, DxiValidationRuleModule, + DxoValidatorAdapterModule, + DxiValidatorValidationRuleModule, DxIntegrationModule, DxTemplateModule ], @@ -344,6 +362,8 @@ export class DxValidatorComponent extends DxComponentExtension implements OnDest DxValidatorComponent, DxoAdapterModule, DxiValidationRuleModule, + DxoValidatorAdapterModule, + DxiValidatorValidationRuleModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/validator/nested/adapter.ts b/packages/devextreme-angular/src/ui/validator/nested/adapter.ts new file mode 100644 index 000000000000..eb6d5b83e38c --- /dev/null +++ b/packages/devextreme-angular/src/ui/validator/nested/adapter.ts @@ -0,0 +1,112 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-validator-adapter', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoValidatorAdapterComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get applyValidationResults(): Function { + return this._getOption('applyValidationResults'); + } + set applyValidationResults(value: Function) { + this._setOption('applyValidationResults', value); + } + + @Input() + get bypass(): Function { + return this._getOption('bypass'); + } + set bypass(value: Function) { + this._setOption('bypass', value); + } + + @Input() + get focus(): Function { + return this._getOption('focus'); + } + set focus(value: Function) { + this._setOption('focus', value); + } + + @Input() + get getValue(): Function { + return this._getOption('getValue'); + } + set getValue(value: Function) { + this._setOption('getValue', value); + } + + @Input() + get reset(): Function { + return this._getOption('reset'); + } + set reset(value: Function) { + this._setOption('reset', value); + } + + @Input() + get validationRequestsCallbacks(): Array { + return this._getOption('validationRequestsCallbacks'); + } + set validationRequestsCallbacks(value: Array) { + this._setOption('validationRequestsCallbacks', value); + } + + + protected get _optionPath() { + return 'adapter'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoValidatorAdapterComponent + ], + exports: [ + DxoValidatorAdapterComponent + ], +}) +export class DxoValidatorAdapterModule { } diff --git a/packages/devextreme-angular/src/ui/validator/nested/index.ts b/packages/devextreme-angular/src/ui/validator/nested/index.ts new file mode 100644 index 000000000000..f01d8ab9057e --- /dev/null +++ b/packages/devextreme-angular/src/ui/validator/nested/index.ts @@ -0,0 +1,3 @@ +export * from './adapter'; +export * from './validation-rule-dxi'; + diff --git a/packages/devextreme-angular/src/ui/validator/nested/ng-package.json b/packages/devextreme-angular/src/ui/validator/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/validator/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/validator/nested/validation-rule-dxi.ts b/packages/devextreme-angular/src/ui/validator/nested/validation-rule-dxi.ts new file mode 100644 index 000000000000..bfd71c702e16 --- /dev/null +++ b/packages/devextreme-angular/src/ui/validator/nested/validation-rule-dxi.ts @@ -0,0 +1,147 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ComparisonOperator, ValidationRuleType } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-validator-validation-rule', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiValidatorValidationRuleComponent extends CollectionNestedOption { + @Input() + get message(): string { + return this._getOption('message'); + } + set message(value: string) { + this._setOption('message', value); + } + + @Input() + get trim(): boolean { + return this._getOption('trim'); + } + set trim(value: boolean) { + this._setOption('trim', value); + } + + @Input() + get type(): ValidationRuleType { + return this._getOption('type'); + } + set type(value: ValidationRuleType) { + this._setOption('type', value); + } + + @Input() + get ignoreEmptyValue(): boolean { + return this._getOption('ignoreEmptyValue'); + } + set ignoreEmptyValue(value: boolean) { + this._setOption('ignoreEmptyValue', value); + } + + @Input() + get max(): Date | number | string { + return this._getOption('max'); + } + set max(value: Date | number | string) { + this._setOption('max', value); + } + + @Input() + get min(): Date | number | string { + return this._getOption('min'); + } + set min(value: Date | number | string) { + this._setOption('min', value); + } + + @Input() + get reevaluate(): boolean { + return this._getOption('reevaluate'); + } + set reevaluate(value: boolean) { + this._setOption('reevaluate', value); + } + + @Input() + get validationCallback(): Function { + return this._getOption('validationCallback'); + } + set validationCallback(value: Function) { + this._setOption('validationCallback', value); + } + + @Input() + get comparisonTarget(): Function { + return this._getOption('comparisonTarget'); + } + set comparisonTarget(value: Function) { + this._setOption('comparisonTarget', value); + } + + @Input() + get comparisonType(): ComparisonOperator { + return this._getOption('comparisonType'); + } + set comparisonType(value: ComparisonOperator) { + this._setOption('comparisonType', value); + } + + @Input() + get pattern(): RegExp | string { + return this._getOption('pattern'); + } + set pattern(value: RegExp | string) { + this._setOption('pattern', value); + } + + + protected get _optionPath() { + return 'validationRules'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiValidatorValidationRuleComponent + ], + exports: [ + DxiValidatorValidationRuleComponent + ], +}) +export class DxiValidatorValidationRuleModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/index.ts b/packages/devextreme-angular/src/ui/vector-map/index.ts index 2b2dd6768a51..39dc710b46dd 100644 --- a/packages/devextreme-angular/src/ui/vector-map/index.ts +++ b/packages/devextreme-angular/src/ui/vector-map/index.ts @@ -64,10 +64,34 @@ import { DxoProjectionModule } from 'devextreme-angular/ui/nested'; import { DxoSizeModule } from 'devextreme-angular/ui/nested'; import { DxoTooltipModule } from 'devextreme-angular/ui/nested'; +import { DxiVectorMapAnnotationModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapBorderModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapFontModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapImageModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapShadowModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapBackgroundModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapCommonAnnotationSettingsModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapControlBarModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapExportModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxiVectorMapLayerModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapLabelModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxiVectorMapLegendModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapMarginModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapSourceModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapTitleModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapSubtitleModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapLoadingIndicatorModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapProjectionModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapSizeModule } from 'devextreme-angular/ui/vector-map/nested'; +import { DxoVectorMapTooltipModule } from 'devextreme-angular/ui/vector-map/nested'; + import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested'; import { DxiLayerComponent } from 'devextreme-angular/ui/nested'; import { DxiLegendComponent } from 'devextreme-angular/ui/nested'; +import { DxiVectorMapAnnotationComponent } from 'devextreme-angular/ui/vector-map/nested'; +import { DxiVectorMapLayerComponent } from 'devextreme-angular/ui/vector-map/nested'; +import { DxiVectorMapLegendComponent } from 'devextreme-angular/ui/vector-map/nested'; /** @@ -742,31 +766,65 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh - @ContentChildren(DxiAnnotationComponent) - get annotationsChildren(): QueryList { + @ContentChildren(DxiVectorMapAnnotationComponent) + get annotationsChildren(): QueryList { return this._getOption('annotations'); } set annotationsChildren(value) { + this.setContentChildren('annotations', value, 'DxiVectorMapAnnotationComponent'); this.setChildren('annotations', value); } - @ContentChildren(DxiLayerComponent) - get layersChildren(): QueryList { + @ContentChildren(DxiVectorMapLayerComponent) + get layersChildren(): QueryList { return this._getOption('layers'); } set layersChildren(value) { + this.setContentChildren('layers', value, 'DxiVectorMapLayerComponent'); this.setChildren('layers', value); } - @ContentChildren(DxiLegendComponent) - get legendsChildren(): QueryList { + @ContentChildren(DxiVectorMapLegendComponent) + get legendsChildren(): QueryList { return this._getOption('legends'); } set legendsChildren(value) { + this.setContentChildren('legends', value, 'DxiVectorMapLegendComponent'); this.setChildren('legends', value); } + @ContentChildren(DxiAnnotationComponent) + get annotationsLegacyChildren(): QueryList { + return this._getOption('annotations'); + } + set annotationsLegacyChildren(value) { + if (this.checkContentChildren('annotations', value, 'DxiAnnotationComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiLayerComponent) + get layersLegacyChildren(): QueryList { + return this._getOption('layers'); + } + set layersLegacyChildren(value) { + if (this.checkContentChildren('layers', value, 'DxiLayerComponent')) { + this.setChildren('items', value); + } + } + + @ContentChildren(DxiLegendComponent) + get legendsLegacyChildren(): QueryList { + return this._getOption('legends'); + } + set legendsLegacyChildren(value) { + if (this.checkContentChildren('legends', value, 'DxiLegendComponent')) { + this.setChildren('items', value); + } + } + + constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, @@ -894,6 +952,26 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh DxoProjectionModule, DxoSizeModule, DxoTooltipModule, + DxiVectorMapAnnotationModule, + DxoVectorMapBorderModule, + DxoVectorMapFontModule, + DxoVectorMapImageModule, + DxoVectorMapShadowModule, + DxoVectorMapBackgroundModule, + DxoVectorMapCommonAnnotationSettingsModule, + DxoVectorMapControlBarModule, + DxoVectorMapExportModule, + DxiVectorMapLayerModule, + DxoVectorMapLabelModule, + DxiVectorMapLegendModule, + DxoVectorMapMarginModule, + DxoVectorMapSourceModule, + DxoVectorMapTitleModule, + DxoVectorMapSubtitleModule, + DxoVectorMapLoadingIndicatorModule, + DxoVectorMapProjectionModule, + DxoVectorMapSizeModule, + DxoVectorMapTooltipModule, DxIntegrationModule, DxTemplateModule ], @@ -922,6 +1000,26 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh DxoProjectionModule, DxoSizeModule, DxoTooltipModule, + DxiVectorMapAnnotationModule, + DxoVectorMapBorderModule, + DxoVectorMapFontModule, + DxoVectorMapImageModule, + DxoVectorMapShadowModule, + DxoVectorMapBackgroundModule, + DxoVectorMapCommonAnnotationSettingsModule, + DxoVectorMapControlBarModule, + DxoVectorMapExportModule, + DxiVectorMapLayerModule, + DxoVectorMapLabelModule, + DxiVectorMapLegendModule, + DxoVectorMapMarginModule, + DxoVectorMapSourceModule, + DxoVectorMapTitleModule, + DxoVectorMapSubtitleModule, + DxoVectorMapLoadingIndicatorModule, + DxoVectorMapProjectionModule, + DxoVectorMapSizeModule, + DxoVectorMapTooltipModule, DxTemplateModule ] }) diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts b/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts new file mode 100644 index 000000000000..a3095ee931c7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts @@ -0,0 +1,291 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-vector-map-annotation', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiVectorMapAnnotationComponent extends CollectionNestedOption { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get coordinates(): Array { + return this._getOption('coordinates'); + } + set coordinates(value: Array) { + this._setOption('coordinates', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'annotations'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiVectorMapAnnotationComponent + ], + exports: [ + DxiVectorMapAnnotationComponent + ], +}) +export class DxiVectorMapAnnotationModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/background.ts b/packages/devextreme-angular/src/ui/vector-map/nested/background.ts new file mode 100644 index 000000000000..d678ebf4cf94 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/background.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-background', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapBackgroundComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get borderColor(): string { + return this._getOption('borderColor'); + } + set borderColor(value: string) { + this._setOption('borderColor', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + + protected get _optionPath() { + return 'background'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapBackgroundComponent + ], + exports: [ + DxoVectorMapBackgroundComponent + ], +}) +export class DxoVectorMapBackgroundModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/border.ts b/packages/devextreme-angular/src/ui/vector-map/nested/border.ts new file mode 100644 index 000000000000..eaaa0bb5b783 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/border.ts @@ -0,0 +1,113 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-border', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapBorderComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get dashStyle(): DashStyle { + return this._getOption('dashStyle'); + } + set dashStyle(value: DashStyle) { + this._setOption('dashStyle', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'border'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapBorderComponent + ], + exports: [ + DxoVectorMapBorderComponent + ], +}) +export class DxoVectorMapBorderModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts b/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts new file mode 100644 index 000000000000..d1e8da58b704 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts @@ -0,0 +1,289 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { AnnotationType, DashStyle, Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-common-annotation-settings', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapCommonAnnotationSettingsComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get allowDragging(): boolean { + return this._getOption('allowDragging'); + } + set allowDragging(value: boolean) { + this._setOption('allowDragging', value); + } + + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get arrowWidth(): number { + return this._getOption('arrowWidth'); + } + set arrowWidth(value: number) { + this._setOption('arrowWidth', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get coordinates(): Array { + return this._getOption('coordinates'); + } + set coordinates(value: Array) { + this._setOption('coordinates', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get data(): any { + return this._getOption('data'); + } + set data(value: any) { + this._setOption('data', value); + } + + @Input() + get description(): string | undefined { + return this._getOption('description'); + } + set description(value: string | undefined) { + this._setOption('description', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get image(): string | { height?: number, url?: string | undefined, width?: number } { + return this._getOption('image'); + } + set image(value: string | { height?: number, url?: string | undefined, width?: number }) { + this._setOption('image', value); + } + + @Input() + get offsetX(): number | undefined { + return this._getOption('offsetX'); + } + set offsetX(value: number | undefined) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number | undefined { + return this._getOption('offsetY'); + } + set offsetY(value: number | undefined) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get template(): any | undefined { + return this._getOption('template'); + } + set template(value: any | undefined) { + this._setOption('template', value); + } + + @Input() + get text(): string | undefined { + return this._getOption('text'); + } + set text(value: string | undefined) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get tooltipEnabled(): boolean { + return this._getOption('tooltipEnabled'); + } + set tooltipEnabled(value: boolean) { + this._setOption('tooltipEnabled', value); + } + + @Input() + get tooltipTemplate(): any | undefined { + return this._getOption('tooltipTemplate'); + } + set tooltipTemplate(value: any | undefined) { + this._setOption('tooltipTemplate', value); + } + + @Input() + get type(): AnnotationType | undefined { + return this._getOption('type'); + } + set type(value: AnnotationType | undefined) { + this._setOption('type', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + @Input() + get x(): number | undefined { + return this._getOption('x'); + } + set x(value: number | undefined) { + this._setOption('x', value); + } + + @Input() + get y(): number | undefined { + return this._getOption('y'); + } + set y(value: number | undefined) { + this._setOption('y', value); + } + + + protected get _optionPath() { + return 'commonAnnotationSettings'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapCommonAnnotationSettingsComponent + ], + exports: [ + DxoVectorMapCommonAnnotationSettingsComponent + ], +}) +export class DxoVectorMapCommonAnnotationSettingsModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/control-bar.ts b/packages/devextreme-angular/src/ui/vector-map/nested/control-bar.ts new file mode 100644 index 000000000000..0c1b48286db7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/control-bar.ts @@ -0,0 +1,137 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-control-bar', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapControlBarComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get borderColor(): string { + return this._getOption('borderColor'); + } + set borderColor(value: string) { + this._setOption('borderColor', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get panVisible(): boolean { + return this._getOption('panVisible'); + } + set panVisible(value: boolean) { + this._setOption('panVisible', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get zoomVisible(): boolean { + return this._getOption('zoomVisible'); + } + set zoomVisible(value: boolean) { + this._setOption('zoomVisible', value); + } + + + protected get _optionPath() { + return 'controlBar'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapControlBarComponent + ], + exports: [ + DxoVectorMapControlBarComponent + ], +}) +export class DxoVectorMapControlBarModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/export.ts b/packages/devextreme-angular/src/ui/vector-map/nested/export.ts new file mode 100644 index 000000000000..5ed4aa4658df --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/export.ts @@ -0,0 +1,121 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { ExportFormat } from 'devextreme/common'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-export', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapExportComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get fileName(): string { + return this._getOption('fileName'); + } + set fileName(value: string) { + this._setOption('fileName', value); + } + + @Input() + get formats(): any | Array { + return this._getOption('formats'); + } + set formats(value: any | Array) { + this._setOption('formats', value); + } + + @Input() + get margin(): number { + return this._getOption('margin'); + } + set margin(value: number) { + this._setOption('margin', value); + } + + @Input() + get printingEnabled(): boolean { + return this._getOption('printingEnabled'); + } + set printingEnabled(value: boolean) { + this._setOption('printingEnabled', value); + } + + @Input() + get svgToCanvas(): Function | undefined { + return this._getOption('svgToCanvas'); + } + set svgToCanvas(value: Function | undefined) { + this._setOption('svgToCanvas', value); + } + + + protected get _optionPath() { + return 'export'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapExportComponent + ], + exports: [ + DxoVectorMapExportComponent + ], +}) +export class DxoVectorMapExportModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/font.ts b/packages/devextreme-angular/src/ui/vector-map/nested/font.ts new file mode 100644 index 000000000000..ef093c42d3e1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/font.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-font', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapFontComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get family(): string { + return this._getOption('family'); + } + set family(value: string) { + this._setOption('family', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get size(): number | string { + return this._getOption('size'); + } + set size(value: number | string) { + this._setOption('size', value); + } + + @Input() + get weight(): number { + return this._getOption('weight'); + } + set weight(value: number) { + this._setOption('weight', value); + } + + + protected get _optionPath() { + return 'font'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapFontComponent + ], + exports: [ + DxoVectorMapFontComponent + ], +}) +export class DxoVectorMapFontModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/image.ts b/packages/devextreme-angular/src/ui/vector-map/nested/image.ts new file mode 100644 index 000000000000..307de91a53d1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/image.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-image', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapImageComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number { + return this._getOption('height'); + } + set height(value: number) { + this._setOption('height', value); + } + + @Input() + get url(): string | undefined { + return this._getOption('url'); + } + set url(value: string | undefined) { + this._setOption('url', value); + } + + @Input() + get width(): number { + return this._getOption('width'); + } + set width(value: number) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'image'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapImageComponent + ], + exports: [ + DxoVectorMapImageComponent + ], +}) +export class DxoVectorMapImageModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/index.ts b/packages/devextreme-angular/src/ui/vector-map/nested/index.ts new file mode 100644 index 000000000000..916412f491b2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/index.ts @@ -0,0 +1,21 @@ +export * from './annotation-dxi'; +export * from './background'; +export * from './border'; +export * from './common-annotation-settings'; +export * from './control-bar'; +export * from './export'; +export * from './font'; +export * from './image'; +export * from './label'; +export * from './layer-dxi'; +export * from './legend-dxi'; +export * from './loading-indicator'; +export * from './margin'; +export * from './projection'; +export * from './shadow'; +export * from './size'; +export * from './source'; +export * from './subtitle'; +export * from './title'; +export * from './tooltip'; + diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/label.ts b/packages/devextreme-angular/src/ui/vector-map/nested/label.ts new file mode 100644 index 000000000000..f44b08df656e --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/label.ts @@ -0,0 +1,89 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-label', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapLabelComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get dataField(): string { + return this._getOption('dataField'); + } + set dataField(value: string) { + this._setOption('dataField', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + + protected get _optionPath() { + return 'label'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapLabelComponent + ], + exports: [ + DxoVectorMapLabelComponent + ], +}) +export class DxoVectorMapLabelModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts b/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts new file mode 100644 index 000000000000..85b597378eb1 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts @@ -0,0 +1,295 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SingleMultipleOrNone } from 'devextreme/common'; +import { Font, Palette } from 'devextreme/common/charts'; +import { Store } from 'devextreme/data'; +import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source'; +import { VectorMapLayerType, VectorMapMarkerType } from 'devextreme/viz/vector_map'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-vector-map-layer', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiVectorMapLayerComponent extends CollectionNestedOption { + @Input() + get borderColor(): string { + return this._getOption('borderColor'); + } + set borderColor(value: string) { + this._setOption('borderColor', value); + } + + @Input() + get borderWidth(): number { + return this._getOption('borderWidth'); + } + set borderWidth(value: number) { + this._setOption('borderWidth', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get colorGroupingField(): string | undefined { + return this._getOption('colorGroupingField'); + } + set colorGroupingField(value: string | undefined) { + this._setOption('colorGroupingField', value); + } + + @Input() + get colorGroups(): Array { + return this._getOption('colorGroups'); + } + set colorGroups(value: Array) { + this._setOption('colorGroups', value); + } + + @Input() + get customize(): Function { + return this._getOption('customize'); + } + set customize(value: Function) { + this._setOption('customize', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get dataSource(): Store | DataSource | DataSourceOptions | any | null | string | Array { + return this._getOption('dataSource'); + } + set dataSource(value: Store | DataSource | DataSourceOptions | any | null | string | Array) { + this._setOption('dataSource', value); + } + + @Input() + get elementType(): VectorMapMarkerType { + return this._getOption('elementType'); + } + set elementType(value: VectorMapMarkerType) { + this._setOption('elementType', value); + } + + @Input() + get hoveredBorderColor(): string { + return this._getOption('hoveredBorderColor'); + } + set hoveredBorderColor(value: string) { + this._setOption('hoveredBorderColor', value); + } + + @Input() + get hoveredBorderWidth(): number { + return this._getOption('hoveredBorderWidth'); + } + set hoveredBorderWidth(value: number) { + this._setOption('hoveredBorderWidth', value); + } + + @Input() + get hoveredColor(): string { + return this._getOption('hoveredColor'); + } + set hoveredColor(value: string) { + this._setOption('hoveredColor', value); + } + + @Input() + get hoverEnabled(): boolean { + return this._getOption('hoverEnabled'); + } + set hoverEnabled(value: boolean) { + this._setOption('hoverEnabled', value); + } + + @Input() + get label(): { dataField?: string, enabled?: boolean, font?: Font } { + return this._getOption('label'); + } + set label(value: { dataField?: string, enabled?: boolean, font?: Font }) { + this._setOption('label', value); + } + + @Input() + get maxSize(): number { + return this._getOption('maxSize'); + } + set maxSize(value: number) { + this._setOption('maxSize', value); + } + + @Input() + get minSize(): number { + return this._getOption('minSize'); + } + set minSize(value: number) { + this._setOption('minSize', value); + } + + @Input() + get name(): string { + return this._getOption('name'); + } + set name(value: string) { + this._setOption('name', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + @Input() + get palette(): Palette | string | Array { + return this._getOption('palette'); + } + set palette(value: Palette | string | Array) { + this._setOption('palette', value); + } + + @Input() + get paletteIndex(): number { + return this._getOption('paletteIndex'); + } + set paletteIndex(value: number) { + this._setOption('paletteIndex', value); + } + + @Input() + get paletteSize(): number { + return this._getOption('paletteSize'); + } + set paletteSize(value: number) { + this._setOption('paletteSize', value); + } + + @Input() + get selectedBorderColor(): string { + return this._getOption('selectedBorderColor'); + } + set selectedBorderColor(value: string) { + this._setOption('selectedBorderColor', value); + } + + @Input() + get selectedBorderWidth(): number { + return this._getOption('selectedBorderWidth'); + } + set selectedBorderWidth(value: number) { + this._setOption('selectedBorderWidth', value); + } + + @Input() + get selectedColor(): string { + return this._getOption('selectedColor'); + } + set selectedColor(value: string) { + this._setOption('selectedColor', value); + } + + @Input() + get selectionMode(): SingleMultipleOrNone { + return this._getOption('selectionMode'); + } + set selectionMode(value: SingleMultipleOrNone) { + this._setOption('selectionMode', value); + } + + @Input() + get size(): number { + return this._getOption('size'); + } + set size(value: number) { + this._setOption('size', value); + } + + @Input() + get sizeGroupingField(): string | undefined { + return this._getOption('sizeGroupingField'); + } + set sizeGroupingField(value: string | undefined) { + this._setOption('sizeGroupingField', value); + } + + @Input() + get sizeGroups(): Array { + return this._getOption('sizeGroups'); + } + set sizeGroups(value: Array) { + this._setOption('sizeGroups', value); + } + + @Input() + get type(): VectorMapLayerType { + return this._getOption('type'); + } + set type(value: VectorMapLayerType) { + this._setOption('type', value); + } + + + protected get _optionPath() { + return 'layers'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiVectorMapLayerComponent + ], + exports: [ + DxiVectorMapLayerComponent + ], +}) +export class DxiVectorMapLayerModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts b/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts new file mode 100644 index 000000000000..91976393b992 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts @@ -0,0 +1,261 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, Orientation, Position, VerticalEdge } from 'devextreme/common'; +import { DashStyle, Font } from 'devextreme/common/charts'; +import { VectorMapMarkerShape } from 'devextreme/viz/vector_map'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxi-vector-map-legend', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxiVectorMapLegendComponent extends CollectionNestedOption { + @Input() + get backgroundColor(): string | undefined { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string | undefined) { + this._setOption('backgroundColor', value); + } + + @Input() + get border(): { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get columnCount(): number { + return this._getOption('columnCount'); + } + set columnCount(value: number) { + this._setOption('columnCount', value); + } + + @Input() + get columnItemSpacing(): number { + return this._getOption('columnItemSpacing'); + } + set columnItemSpacing(value: number) { + this._setOption('columnItemSpacing', value); + } + + @Input() + get customizeHint(): Function { + return this._getOption('customizeHint'); + } + set customizeHint(value: Function) { + this._setOption('customizeHint', value); + } + + @Input() + get customizeItems(): Function { + return this._getOption('customizeItems'); + } + set customizeItems(value: Function) { + this._setOption('customizeItems', value); + } + + @Input() + get customizeText(): Function { + return this._getOption('customizeText'); + } + set customizeText(value: Function) { + this._setOption('customizeText', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get itemsAlignment(): HorizontalAlignment | undefined { + return this._getOption('itemsAlignment'); + } + set itemsAlignment(value: HorizontalAlignment | undefined) { + this._setOption('itemsAlignment', value); + } + + @Input() + get itemTextPosition(): Position | undefined { + return this._getOption('itemTextPosition'); + } + set itemTextPosition(value: Position | undefined) { + this._setOption('itemTextPosition', value); + } + + @Input() + get margin(): number | { bottom?: number, left?: number, right?: number, top?: number } { + return this._getOption('margin'); + } + set margin(value: number | { bottom?: number, left?: number, right?: number, top?: number }) { + this._setOption('margin', value); + } + + @Input() + get markerColor(): string | undefined { + return this._getOption('markerColor'); + } + set markerColor(value: string | undefined) { + this._setOption('markerColor', value); + } + + @Input() + get markerShape(): VectorMapMarkerShape { + return this._getOption('markerShape'); + } + set markerShape(value: VectorMapMarkerShape) { + this._setOption('markerShape', value); + } + + @Input() + get markerSize(): number { + return this._getOption('markerSize'); + } + set markerSize(value: number) { + this._setOption('markerSize', value); + } + + @Input() + get markerTemplate(): any | undefined { + return this._getOption('markerTemplate'); + } + set markerTemplate(value: any | undefined) { + this._setOption('markerTemplate', value); + } + + @Input() + get orientation(): Orientation | undefined { + return this._getOption('orientation'); + } + set orientation(value: Orientation | undefined) { + this._setOption('orientation', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get rowCount(): number { + return this._getOption('rowCount'); + } + set rowCount(value: number) { + this._setOption('rowCount', value); + } + + @Input() + get rowItemSpacing(): number { + return this._getOption('rowItemSpacing'); + } + set rowItemSpacing(value: number) { + this._setOption('rowItemSpacing', value); + } + + @Input() + get source(): { grouping?: string, layer?: string } { + return this._getOption('source'); + } + set source(value: { grouping?: string, layer?: string }) { + this._setOption('source', value); + } + + @Input() + get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } { + return this._getOption('title'); + } + set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) { + this._setOption('title', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'legends'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + declarations: [ + DxiVectorMapLegendComponent + ], + exports: [ + DxiVectorMapLegendComponent + ], +}) +export class DxiVectorMapLegendModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/loading-indicator.ts b/packages/devextreme-angular/src/ui/vector-map/nested/loading-indicator.ts new file mode 100644 index 000000000000..c35c13a234bd --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/loading-indicator.ts @@ -0,0 +1,118 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter +} from '@angular/core'; + + + + +import { Font } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-loading-indicator', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapLoadingIndicatorComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get backgroundColor(): string { + return this._getOption('backgroundColor'); + } + set backgroundColor(value: string) { + this._setOption('backgroundColor', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get show(): boolean { + return this._getOption('show'); + } + set show(value: boolean) { + this._setOption('show', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() showChange: EventEmitter; + protected get _optionPath() { + return 'loadingIndicator'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + + this._createEventEmitters([ + { emit: 'showChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapLoadingIndicatorComponent + ], + exports: [ + DxoVectorMapLoadingIndicatorComponent + ], +}) +export class DxoVectorMapLoadingIndicatorModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/margin.ts b/packages/devextreme-angular/src/ui/vector-map/nested/margin.ts new file mode 100644 index 000000000000..557693634549 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/margin.ts @@ -0,0 +1,96 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-margin', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapMarginComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get bottom(): number { + return this._getOption('bottom'); + } + set bottom(value: number) { + this._setOption('bottom', value); + } + + @Input() + get left(): number { + return this._getOption('left'); + } + set left(value: number) { + this._setOption('left', value); + } + + @Input() + get right(): number { + return this._getOption('right'); + } + set right(value: number) { + this._setOption('right', value); + } + + @Input() + get top(): number { + return this._getOption('top'); + } + set top(value: number) { + this._setOption('top', value); + } + + + protected get _optionPath() { + return 'margin'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapMarginComponent + ], + exports: [ + DxoVectorMapMarginComponent + ], +}) +export class DxoVectorMapMarginModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/ng-package.json b/packages/devextreme-angular/src/ui/vector-map/nested/ng-package.json new file mode 100644 index 000000000000..3360c83b3395 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} \ No newline at end of file diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/projection.ts b/packages/devextreme-angular/src/ui/vector-map/nested/projection.ts new file mode 100644 index 000000000000..ebef20228cac --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/projection.ts @@ -0,0 +1,88 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-projection', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapProjectionComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get aspectRatio(): number { + return this._getOption('aspectRatio'); + } + set aspectRatio(value: number) { + this._setOption('aspectRatio', value); + } + + @Input() + get from(): Function { + return this._getOption('from'); + } + set from(value: Function) { + this._setOption('from', value); + } + + @Input() + get to(): Function { + return this._getOption('to'); + } + set to(value: Function) { + this._setOption('to', value); + } + + + protected get _optionPath() { + return 'projection'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapProjectionComponent + ], + exports: [ + DxoVectorMapProjectionComponent + ], +}) +export class DxoVectorMapProjectionModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/shadow.ts b/packages/devextreme-angular/src/ui/vector-map/nested/shadow.ts new file mode 100644 index 000000000000..888685d00cd2 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/shadow.ts @@ -0,0 +1,104 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-shadow', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapShadowComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get blur(): number { + return this._getOption('blur'); + } + set blur(value: number) { + this._setOption('blur', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get offsetX(): number { + return this._getOption('offsetX'); + } + set offsetX(value: number) { + this._setOption('offsetX', value); + } + + @Input() + get offsetY(): number { + return this._getOption('offsetY'); + } + set offsetY(value: number) { + this._setOption('offsetY', value); + } + + @Input() + get opacity(): number { + return this._getOption('opacity'); + } + set opacity(value: number) { + this._setOption('opacity', value); + } + + + protected get _optionPath() { + return 'shadow'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapShadowComponent + ], + exports: [ + DxoVectorMapShadowComponent + ], +}) +export class DxoVectorMapShadowModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/size.ts b/packages/devextreme-angular/src/ui/vector-map/nested/size.ts new file mode 100644 index 000000000000..dd5bacf733bc --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/size.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-size', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapSizeComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get height(): number | undefined { + return this._getOption('height'); + } + set height(value: number | undefined) { + this._setOption('height', value); + } + + @Input() + get width(): number | undefined { + return this._getOption('width'); + } + set width(value: number | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'size'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapSizeComponent + ], + exports: [ + DxoVectorMapSizeComponent + ], +}) +export class DxoVectorMapSizeModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/source.ts b/packages/devextreme-angular/src/ui/vector-map/nested/source.ts new file mode 100644 index 000000000000..64b95d8bf37c --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/source.ts @@ -0,0 +1,80 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-source', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapSourceComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get grouping(): string { + return this._getOption('grouping'); + } + set grouping(value: string) { + this._setOption('grouping', value); + } + + @Input() + get layer(): string { + return this._getOption('layer'); + } + set layer(value: string) { + this._setOption('layer', value); + } + + + protected get _optionPath() { + return 'source'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapSourceComponent + ], + exports: [ + DxoVectorMapSourceComponent + ], +}) +export class DxoVectorMapSourceModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts b/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts new file mode 100644 index 000000000000..20228966a21b --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts @@ -0,0 +1,105 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-subtitle', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapSubtitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get offset(): number { + return this._getOption('offset'); + } + set offset(value: number) { + this._setOption('offset', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'subtitle'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapSubtitleComponent + ], + exports: [ + DxoVectorMapSubtitleComponent + ], +}) +export class DxoVectorMapSubtitleModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/title.ts b/packages/devextreme-angular/src/ui/vector-map/nested/title.ts new file mode 100644 index 000000000000..9b5180195ee0 --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/title.ts @@ -0,0 +1,138 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { HorizontalAlignment, VerticalEdge } from 'devextreme/common'; +import { Font, TextOverflow, WordWrap } from 'devextreme/common/charts'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-title', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapTitleComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment | undefined { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment | undefined) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get margin(): { bottom?: number, left?: number, right?: number, top?: number } | number { + return this._getOption('margin'); + } + set margin(value: { bottom?: number, left?: number, right?: number, top?: number } | number) { + this._setOption('margin', value); + } + + @Input() + get placeholderSize(): number | undefined { + return this._getOption('placeholderSize'); + } + set placeholderSize(value: number | undefined) { + this._setOption('placeholderSize', value); + } + + @Input() + get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } { + return this._getOption('subtitle'); + } + set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) { + this._setOption('subtitle', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get verticalAlignment(): VerticalEdge { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalEdge) { + this._setOption('verticalAlignment', value); + } + + @Input() + get textOverflow(): TextOverflow { + return this._getOption('textOverflow'); + } + set textOverflow(value: TextOverflow) { + this._setOption('textOverflow', value); + } + + @Input() + get wordWrap(): WordWrap { + return this._getOption('wordWrap'); + } + set wordWrap(value: WordWrap) { + this._setOption('wordWrap', value); + } + + + protected get _optionPath() { + return 'title'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapTitleComponent + ], + exports: [ + DxoVectorMapTitleComponent + ], +}) +export class DxoVectorMapTitleModule { } diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/tooltip.ts b/packages/devextreme-angular/src/ui/vector-map/nested/tooltip.ts new file mode 100644 index 000000000000..994d41a3120c --- /dev/null +++ b/packages/devextreme-angular/src/ui/vector-map/nested/tooltip.ts @@ -0,0 +1,178 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { DashStyle, Font } from 'devextreme/common/charts'; +import { UserDefinedElement } from 'devextreme/core/element'; + +import { + NestedOptionHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-vector-map-tooltip', + template: '', + styles: [''], + providers: [NestedOptionHost] +}) +export class DxoVectorMapTooltipComponent extends NestedOption implements OnDestroy, OnInit { + @Input() + get arrowLength(): number { + return this._getOption('arrowLength'); + } + set arrowLength(value: number) { + this._setOption('arrowLength', value); + } + + @Input() + get border(): { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number } { + return this._getOption('border'); + } + set border(value: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }) { + this._setOption('border', value); + } + + @Input() + get color(): string { + return this._getOption('color'); + } + set color(value: string) { + this._setOption('color', value); + } + + @Input() + get container(): UserDefinedElement | string | undefined { + return this._getOption('container'); + } + set container(value: UserDefinedElement | string | undefined) { + this._setOption('container', value); + } + + @Input() + get contentTemplate(): any | undefined { + return this._getOption('contentTemplate'); + } + set contentTemplate(value: any | undefined) { + this._setOption('contentTemplate', value); + } + + @Input() + get cornerRadius(): number { + return this._getOption('cornerRadius'); + } + set cornerRadius(value: number) { + this._setOption('cornerRadius', value); + } + + @Input() + get customizeTooltip(): Function | undefined { + return this._getOption('customizeTooltip'); + } + set customizeTooltip(value: Function | undefined) { + this._setOption('customizeTooltip', value); + } + + @Input() + get enabled(): boolean { + return this._getOption('enabled'); + } + set enabled(value: boolean) { + this._setOption('enabled', value); + } + + @Input() + get font(): Font { + return this._getOption('font'); + } + set font(value: Font) { + this._setOption('font', value); + } + + @Input() + get opacity(): number | undefined { + return this._getOption('opacity'); + } + set opacity(value: number | undefined) { + this._setOption('opacity', value); + } + + @Input() + get paddingLeftRight(): number { + return this._getOption('paddingLeftRight'); + } + set paddingLeftRight(value: number) { + this._setOption('paddingLeftRight', value); + } + + @Input() + get paddingTopBottom(): number { + return this._getOption('paddingTopBottom'); + } + set paddingTopBottom(value: number) { + this._setOption('paddingTopBottom', value); + } + + @Input() + get shadow(): { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number } { + return this._getOption('shadow'); + } + set shadow(value: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }) { + this._setOption('shadow', value); + } + + @Input() + get zIndex(): number | undefined { + return this._getOption('zIndex'); + } + set zIndex(value: number | undefined) { + this._setOption('zIndex', value); + } + + + protected get _optionPath() { + return 'tooltip'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + declarations: [ + DxoVectorMapTooltipComponent + ], + exports: [ + DxoVectorMapTooltipComponent + ], +}) +export class DxoVectorMapTooltipModule { } From c1713e653732bbd0e0d6471430c4b173c67d4556 Mon Sep 17 00:00:00 2001 From: alexlavrov Date: Thu, 15 Aug 2024 10:54:28 +0400 Subject: [PATCH 4/5] Fix umd maps for nested components --- apps/demos/configs/Angular/config.js | 1 + apps/demos/utils/bundle/index.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/demos/configs/Angular/config.js b/apps/demos/configs/Angular/config.js index cbad525f76a0..6d3a1a8e87f1 100644 --- a/apps/demos/configs/Angular/config.js +++ b/apps/demos/configs/Angular/config.js @@ -176,6 +176,7 @@ window.config = { 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; + acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`; return acc; }, {}), diff --git a/apps/demos/utils/bundle/index.js b/apps/demos/utils/bundle/index.js index 4f9d346fc5dd..beef028630e9 100644 --- a/apps/demos/utils/bundle/index.js +++ b/apps/demos/utils/bundle/index.js @@ -143,7 +143,7 @@ const prepareConfigs = (framework)=> { 'devextreme-angular/core': `${bundlesRoot}/devextreme-angular-core.umd.js`, ...componentNames.reduce((items, item) => { // eslint-disable-next-line no-param-reassign - items[`devextreme-angular/ui/${item}`] = `${bundlesRoot}/devextreme-angular-ui-${item}.umd.js`; + items[`devextreme-angular/ui/${item.replace('-nested', '/nested')}`] = `${bundlesRoot}/devextreme-angular-ui-${item}.umd.js`; return items; }, {}), }; @@ -151,7 +151,7 @@ const prepareConfigs = (framework)=> { modulesMap = { ...componentNames.reduce((items, item) => { // eslint-disable-next-line no-param-reassign - items[`devextreme-angular/ui/${item}`] = `${bundlesRoot}/devextreme-angular-ui-${item}.umd.js`; + items[`devextreme-angular/ui/${item.replace('-nested', '/nested')}`] = `${bundlesRoot}/devextreme-angular-ui-${item}.umd.js`; return items; }, {}), }; From ad87749dab52cb558a99f92d310d38e501814cb3 Mon Sep 17 00:00:00 2001 From: alexlavrov Date: Thu, 5 Sep 2024 10:44:52 +0400 Subject: [PATCH 5/5] Check if console exists --- packages/devextreme-angular/src/core/component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/devextreme-angular/src/core/component.ts b/packages/devextreme-angular/src/core/component.ts index 800a2629d4c1..81f99fa473f0 100644 --- a/packages/devextreme-angular/src/core/component.ts +++ b/packages/devextreme-angular/src/core/component.ts @@ -294,7 +294,9 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo checkContentChildren(propertyName: string, items: QueryList, className: string) { if (this.contentChildren[propertyName]) { if (items.length > 0) { - console.warn(`In ${this.constructor.name}, the nested ${className} and ${this.contentChildren[propertyName]} components are incompatible. Ensure that all nested components in the content area match.`); + if (console && console.warn) { + console.warn(`In ${this.constructor.name}, the nested ${className} and ${this.contentChildren[propertyName]} components are incompatible. Ensure that all nested components in the content area match.`); + } } return false; }