gcp-material-ui 0.0.4

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

@@ -0,0 +1,47 @@
+@use '@angular/material' as mat;
+@use '../../../_variables' as theme;
+
+.demo-actions {
+  display: flex;
+  gap: theme.px-to-rem(16);
+  margin-top: theme.px-to-rem(16);
+}
+
+.property-list {
+  display: flex;
+  flex-direction: column;
+  gap: theme.px-to-rem(12);
+
+  .property-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .label {
+      font-size: theme.px-to-rem(13);
+      color: theme.$grey600;
+    }
+
+    .value {
+      font-weight: 500;
+      color: theme.$grey900;
+      font-size: theme.px-to-rem(13);
+    }
+
+    .status-active {
+      color: #1e8e3e; /* Green standing standard */
+      background-color: #e6f4ea;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+    }
+  }
+}
+
+.metrics-placeholder {
+  p {
+    margin: theme.px-to-rem(8) 0;
+    font-size: theme.px-to-rem(13);
+    color: theme.$grey700;
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { SidebarComponent } from './sidebar';
+import { PageComponent } from '../../components/page/page';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'app-sidebar-demo',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, SidebarComponent, PageComponent, MatDividerModule, MatCardModule],
+  templateUrl: './sidebar-demo.html',
+  styleUrl: './sidebar-demo.scss'
+})
+export class SidebarDemoComponent {
+  isSidebarOpen: boolean = false;
+  isSidebarWithContentOpen: boolean = false;
+
+  toggleSidebar(): void {
+    this.isSidebarOpen = !this.isSidebarOpen;
+  }
+
+  toggleSidebarWithContent(): void {
+    this.isSidebarWithContentOpen = !this.isSidebarWithContentOpen;
+  }
+}

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

@@ -0,0 +1,15 @@
+<ng-template #sidebarContent>
+  <div class="sidebar-panel" @slideInOut>
+    <mat-toolbar class="sidebar-header">
+      <span>{{title || 'Menu'}}</span>
+      <span class="spacer"></span>
+      <button mat-icon-button (click)="closeSidebar()" aria-label="Close sidebar">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-toolbar>
+    
+    <div class="sidebar-content">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,25 @@
+@use '@angular/material' as mat;
+@use '../../../_variables' as theme;
+
+.sidebar-panel {
+  height: 100vh;
+  width: 576px;
+  max-width: 100vw;
+  background-color: #ffffff;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08); /* Soft depth shadow */
+  display: flex;
+  flex-direction: column;
+
+  .sidebar-header {
+    .spacer {
+      flex: 1 1 auto;
+    }
+  }
+
+  .sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: theme.px-to-rem(24);
+    background-color: #fafafa; /* Slightly offset body canvas tone */
+  }
+}

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

@@ -0,0 +1,87 @@
+import { Component, Input, Output, EventEmitter, ViewChild, TemplateRef, ViewContainerRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Overlay, OverlayRef, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-sidebar',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, MatToolbarModule],
+  templateUrl: './sidebar.html',
+  styleUrl: './sidebar.scss',
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateX(100%)' }),
+        animate('300ms ease-out', style({ transform: 'translateX(0)' }))
+      ]),
+      transition(':leave', [
+        animate('250ms ease-in', style({ transform: 'translateX(100%)' }))
+      ])
+    ])
+  ]
+})
+export class SidebarComponent implements OnChanges, OnDestroy {
+  @Input() isOpen: boolean = false;
+  @Input() title: string = '';
+  @Output() close = new EventEmitter<void>();
+
+  @ViewChild('sidebarContent') sidebarContent!: TemplateRef<any>;
+  private overlayRef: OverlayRef | null = null;
+
+  constructor(
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['isOpen']) {
+      if (this.isOpen) {
+        this.openSidebarOverlay();
+      } else {
+        this.closeSidebarOverlay();
+      }
+    }
+  }
+
+  openSidebarOverlay() {
+    if (this.overlayRef) return;
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-dark-backdrop',
+      positionStrategy: this.overlay.position()
+        .global()
+        .right('0')
+        .top('0')
+        .bottom('0')
+    });
+
+    const portal = new TemplatePortal(this.sidebarContent, this.viewContainerRef);
+    this.overlayRef.attach(portal);
+
+    // Close on backdrop click
+    this.overlayRef.backdropClick().subscribe(() => {
+      this.closeSidebar();
+    });
+  }
+
+  closeSidebarOverlay() {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+  }
+
+  closeSidebar() {
+    this.close.emit();
+  }
+
+  ngOnDestroy(): void {
+    this.closeSidebarOverlay();
+  }
+}

package/src/app/demo-components/slide-toggle/slide-toggle-demo.html

@@ -0,0 +1,110 @@
+<app-page title="Slide Toggle Showcase">
+  <div class="showcase-container default-container-padding">
+    
+    <!-- Basic Slide Toggle -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Basic Slide Toggle</mat-card-title>
+        <mat-card-subtitle>Simple toggle switch</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-slide-toggle [(ngModel)]="isChecked" (change)="onToggleChange($event)">
+          Toggle me (Checked: {{isChecked}})
+        </mat-slide-toggle>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Colors -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Colors</mat-card-title>
+        <mat-card-subtitle>Standard Material colors</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-slide-toggle color="primary" [checked]="true">Primary</mat-slide-toggle>
+        <mat-slide-toggle color="accent" [checked]="true">Accent (Default)</mat-slide-toggle>
+        <mat-slide-toggle color="warn" [checked]="true">Warn</mat-slide-toggle>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Label Position -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Label Position</mat-card-title>
+        <mat-card-subtitle>Before or after the toggle</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-slide-toggle labelPosition="after">Label After (Default)</mat-slide-toggle>
+        <mat-slide-toggle labelPosition="before">Label Before</mat-slide-toggle>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Form Binding (Reactive Forms) -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Reactive Forms</mat-card-title>
+        <mat-card-subtitle>Binding to a FormGroup</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <form [formGroup]="formGroup" style="display: flex; flex-direction: column; gap: 16px;">
+          <mat-slide-toggle formControlName="enableWifi">Enable Wi-Fi</mat-slide-toggle>
+          <mat-slide-toggle formControlName="acceptTerms">Accept Terms & Conditions</mat-slide-toggle>
+          
+          <div class="form-status">
+            <span>Wi-Fi Enabled: {{ formGroup.get('enableWifi')?.value }}</span><br>
+            <span>Terms Accepted: {{ formGroup.get('acceptTerms')?.value }}</span>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Disabled State -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Disabled State</mat-card-title>
+        <mat-card-subtitle>Toggles in disabled state</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-slide-toggle [disabled]="true">Disabled Unchecked</mat-slide-toggle>
+        <mat-slide-toggle [disabled]="true" [checked]="true">Disabled Checked</mat-slide-toggle>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Screenshot Examples -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Screenshot Examples</mat-card-title>
+        <mat-card-subtitle>Matching the visual reference</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid" style="flex-direction: column; align-items: flex-start;">
+        
+        <div class="example-item">
+          <mat-slide-toggle>Plain slide toggle</mat-slide-toggle>
+        </div>
+
+        <div class="example-item">
+          <mat-slide-toggle [checked]="true">Checked slide toggle</mat-slide-toggle>
+        </div>
+
+        <div class="example-item">
+          <mat-slide-toggle [disabled]="true">Disabled slide toggle</mat-slide-toggle>
+        </div>
+
+        <div class="example-item">
+          <mat-slide-toggle [disabled]="true" [checked]="true">Disabled checked slide toggle</mat-slide-toggle>
+        </div>
+
+        <div class="example-item">
+          <mat-slide-toggle>Slide toggle with a label that takes up more than one line because it is so verbose and needs lots of room</mat-slide-toggle>
+        </div>
+
+        <div class="example-item hint-toggle">
+          <mat-slide-toggle>Slide toggle with supportive hint text</mat-slide-toggle>
+          <span class="hint-text">Here's some explanatory text that can accompany a slide toggle</span>
+        </div>
+
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+</app-page>

package/src/app/demo-components/slide-toggle/slide-toggle-demo.scss

@@ -0,0 +1,45 @@
+.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-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+  align-items: center;
+}
+
+.form-status {
+  padding: 12px;
+  background-color: #f1f3f4;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #3c4043;
+}
+
+.example-item {
+  width: 100%;
+  max-width: 600px;
+  margin-bottom: 12px;
+}
+
+.hint-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .hint-text {
+    font-size: 12px;
+    color: #5f6368;
+    padding-left: 52px; // Align with label text, skipping the toggle control
+  }
+}

package/src/app/demo-components/slide-toggle/slide-toggle-demo.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { PageComponent } from '../../components/page/page';
+import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-slide-toggle-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatSlideToggleModule,
+    PageComponent,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './slide-toggle-demo.html',
+  styleUrls: ['./slide-toggle-demo.scss']
+})
+export class SlideToggleDemoComponent {
+  isChecked = false;
+  isDisabled = false;
+  color = 'accent';
+
+  formGroup: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.formGroup = this.formBuilder.group({
+      enableWifi: [false],
+      acceptTerms: [false]
+    });
+  }
+
+  onToggleChange(event: any) {
+    console.log('Toggle changed:', event.checked);
+  }
+}

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

@@ -0,0 +1,99 @@
+<app-page title="Stepper">
+  <div class="demo-container default-container-padding">
+    <!-- Horizontal Stepper Section -->
+    <div class="example-section">
+      <h3>Horizontal Stepper</h3>
+      <p>A stepper that displays navigation steps horizontally across the view.</p>
+      
+      <mat-horizontal-stepper [linear]="true" #horizontalStepper>
+        <mat-step [stepControl]="horizontalFirstFormGroup">
+          <form [formGroup]="horizontalFirstFormGroup" class="step-content">
+            <ng-template matStepLabel>Step 1: Basic Info</ng-template>
+            <p>Please enter your name to proceed.</p>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Name</mat-label>
+              <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+            </mat-form-field>
+            <div class="stepper-actions">
+              <button mat-flat-button color="primary" matStepperNext>Next</button>
+            </div>
+          </form>
+        </mat-step>
+
+        <mat-step [stepControl]="horizontalSecondFormGroup">
+          <form [formGroup]="horizontalSecondFormGroup" class="step-content">
+            <ng-template matStepLabel>Step 2: Address</ng-template>
+            <p>Please enter your address to proceed.</p>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Address</mat-label>
+              <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St" required>
+            </mat-form-field>
+            <div class="stepper-actions">
+              <button mat-button matStepperPrevious>Back</button>
+              <button mat-flat-button color="primary" matStepperNext>Next</button>
+            </div>
+          </form>
+        </mat-step>
+
+        <mat-step>
+          <ng-template matStepLabel>Step 3: Done</ng-template>
+          <div class="step-content">
+            <p>You are now done with the horizontal process setup triggers actions safely neat.</p>
+          </div>
+          <div class="stepper-actions">
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-flat-button color="warn" (click)="horizontalStepper.reset()">Reset</button>
+          </div>
+        </mat-step>
+      </mat-horizontal-stepper>
+    </div>
+
+    <!-- Vertical Stepper Section -->
+    <div class="example-section">
+      <h3>Vertical Stepper</h3>
+      <p>A stepper that displays navigation steps vertically from top to bottom.</p>
+      
+      <mat-vertical-stepper [linear]="true" #verticalStepper>
+        <mat-step [stepControl]="verticalFirstFormGroup">
+          <form [formGroup]="verticalFirstFormGroup" class="step-content">
+            <ng-template matStepLabel>Step 1: Configuration</ng-template>
+            <p>Define the task setting triggers actions safely.</p>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Setting Name</mat-label>
+              <input matInput formControlName="firstCtrl" placeholder="Setting label" required>
+            </mat-form-field>
+            <div class="stepper-actions">
+              <button mat-flat-button color="accent" matStepperNext>Next</button>
+            </div>
+          </form>
+        </mat-step>
+
+        <mat-step [stepControl]="verticalSecondFormGroup">
+          <form [formGroup]="verticalSecondFormGroup" class="step-content">
+            <ng-template matStepLabel>Step 2: Deployment</ng-template>
+            <p>Enter the target deployment identifier triggers securely.</p>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Target ID</mat-label>
+              <input matInput formControlName="secondCtrl" placeholder="Ex. prod-instance" required>
+            </mat-form-field>
+            <div class="stepper-actions">
+              <button mat-button matStepperPrevious>Back</button>
+              <button mat-flat-button color="accent" matStepperNext>Next</button>
+            </div>
+          </form>
+        </mat-step>
+
+        <mat-step>
+          <ng-template matStepLabel>Step 3: Success</ng-template>
+          <div class="step-content">
+            <p>Verification complete safely neat triggers anchors.</p>
+          </div>
+          <div class="stepper-actions">
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-flat-button color="warn" (click)="verticalStepper.reset()">Reset</button>
+          </div>
+        </mat-step>
+      </mat-vertical-stepper>
+    </div>
+  </div>
+</app-page>

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

@@ -0,0 +1,84 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-stepper-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatStepperModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    PageComponent
+  ],
+  templateUrl: './stepper-demo.html',
+  styles: [`
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+      padding: 16px;
+    }
+    .example-section {
+      border: 1px solid var(--mat-divider-color, #e0e0e0);
+      border-radius: 8px;
+      padding: 24px;
+      background-color: #fff;
+    }
+    .example-section h3 {
+      margin-top: 0;
+      margin-bottom: 24px;
+      color: #333;
+    }
+    .step-content {
+      margin-top: 16px;
+      margin-bottom: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      max-width: 400px;
+    }
+    .stepper-actions {
+      display: flex;
+      gap: 8px;
+    }
+    .full-width {
+      width: 100%;
+    }
+  `]
+})
+export class StepperDemoComponent {
+  // Forms for Horizontal Stepper
+  horizontalFirstFormGroup: FormGroup;
+  horizontalSecondFormGroup: FormGroup;
+
+  // Forms for Vertical Stepper
+  verticalFirstFormGroup: FormGroup;
+  verticalSecondFormGroup: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) {
+    this.horizontalFirstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required],
+    });
+    this.horizontalSecondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required],
+    });
+
+    this.verticalFirstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required],
+    });
+    this.verticalSecondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required],
+    });
+  }
+}

package/src/app/demo-components/tables/clean_tables_scss.py

@@ -0,0 +1,16 @@
+import sys
+
+filepath = '/Users/kjthomas/Projects/prototypes/components/src/app/components/tables/tables-demo.scss'
+
+with open(filepath, 'r') as f:
+    lines = f.readlines()
+
+new_lines = lines[:11]  # Keep .table-card
+new_lines.append('\n')
+new_lines.append('.mat-column-position {\n  width: 80px;\n}\n')
+new_lines.append('.mat-column-symbol {\n  width: 100px;\n}\n')
+
+with open(filepath, 'w') as f:
+    f.writelines(new_lines)
+
+print("Cleaned tables-demo.scss successfully.")

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

@@ -0,0 +1,64 @@
+<app-page title="Tables Demo">
+
+<div class="default-container-padding">
+  <h2>Sample table</h2>
+  <div class="filter-container">
+          <mat-icon>filter_list</mat-icon>
+          <span class="filter-title">Filter</span>
+          <input class="filter-input" (keyup)="applyFilter($event)" placeholder="Filter items">
+          </div>
+
+      <div class="table-container">
+        <table mat-table [dataSource]="dataSource" matSort matSortActive="position" matSortDirection="asc">
+        
+          <!-- Checkbox Column -->
+          <ng-container matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef>
+              <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()"
+                [indeterminate]="selection.hasValue() && !isAllSelected()">
+              </mat-checkbox>
+            </th>
+            <td mat-cell *matCellDef="let row">
+              <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+                [checked]="selection.isSelected(row)">
+              </mat-checkbox>
+            </td>
+          </ng-container>
+
+          <!-- Position Column -->
+          <ng-container matColumnDef="position">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
+            <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+            </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Primary String </th>
+            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+            </ng-container>
+
+          <!-- Weight Column -->
+          <ng-container matColumnDef="weight">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Oddness </th>
+            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+            </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container matColumnDef="symbol">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
+            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+            </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="selection.isSelected(row)"></tr>
+
+          <!-- Row shown when there is no matching data. -->
+          <tr class="mat-row" *matNoDataRow>
+            <td class="mat-cell" colspan="4">No data matching the filter: "{{dataSource.filter}}"</td>
+          </tr>
+          </table>
+
+        <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+        </div>
+</div>
+    </app-page>