AF-243 Remove MaterialUI from examples

apps/docs/src/components/angular/examples/angular-material/angular-material.astro

@@ -0,0 +1,16 @@
+---
+import { AngularMaterialExampleComponent } from './angular-material.component';
+---
+
+<div class="diagram-container">
+  <AngularMaterialExampleComponent client:only="angular" />
+</div>
+
+<style>
+  .diagram-container {
+    width: 100%;
+    height: 20rem;
+    border: 5px solid var(--ngd-ui-border-default);
+    background-color: var(--ngd-ui-bg-tertiary-default) ;
+  }
+</style>

apps/docs/src/components/angular/examples/angular-material/angular-material.component.scss

@@ -0,0 +1,11 @@
+:host {
+  flex: 1;
+  display: flex;
+}
+
+.diagram {
+  flex: 1;
+  display: flex;
+  height: 20rem;
+  font-family: 'Poppins', sans-serif;
+}

apps/docs/src/components/angular/examples/angular-material/angular-material.component.ts

@@ -0,0 +1,75 @@
+import '@angular/compiler';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  initializeModel,
+  NgDiagramComponent,
+  NgDiagramNodeTemplateMap,
+  provideNgDiagram,
+  type NgDiagramConfig,
+} from 'ng-diagram';
+
+import { NodeComponent } from './node/node.component';
+
+enum NodeTemplateType {
+  CustomNodeType = 'customNodeType',
+}
+
+@Component({
+  selector: 'customnode',
+  imports: [NgDiagramComponent],
+  providers: [provideNgDiagram()],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="not-content diagram">
+      <ng-diagram
+        [model]="model"
+        [config]="config"
+        [nodeTemplateMap]="nodeTemplateMap"
+      />
+    </div>
+  `,
+  styleUrl: './angular-material.component.scss',
+})
+export class AngularMaterialExampleComponent {
+  nodeTemplateMap = new NgDiagramNodeTemplateMap([
+    [NodeTemplateType.CustomNodeType, NodeComponent],
+  ]);
+
+  config = {
+    zoom: {
+      max: 3,
+    },
+  } satisfies NgDiagramConfig;
+
+  model = initializeModel({
+    nodes: [
+      {
+        id: '1',
+        position: { x: 80, y: 100 },
+        size: { width: 200, height: 150 },
+        type: 'customNodeType',
+        data: {
+          name: 'Node 1',
+          description:
+            'This is Node 1. This node is a custom node with a custom template.',
+          tooltip: 'Node 1 is a custom node',
+          status: 'orange',
+        },
+      },
+      {
+        id: '2',
+        position: { x: 400, y: 100 },
+        type: 'customNodeType',
+        data: {
+          name: 'Node 2',
+          description:
+            'This is Node 2. Initial status is red. This node is a custom node with a custom template.',
+          tooltip: 'Node 2 is a custom node',
+          status: 'red',
+        },
+      },
+    ],
+    edges: [],
+    metadata: { viewport: { x: 0, y: 0, scale: 1 } },
+  });
+}

apps/docs/src/components/angular/examples/angular-material/node/node.component.html

@@ -0,0 +1,38 @@
+<div class="node">
+  <div class="node-header">
+    <div>
+      {{ node().data.name }}
+    </div>
+    <div>
+      <mat-chip [style.backgroundColor]="nodeStatus()" />
+    </div>
+  </div>
+  <div class="node-body" title="{{ node().data.tooltip }}">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Description</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>{{ node().data.description }}</p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Options</mat-panel-title>
+        </mat-expansion-panel-header>
+        <form>
+          <mat-form-field>
+            <mat-select
+              (selectionChange)="onColorChange($event)"
+              [value]="nodeStatus()"
+              name="color"
+            >
+              <mat-option value="red">Red</mat-option>
+              <mat-option value="orange">Orange</mat-option>
+              <mat-option value="green">Green</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </form>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+</div>

apps/docs/src/components/angular/examples/angular-material/node/node.component.scss

@@ -0,0 +1,66 @@
+:host {
+  --mdc-chip-label-text-size: 10px;
+  --mat-form-field-container-vertical-padding: 8px;
+  --mat-form-field-container-height: 30px;
+
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  border: 1px solid var(--ngd-node-stroke-primary-default);
+  background-color: var(--ngd-node-bg-primary-default);
+
+  .node {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    border-radius: 10px;
+
+    &-header {
+      font-weight: bold;
+      margin-bottom: 4px;
+      display: flex;
+      justify-content: space-between;
+      vertical-align: middle;
+      align-items: center;
+      justify-items: center;
+
+      .mat-mdc-chip {
+        font-size: 11px;
+        height: 20px;
+        margin-bottom: 10px;
+      }
+    }
+
+    &-body {
+      font-size: 12px;
+      cursor: help;
+
+      p {
+        width: 180px;
+      }
+
+      form {
+        height: 50px;
+        margin-top: 8px;
+
+        .mat-mdc-form-field {
+          min-width: 120px;
+        }
+      }
+    }
+
+    &-button {
+      margin-top: 8px;
+      padding: 4px 8px;
+      font-size: 12px;
+      border: 1px solid var(--ngd-node-stroke-primary-default);
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--ngd-node-stroke-primary-hover);
+      }
+    }
+  }
+}

apps/docs/src/components/angular/examples/angular-material/node/node.component.ts

@@ -0,0 +1,52 @@
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import {
+  NgDiagramModelService,
+  NgDiagramNodeRotateAdornmentComponent,
+  NgDiagramNodeSelectedDirective,
+  type NgDiagramNodeTemplate,
+  type Node,
+} from 'ng-diagram';
+
+export type NodeData = {
+  name: string;
+  status: string;
+  description: string;
+  tooltip: string;
+};
+
+@Component({
+  selector: 'node',
+  imports: [
+    NgDiagramNodeRotateAdornmentComponent,
+    MatSelectModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatChipsModule,
+    MatExpansionModule,
+  ],
+  hostDirectives: [
+    { directive: NgDiagramNodeSelectedDirective, inputs: ['node'] },
+  ],
+  templateUrl: './node.component.html',
+  styleUrls: ['./node.component.scss'],
+})
+export class NodeComponent implements NgDiagramNodeTemplate<NodeData> {
+  private readonly modelService = inject(NgDiagramModelService);
+  readonly panelOpenState = signal(false);
+  node = input.required<Node<NodeData>>();
+  nodeStatus = computed(() => this.node().data.status);
+
+  onColorChange({ value }: any) {
+    this.modelService.updateNodeData(this.node().id, {
+      ...this.node().data,
+      status: value,
+    });
+  }
+}

apps/docs/src/components/angular/examples/context-menu/node/node.component.ts

@@ -1,9 +1,4 @@
 import { Component, inject, input, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
 import {
   NgDiagramNodeSelectedDirective,
   NgDiagramPortComponent,
@@ -16,14 +11,7 @@ import { ContextMenuService } from '../menu/menu.service';
 
 @Component({
   selector: 'node',
-  imports: [
-    NgDiagramPortComponent,
-    MatSelectModule,
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatChipsModule,
-  ],
+  imports: [NgDiagramPortComponent],
   templateUrl: './node.component.html',
   styleUrls: ['./node.component.scss'],
   hostDirectives: [

apps/docs/src/components/angular/examples/custom-node/node/node.component.html

@@ -6,19 +6,23 @@
         {{ node().data.name }}
       </div>
       <div>
-        <mat-chip>{{ selectedState }}</mat-chip>
+        <span class="chip">{{ selectedState }}</span>
       </div>
     </div>
     <div class="node-body" title="{{ node().data.tooltip }}">
       {{ node().data.description }}
       <form>
-        <mat-form-field>
-          <mat-select [(ngModel)]="selectedState" name="state">
-            <mat-option value="Active">Active</mat-option>
-            <mat-option value="Inactive">Inactive</mat-option>
-            <mat-option value="Error">Error</mat-option>
-          </mat-select>
-        </mat-form-field>
+        <label for="state-select">State:</label>
+        <select
+          id="state-select"
+          [value]="selectedState"
+          name="state"
+          (change)="onStateChange($event)"
+        >
+          <option value="Active">Active</option>
+          <option value="Inactive">Inactive</option>
+          <option value="Error">Error</option>
+        </select>
       </form>
     </div>
   </div>

apps/docs/src/components/angular/examples/custom-node/node/node.component.scss

@@ -25,10 +25,15 @@
       align-items: center;
       justify-items: center;
 
-      .mat-mdc-chip {
+      .chip {
+        display: inline-block;
         font-size: 11px;
         height: 20px;
+        padding: 0 8px;
+        border-radius: 10px;
+        background: #e0e0e0;
         margin-bottom: 10px;
+        line-height: 20px;
       }
     }
 
@@ -40,8 +45,12 @@
         height: 50px;
         margin-top: 8px;
 
-        .mat-mdc-form-field {
+        select {
           min-width: 120px;
+          padding: 4px 8px;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          font-size: 12px;
         }
       }
     }

apps/docs/src/components/angular/examples/custom-node/node/node.component.ts

@@ -1,9 +1,4 @@
 import { Component, input, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
 import {
   NgDiagramNodeResizeAdornmentComponent,
   NgDiagramNodeRotateAdornmentComponent,
@@ -19,11 +14,6 @@ import {
     NgDiagramNodeRotateAdornmentComponent,
     NgDiagramPortComponent,
     NgDiagramNodeResizeAdornmentComponent,
-    MatSelectModule,
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatChipsModule,
   ],
   templateUrl: './node.component.html',
   styleUrls: ['./node.component.scss'],
@@ -38,5 +28,10 @@ export class NodeComponent implements NgDiagramNodeTemplate {
   text = model<string>('');
   node = input.required<Node>();
 
-  selectedState: string = 'Active';
+  selectedState: string = 'Inactive';
+
+  onStateChange(event: Event) {
+    const selectElement = event.target as HTMLSelectElement;
+    this.selectedState = selectElement.value;
+  }
 }