diff --git a/src/app/layouts/header/export-popup/export-popup.component.ts b/src/app/layouts/header/export-popup/export-popup.component.ts index b0d1d185..137093a5 100644 --- a/src/app/layouts/header/export-popup/export-popup.component.ts +++ b/src/app/layouts/header/export-popup/export-popup.component.ts @@ -38,7 +38,7 @@ export class ExportPopupComponent implements OnInit { mainWidgets: string[] = ['Scheduler', 'Diagram', 'Gantt', 'DataGrid', 'PivotGrid', 'TreeList']; widgetGroups: any[] = [{ group: 'Navigation and Layout', - widgets: ['Tabs', 'Toolbar', 'Menu', 'TreeView', 'TileView', 'Accordion', 'ContextMenu', 'TabPanel', 'MultiView', 'Drawer', 'Box', 'ResponsiveBox'] + widgets: ['Tabs', 'Toolbar', 'Menu', 'TreeView', 'TileView', 'Accordion', 'ContextMenu', 'TabPanel', 'MultiView', 'Drawer', 'Box', 'ResponsiveBox', 'Splitter'] }, { group: 'Forms and Editors', widgets: ['Form', 'CheckBox', 'Calendar', 'Validation', 'Switch', 'TextBox', 'DropDownBox', 'Autocomplete', 'DateBox', 'DateRangeBox', 'SelectBox', 'NumberBox', 'Slider', 'RangeSlider', 'Lookup', 'TagBox', 'RadioGroup', 'ColorBox', 'HtmlEditor'] diff --git a/src/app/left-menu/left-menu.aliases.ts b/src/app/left-menu/left-menu.aliases.ts index 5bd6d6f4..7b80eba2 100644 --- a/src/app/left-menu/left-menu.aliases.ts +++ b/src/app/left-menu/left-menu.aliases.ts @@ -145,6 +145,11 @@ export class LeftMenuAlias { equivalents: 'ListView, TableView, ListBox, dxList, dx-list', regs: [/list-/i], route: 'list' + }, { + name: 'Splitter', + equivalents: 'Splitter, dxSplitter, dx-splitter', + regs: [/splitter-/i], + route: 'splitter' }, { name: 'Accordion', equivalents: 'dxAccordion, dx-accordion', diff --git a/src/app/preview/preview.module.ts b/src/app/preview/preview.module.ts index 10065ec4..4cebbca8 100644 --- a/src/app/preview/preview.module.ts +++ b/src/app/preview/preview.module.ts @@ -20,6 +20,7 @@ import { PivotgridComponent } from './pivotgrid/pivotgrid.component'; import { ProgressbarComponent } from './progressbar/progressbar.component'; import { SchedulerComponent } from './scheduler/scheduler.component'; import { ScrollviewComponent } from './scrollview/scrollview.component'; +import { SplitterComponent } from './splitter/splitter.component'; import { SlidersComponent } from './sliders/sliders.component'; import { TabsComponent } from './tabs/tabs.component'; import { ToolbarComponent } from './toolbar/toolbar.component'; @@ -55,6 +56,7 @@ import { ButtonDetailedComponent } from './button-detailed/button-detailed.compo ProgressbarComponent, SchedulerComponent, ScrollviewComponent, + SplitterComponent, TreelistComponent, SlidersComponent, WizardComponent, @@ -82,6 +84,7 @@ import { ButtonDetailedComponent } from './button-detailed/button-detailed.compo ProgressbarComponent, SchedulerComponent, ScrollviewComponent, + SplitterComponent, TreelistComponent, SlidersComponent, WizardComponent, diff --git a/src/app/preview/preview/preview.component.html b/src/app/preview/preview/preview.component.html index eb9702e0..2a3357a3 100644 --- a/src/app/preview/preview/preview.component.html +++ b/src/app/preview/preview/preview.component.html @@ -72,6 +72,14 @@

List

+
+

Splitter

+
+ + +
+
+

Filter Builder

diff --git a/src/app/preview/splitter/splitter.component.css b/src/app/preview/splitter/splitter.component.css new file mode 100644 index 00000000..1d0d1d3b --- /dev/null +++ b/src/app/preview/splitter/splitter.component.css @@ -0,0 +1,27 @@ + +::ng-deep #splitter { + border: 1px solid var(--dx-color-border); + overflow: hidden; +} + +::ng-deep .pane-content { + padding: 12px; +} + +::ng-deep .pane-title { + font-weight: 600; + margin-bottom: 2px; +} + +::ng-deep .pane-state { + font-size: 12px; + font-weight: 400; + color: rgba(51, 51, 51, 0.7); + margin-bottom: 4px; +} + +::ng-deep .pane-option { + color: rgba(51, 51, 51, 1); + font-size: 14px; + font-weight: 600; +} diff --git a/src/app/preview/splitter/splitter.component.html b/src/app/preview/splitter/splitter.component.html new file mode 100644 index 00000000..c605387e --- /dev/null +++ b/src/app/preview/splitter/splitter.component.html @@ -0,0 +1,145 @@ +
+ + + + + + + + + + + +
+ + +
+ + + + +
+ + +
+ + + + +
{{ title }}
+
{{ getPaneState(data) }}
+ + + + + + + + + + + + + + + + +
+ + +
+ + + + + +
+ + +
+ + + + + + +
+ + +
+ + + + +
{{ title }}
+
{{ getPaneState(data) }}
+ + + diff --git a/src/app/preview/splitter/splitter.component.ts b/src/app/preview/splitter/splitter.component.ts new file mode 100644 index 00000000..2fbf862a --- /dev/null +++ b/src/app/preview/splitter/splitter.component.ts @@ -0,0 +1,50 @@ +import { Component, OnDestroy } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +interface PaneContentTemplate { + name: string; + data?: any; +} + +@Component({ + selector: 'app-splitter', + templateUrl: './splitter.component.html', + styleUrls: ['./splitter.component.css'] +}) +export class SplitterComponent implements OnDestroy { + isExpanded = new BehaviorSubject(false); + widgetGroup = 'splitter'; + dimensionOptions = new Set(['size', 'minSize', 'maxSize']); + + paneContentTemplates: PaneContentTemplate[] = [ + { name: 'Left Pane' }, + { name: 'Central Pane' }, + { name: 'Right Pane' }, + { name: 'Nested Left Pane' }, + { name: 'Nested Central Pane' }, + { name: 'Nested Right Pane' }, + { name: 'Nested Top Pane' }, + { name: 'Nested Bottom Pane' } + ]; + + getPaneState(data: any): string { + if(data.resizable !== false && !data.collapsible) { + return 'Resizable only'; + } + const resizableText = data.resizable ? 'Resizable' : 'Non-resizable'; + const collapsibleText = data.collapsible ? 'collapsible' : 'non-collapsible'; + + return `${resizableText} and ${collapsibleText}`; + } + + filterDimensionOptions(data: any): { key: string; value: any }[] { + return Object.entries(data) + .reverse() + .filter(([key]) => this.dimensionOptions.has(key)) + .map(([key, value]) => ({ key, value })); + } + + ngOnDestroy(): void { + this.isExpanded.unsubscribe(); + } +}