make ToolbarItem type simple

DevExpress · Mar 5, 2025 · 8ba9760 · 8ba9760
1 parent 4683ad8
commit 8ba9760
Show file tree

Hide file tree

Showing 16 changed files with 1,185 additions and 112 deletions.
diff --git a/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts b/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
@@ -18,7 +18,7 @@ import { ButtonItem, EmptyItem, FormItemComponent, FormItemType, GroupItem, Labe
 import { GanttPredefinedContextMenuItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt';
 import { HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
 import { dxMenuItem } from 'devextreme/ui/menu';
-import { SchedulerPredefinedToolbarItem } from 'devextreme/ui/scheduler';
+import { DateNavigatorItemProperties, SchedulerPredefinedToolbarItem } from 'devextreme/ui/scheduler';
 import { Properties as dxSplitterOptions } from 'devextreme/ui/splitter';
 import { Properties as dxTabPanelOptions } from 'devextreme/ui/tab_panel';
 import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar';
@@ -393,10 +393,10 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('menuItemTemplate', value);
     }
 
-    get options(): any {
+    get options(): any | DateNavigatorItemProperties {
         return this._getOption('options');
     }
-    set options(value: any) {
+    set options(value: any | DateNavigatorItemProperties) {
         this._setOption('options', value);
     }
 

diff --git a/packages/devextreme-angular/src/ui/nested/base/button-options.ts b/packages/devextreme-angular/src/ui/nested/base/button-options.ts
@@ -5,8 +5,10 @@ import {
     Component,
 } from '@angular/core';
 
-import { ButtonStyle, ButtonType } from 'devextreme/common';
+import { ButtonStyle, ButtonType, SingleMultipleOrNone } from 'devextreme/common';
 import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button';
+import { dxButtonGroupItem, ItemClickEvent, SelectionChangedEvent } from 'devextreme/ui/button_group';
+import { SchedulerPredefinedDateNavigatorItem } from 'devextreme/ui/scheduler';
 
 @Component({
     template: ''
@@ -179,4 +181,60 @@ export abstract class DxoButtonOptions extends NestedOption {
     set width(value: number | Function | string | undefined) {
         this._setOption('width', value);
     }
+
+    get buttonTemplate(): any {
+        return this._getOption('buttonTemplate');
+    }
+    set buttonTemplate(value: any) {
+        this._setOption('buttonTemplate', value);
+    }
+
+    get items(): Array<dxButtonGroupItem | SchedulerPredefinedDateNavigatorItem> {
+        return this._getOption('items');
+    }
+    set items(value: Array<dxButtonGroupItem | SchedulerPredefinedDateNavigatorItem>) {
+        this._setOption('items', value);
+    }
+
+    get keyExpr(): Function | string {
+        return this._getOption('keyExpr');
+    }
+    set keyExpr(value: Function | string) {
+        this._setOption('keyExpr', value);
+    }
+
+    get onItemClick(): ((e: ItemClickEvent) => void) {
+        return this._getOption('onItemClick');
+    }
+    set onItemClick(value: ((e: ItemClickEvent) => void)) {
+        this._setOption('onItemClick', value);
+    }
+
+    get onSelectionChanged(): ((e: SelectionChangedEvent) => void) {
+        return this._getOption('onSelectionChanged');
+    }
+    set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) {
+        this._setOption('onSelectionChanged', value);
+    }
+
+    get selectedItemKeys(): Array<any> {
+        return this._getOption('selectedItemKeys');
+    }
+    set selectedItemKeys(value: Array<any>) {
+        this._setOption('selectedItemKeys', value);
+    }
+
+    get selectedItems(): Array<any> {
+        return this._getOption('selectedItems');
+    }
+    set selectedItems(value: Array<any>) {
+        this._setOption('selectedItems', value);
+    }
+
+    get selectionMode(): SingleMultipleOrNone {
+        return this._getOption('selectionMode');
+    }
+    set selectionMode(value: SingleMultipleOrNone) {
+        this._setOption('selectionMode', value);
+    }
 }
diff --git a/packages/devextreme-angular/src/ui/nested/base/data-grid-toolbar.ts b/packages/devextreme-angular/src/ui/nested/base/data-grid-toolbar.ts
@@ -11,7 +11,7 @@ import { DataGridPredefinedToolbarItem, dxDataGridToolbarItem } from 'devextreme
 import { dxFileManagerToolbarItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager';
 import { dxGanttToolbarItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt';
 import { dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
-import { SchedulerPredefinedToolbarItem } from 'devextreme/ui/scheduler';
+import { DateNavigatorItemProperties, SchedulerPredefinedToolbarItem } from 'devextreme/ui/scheduler';
 import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar';
 import { dxTreeListToolbarItem, TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list';
 
@@ -26,10 +26,10 @@ export abstract class DxoDataGridToolbar extends NestedOption {
         this._setOption('disabled', value);
     }
 
-    get items(): Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | SchedulerPredefinedToolbarItem | any | { cssClass?: string | undefined, disabled?: boolean, html?: string, locateInMenu?: LocateInMenuMode, location?: ToolbarItemLocation, menuItemTemplate?: any, name?: SchedulerPredefinedToolbarItem, options?: any, showText?: ShowTextMode, template?: any, text?: string, visible?: boolean, widget?: ToolbarItemComponent } | dxTreeListToolbarItem | TreeListPredefinedToolbarItem> {
+    get items(): Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | SchedulerPredefinedToolbarItem | any | { cssClass?: string | undefined, disabled?: boolean, html?: string, locateInMenu?: LocateInMenuMode, location?: ToolbarItemLocation, menuItemTemplate?: any, name?: SchedulerPredefinedToolbarItem, options?: DateNavigatorItemProperties | any, showText?: ShowTextMode, template?: any, text?: string, visible?: boolean, widget?: ToolbarItemComponent } | dxTreeListToolbarItem | TreeListPredefinedToolbarItem> {
         return this._getOption('items');
     }
-    set items(value: Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | SchedulerPredefinedToolbarItem | any | { cssClass?: string | undefined, disabled?: boolean, html?: string, locateInMenu?: LocateInMenuMode, location?: ToolbarItemLocation, menuItemTemplate?: any, name?: SchedulerPredefinedToolbarItem, options?: any, showText?: ShowTextMode, template?: any, text?: string, visible?: boolean, widget?: ToolbarItemComponent } | dxTreeListToolbarItem | TreeListPredefinedToolbarItem>) {
+    set items(value: Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | SchedulerPredefinedToolbarItem | any | { cssClass?: string | undefined, disabled?: boolean, html?: string, locateInMenu?: LocateInMenuMode, location?: ToolbarItemLocation, menuItemTemplate?: any, name?: SchedulerPredefinedToolbarItem, options?: DateNavigatorItemProperties | any, showText?: ShowTextMode, template?: any, text?: string, visible?: boolean, widget?: ToolbarItemComponent } | dxTreeListToolbarItem | TreeListPredefinedToolbarItem>) {
         this._setOption('items', value);
     }
 

diff --git a/packages/devextreme-angular/src/ui/nested/options.ts b/packages/devextreme-angular/src/ui/nested/options.ts
@@ -8,7 +8,12 @@ import {
     OnDestroy,
     NgModule,
     Host,
-    SkipSelf
+    SkipSelf,
+    Output,
+    EventEmitter,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 
@@ -19,6 +24,7 @@ import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
 import { DxoButtonOptions } from './base/button-options';
+import { DxiItemComponent } from './item-dxi';
 
 
 @Component({
@@ -50,19 +56,54 @@ import { DxoButtonOptions } from './base/button-options';
         'useSubmitBehavior',
         'validationGroup',
         'visible',
-        'width'
+        'width',
+        'buttonTemplate',
+        'items',
+        'keyExpr',
+        'onItemClick',
+        'onSelectionChanged',
+        'selectedItemKeys',
+        'selectedItems',
+        'selectionMode'
     ]
 })
 export class DxoOptionsComponent extends DxoButtonOptions implements OnDestroy, OnInit  {
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() selectedItemKeysChange: EventEmitter<Array<any>>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() selectedItemsChange: EventEmitter<Array<any>>;
     protected get _optionPath() {
         return 'options';
     }
 
 
+    @ContentChildren(forwardRef(() => DxiItemComponent))
+    get itemsChildren(): QueryList<DxiItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost) {
         super();
+
+        this._createEventEmitters([
+            { emit: 'selectedItemKeysChange' },
+            { emit: 'selectedItemsChange' }
+        ]);
+
         parentOptionHost.setNestedOption(this);
         optionHost.setHost(this, this._fullOptionPath.bind(this));
     }

diff --git a/packages/devextreme-angular/src/ui/scheduler/index.ts b/packages/devextreme-angular/src/ui/scheduler/index.ts
@@ -51,14 +51,18 @@ import { DxiResourceModule } from 'devextreme-angular/ui/nested';
 import { DxoScrollingModule } from 'devextreme-angular/ui/nested';
 import { DxoToolbarModule } from 'devextreme-angular/ui/nested';
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
+import { DxoOptionsModule } 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 { DxiSchedulerItemModule } from 'devextreme-angular/ui/scheduler/nested';
+import { DxoSchedulerOptionsModule } from 'devextreme-angular/ui/scheduler/nested';
+import { DxiSchedulerOptionsItemModule } from 'devextreme-angular/ui/scheduler/nested';
 import { DxiSchedulerResourceModule } from 'devextreme-angular/ui/scheduler/nested';
 import { DxoSchedulerScrollingModule } from 'devextreme-angular/ui/scheduler/nested';
 import { DxoSchedulerToolbarModule } from 'devextreme-angular/ui/scheduler/nested';
+import { DxiSchedulerToolbarItemModule } from 'devextreme-angular/ui/scheduler/nested';
 import { DxiSchedulerViewModule } from 'devextreme-angular/ui/scheduler/nested';
 
 import { DxiResourceComponent } from 'devextreme-angular/ui/nested';
@@ -1639,13 +1643,17 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     DxoScrollingModule,
     DxoToolbarModule,
     DxiItemModule,
+    DxoOptionsModule,
     DxiViewModule,
     DxoSchedulerAppointmentDraggingModule,
     DxoSchedulerEditingModule,
     DxiSchedulerItemModule,
+    DxoSchedulerOptionsModule,
+    DxiSchedulerOptionsItemModule,
     DxiSchedulerResourceModule,
     DxoSchedulerScrollingModule,
     DxoSchedulerToolbarModule,
+    DxiSchedulerToolbarItemModule,
     DxiSchedulerViewModule,
     DxIntegrationModule,
     DxTemplateModule
@@ -1661,13 +1669,17 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     DxoScrollingModule,
     DxoToolbarModule,
     DxiItemModule,
+    DxoOptionsModule,
     DxiViewModule,
     DxoSchedulerAppointmentDraggingModule,
     DxoSchedulerEditingModule,
     DxiSchedulerItemModule,
+    DxoSchedulerOptionsModule,
+    DxiSchedulerOptionsItemModule,
     DxiSchedulerResourceModule,
     DxoSchedulerScrollingModule,
     DxoSchedulerToolbarModule,
+    DxiSchedulerToolbarItemModule,
     DxiSchedulerViewModule,
     DxTemplateModule
   ]

diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/index.ts b/packages/devextreme-angular/src/ui/scheduler/nested/index.ts
@@ -1,8 +1,11 @@
 export * from './appointment-dragging';
 export * from './editing';
 export * from './item-dxi';
+export * from './options-item-dxi';
+export * from './options';
 export * from './resource-dxi';
 export * from './scrolling';
+export * from './toolbar-item-dxi';
 export * from './toolbar';
 export * from './view-dxi';
 
diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/scheduler/nested/item-dxi.ts
@@ -17,8 +17,8 @@ import { DOCUMENT } from '@angular/common';
 
 
 import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar';
-import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common';
-import { SchedulerPredefinedToolbarItem } from 'devextreme/ui/scheduler';
+import { ToolbarItemLocation, ToolbarItemComponent, ButtonType } from 'devextreme/common';
+import { SchedulerPredefinedToolbarItem, DateNavigatorItemProperties } from 'devextreme/ui/scheduler';
 
 import {
     NestedOptionHost,
@@ -95,10 +95,10 @@ export class DxiSchedulerItemComponent extends CollectionNestedOption implements
     }
 
     @Input()
-    get options(): Record<string, any> {
+    get options(): DateNavigatorItemProperties | Record<string, any> {
         return this._getOption('options');
     }
-    set options(value: Record<string, any>) {
+    set options(value: DateNavigatorItemProperties | Record<string, any>) {
         this._setOption('options', value);
     }
 
@@ -142,6 +142,38 @@ export class DxiSchedulerItemComponent extends CollectionNestedOption implements
         this._setOption('widget', value);
     }
 
+    @Input()
+    get elementAttr(): Record<string, any> {
+        return this._getOption('elementAttr');
+    }
+    set elementAttr(value: Record<string, 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 type(): ButtonType {
+        return this._getOption('type');
+    }
+    set type(value: ButtonType) {
+        this._setOption('type', value);
+    }
+
 
     protected get _optionPath() {
         return 'items';