gcp-material-ui 0.0.4

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

@@ -0,0 +1,105 @@
+<app-page title="Expansion Panel Showcase">
+  <div class="default-container-padding" style="display: flex; flex-direction: column; gap: 24px;">
+
+    <!-- Basic Expansion Panel -->
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Basic Expansion Panel</mat-card-title>
+        <mat-card-subtitle>Simple expand/collapse with header labels</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <mat-expansion-panel (opened)="panelOpenState = true"
+                             (closed)="panelOpenState = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Personal data
+            </mat-panel-title>
+            <mat-panel-description>
+              Currently I am {{panelOpenState ? 'open' : 'closed'}}
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <p>This is the expansion panel content. You can put any HTML here.</p>
+        </mat-expansion-panel>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Accordion with Action Buttons -->
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Accordion with Action Buttons</mat-card-title>
+        <mat-card-subtitle>Using action rows for navigation</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px;">
+        <mat-accordion class="example-headers-align">
+          <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Personal info
+              </mat-panel-title>
+              <mat-panel-description>
+                Type your name and age
+                <mat-icon>account_circle</mat-icon>
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <mat-form-field appearance="outline" style="width: 100%;">
+              <mat-label>First name</mat-label>
+              <input matInput>
+            </mat-form-field>
+
+            <mat-action-row>
+              <button mat-button color="primary" (click)="nextStep()">Next</button>
+            </mat-action-row>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Destination
+              </mat-panel-title>
+              <mat-panel-description>
+                Type the country name
+                <mat-icon>map</mat-icon>
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <mat-form-field appearance="outline" style="width: 100%;">
+              <mat-label>Country</mat-label>
+              <input matInput>
+            </mat-form-field>
+
+            <mat-action-row>
+              <button mat-button color="warn" (click)="prevStep()">Previous</button>
+              <button mat-button color="primary" (click)="nextStep()">Next</button>
+            </mat-action-row>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Day of the trip
+              </mat-panel-title>
+              <mat-panel-description>
+                Inform the date of the trip
+                <mat-icon>date_range</mat-icon>
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <mat-form-field appearance="outline" style="width: 100%;">
+              <mat-label>Date</mat-label>
+              <input matInput [matDatepicker]="picker">
+              <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+              <mat-datepicker #picker></mat-datepicker>
+            </mat-form-field>
+
+            <mat-action-row>
+              <button mat-button color="warn" (click)="prevStep()">Previous</button>
+              <button mat-button color="primary" (click)="setStep(0)">End</button>
+            </mat-action-row>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+</app-page>

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

@@ -0,0 +1,11 @@
+.example-headers-align {
+  .mat-expansion-panel-header-title,
+  .mat-expansion-panel-header-description {
+    flex-basis: 0;
+  }
+
+  .mat-expansion-panel-header-description {
+    justify-content: space-between;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PageComponent } from '../../components/page/page';
+import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-expansion-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    PageComponent,
+    MatCardModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    FormsModule
+  ],
+  templateUrl: './expansion-demo.html',
+  styleUrl: './expansion-demo.scss'
+})
+export class ExpansionDemoComponent {
+  panelOpenState = false;
+
+  step = 0;
+
+  setStep(index: number) {
+    this.step = index;
+  }
+
+  nextStep() {
+    this.step++;
+  }
+
+  prevStep() {
+    this.step--;
+  }
+}

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

@@ -0,0 +1,114 @@
+<app-page title="Forms Demo">
+
+  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-container default-container-padding">
+    <p>This is a sample form to demonstrate the use of Material form components.</p>
+    <div class="row">
+      <mat-form-field appearance="outline">
+        <mat-label>First Name</mat-label>
+        <input matInput formControlName="firstName" placeholder="John">
+        <mat-hint>Letters, numbers and underscores only</mat-hint>
+        @if (form.get('firstName')?.hasError('required')) {
+        <mat-error>First Name is required</mat-error>
+        }
+      </mat-form-field>
+
+          <mat-form-field appearance="outline">
+            <mat-label>Last Name</mat-label>
+            <input matInput formControlName="lastName" placeholder="Doe">
+            @if (form.get('lastName')?.hasError('required')) {
+            <mat-error>Last Name is required</mat-error>
+            }
+            </mat-form-field>
+            </div>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Email</mat-label>
+          <input matInput formControlName="email" type="email" placeholder="john.doe@example.com">
+          @if (form.get('email')?.hasError('required')) {
+          <mat-error>Email is required</mat-error>
+          }
+          @if (form.get('email')?.hasError('email')) {
+          <mat-error>Invalid email address</mat-error>
+          }
+          </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-option value="health">Healthcare</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div class="row">
+          <mat-form-field appearance="outline">
+            <mat-label>Start Date</mat-label>
+            <input matInput [matDatepicker]="picker" formControlName="startDate">
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
+          </mat-form-field>
+        </div>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Comments</mat-label>
+          <textarea matInput formControlName="comments" placeholder="Enter your comments here..." rows="2"></textarea>
+        </mat-form-field>
+
+        <div class="checkbox-row">
+          <mat-checkbox formControlName="notifications">Enable Notifications</mat-checkbox>
+        </div>
+
+        <div class="radio-group">
+          <label>Priority:</label>
+          <mat-radio-group formControlName="priority">
+            <mat-radio-button value="low">Low</mat-radio-button>
+            <mat-radio-button value="medium">Medium</mat-radio-button>
+            <mat-radio-button value="high">High</mat-radio-button>
+          </mat-radio-group>
+        </div>
+
+        <h2>More Input Variations</h2>
+        <div class="form-container">
+          <div class="row">
+            <!-- Prefix Icon -->
+            <mat-form-field appearance="outline">
+              <mat-label>Website</mat-label>
+              <mat-icon matPrefix>language</mat-icon>
+              <input matInput placeholder="example.com">
+            </mat-form-field>
+        
+            <!-- Suffix Icon Button -->
+            <mat-form-field appearance="outline">
+              <mat-label>Password</mat-label>
+              <input matInput [type]="hide ? 'password' : 'text'" placeholder="Enter Password">
+              <button type="button" mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
+                [attr.aria-pressed]="hide">
+                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+              </button>
+            </mat-form-field>
+          </div>
+        
+          <div class="row">
+            <!-- Prefix Text -->
+            <mat-form-field appearance="outline">
+              <mat-label>Amount</mat-label>
+              <span matPrefix>$&nbsp;</span>
+              <input matInput type="number" placeholder="0.00">
+              <span matSuffix>.00</span>
+            </mat-form-field>
+        
+            <!-- Hint text -->
+            <mat-form-field appearance="outline">
+              <mat-label>Username</mat-label>
+              <input matInput placeholder="john_doe">
+              <mat-hint>Letters, numbers and underscores only</mat-hint>
+            </mat-form-field>
+          </div>
+        </div>
+          <div class="actions">
+          <button mat-flat-button color="primary" type="submit" [disabled]="form.invalid">Submit</button>
+          <button mat-button>Cancel</button>
+          </div>
+          </form>
+</app-page>

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

@@ -0,0 +1,43 @@
+.form-container {
+  max-width: 600px;
+
+}
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 16px;
+}
+.row {
+  display: flex;
+  gap: 16px;
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+}
+mat-form-field {
+  width: 100%;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 12px 0;
+
+  label {
+    font: 500 0.875rem/1.25rem "Google Sans",sans-serif;
+    color: #5f6368; /* Light slate grey labels setup */
+  }
+
+  mat-radio-group {
+    display: flex;
+    gap: 16px;
+  }
+}
+.actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 16px;
+}

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

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+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 { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-forms-demo',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatButtonModule,
+    MatCardModule,
+    PageComponent,
+    MatIconModule
+  ],
+  templateUrl: './forms-demo.html',
+  styleUrl: './forms-demo.scss'
+})
+export class FormsDemoComponent {
+  form: FormGroup;
+  hide = true; /* Password visibility toggle */
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      category: [''],
+      notifications: [false],
+      priority: ['medium'],
+      startDate: [null],
+      comments: ['']
+    });
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      console.log('Form Submitted', this.form.value);
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+<app-page title="Message">
+  <div class="demo-container default-container-padding">
+    
+    <!-- Basic Demo Section -->
+    <div class="example-section">
+      <h3>Basic Demo</h3>
+      <p>Standard message formats displaying status notifications actions neatness.</p>
+      
+      <app-message type="info">Informational.</app-message>
+      <app-message type="assist">Active Assist.</app-message>
+      <app-message type="success">Success.</app-message>
+      <app-message type="warning">Warning.</app-message>
+      <app-message type="error">Error.</app-message>
+      <app-message type="destructive">Destructive.</app-message>
+    </div>
+
+    <!-- Dismiss Demo Section -->
+    <div class="example-section">
+      <h3>Dismiss Demo</h3>
+      <p>Messages configured with user dismissal toggle trigger setups accurately.</p>
+      
+      <app-message type="assist" [dismissible]="true">
+        Once fully on GM2 (not in the transitional MD1 to GM2 phase), use `mat-flat-button` and non-primary `mat-stroked-button` inside `cfc-message-actions`.
+      </app-message>
+
+      <app-message type="info" [dismissible]="true">
+        Dismissable message text.
+      </app-message>
+    </div>
+
+    <!-- Rich Demo Section -->
+    <div class="example-section">
+      <h3>Rich Demo</h3>
+      <p>Messages carrying formatted layouts links anchors and control triggers actions neatly.</p>
+      
+      <app-message type="info">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis ante eget nunc accumsan, sed viverra magna aliquam. <a href="https://google.com" target="_blank">Visit google.com</a>
+        
+        <div actions>
+          <button mat-button class="mat-small">Go to link</button>
+          <button mat-button class="mat-small">Do primary action</button>
+        </div>
+      </app-message>
+    </div>
+
+  </div>
+</app-page>

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

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MessageComponent } from './message';
+import { PageComponent } from '../../components/page/page';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'app-message-demo',
+  standalone: true,
+  imports: [CommonModule, MessageComponent, PageComponent, MatButtonModule, MatCardModule],
+  templateUrl: './message-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;
+    }
+  `]
+})
+export class MessageDemoComponent {}

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

@@ -0,0 +1,15 @@
+<div class="message-container" [ngClass]="type" *ngIf="!isDismissed">
+  <div class="message-content">
+    <mat-icon class="message-icon">{{ iconName }}</mat-icon>
+    <div class="message-body">
+      <ng-content></ng-content>
+      <div class="message-actions-rich">
+        <ng-content select="[actions]"></ng-content>
+      </div>
+    </div>
+  </div>
+  
+  <div class="message-actions" *ngIf="dismissible">
+    <button mat-button class="dismiss-btn" (click)="onDismiss()">Dismiss</button>
+  </div>
+</div>

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

@@ -0,0 +1,115 @@
+@use '@angular/material' as mat;
+@use '../../../_variables' as theme;
+
+.message-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: theme.px-to-rem(12) theme.px-to-rem(16);
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: theme.px-to-rem(16);
+  font-family: 'Roboto', sans-serif;
+
+  .message-content {
+    display: flex;
+    align-items: center;
+    gap: theme.px-to-rem(16);
+    flex: 1;
+
+    .message-icon {
+      font-size: theme.px-to-rem(24);
+      width: theme.px-to-rem(24);
+      height: theme.px-to-rem(24);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .message-body {
+      font-size: theme.px-to-rem(14);
+      line-height: theme.px-to-rem(20);
+      color: theme.$grey800;
+      flex: 1;
+      
+      ::ng-deep a {
+        color: theme.$blue600;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .message-actions {
+    margin-left: theme.px-to-rem(16);
+    
+    .dismiss-btn {
+      color: theme.$grey800;
+      border: 1px solid theme.$grey300;
+      border-radius: 4px;
+      padding: 0 theme.px-to-rem(16);
+      height: theme.px-to-rem(32);
+      line-height: theme.px-to-rem(32);
+      font-size: theme.px-to-rem(13);
+      font-weight: 500;
+    }
+  }
+
+  // Type Variations
+  &.info {
+    background-color: theme.$grey100;
+    .message-icon { color: theme.$grey600; }
+  }
+
+  &.assist {
+    background-color: theme.$blue50;
+    .message-icon { color: theme.$blue600; }
+  }
+
+  &.success {
+    background-color: theme.$green50;
+    .message-icon { color: theme.$green700; }
+  }
+
+  &.warning {
+    background-color: theme.$yellow50;
+    .message-icon { color: theme.$yellow700; }
+  }
+
+  &.error {
+    background-color: theme.$red50;
+    .message-icon { color: theme.$red700; }
+  }
+
+  &.destructive {
+    background-color: theme.$red600;
+    .message-content {
+      .message-icon { color: theme.$white; }
+      .message-body { color: theme.$white; }
+    }
+  }
+}
+
+// Support for rich templates Actions
+.message-actions-rich {
+  ::ng-deep [actions] {
+    display: flex;
+    gap: theme.px-to-rem(8);
+    margin-top: theme.px-to-rem(12);
+  }
+  
+  ::ng-deep button {
+    border: 1px solid theme.$grey300;
+    border-radius: 4px;
+    height: theme.px-to-rem(32);
+    padding: 0 theme.px-to-rem(12);
+    font-size: theme.px-to-rem(13);
+    color: theme.$grey800;
+    background-color: #fff;
+    cursor: pointer;
+    &:hover { background-color: theme.$grey50; }
+  }
+}

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

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+export type MessageType = 'info' | 'success' | 'warning' | 'error' | 'destructive' | 'assist';
+
+@Component({
+  selector: 'app-message',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatButtonModule],
+  templateUrl: './message.html',
+  styleUrl: './message.scss'
+})
+export class MessageComponent {
+  @Input() type: MessageType = 'info';
+  @Input() dismissible: boolean = false;
+  
+  @Output() dismissed = new EventEmitter<void>();
+
+  isDismissed: boolean = false;
+
+  get iconName(): string {
+    switch (this.type) {
+      case 'success': return 'check_circle';
+      case 'warning': return 'warning';
+      case 'error': return 'error';
+      case 'destructive': return 'error';
+      case 'assist': return 'lightbulb';
+      case 'info':
+      default: return 'info';
+    }
+  }
+
+  onDismiss(): void {
+    this.isDismissed = true;
+    this.dismissed.emit();
+  }
+}

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

@@ -0,0 +1,46 @@
+<app-page title="Sidebar Drawer Showcase">
+  <div class="demo-actions default-container-padding">
+    <button mat-flat-button color="primary" (click)="toggleSidebar()">
+      Open Simple Sidebar
+    </button>
+    
+    <button mat-stroked-button color="accent" (click)="toggleSidebarWithContent()">
+      Open Summary Sidebar
+    </button>
+  </div>
+
+  <!-- Sidebar 1: Simple -->
+  <app-sidebar [isOpen]="isSidebarOpen" title="Quick Info" (close)="isSidebarOpen = false">
+    <p>This is a basic sidebar panel drawer layout wrapper projection with content projection projection overlay framing.</p>
+  </app-sidebar>
+
+  <!-- Sidebar 2: With Content Details -->
+  <app-sidebar [isOpen]="isSidebarWithContentOpen" title="Resource Properties" (close)="isSidebarWithContentOpen = false">
+    <div class="property-list">
+      <div class="property-item">
+        <span class="label">Name</span>
+        <span class="value">app-server-01</span>
+      </div>
+      <div class="property-item">
+        <span class="label">Type</span>
+        <span class="value">Compute Instance</span>
+      </div>
+      <div class="property-item">
+        <span class="label">Network</span>
+        <span class="value">vpc-secure-01</span>
+      </div>
+      <div class="property-item">
+        <span class="label">Status</span>
+        <span class="value status-active">Active</span>
+      </div>
+    </div>
+
+    <mat-divider style="margin: 24px 0;"></mat-divider>
+
+    <h4>Performance Metrics</h4>
+    <div class="metrics-placeholder">
+      <p>CPU Utilization: 45%</p>
+      <p>Memory Usage: 2.1 GB / 4.0 GB</p>
+    </div>
+  </app-sidebar>
+</app-page>