sdga-ui 1.0.3 → 1.0.5

package/demo-angular/src/app/views/forms/forms.component.html

@@ -0,0 +1,347 @@
+<div class="container py-5">
+  <h1 class="display-4 mb-4">{{ 'forms.title' | translate }}</h1>
+  <p class="lead mb-5">{{ 'forms.subtitle' | translate }}</p>
+
+  <!-- CHECKBOXES -->
+  <section class="mb-5" aria-labelledby="checkboxesHeading">
+    <h2 id="checkboxesHeading" class="h4 mb-3">{{ 'forms.checkboxes' | translate }}</h2>
+    <div class="d-flex gap-2 mb-2">
+        <input type="checkbox" class="form-check-input ripple" id="chkDemoMd" aria-label="Demo checkbox medium" checked>
+        <input type="checkbox" class="form-check-input ripple form-check-input-sm" id="chkDemoSm" aria-label="Demo checkbox small" checked>
+        <input type="checkbox" class="form-check-input ripple form-check-input-xs" id="chkDemoXs" aria-label="Demo checkbox extra small" checked>
+    </div>
+    <div class="row g-3">
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Primary</h3>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkPrimaryMd" checked>
+          <label class="form-check-label" for="chkPrimaryMd">Medium</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple indeterminate-check" id="chkPrimaryIndeterminateMd">
+          <label class="form-check-label" for="chkPrimaryIndeterminateMd">Medium indeterminate</label>
+        </div>
+        <div class="form-check form-check-sm mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkPrimarySm" checked>
+          <label class="form-check-label" for="chkPrimarySm">Small</label>
+        </div>
+        <div class="form-check form-check-xs mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkPrimaryXs" checked>
+          <label class="form-check-label" for="chkPrimaryXs">Extra small</label>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Disabled</h3>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkDisabledMd" disabled>
+          <label class="form-check-label" for="chkDisabledMd">Medium unchecked</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkDisabledCheckedMd" checked disabled>
+          <label class="form-check-label" for="chkDisabledCheckedMd">Medium checked</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple indeterminate-check" id="chkDisabledIndeterminateMd" disabled>
+          <label class="form-check-label" for="chkDisabledIndeterminateMd">Medium indeterminate</label>
+        </div>
+        <div class="form-check form-check-sm mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkDisabledSm" disabled>
+          <label class="form-check-label" for="chkDisabledSm">Small unchecked</label>
+        </div>
+        <div class="form-check form-check-xs mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkDisabledXs" checked disabled>
+          <label class="form-check-label" for="chkDisabledXs">Extra small checked</label>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Readonly</h3>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkReadonlyMd" readonly>
+          <label class="form-check-label" for="chkReadonlyMd">Medium unchecked</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkReadonlyCheckedMd" checked readonly>
+          <label class="form-check-label" for="chkReadonlyCheckedMd">Medium checked</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple indeterminate-check" id="chkReadonlyIndeterminateMd" readonly>
+          <label class="form-check-label" for="chkReadonlyIndeterminateMd">Medium indeterminate</label>
+        </div>
+        <div class="form-check form-check-sm mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkReadonlySm" readonly>
+          <label class="form-check-label" for="chkReadonlySm">Small unchecked</label>
+        </div>
+        <div class="form-check form-check-xs mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkReadonlyXs" checked readonly>
+          <label class="form-check-label" for="chkReadonlyXs">Extra small checked</label>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Neutral</h3>
+        <div class="form-check form-check-neutral form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkNeutralMd" checked>
+          <label class="form-check-label" for="chkNeutralMd">Medium</label>
+        </div>
+        <div class="form-check form-check-neutral form-check-md mb-2">
+          <input type="checkbox" class="form-check-input ripple indeterminate-check" id="chkNeutralIndeterminateMd">
+          <label class="form-check-label" for="chkNeutralIndeterminateMd">Medium indeterminate</label>
+        </div>
+        <div class="form-check form-check-neutral form-check-sm mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkNeutralSm" checked>
+          <label class="form-check-label" for="chkNeutralSm">Small</label>
+        </div>
+        <div class="form-check form-check-neutral form-check-xs mb-2">
+          <input type="checkbox" class="form-check-input ripple" id="chkNeutralXs" checked>
+          <label class="form-check-label" for="chkNeutralXs">Extra small</label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Code Examples for Checkboxes -->
+    <div class="mt-4">
+      <h3 class="h6 mb-3">Primary Checkboxes</h3>
+      <app-code-example [htmlCode]="checkboxPrimaryCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Disabled Checkboxes</h3>
+      <app-code-example [htmlCode]="checkboxDisabledCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Readonly Checkboxes</h3>
+      <app-code-example [htmlCode]="checkboxReadonlyCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Neutral Checkboxes</h3>
+      <app-code-example [htmlCode]="checkboxNeutralCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Indeterminate Checkbox</h3>
+      <app-code-example 
+        [htmlCode]="checkboxIndeterminateHtmlCode" 
+        [tsCode]="checkboxIndeterminateTsCode">
+      </app-code-example>
+    </div>
+  </section>
+
+  <!-- RADIOS -->
+  <section class="mb-5" aria-labelledby="radiosHeading">
+    <h2 id="radiosHeading" class="h4 mb-3">{{ 'forms.radios' | translate }}</h2>
+    <div class="d-flex gap-2 mb-2">
+        <input class="form-check-input ripple" type="radio" name="radioDemo" id="radDemoMd" aria-label="Demo radio medium" checked>
+        <input class="form-check-input form-check-input-sm ripple" type="radio" name="radioDemo" id="radDemoSm" aria-label="Demo radio small">
+        <input class="form-check-input form-check-input-xs ripple" type="radio" name="radioDemo" id="radDemoXs" aria-label="Demo radio extra small">
+    </div>
+    <div class="row g-3">
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Primary</h3>
+        <div class="form-check form-check-md mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioPrimaryGroup" id="radPrimaryCheckedMd" checked>
+          <label class="form-check-label" for="radPrimaryCheckedMd">Medium</label>
+        </div>
+        <div class="form-check form-check-sm mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioPrimaryGroup" id="radPrimaryCheckedSm">
+          <label class="form-check-label" for="radPrimaryCheckedSm">Small</label>
+        </div>
+        <div class="form-check form-check-xs mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioPrimaryGroup" id="radPrimaryCheckedXs">
+          <label class="form-check-label" for="radPrimaryCheckedXs">Extra small</label>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Disabled</h3>
+        <div class="form-check form-check-md mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledMd" disabled>
+          <label class="form-check-label" for="radDisabledMd">Medium unchecked</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledCheckedMd" checked disabled>
+          <label class="form-check-label" for="radDisabledCheckedMd">Medium checked</label>
+        </div>
+        <div class="form-check form-check-sm mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledSm" disabled>
+          <label class="form-check-label" for="radDisabledSm">Small unchecked</label>
+        </div>
+        <div class="form-check form-check-xs mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledXs" checked disabled>
+          <label class="form-check-label" for="radDisabledXs">Extra small checked</label>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Readonly</h3>
+        <div class="form-check form-check-md mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlyMd" readonly>
+          <label class="form-check-label" for="radReadonlyMd">Medium unchecked</label>
+        </div>
+        <div class="form-check form-check-md mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlyCheckedMd" checked readonly>
+          <label class="form-check-label" for="radReadonlyCheckedMd">Medium checked</label>
+        </div>
+        <div class="form-check form-check-sm mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlySm" readonly>
+          <label class="form-check-label" for="radReadonlySm">Small unchecked</label>
+        </div>
+        <div class="form-check form-check-xs mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlyXs" checked readonly>
+          <label class="form-check-label" for="radReadonlyXs">Extra small checked</label>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <h3 class="h6 mb-2">Neutral</h3>
+        <div class="form-check form-check-neutral form-check-md mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioNeutral" id="radNeutralMd" checked>
+          <label class="form-check-label" for="radNeutralMd">Medium</label>
+        </div>
+        <div class="form-check form-check-neutral form-check-sm mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioNeutral" id="radNeutralSm">
+          <label class="form-check-label" for="radNeutralSm">Small</label>
+        </div>
+        <div class="form-check form-check-neutral form-check-xs mb-2">
+          <input class="form-check-input ripple" type="radio" name="radioNeutral" id="radNeutralXs">
+          <label class="form-check-label" for="radNeutralXs">Extra small</label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Code Examples for Radios -->
+    <div class="mt-4">
+      <h3 class="h6 mb-3">Primary Radio Buttons</h3>
+      <app-code-example [htmlCode]="radioPrimaryCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Disabled Radio Buttons</h3>
+      <app-code-example [htmlCode]="radioDisabledCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Readonly Radio Buttons</h3>
+      <app-code-example [htmlCode]="radioReadonlyCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Neutral Radio Buttons</h3>
+      <app-code-example [htmlCode]="radioNeutralCode"></app-code-example>
+    </div>
+  </section>
+
+  <!-- SWITCHES -->
+  <div class="d-flex gap-2 justify-content-between">
+    <section  class="mb-5" aria-labelledby="switchesHeading">
+      <h2 id="switchesHeading" class="h4 mb-3">{{ 'forms.switches' | translate }}</h2>
+      <div class="form-check form-switch mb-2">
+        <input class="form-check-input" type="checkbox" role="switch" id="switchDefault">
+        <label class="form-check-label" for="switchDefault">{{ 'forms.switch_default' | translate }}</label>
+      </div>
+      <div class="form-check form-switch mb-2">
+        <input class="form-check-input" type="checkbox" role="switch" id="switchDisabled" disabled>
+        <label class="form-check-label" for="switchDisabled">{{ 'forms.switch_disabled' | translate }}</label>
+      </div>
+      <div class="form-check form-switch mb-2">
+        <input class="form-check-input" checked type="checkbox" role="switch" id="switchDefault">
+        <label class="form-check-label" for="switchDefault">{{ 'forms.switch_checked' | translate }}</label>
+      </div>
+      <div class="form-check form-switch mb-2">
+        <input class="form-check-input" checked type="checkbox" role="switch" id="switchDisabled" disabled>
+        <label class="form-check-label" for="switchDisabled">{{ 'forms.switch_disabled' | translate }}</label>
+      </div>
+
+      <!-- Code Example for Switches -->
+      <div class="mt-4">
+        <h3 class="h6 mb-3">Switch Examples</h3>
+        <app-code-example [htmlCode]="switchCode"></app-code-example>
+      </div>
+    </section>
+  </div>
+  <!-- TEXT INPUTS -->
+  <section class="mb-5" aria-labelledby="textInputsHeading">
+    <h2 id="textInputsHeading" class="h4 mb-3">{{ 'forms.text_inputs' | translate }}</h2>
+    <div class="mb-3">
+      <label for="exampleInputEmail1" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="name@example.com">
+      <div class="form-text">We'll never share your email with anyone else.</div>
+    </div>
+    <div class="mb-3">
+      <label for="exampleInputPassword1" class="form-label">Password</label>
+      <input type="password" class="form-control" id="exampleInputPassword1">
+    </div>
+    <div class="mb-3">
+      <label for="exampleFormControlTextarea1" class="form-label">Textarea</label>
+      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+    </div>
+
+    <!-- Code Examples for Text Inputs -->
+    <div class="mt-4">
+      <h3 class="h6 mb-3">Email Input</h3>
+      <app-code-example [htmlCode]="textInputEmailCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Password Input</h3>
+      <app-code-example [htmlCode]="textInputPasswordCode"></app-code-example>
+    </div>
+    
+    <div class="mt-3">
+      <h3 class="h6 mb-3">Textarea</h3>
+      <app-code-example [htmlCode]="textInputTextareaCode"></app-code-example>
+    </div>
+  </section>
+
+  <!-- SELECT -->
+  <section class="mb-5" aria-labelledby="selectHeading">
+    <h2 id="selectHeading" class="h4 mb-3">{{ 'forms.select' | translate }}</h2>
+    <div class="mb-3">
+      <label for="exampleSelect" class="form-label">Example select</label>
+      <select class="form-select" id="exampleSelect">
+        <option selected>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
+
+    <!-- Code Example for Select -->
+    <div class="mt-4">
+      <h3 class="h6 mb-3">Select Dropdown</h3>
+      <app-code-example [htmlCode]="selectCode"></app-code-example>
+    </div>
+  </section>
+
+  <!-- RANGE -->
+  <section class="mb-5" aria-labelledby="rangeHeading">
+    <h2 id="rangeHeading" class="h4 mb-3">{{ 'forms.range' | translate }}</h2>
+    <div class="mb-3">
+      <label for="customRange" class="form-label">Example range</label>
+      <input type="range" class="form-range" id="customRange">
+    </div>
+
+    <!-- Code Example for Range -->
+    <div class="mt-4">
+      <h3 class="h6 mb-3">Range Slider</h3>
+      <app-code-example [htmlCode]="rangeCode"></app-code-example>
+    </div>
+  </section>
+
+  <!-- INPUT SIZES -->
+  <section class="mb-5" aria-labelledby="sizesHeading">
+    <h2 id="sizesHeading" class="h4 mb-3">{{ 'forms.input_sizes' | translate }}</h2>
+    <input class="form-control form-control-lg mb-2" type="text" placeholder="Large input" aria-label="Large input">
+    <input class="form-control mb-2" type="text" placeholder="Default input" aria-label="Default input">
+    <input class="form-control form-control-sm" type="text" placeholder="Small input" aria-label="Small input">
+
+    <!-- Code Example for Input Sizes -->
+    <div class="mt-4">
+      <h3 class="h6 mb-3">Input Size Variations</h3>
+      <app-code-example [htmlCode]="inputSizesCode"></app-code-example>
+    </div>
+  </section>
+
+  <!-- FORM ACTION -->
+  <section class="mb-5" aria-labelledby="actionsHeading">
+    <h2 id="actionsHeading" class="h4 mb-3">{{ 'forms.actions' | translate }}</h2>
+    <button type="button" class="btn btn-primary">Submit</button>
+  </section>
+</div>

package/demo-angular/src/app/views/forms/forms.component.scss

@@ -0,0 +1,3 @@
+.demo-section {
+  margin-bottom: 4rem;
+}

package/demo-angular/src/app/views/forms/forms.component.ts

@@ -0,0 +1,222 @@
+import { Component, ChangeDetectionStrategy, AfterViewInit, inject, PLATFORM_ID, viewChild, ElementRef } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-forms',
+  imports: [TranslateModule, CodeExampleComponent],
+  templateUrl: './forms.component.html',
+  styleUrl: './forms.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FormsComponent implements AfterViewInit {
+  private readonly platformId = inject(PLATFORM_ID);
+
+  // Checkbox examples
+  checkboxPrimaryCode = `<div class="form-check form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkPrimaryMd" checked>
+  <label class="form-check-label" for="chkPrimaryMd">Medium</label>
+</div>
+<div class="form-check form-check-sm mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkPrimarySm" checked>
+  <label class="form-check-label" for="chkPrimarySm">Small</label>
+</div>
+<div class="form-check form-check-xs mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkPrimaryXs" checked>
+  <label class="form-check-label" for="chkPrimaryXs">Extra small</label>
+</div>`;
+
+  checkboxDisabledCode = `<div class="form-check form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkDisabledMd" disabled>
+  <label class="form-check-label" for="chkDisabledMd">Medium unchecked</label>
+</div>
+<div class="form-check form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkDisabledCheckedMd" checked disabled>
+  <label class="form-check-label" for="chkDisabledCheckedMd">Medium checked</label>
+</div>
+<div class="form-check form-check-sm mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkDisabledSm" disabled>
+  <label class="form-check-label" for="chkDisabledSm">Small unchecked</label>
+</div>`;
+
+  checkboxReadonlyCode = `<div class="form-check form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkReadonlyMd" readonly>
+  <label class="form-check-label" for="chkReadonlyMd">Medium unchecked</label>
+</div>
+<div class="form-check form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkReadonlyCheckedMd" checked readonly>
+  <label class="form-check-label" for="chkReadonlyCheckedMd">Medium checked</label>
+</div>
+<div class="form-check form-check-sm mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkReadonlySm" readonly>
+  <label class="form-check-label" for="chkReadonlySm">Small unchecked</label>
+</div>`;
+
+  checkboxNeutralCode = `<div class="form-check form-check-neutral form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkNeutralMd" checked>
+  <label class="form-check-label" for="chkNeutralMd">Medium</label>
+</div>
+<div class="form-check form-check-neutral form-check-sm mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkNeutralSm" checked>
+  <label class="form-check-label" for="chkNeutralSm">Small</label>
+</div>
+<div class="form-check form-check-neutral form-check-xs mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkNeutralXs" checked>
+  <label class="form-check-label" for="chkNeutralXs">Extra small</label>
+</div>`;
+
+  // Indeterminate checkbox example
+  checkboxIndeterminateHtmlCode = `<div class="form-check form-check-md mb-2">
+  <input type="checkbox" class="form-check-input ripple" id="chkIndeterminate" #indeterminateCheckbox>
+  <label class="form-check-label" for="chkIndeterminate">Indeterminate checkbox</label>
+</div>`;
+
+  checkboxIndeterminateTsCode = `import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html'
+})
+export class ExampleComponent implements AfterViewInit {
+  @ViewChild('indeterminateCheckbox') indeterminateCheckbox!: ElementRef<HTMLInputElement>;
+
+  ngAfterViewInit(): void {
+    // Set checkbox to indeterminate state
+    if (this.indeterminateCheckbox) {
+      this.indeterminateCheckbox.nativeElement.indeterminate = true;
+    }
+  }
+}
+
+// Alternative approach using direct DOM query
+ngAfterViewInit(): void {
+  const checkbox = document.getElementById('chkIndeterminate') as HTMLInputElement;
+  if (checkbox) {
+    checkbox.indeterminate = true;
+  }
+}`;
+
+  // Radio button examples
+  radioPrimaryCode = `<div class="form-check form-check-md mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioPrimaryGroup" id="radPrimaryCheckedMd" checked>
+  <label class="form-check-label" for="radPrimaryCheckedMd">Medium</label>
+</div>
+<div class="form-check form-check-sm mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioPrimaryGroup" id="radPrimaryCheckedSm">
+  <label class="form-check-label" for="radPrimaryCheckedSm">Small</label>
+</div>
+<div class="form-check form-check-xs mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioPrimaryGroup" id="radPrimaryCheckedXs">
+  <label class="form-check-label" for="radPrimaryCheckedXs">Extra small</label>
+</div>`;
+
+  radioDisabledCode = `<div class="form-check form-check-md mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledMd" disabled>
+  <label class="form-check-label" for="radDisabledMd">Medium unchecked</label>
+</div>
+<div class="form-check form-check-md mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledCheckedMd" checked disabled>
+  <label class="form-check-label" for="radDisabledCheckedMd">Medium checked</label>
+</div>
+<div class="form-check form-check-sm mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioDisabled" id="radDisabledSm" disabled>
+  <label class="form-check-label" for="radDisabledSm">Small unchecked</label>
+</div>`;
+
+  radioReadonlyCode = `<div class="form-check form-check-md mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlyMd" readonly>
+  <label class="form-check-label" for="radReadonlyMd">Medium unchecked</label>
+</div>
+<div class="form-check form-check-md mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlyCheckedMd" checked readonly>
+  <label class="form-check-label" for="radReadonlyCheckedMd">Medium checked</label>
+</div>
+<div class="form-check form-check-sm mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioReadonly" id="radReadonlySm" readonly>
+  <label class="form-check-label" for="radReadonlySm">Small unchecked</label>
+</div>`;
+
+  radioNeutralCode = `<div class="form-check form-check-neutral form-check-md mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioNeutral" id="radNeutralMd" checked>
+  <label class="form-check-label" for="radNeutralMd">Medium</label>
+</div>
+<div class="form-check form-check-neutral form-check-sm mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioNeutral" id="radNeutralSm">
+  <label class="form-check-label" for="radNeutralSm">Small</label>
+</div>
+<div class="form-check form-check-neutral form-check-xs mb-2">
+  <input class="form-check-input ripple" type="radio" name="radioNeutral" id="radNeutralXs">
+  <label class="form-check-label" for="radNeutralXs">Extra small</label>
+</div>`;
+
+  // Switch examples
+  switchCode = `<div class="form-check form-switch mb-2">
+  <input class="form-check-input" type="checkbox" role="switch" id="switchDefault">
+  <label class="form-check-label" for="switchDefault">Default switch</label>
+</div>
+<div class="form-check form-switch mb-2">
+  <input class="form-check-input" type="checkbox" role="switch" id="switchDisabled" disabled>
+  <label class="form-check-label" for="switchDisabled">Disabled switch</label>
+</div>
+<div class="form-check form-switch mb-2">
+  <input class="form-check-input" checked type="checkbox" role="switch" id="switchChecked">
+  <label class="form-check-label" for="switchChecked">Checked switch</label>
+</div>
+<div class="form-check form-switch mb-2">
+  <input class="form-check-input" checked type="checkbox" role="switch" id="switchDisabledChecked" disabled>
+  <label class="form-check-label" for="switchDisabledChecked">Disabled checked switch</label>
+</div>`;
+
+  // Text input examples
+  textInputEmailCode = `<div class="mb-3">
+  <label for="exampleInputEmail1" class="form-label">Email address</label>
+  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="name@example.com">
+  <div class="form-text">We'll never share your email with anyone else.</div>
+</div>`;
+
+  textInputPasswordCode = `<div class="mb-3">
+  <label for="exampleInputPassword1" class="form-label">Password</label>
+  <input type="password" class="form-control" id="exampleInputPassword1">
+</div>`;
+
+  textInputTextareaCode = `<div class="mb-3">
+  <label for="exampleFormControlTextarea1" class="form-label">Textarea</label>
+  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+</div>`;
+
+  // Select dropdown example
+  selectCode = `<div class="mb-3">
+  <label for="exampleSelect" class="form-label">Example select</label>
+  <select class="form-select" id="exampleSelect">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>`;
+
+  // Range slider example
+  rangeCode = `<div class="mb-3">
+  <label for="customRange" class="form-label">Example range</label>
+  <input type="range" class="form-range" id="customRange">
+</div>`;
+
+  // Input size variations
+  inputSizesCode = `<input class="form-control form-control-lg mb-2" type="text" placeholder="Large input" aria-label="Large input">
+<input class="form-control mb-2" type="text" placeholder="Default input" aria-label="Default input">
+<input class="form-control form-control-sm" type="text" placeholder="Small input" aria-label="Small input">`;
+
+  ngAfterViewInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      queueMicrotask(() => {
+        document.querySelectorAll('[type="checkbox"]').forEach((checkbox: any) => {
+            if (checkbox.id.includes('Indeterminate')) {
+              checkbox.indeterminate = true
+              console.log(checkbox)
+            }
+          })
+      });
+    }
+  }
+}

package/demo-angular/src/app/views/home/home.component.html

@@ -0,0 +1,38 @@
+<div class="container py-5">
+  <div class="hero-section text-center mb-5">
+    <h1 class="display-1 mb-4">{{ 'home.title' | translate }}</h1>
+    <p class="lead mb-5">{{ 'home.subtitle' | translate }}</p>
+  </div>
+
+  <div class="components-grid">
+    <a routerLink="/alerts" class="component-card">
+      <h3>{{ 'nav.alerts' | translate }}</h3>
+      <p>{{ 'home.alerts_desc' | translate }}</p>
+    </a>
+    
+    <a routerLink="/buttons" class="component-card">
+      <h3>{{ 'nav.buttons' | translate }}</h3>
+      <p>{{ 'home.buttons_desc' | translate }}</p>
+    </a>
+    
+    <a routerLink="/cards" class="component-card">
+      <h3>{{ 'nav.cards' | translate }}</h3>
+      <p>{{ 'home.cards_desc' | translate }}</p>
+    </a>
+    
+    <a routerLink="/forms" class="component-card">
+      <h3>{{ 'nav.forms' | translate }}</h3>
+      <p>{{ 'home.forms_desc' | translate }}</p>
+    </a>
+    
+    <a routerLink="/tables" class="component-card">
+      <h3>{{ 'nav.tables' | translate }}</h3>
+      <p>{{ 'home.tables_desc' | translate }}</p>
+    </a>
+    
+    <a routerLink="/utilities" class="component-card">
+      <h3>{{ 'nav.utilities' | translate }}</h3>
+      <p>{{ 'home.utilities_desc' | translate }}</p>
+    </a>
+  </div>
+</div>

package/demo-angular/src/app/views/home/home.component.scss

@@ -0,0 +1,35 @@
+.hero-section {
+  padding: 4rem 0;
+}
+
+.components-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.component-card {
+  padding: 2rem;
+  background: white;
+  border-radius: 1rem;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px -4px rgba(16, 24, 40, 0.15), 0 4px 8px -4px rgba(16, 24, 40, 0.1);
+  }
+  
+  h3 {
+    margin-bottom: 0.5rem;
+    color: var(--dga-primary);
+  }
+  
+  p {
+    margin: 0;
+    color: var(--dga-neutral);
+  }
+}