gcp-material-ui 0.0.4

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

@@ -0,0 +1,18 @@
+.table-card {
+  margin: 0 auto;
+  .mat-mdc-card-content {
+      padding: 0 !important;
+      /* Edge-to-Edge layout supports full width */
+    }
+  
+    mat-card-subtitle {
+      margin-bottom: 10px;
+    }
+}
+
+.mat-column-position {
+  width: 80px;
+}
+.mat-column-symbol {
+  width: 100px;
+}

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

@@ -0,0 +1,89 @@
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+import { MatIconModule } from '@angular/material/icon';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+@Component({
+  selector: 'app-tables-demo',
+  standalone: true,
+  imports: [
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCardModule,
+    PageComponent,
+    MatIconModule,
+    MatCheckboxModule
+  ],
+  templateUrl: './tables-demo.html',
+  styleUrl: './tables-demo.scss'
+})
+export class TablesDemoComponent implements OnInit, AfterViewInit {
+  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+  selection = new SelectionModel<PeriodicElement>(true, []);
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  toggleAllRows() {
+    if (this.isAllSelected()) {
+      this.selection.clear();
+      return;
+    }
+    this.selection.select(...this.dataSource.data);
+  }
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}

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

@@ -0,0 +1,168 @@
+<app-page title="Tabs Showcase">
+  <div class="showcase-container default-container-padding">
+    <!-- Basic Tabs -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Basic Tabs</mat-card-title>
+        <mat-card-subtitle
+          >Standard navigation with default Angular Material styles</mat-card-subtitle
+        >
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-tab-group
+          animationDuration="0ms"
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+          style="width: 100%"
+        >
+          <mat-tab label="Overview">
+            <div class="tab-content">
+              <h3>Overview Content</h3>
+              <p>
+                This is the overview tab content. Standard behavior with default thematic colors and
+                elevations.
+              </p>
+            </div>
+          </mat-tab>
+          <mat-tab label="Details">
+            <div class="tab-content">
+              <h3>Details Content</h3>
+              <p>Detailed analysis of resource item components setup.</p>
+            </div>
+          </mat-tab>
+          <mat-tab label="Logs" disabled>
+            <div class="tab-content">
+              <h3>Logs</h3>
+              <p>Logs content is disabled.</p>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Tabs with Icons -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Tabs with Icons</mat-card-title>
+        <mat-card-subtitle>Using templates for rich header content</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-tab-group
+          animationDuration="0ms"
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+          style="width: 100%"
+        >
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tab-icon">home</mat-icon>
+              <span>Dashboard</span>
+            </ng-template>
+            <div class="tab-content">
+              <h3>Dashboard</h3>
+              <p>Main dashboard statistics and summaries.</p>
+            </div>
+          </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tab-icon">settings</mat-icon>
+              <span>Settings</span>
+            </ng-template>
+            <div class="tab-content">
+              <h3>Settings</h3>
+              <p>Configuration panel options.</p>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Complex Content Tabs -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Complex Content Showcase</mat-card-title>
+        <mat-card-subtitle>Displaying richer layouts inside individual content wrappers</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <mat-tab-group animationDuration="0ms" mat-stretch-tabs="false" mat-align-tabs="start" style="width: 100%;">
+          
+          <!-- Form Tab -->
+          <mat-tab label="Account Details">
+            <div style="padding: 20px 0; max-width: 400px; display: flex; flex-direction: column; gap: 12px;">
+              <form [formGroup]="simpleForm" (ngSubmit)="onSubmit()" style="display: flex; flex-direction: column; gap: 12px;">
+                <mat-form-field appearance="outline">
+                  <mat-label>Name</mat-label>
+                  <input matInput formControlName="name" placeholder="John Doe">
+                </mat-form-field>
+
+                <mat-form-field appearance="outline">
+                  <mat-label>Email</mat-label>
+                  <input matInput formControlName="email" type="email" placeholder="john.doe@example.com">
+                </mat-form-field>
+
+                <mat-form-field appearance="outline">
+                  <mat-label>Category</mat-label>
+                  <mat-select formControlName="category">
+                    <mat-option value="tech">Technology</mat-option>
+                    <mat-option value="finance">Finance</mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <div style="display: flex; gap: 8px;">
+                  <button mat-flat-button color="primary" type="submit" [disabled]="simpleForm.invalid">Submit</button>
+                  <button mat-button type="button">Cancel</button>
+                </div>
+              </form>
+            </div>
+          </mat-tab>
+
+          <!-- Table Tab -->
+          <mat-tab label="System Overview">
+            <div style="padding: 20px 0; width: 100%;">
+              
+              <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" class="mat-elevation" style="width: 100%;">
+                  
+                  <!-- Position Column -->
+                  <ng-container matColumnDef="position">
+                    <th mat-header-cell *matHeaderCellDef> Id </th>
+                    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+                  </ng-container>
+
+                  <!-- Name Column -->
+                  <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef> 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> Oddness </th>
+                    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+                  </ng-container>
+
+                  <!-- Symbol Column -->
+                  <ng-container matColumnDef="symbol">
+                    <th mat-header-cell *matHeaderCellDef> 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;"></tr>
+                </table>
+              </div>
+
+            </div>
+          </mat-tab>
+
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>

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

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+@use '../../../_variables' as theme; // From components/src/app/components/tabs/
+
+.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-top: 16px;
+  align-items: center;
+}

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

@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { PageComponent } from '../../components/page/page';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}
+];
+
+@Component({
+  selector: 'app-tabs-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    MatCardModule,
+    MatIconModule,
+    MatButtonModule,
+    PageComponent,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTableModule
+  ],
+  templateUrl: './tabs-demo.html',
+  styleUrls: ['./tabs-demo.scss']
+})
+export class TabsDemoComponent {
+  simpleForm: FormGroup;
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  constructor(private fb: FormBuilder) {
+    this.simpleForm = this.fb.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      category: ['tech']
+    });
+  }
+
+  onSubmit() {
+    if (this.simpleForm.valid) {
+      console.log('Form Submitted inside Tabs', this.simpleForm.value);
+    }
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  tabs = [
+    { label: 'Dynamic One', content: 'This is dynamically loaded Content 1' },
+    { label: 'Dynamic Two', content: 'This is dynamically loaded Content 2' },
+    { label: 'Dynamic Three', content: 'This is dynamically loaded Content 3' }
+  ];
+}

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

@@ -0,0 +1,50 @@
+<app-page title="Toolbars Showcase">
+  <div class="showcase-container default-container-padding">
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Basic Toolbar</mat-card-title>
+        <mat-card-subtitle>Standard top bar navigation style</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-content">
+        <mat-toolbar>
+          <span>My Application</span>
+        </mat-toolbar>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Toolbar with Actions</mat-card-title>
+        <mat-card-subtitle>Adding items using `.spacer` helper structure to separate flex layouts</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-content">
+        <mat-toolbar>
+          <span>My App</span>
+          <span class="spacer"></span>
+          <button mat-button color="primary">Favorite</button>
+          <button mat-button color="warn">
+            <mat-icon>delete_forever</mat-icon>
+            <span>Remove Item</span>
+          </button>
+        </mat-toolbar>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Toolbar with Text Buttons</mat-card-title>
+        <mat-card-subtitle>Using `mat-button` on opposing sides of toolbar</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-content">
+        <mat-toolbar>
+          <span>My App</span>
+          <button mat-button color="primary">Home</button>
+          <button mat-button color="primary">About</button>
+          <span class="spacer"></span>
+          <button mat-button color="primary">Login</button>
+          <button mat-button color="primary">Register</button>
+        </mat-toolbar>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>

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

@@ -0,0 +1,29 @@
+.showcase-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.showcase-card {
+  margin-bottom: 8px;
+}
+
+.showcase-content {
+  padding-top: 16px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.toolbar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.example-icon {
+  padding: 0 14px;
+}

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-toolbars-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatCardModule,
+    PageComponent
+  ],
+  templateUrl: './toolbars-demo.html',
+  styleUrls: ['./toolbars-demo.scss']
+})
+export class ToolbarsDemoComponent {}

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

@@ -0,0 +1,80 @@
+<app-page title="Tooltip Showcase">
+  <div class="showcase-container default-container-padding">
+    
+    <!-- Basic Tooltip -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Basic Tooltip</mat-card-title>
+        <mat-card-subtitle>Simple text tooltip on hover</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-flat-button color="primary" matTooltip="This is a simple tooltip">
+          Hover me
+        </button>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Position -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Position</mat-card-title>
+        <mat-card-subtitle>Explicitly set tooltip position</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid" style="display: flex; gap: 16px; flex-wrap: wrap;">
+        <button mat-button matTooltip="Positioned above" matTooltipPosition="above">Above</button>
+        <button mat-button matTooltip="Positioned below" matTooltipPosition="below">Below</button>
+        <button mat-button matTooltip="Positioned left" matTooltipPosition="left">Left</button>
+        <button mat-button matTooltip="Positioned right" matTooltipPosition="right">Right</button>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Delay -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Delay</mat-card-title>
+        <mat-card-subtitle>Show and hide delays (ms)</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-flat-button color="accent" 
+                matTooltip="I take 1s to appear and 2s to disappear" 
+                [matTooltipShowDelay]="1000"
+                [matTooltipHideDelay]="2000">
+          Delayed Tooltip (Show: 1s, Hide: 2s)
+        </button>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Custom Class -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Custom Class</mat-card-title>
+        <mat-card-subtitle>Apply custom styles using matTooltipClass</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-button matTooltip="Custom styled tooltip" matTooltipClass="my-custom-tooltip">
+          Hover for custom style
+        </button>
+      </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>Conditionally disable tooltip</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid" style="flex-direction: column; align-items: flex-start;">
+        <button mat-flat-button color="primary" 
+                [matTooltip]="'I am active tooltip'" 
+                [matTooltipDisabled]="isTooltipDisabled">
+          Tooltip Target
+        </button>
+        <br>
+        <button mat-button (click)="toggleTooltip()">
+          Toggle Disabled (Current: {{ isTooltipDisabled }})
+        </button>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+</app-page>

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

@@ -0,0 +1,30 @@
+.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: row;
+  gap: 16px;
+  padding: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+// Custom tooltip class definition (requires ViewEncapsulation.None or global styles)
+// We define it here assuming ViewEncapsulation.None is used or it's placed in a style block that bypasses encapsulation.
+:host ::ng-deep .my-custom-tooltip .mat-mdc-tooltip-surface {
+  background-color: var(--mat-sys-tertiary);
+  color: var(--mat-sys-on-tertiary);
+  border-radius: 8px;
+  font-size: 14px;
+  padding: 8px 12px;
+}

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

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-tooltip-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatTooltipModule,
+    MatButtonModule,
+    PageComponent
+  ],
+  templateUrl: './tooltip-demo.html',
+  styleUrls: ['./tooltip-demo.scss']
+})
+export class TooltipDemoComponent {
+  isTooltipDisabled = false;
+
+  toggleTooltip() {
+    this.isTooltipDisabled = !this.isTooltipDisabled;
+  }
+}

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

@@ -0,0 +1,23 @@
+<app-page title="Typography Showcase">
+  <div class="showcase-container default-container-padding">
+    <mat-card class="showcase-card" *ngFor="let group of typographyGroups">
+      <mat-card-header>
+        <mat-card-title>{{ group.name }}</mat-card-title>
+        <mat-card-subtitle>{{ group.description }}</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="typography-list">
+          <div class="typography-item" *ngFor="let item of group.classes">
+            <div class="item-info">
+              <span class="item-label">{{ item.label }}</span>
+              <span class="item-class"><code>.{{ item.class }}</code></span>
+            </div>
+            <div class="item-sample" [ngClass]="item.class">
+              The quick brown fox jumps over the lazy dog.
+            </div>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>