gcp-material-ui 0.0.4

package/src/app/demo-components/chips/chips-demo.html

@@ -0,0 +1,87 @@
+<app-page title="Chips Showcase">
+  <div class="default-container-padding" style="display: flex; flex-direction: column; gap: 24px;">
+    
+    <!-- Basic Chips -->
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Basic Chips</mat-card-title>
+        <mat-card-subtitle>Simple flat badge elements sets</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <mat-chip-set aria-label="Static selection">
+          <mat-chip>One fish</mat-chip>
+          <mat-chip>Two fish</mat-chip>
+          <mat-chip>Red fish</mat-chip>
+          <mat-chip>Blue fish</mat-chip>
+        </mat-chip-set>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Chips with Icons & Avatars -->
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Rich Content Chips</mat-card-title>
+        <mat-card-subtitle>Using avatars or trailing icons remove triggers</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <mat-chip-set aria-label="Visual variants">
+          <mat-chip>
+            <img matChipAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Shiba avatar">
+            Avatar Prefix
+          </mat-chip>
+          
+          <mat-chip>
+            <mat-icon matChipRemove>cancel</mat-icon>
+            Deletable item
+          </mat-chip>
+        </mat-chip-set>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Selectable Box Mode -->
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Selectable Listbox Choice</mat-card-title>
+        <mat-card-subtitle>Toggling option states arrays sets</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <mat-chip-listbox aria-label="Color selection" [(ngModel)]="selectedColor">
+          @for (color of availableColors; track color) {
+            <mat-chip-option [color]="color.toLowerCase() === 'warn' ? 'warn' : color.toLowerCase() === 'primary' ? 'primary' : 'accent'">
+              {{color}}
+            </mat-chip-option>
+          }
+        </mat-chip-listbox>
+        <p style="margin-top: 12px; font-size: 14px; color: #5f6368;">Selected Color: <strong>{{selectedColor}}</strong></p>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Input Chips -->
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Dynamic Add/Remove Inputs</mat-card-title>
+        <mat-card-subtitle>Stacking items from an input field list</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <mat-form-field appearance="outline" style="width: 100%;">
+          <mat-label>Favorite Fruits</mat-label>
+          <mat-chip-grid #chipGrid aria-label="Fruit selection">
+            @for (fruit of fruits; track fruit) {
+              <mat-chip-row (removed)="remove(fruit)">
+                {{fruit}}
+                <button matChipRemove [attr.aria-label]="'remove ' + fruit">
+                  <mat-icon>cancel</mat-icon>
+                </button>
+              </mat-chip-row>
+            }
+          </mat-chip-grid>
+          <input placeholder="New fruit..."
+                 [matChipInputFor]="chipGrid"
+                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                 (matChipInputTokenEnd)="add($event)"/>
+        </mat-form-field>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+</app-page>

package/src/app/demo-components/chips/chips-demo.scss

@@ -0,0 +1,6 @@
+/* Styles placeholder for chips-demo */
+mat-card {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
+  border-radius: 8px !important;
+  border: 1px solid rgba(0,0,0,0.03);
+}

package/src/app/demo-components/chips/chips-demo.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PageComponent } from '../../components/page/page';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule, MatChipInputEvent } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-chips-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    PageComponent,
+    MatCardModule,
+    MatChipsModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule
+  ],
+  templateUrl: './chips-demo.html',
+  styleUrl: './chips-demo.scss'
+})
+export class ChipsDemoComponent {
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
+  
+  // Dynamic list for Input example
+  fruits: string[] = ['Lemon', 'Lime', 'Apple'];
+
+  // Selectable example states
+  selectedColor: string = 'Accent';
+  availableColors: string[] = ['Primary', 'Accent', 'Warn'];
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our fruit
+    if (value) {
+      this.fruits.push(value);
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+
+  remove(fruit: string): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+}

package/src/app/demo-components/code-snippet/code-snippet-demo.html

@@ -0,0 +1,52 @@
+<app-page title="Code Snippet Showcase">
+  <div class="showcase-container default-container-padding">
+    
+    <!-- HTML Snippet -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>HTML Snippet</mat-card-title>
+        <mat-card-subtitle>Standard HTML code block</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <pre class="code-block"><code>{{ htmlSnippet }}</code></pre>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- TypeScript Snippet -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>TypeScript Snippet</mat-card-title>
+        <mat-card-subtitle>Standard TS code block</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <pre class="code-block"><code>{{ tsSnippet }}</code></pre>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- JSON Snippet -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>JSON Snippet</mat-card-title>
+        <mat-card-subtitle>Standard JSON code block</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <pre class="code-block"><code>{{ jsonSnippet }}</code></pre>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Complex Editor (NgStack) -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Complex Editor (Interactive)</mat-card-title>
+        <mat-card-subtitle>Using ngstack/code-editor</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <ngs-code-editor 
+          [codeModel]="codeModel" 
+          style="height: 300px; display: block;">
+        </ngs-code-editor>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+</app-page>

package/src/app/demo-components/code-snippet/code-snippet-demo.scss

@@ -0,0 +1,20 @@
+.showcase-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.showcase-card {
+  margin-bottom: 8px;
+}
+
+.showcase-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  align-items: flex-start;
+}
+

package/src/app/demo-components/code-snippet/code-snippet-demo.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+import { CodeEditorModule, CodeModel } from '@ngstack/code-editor';
+
+@Component({
+  selector: 'app-code-snippet-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    PageComponent,
+    CodeEditorModule
+  ],
+  templateUrl: './code-snippet-demo.html',
+  styleUrls: ['./code-snippet-demo.scss']
+})
+export class CodeSnippetDemoComponent {
+  htmlSnippet = `<div class="container">\n  <h1>Hello World</h1>\n  <p>This is a simple HTML snippet.</p>\n</div>`;
+  
+  tsSnippet = `import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: '<h1>Hello</h1>'\n})\nexport class AppComponent { }`;
+
+  jsonSnippet = `{\n  "name": "components",\n  "version": "1.0.0",\n  "dependencies": {\n    "angular": "^15.0.0"\n  }\n}`;
+
+  codeModel: CodeModel = {
+    language: 'typescript',
+    uri: 'complex-snippet.ts',
+    value: `export class UserService {\n  constructor() {}\n\n  getUser() {\n    return 'John Doe';\n  }\n}`
+  };
+}

package/src/app/demo-components/dialog/dialog-demo.html

@@ -0,0 +1,47 @@
+<app-page title="Dialog">
+  <div class="demo-container default-container-padding">
+    <!-- Simple Dialog Section -->
+    <div class="example-section">
+      <h3>Simple Dialog</h3>
+      <p>A basic dialog that presents information to the user with a dismiss button actions structure neatness.</p>
+      
+      <div class="button-row">
+        <button mat-flat-button color="primary" (click)="openSimpleDialog()">
+          Launch Simple Dialog
+        </button>
+      </div>
+    </div>
+
+    <!-- Confirmation Dialog Section -->
+    <div class="example-section">
+      <h3>Confirmation Dialog</h3>
+      <p>Requires user action (Confirm or Cancel) and returns a boolean value to the parent component safely triggers.</p>
+      
+      <div class="button-row">
+        <button mat-stroked-button color="accent" (click)="openConfirmationDialog()">
+          Launch Confirmation Dialog
+        </button>
+      </div>
+
+      <div class="result-box" *ngIf="confirmationResult">
+        <strong>Result:</strong> {{ confirmationResult }}
+      </div>
+    </div>
+
+    <!-- Form Dialog Section -->
+    <div class="example-section">
+      <h3>Form Input Dialog</h3>
+      <p>Opens a dialog containing an input form to submit dynamic content structures neatly.</p>
+      
+      <div class="button-row">
+        <button mat-flat-button color="warn" (click)="openFormDialog()">
+          Launch Form Dialog
+        </button>
+      </div>
+
+      <div class="result-box" *ngIf="formResult">
+        <strong>Submitted Data:</strong> <pre>{{ formResult | json }}</pre>
+      </div>
+    </div>
+  </div>
+</app-page>

package/src/app/demo-components/dialog/dialog-demo.ts

@@ -0,0 +1,90 @@
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+import {
+  SimpleDialogComponent,
+  ConfirmationDialogComponent,
+  FormDialogComponent
+} from './dialog-examples';
+
+@Component({
+  selector: 'app-dialog-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatCardModule,
+    PageComponent
+  ],
+  templateUrl: './dialog-demo.html',
+  styles: [`
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 16px;
+    }
+    .example-section {
+      border: 1px solid var(--mat-divider-color, #e0e0e0);
+      border-radius: 8px;
+      padding: 24px;
+    }
+    .example-section h3 {
+      margin-top: 0;
+      color: #333;
+    }
+    .button-row {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-top: 16px;
+    }
+    .result-box {
+      margin-top: 16px;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+      font-family: monospace;
+    }
+  `]
+})
+export class DialogDemoComponent {
+  confirmationResult: string | null = null;
+  formResult: any | null = null;
+  submitData: any | null = null; // Adding this if the user is looking for 'submitData' specifically in template or logic
+
+  constructor(private dialog: MatDialog, private cdr: ChangeDetectorRef) {}
+
+  openSimpleDialog(): void {
+    this.dialog.open(SimpleDialogComponent, {
+      width: '400px'
+    });
+  }
+
+  openConfirmationDialog(): void {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      width: '400px',
+      data: { message: 'Do you want to save these changes before leaving?' }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.confirmationResult = result !== undefined ? `User selected: ${result ? 'Confirm' : 'Cancel'}` : 'Dialog dismissed';
+      this.cdr.detectChanges();
+    });
+  }
+
+  openFormDialog(): void {
+    const dialogRef = this.dialog.open(FormDialogComponent, {
+      width: '450px'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.formResult = result || null;
+      this.cdr.detectChanges();
+    });
+  }
+}

package/src/app/demo-components/dialog/dialog-examples.ts

@@ -0,0 +1,126 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+// --- 1. Simple Information Dialog ---
+@Component({
+  selector: 'app-simple-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatButtonModule],
+  template: `
+    <h2 mat-dialog-title>Information</h2>
+    <mat-dialog-content>
+      <p>This is a simple informational dialog content showcasing standard Material dialog layouts structures.</p>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button mat-dialog-close>Close</button>
+    </mat-dialog-actions>
+  `
+})
+export class SimpleDialogComponent {}
+
+// --- 2. Confirmation Dialog ---
+@Component({
+  selector: 'app-confirmation-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatButtonModule],
+  template: `
+    <h2 mat-dialog-title>Confirm Action</h2>
+    <mat-dialog-content>
+      <p>{{ data.message || 'Are you sure you want to proceed?' }}</p>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onNoClick()">Cancel</button>
+      <button mat-flat-button color="primary" [mat-dialog-close]="true">Confirm</button>
+    </mat-dialog-actions>
+  `
+})
+export class ConfirmationDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { message: string }
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+}
+
+// --- 3. Form Input Dialog ---
+@Component({
+  selector: 'app-form-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  template: `
+    <h2 mat-dialog-title>Add New Item</h2>
+    <mat-dialog-content class="mat-typography">
+      <form [formGroup]="form" class="form-container">
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Item Name</mat-label>
+          <input matInput formControlName="name" placeholder="Enter name">
+          <mat-error *ngIf="form.get('name')?.hasError('required')">
+            Name is required
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Description</mat-label>
+          <textarea matInput formControlName="description" placeholder="Enter description" rows="3"></textarea>
+        </mat-form-field>
+      </form>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-flat-button color="primary" (click)="onSubmit()" [disabled]="form.invalid">Submit</button>
+    </mat-dialog-actions>
+  `,
+  styles: [`
+    .form-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-top: 8px;
+    }
+    .full-width {
+      width: 100%;
+    }
+    mat-dialog-content {
+      min-width: 320px;
+    }
+  `]
+})
+export class FormDialogComponent {
+  form: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    public dialogRef: MatDialogRef<FormDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.form = this.fb.group({
+      name: ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(): void {
+    if (this.form.valid) {
+      this.dialogRef.close(this.form.value);
+    }
+  }
+}

package/src/app/demo-components/expand-button/expand-button-demo.html

@@ -0,0 +1,28 @@
+<app-page title="Expand Button Showcase">
+  <div class="showcase-container default-container-padding">
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Expandable Settings Pattern</mat-card-title>
+        <mat-card-subtitle>A lightweight toggle for hidden content</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <div class="expand-btn-container">
+          <button mat-button color="primary" (click)="isExpanded = !isExpanded" class="expand-toggle">
+            <mat-icon>{{ isExpanded ? 'expand_less' : 'expand_more' }}</mat-icon>
+            <span>{{ isExpanded ? 'Hide' : 'Show' }} advanced settings</span>
+          </button>
+          
+          <div class="expand-content" *ngIf="isExpanded">
+            <p class="content-description">Here are some advanced settings you can configure. They are hidden by default.</p>
+            
+            <mat-form-field appearance="outline" class="full-width">
+              <input matInput placeholder="An input">
+            </mat-form-field>
+            
+            <div class="caption-text">This is inside the expand button</div>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>

package/src/app/demo-components/expand-button/expand-button-demo.scss

@@ -0,0 +1,45 @@
+.expand-btn-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.expand-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  color: #1a73e8; // Primary blue
+  font-weight: 500;
+  padding: 0; // Remove default button padding if needed, or keep it for touch target
+
+  .mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.expand-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-left: 16px; // Indent content
+  border-left: 2px solid #e8eaed; // Subtle visual guide
+  margin-top: 8px;
+}
+
+.content-description {
+  font-size: 14px;
+  color: #3c4043;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.caption-text {
+  font-size: 12px;
+  color: #70757a;
+  margin-top: -8px; // Pull closer to input
+}

package/src/app/demo-components/expand-button/expand-button-demo.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-expand-button-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
+    PageComponent
+  ],
+  templateUrl: './expand-button-demo.html',
+  styleUrls: ['./expand-button-demo.scss']
+})
+export class ExpandButtonDemoComponent {
+  isExpanded = false;
+  isExpanded2 = false; // For a second variation if needed
+}