sdga-ui 1.0.8 → 1.0.9

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

@@ -1,347 +0,0 @@
-<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

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

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

@@ -1,222 +0,0 @@
-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/header/header.html

@@ -1 +0,0 @@
-<header></header>

package/demo-angular/src/app/views/header/header.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Header } from './header';
-
-describe('Header', () => {
-  let component: Header;
-  let fixture: ComponentFixture<Header>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Header]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Header);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/demo-angular/src/app/views/header/header.ts

@@ -1,11 +0,0 @@
-import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-
-@Component({
-  selector: 'app-header',
-  imports: [TranslateModule],
-  templateUrl: './header.html',
-  styleUrl: './header.scss',
-})
-export class Header {
-}

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

@@ -1,33 +0,0 @@
-<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>
-  </div>
-</div>