Add splitter

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,28 @@
+
+::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,148 @@
+<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"
+          maxSize="75%"
+          template="Central Pane"
+        ></dxi-item>
+        <dxi-item [resizable]="true" [collapsible]="true">
+          <dx-splitter>
+            <dxi-item
+              [resizable]="true"
+              [collapsible]="true"
+              minSize="5%"
+              size="30%"
+              template="Nested Left Pane"
+            ></dxi-item>
+            <dxi-item
+              [resizable]="true"
+              template="Nested Central Pane"
+            ></dxi-item>
+            <dxi-item
+              [resizable]="true"
+              [collapsible]="true"
+              minSize="5%"
+              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, Subscription } 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();
+    }
+}