Add splitter (#227)

src/app/layouts/header/export-popup/export-popup.component.ts

@@ -36,9 +36,9 @@
     viewIndex = 0;
 
     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']
@@ -84,14 +84,14 @@
         this.viewIndex = index;
     }
 
     selectGroup(e: any, groupItems: WidgetData[]): void {
         if(e.event === undefined) return;
         groupItems.forEach((item) => {
             item.selected = e.value;
         });
     }
 
     selectAll(e: any): void {
         if(e.event === undefined) return;
 
         const select = (item: WidgetData, value: boolean): boolean => item.selected = value;
@@ -159,7 +159,7 @@
                `dx.${this.importService.getThemeName()}.${this.schemeName}`;
     }
 
     validate(): any {
         return validationEngine.validateGroup();
     }
 

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',

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,

src/app/preview/preview/preview.component.html

@@ -72,6 +72,14 @@ <h1 class="component-title">List</h1>
             </div>
         </div>
 
+        <div class="component-item component-item--half">
+            <h1 class="component-title">Splitter</h1>
+            <div class="component-display">
+                <app-button-detailed widget="splitter" [currentWidget]="widgetName" (clicked)="buttonDetailedClick($event)"></app-button-detailed>
+                <app-splitter #widget></app-splitter>
+            </div>
+        </div>
+
         <div class="component-item component-item--half">
             <h1 class="component-title">Filter Builder</h1>
             <div class="component-display">

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;
+}

src/app/preview/splitter/splitter.component.html

@@ -0,0 +1,145 @@
+<div *ngIf="isExpanded.getValue(); then expandedBlock; else collapsedBlock"></div>
+
+<ng-template #collapsedBlock>
+  <dx-splitter id="splitter">
+    <dxi-item
+      [resizable]="true"
+      template="Left Pane"
+    ></dxi-item>
+
+    <dxi-item [resizable]="true">
+      <dx-splitter orientation="vertical">
+        <dxi-item
+          [resizable]="true"
+          [collapsible]="true"
+          template="Nested Top Pane"
+        ></dxi-item>
+        <dxi-item
+          [resizable]="true"
+          [collapsible]="true"
+          template="Nested Bottom Pane"
+        ></dxi-item>
+
+        <ng-container *ngFor="let pane of paneContentTemplates">
+          <div
+            *dxTemplate="let data of pane.name"
+            class="pane-content"
+            tabindex="0"
+          >
+            <ng-template
+              [ngTemplateOutlet]="customPaneTemplate"
+              [ngTemplateOutletContext]="{ data: data, title: pane.name }"
+            >
+            </ng-template>
+          </div>
+        </ng-container>
+      </dx-splitter>
+    </dxi-item>
+    <ng-container *ngFor="let pane of paneContentTemplates">
+      <div *dxTemplate="let data of pane.name" class="pane-content" tabindex="0">
+        <ng-template
+          [ngTemplateOutlet]="customPaneTemplate"
+          [ngTemplateOutletContext]="{ data: data, title: pane.name }"
+        >
+        </ng-template>
+      </div>
+    </ng-container>
+  </dx-splitter>
+
+  <ng-template #customPaneTemplate let-data="data" let-title="title">
+    <div class="pane-title">{{ title }}</div>
+    <div class="pane-state">{{ getPaneState(data) }}</div>
+  </ng-template>
+</ng-template>
+
+<ng-template #expandedBlock>
+  <dx-splitter
+    id="splitter"
+    height="320px"
+  >
+    <dxi-item
+      [resizable]="true"
+      size="240px"
+      template="Left Pane"
+    ></dxi-item>
+    <dxi-item [resizable]="true">
+      <dx-splitter orientation="vertical">
+        <dxi-item
+          [resizable]="true"
+          [collapsible]="true"
+          template="Central Pane"
+        ></dxi-item>
+        <dxi-item [resizable]="true" [collapsible]="true">
+          <dx-splitter>
+            <dxi-item
+              [resizable]="true"
+              [collapsible]="true"
+              size="30%"
+              template="Nested Left Pane"
+            ></dxi-item>
+            <dxi-item
+              [resizable]="true"
+              template="Nested Central Pane"
+            ></dxi-item>
+            <dxi-item
+              [resizable]="true"
+              [collapsible]="true"
+              size="30%"
+              template="Nested Right Pane"
+            ></dxi-item>
+
+            <ng-container *ngFor="let pane of paneContentTemplates">
+              <div
+                *dxTemplate="let data of pane.name"
+                class="pane-content"
+                tabindex="0"
+              >
+                <ng-template
+                  [ngTemplateOutlet]="customPaneTemplate"
+                  [ngTemplateOutletContext]="{ data: data, title: pane.name }"
+                >
+                </ng-template>
+              </div>
+            </ng-container>
+          </dx-splitter>
+        </dxi-item>
+
+        <ng-container *ngFor="let pane of paneContentTemplates">
+          <div
+            *dxTemplate="let data of pane.name"
+            class="pane-content"
+            tabindex="0"
+          >
+            <ng-template
+              [ngTemplateOutlet]="customPaneTemplate"
+              [ngTemplateOutletContext]="{ data: data, title: pane.name }"
+            >
+            </ng-template>
+          </div>
+        </ng-container>
+      </dx-splitter>
+    </dxi-item>
+    <dxi-item
+      [resizable]="false"
+      [collapsible]="false"
+      size="240px"
+      template="Right Pane"
+    ></dxi-item>
+
+    <ng-container *ngFor="let pane of paneContentTemplates">
+      <div *dxTemplate="let data of pane.name" class="pane-content" tabindex="0">
+        <ng-template
+          [ngTemplateOutlet]="customPaneTemplate"
+          [ngTemplateOutletContext]="{ data: data, title: pane.name }"
+        >
+        </ng-template>
+      </div>
+    </ng-container>
+  </dx-splitter>
+
+  <ng-template #customPaneTemplate let-data="data" let-title="title">
+    <div class="pane-title">{{ title }}</div>
+    <div class="pane-state">{{ getPaneState(data) }}</div>
+  </ng-template>
+
+</ng-template>

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<boolean>(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();
+    }
+}