gcp-material-ui 0.0.4

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

@@ -0,0 +1,92 @@
+<app-page title="Buttons Showcase">
+  <div class="showcase-container default-container-padding">
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Flat Buttons</mat-card-title>
+        <mat-card-subtitle>Solid background buttons without elevation shadow</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-flat-button color="primary">Primary</button>
+        <button mat-flat-button disabled>Disabled</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Stroked Buttons</mat-card-title>
+        <mat-card-subtitle>Outlined buttons with transparent background</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-stroked-button>Basic</button>
+        <button mat-stroked-button color="primary">Primary</button>
+        <button mat-stroked-button disabled>Disabled</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Text Buttons</mat-card-title>
+        <mat-card-subtitle>Border-less with transparent background buttons</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-button>Basic</button>
+        <button mat-button color="primary">Primary</button>
+        <button mat-button disabled>Disabled</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Icon Buttons</mat-card-title>
+        <mat-card-subtitle>Circular flat icon actions</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-icon-button><mat-icon>home</mat-icon></button>
+        <button mat-icon-button color="primary"><mat-icon>favorite</mat-icon></button>
+        <button mat-icon-button color="accent"><mat-icon>star</mat-icon></button>
+        <button mat-icon-button color="warn"><mat-icon>delete</mat-icon></button>
+        <button mat-icon-button disabled><mat-icon>block</mat-icon></button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Small Buttons (28px)</mat-card-title>
+        <mat-card-subtitle>Displaying dense variants using `.btn-small` class modifier</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+         <button mat-flat-button color="primary" class="btn-small">Flat Small</button>
+         <button mat-stroked-button color="primary" class="btn-small">Stroked Small</button>
+         <button mat-button color="primary" class="btn-small">Text Small</button>
+         
+         <button mat-flat-button color="accent" class="btn-small">
+           <mat-icon style="font-size: 16px; width: 16px; height: 16px;">add</mat-icon>
+           <span>With Icon</span>
+         </button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Button Features</mat-card-title>
+        <mat-card-subtitle>Combinations containing icons and sizing structures</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <button mat-flat-button color="primary">
+          <mat-icon>cloud_upload</mat-icon>
+          <span>Upload File</span>
+        </button>
+
+        <button mat-stroked-button color="accent">
+          <mat-icon>download</mat-icon>
+          <span>Download</span>
+        </button>
+
+        <button mat-button color="warn">
+          <mat-icon>delete_forever</mat-icon>
+          <span>Remove Item</span>
+        </button>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>

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

@@ -0,0 +1,38 @@
+.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;
+}
+
+.column-group {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+
+  label {
+    min-width: 200px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--mat-sys-on-surface-variant, #44474e);
+  }
+}
+
+mat-divider {
+  width: 100%;
+}

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

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-buttons-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDividerModule,
+    MatCardModule,
+    PageComponent
+  ],
+  templateUrl: './buttons-demo.html',
+  styleUrls: ['./buttons-demo.scss']
+})
+export class ButtonsDemoComponent {}

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

@@ -0,0 +1,52 @@
+<app-page title="Card Showcase">
+  <div class="showcase-container default-container-padding">
+    
+    <!-- Basic Card -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Basic Card</mat-card-title>
+        <mat-card-subtitle>Simple text content</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <p>This is a standard Angular Material card context. It provides a simple container for text or components.</p>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Card with Actions -->
+    <mat-card class="showcase-card">
+      <mat-card-header>
+        <mat-card-title>Card with Actions</mat-card-title>
+        <mat-card-subtitle>Action buttons at the bottom</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <p>You can add action buttons to the bottom of a card using `mat-card-actions`.</p>
+      </mat-card-content>
+      <mat-card-actions [align]="'end'">
+        <button mat-button>Cancel</button>
+        <button mat-flat-button color="primary">Accept</button>
+      </mat-card-actions>
+    </mat-card>
+
+    <!-- Rich Card with Media -->
+    <mat-card class="showcase-card">
+      <div mat-card-image class="mock-image">
+        <span>Image Placeholder (Mock)</span>
+      </div>
+      <mat-card-header>
+        <div mat-card-avatar class="circle-avatar">
+          <mat-icon>person</mat-icon>
+        </div>
+        <mat-card-title>Rich Content Card</mat-card-title>
+        <mat-card-subtitle>Subhead and Avatar</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content class="showcase-grid">
+        <p>This card demonstrates header avatars, images, and action buttons for news or profiles.</p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-icon-button><mat-icon>favorite</mat-icon></button>
+        <button mat-icon-button><mat-icon>share</mat-icon></button>
+      </mat-card-actions>
+    </mat-card>
+
+  </div>
+</app-page>

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

@@ -0,0 +1,47 @@
+@use '@angular/material' as mat;
+@use '../../../styles' as *; // Assuming styles.scss has global variables or we reference variables.scss
+@use '../../../variables' as *;
+
+.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;
+}
+
+// Mock elements for demo
+.mock-image {
+  height: 200px;
+  background-color: $grey200; // Light gray using variable
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: $grey500;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.circle-avatar {
+  background-color: $blue500; // Blue using variable
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}

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

@@ -0,0 +1,21 @@
+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 { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-card-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    PageComponent
+  ],
+  templateUrl: './card-demo.html',
+  styleUrls: ['./card-demo.scss']
+})
+export class CardDemoComponent {}

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

@@ -0,0 +1,88 @@
+<app-page title="System Dashboard & Analytics">
+  <div class="charts-grid default-container-padding">
+    <!-- Line Chart -->
+    <mat-card class="chart-card">
+      <mat-card-header>
+        <mat-card-title>Network Traffic</mat-card-title>
+        <mat-card-subtitle>Line Chart demonstrating data over time</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="chart-wrapper">
+          <canvas baseChart
+                  [data]="lineChartData"
+                  [options]="lineChartOptions"
+                  [type]="lineChartType">
+          </canvas>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Bar Chart -->
+    <mat-card class="chart-card">
+      <mat-card-header>
+        <mat-card-title>Compute Allocation</mat-card-title>
+        <mat-card-subtitle>Bar Chart showing resource distribution per server</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="chart-wrapper">
+          <canvas baseChart
+                  [data]="barChartData"
+                  [options]="barChartOptions"
+                  [type]="barChartType">
+          </canvas>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Pie Chart -->
+    <mat-card class="chart-card">
+      <mat-card-header>
+        <mat-card-title>Traffic Distribution</mat-card-title>
+        <mat-card-subtitle>Pie Chart of referral sources</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="chart-wrapper small-chart">
+          <canvas baseChart
+                  [data]="pieChartData"
+                  [options]="pieChartOptions"
+                  [type]="pieChartType">
+          </canvas>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Doughnut Chart -->
+    <mat-card class="chart-card">
+      <mat-card-header>
+        <mat-card-title>Storage Usage</mat-card-title>
+        <mat-card-subtitle>Doughnut Chart of disk metrics</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="chart-wrapper small-chart">
+          <canvas baseChart
+                  [data]="doughnutChartData"
+                  [options]="doughnutChartOptions"
+                  [type]="doughnutChartType">
+          </canvas>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Radar Chart -->
+    <mat-card class="chart-card">
+      <mat-card-header>
+        <mat-card-title>Cluster Performance</mat-card-title>
+        <mat-card-subtitle>Radar Chart comparing metrics across clusters</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="chart-wrapper radar-chart">
+          <canvas baseChart
+                  [data]="radarChartData"
+                  [options]="radarChartOptions"
+                  [type]="radarChartType">
+          </canvas>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>

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

@@ -0,0 +1,50 @@
+@use '@angular/material' as mat;
+@use '../../../_variables' as theme;
+
+.charts-grid {
+  display: flex;
+  flex-direction: column;
+  gap: theme.px-to-rem(24);
+
+  .chart-card {
+    background: #fff;
+    border: 1px solid theme.$grey200;
+    border-radius: theme.px-to-rem(8);
+    box-shadow: none !important; /* Material overrides override this usually */
+
+    mat-card-header {
+      padding: theme.px-to-rem(16) theme.px-to-rem(16) 0;
+
+      mat-card-title {
+        font-size: theme.px-to-rem(16);
+        font-weight: 500;
+        color: theme.$grey900;
+      }
+
+      mat-card-subtitle {
+        font-size: theme.px-to-rem(12);
+        color: theme.$grey600;
+      }
+    }
+
+    mat-card-content {
+      padding: theme.px-to-rem(16);
+      
+      .chart-wrapper {
+        position: relative;
+        height: theme.px-to-rem(300);
+        width: 100%;
+        overflow: hidden;
+
+        &.small-chart {
+          height: theme.px-to-rem(250);
+        }
+
+        &.radar-chart {
+          height: theme.px-to-rem(350);
+        }
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,201 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { BaseChartDirective } from 'ng2-charts';
+import { ChartConfiguration, ChartData, ChartType, ChartOptions } from 'chart.js';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-charts-demo',
+  standalone: true,
+  imports: [CommonModule, MatCardModule, BaseChartDirective, PageComponent],
+  templateUrl: './charts-demo.html',
+  styleUrl: './charts-demo.scss'
+})
+export class ChartsDemoComponent {
+  // --- Theme Colors ---
+  private colors = {
+    blue600: '#0c67df',
+    blue400: '#669df6',
+    blue200: '#aecbfa',
+    red600: '#d93025',
+    red400: '#ee675c',
+    red200: '#f6aea9',
+    grey600: '#80868b',
+    grey400: '#bdc1c6',
+    grey200: '#e8eaed'
+  };
+
+  // --- Line Chart Configuration ---
+  public lineChartData: ChartConfiguration['data'] = {
+    datasets: [
+      {
+        data: [65, 59, 80, 81, 56, 55, 40],
+        label: 'Network In (Mbps)',
+        backgroundColor: 'rgba(12, 103, 223, 0.2)',
+        borderColor: this.colors.blue600,
+        pointBackgroundColor: this.colors.blue600,
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: this.colors.blue600,
+        fill: 'origin',
+      },
+      {
+        data: [28, 48, 40, 19, 86, 27, 90],
+        label: 'Network Out (Mbps)',
+        backgroundColor: 'rgba(217, 48, 37, 0.2)',
+        borderColor: this.colors.red600,
+        pointBackgroundColor: this.colors.red600,
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: this.colors.red600,
+        fill: 'origin',
+      }
+    ],
+    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+  };
+
+  public lineChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: true, position: 'bottom' }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        grid: { color: this.colors.grey200 }
+      },
+      x: {
+        grid: { display: false }
+      }
+    }
+  };
+
+  public lineChartType: 'line' = 'line';
+
+  // --- Bar Chart Configuration ---
+  public barChartData: ChartData<'bar'> = {
+    labels: ['Server A', 'Server B', 'Server C', 'Server D', 'Server E'],
+    datasets: [
+      {
+        data: [4.2, 5.8, 2.3, 7.1, 4.9],
+        label: 'CPU Usage (Cores)',
+        backgroundColor: this.colors.blue400,
+        hoverBackgroundColor: this.colors.blue600
+      },
+      {
+        data: [12, 16, 8, 24, 14],
+        label: 'Memory Usage (GB)',
+        backgroundColor: this.colors.red400,
+        hoverBackgroundColor: this.colors.red600
+      }
+    ]
+  };
+
+  public barChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: true, position: 'bottom' }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        grid: { color: this.colors.grey200 }
+      }
+    }
+  };
+
+  public barChartType: 'bar' = 'bar';
+
+  // --- Pie Chart Configuration ---
+  public pieChartData: ChartData<'pie', number[], string> = {
+    labels: ['Direct', 'Organic Search', 'Social Media', 'Referral'],
+    datasets: [{
+      data: [350, 450, 120, 80],
+      backgroundColor: [
+        this.colors.blue600,
+        this.colors.blue400,
+        this.colors.blue200,
+        this.colors.grey400
+      ]
+    }]
+  };
+
+  public pieChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: true, position: 'bottom' }
+    }
+  };
+
+  public pieChartType: 'pie' = 'pie';
+
+  // --- Doughnut Chart Configuration ---
+  public doughnutChartData: ChartData<'doughnut', number[], string> = {
+    labels: ['Used Space', 'Free Space', 'Reserved'],
+    datasets: [{
+      data: [65, 25, 10],
+      backgroundColor: [
+        this.colors.red400,
+        this.colors.grey200,
+        this.colors.grey400
+      ],
+      borderWidth: 0
+    }]
+  };
+
+  public doughnutChartOptions: ChartOptions<'doughnut'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: '70%',
+    plugins: {
+      legend: { display: true, position: 'bottom' }
+    }
+  };
+
+  public doughnutChartType: 'doughnut' = 'doughnut';
+
+  // --- Radar Chart Configuration ---
+  public radarChartData: ChartData<'radar'> = {
+    labels: ['Availability', 'Performance', 'Reliability', 'Scalability', 'Security', 'Cost'],
+    datasets: [
+      {
+        data: [95, 80, 90, 85, 95, 75],
+        label: 'Cluster A',
+        backgroundColor: 'rgba(12, 103, 223, 0.2)',
+        borderColor: this.colors.blue600,
+        pointBackgroundColor: this.colors.blue600,
+        pointBorderColor: '#fff',
+      },
+      {
+        data: [85, 90, 85, 95, 80, 90],
+        label: 'Cluster B',
+        backgroundColor: 'rgba(217, 48, 37, 0.2)',
+        borderColor: this.colors.red600,
+        pointBackgroundColor: this.colors.red600,
+        pointBorderColor: '#fff',
+      }
+    ]
+  };
+
+  public radarChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: true, position: 'bottom' }
+    },
+    scales: {
+      r: {
+        angleLines: { color: this.colors.grey200 },
+        grid: { color: this.colors.grey200 },
+        pointLabels: { font: { size: 11 } },
+        beginAtZero: true
+      }
+    }
+  };
+
+  public radarChartType: 'radar' = 'radar';
+}