sdga-ui 1.0.7 → 1.0.9

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

@@ -1,289 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'buttons.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'buttons.subtitle' | translate }}</p>
-
-  <section class="demo-section">
-    <h2>{{ 'buttons.section_solid' | translate }}</h2>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-primary">{{ 'buttons.primary' | translate }}</button>
-      <button type="button" class="btn btn-neutral">{{ 'buttons.neutral' | translate }}</button>
-      <button type="button" class="btn btn-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-danger">{{ 'buttons.danger' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="solidButtonsCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_outline' | translate }}</h3>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-outline-primary">{{ 'buttons.primary' | translate }}</button>
-      <button type="button" class="btn btn-outline-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-outline-neutral">{{ 'buttons.neutral' | translate }}</button>
-      <button type="button" class="btn btn-outline-danger">{{ 'buttons.danger' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="outlineButtonsCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_sizes' | translate }}</h3>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-primary btn-lg">{{ 'buttons.large' | translate }}</button>
-      <button type="button" class="btn btn-primary">{{ 'buttons.default' | translate }}</button>
-      <button type="button" class="btn btn-primary btn-sm">{{ 'buttons.small' | translate }}</button>
-      <button type="button" class="btn btn-primary btn-xs">{{ 'buttons.extra_small' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="buttonSizesCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_states' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-primary active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-primary" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-neutral">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-neutral active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-neutral" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-secondary">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-secondary active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-danger">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-danger active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-danger" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="buttonStatesCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_icons' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon">
-        <i class="bi bi-download"></i>{{ 'buttons.download' | translate }}
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon">
-        <i class="bi bi-upload"></i>{{ 'buttons.upload' | translate }}
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon">
-        <i class="bi bi-pencil"></i>{{ 'buttons.edit' | translate }}
-      </button>
-      <button type="button" class="btn btn-danger btn-icon">
-        <i class="bi bi-trash"></i>{{ 'buttons.delete' | translate }}
-      </button>
-    </div>
-    <app-code-example [htmlCode]="buttonIconLeftCode"></app-code-example>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon">
-        {{ 'buttons.save' | translate }}<i class="bi bi-check"></i>
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon">
-        {{ 'buttons.search' | translate }}<i class="bi bi-search"></i>
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon">
-        {{ 'buttons.settings' | translate }}<i class="bi bi-gear"></i>
-      </button>
-    </div>
-    <app-code-example [htmlCode]="buttonIconRightCode"></app-code-example>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon btn-sm">
-        <i class="bi bi-plus-circle"></i>{{ 'buttons.add' | translate }}
-      </button>
-      <button type="button" class="btn btn-outline-primary btn-icon">
-        <i class="bi bi-arrow-right"></i>{{ 'buttons.next' | translate }}
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon">
-        <i class="bi bi-arrow-left"></i>{{ 'buttons.previous' | translate }}
-      </button>
-    </div>
-    
-    <h3 class="mt-5">{{ 'buttons.section_icon_only' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.download' | translate }}">
-        <i class="bi bi-download"></i>
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon" aria-label="{{ 'buttons.upload' | translate }}">
-        <i class="bi bi-upload"></i>
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon" aria-label="{{ 'buttons.edit' | translate }}">
-        <i class="bi bi-pencil"></i>
-      </button>
-      <button type="button" class="btn btn-danger btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
-        <i class="bi bi-trash"></i>
-      </button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-outline-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="bi bi-search"></i>
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="bi bi-gear"></i>
-      </button>
-      <button type="button" class="btn btn-outline-neutral btn-icon" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="bi bi-plus-circle"></i>
-      </button>
-    </div>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="bi bi-search"></i>
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon btn-sm" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="bi bi-gear"></i>
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon btn-xs" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="bi bi-plus-circle"></i>
-      </button>
-    </div>
-    <app-code-example [htmlCode]="buttonIconOnlyCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_dropdown' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <div class="dropdown">
-        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_primary' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_neutral' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_secondary' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_danger' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="dropdownButtonCode"></app-code-example>
-    
-    <div class="component-showcase mb-3">
-      <div class="dropdown">
-        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-outline-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    
-    <div class="component-showcase">
-      <div class="dropdown">
-        <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.large' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.default' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.small' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="dropdownSizesCode"></app-code-example>
-    <div class="component-showcase">
-      <div class="dropdown">
-        <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="bi bi-gear"></i>
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="bi bi-gear"></i>
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="bi bi-gear"></i>
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="iconDropdownCode"></app-code-example>
-  </section>
-</div>

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

@@ -1,14 +0,0 @@
-.demo-section {
-  margin-bottom: 4rem;
-}
-
-.component-showcase {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 1.5rem;
-  background: #f8f9fa;
-  border-radius: 0.5rem;
-}
-

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

@@ -1,155 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
-
-@Component({
-  selector: 'app-buttons',
-  imports: [TranslateModule, CodeExampleComponent],
-  templateUrl: './buttons.component.html',
-  styleUrl: './buttons.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ButtonsComponent {
-  solidButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
-<button type="button" class="btn btn-neutral">Neutral</button>
-<button type="button" class="btn btn-secondary">Secondary</button>
-<button type="button" class="btn btn-danger">Danger</button>`;
-
-  outlineButtonsCode = `<button type="button" class="btn btn-outline-primary">Primary</button>
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-neutral">Neutral</button>
-<button type="button" class="btn btn-outline-danger">Danger</button>`;
-
-  buttonSizesCode = `<button type="button" class="btn btn-primary btn-lg">Large</button>
-<button type="button" class="btn btn-primary">Default</button>
-<button type="button" class="btn btn-primary btn-sm">Small</button>
-<button type="button" class="btn btn-primary btn-xs">Extra Small</button>`;
-
-  buttonStatesCode = `<button type="button" class="btn btn-primary">Normal</button>
-<button type="button" class="btn btn-primary active">Active</button>
-<button type="button" class="btn btn-primary" disabled>Disabled</button>`;
-
-  buttonIconLeftCode = `<button type="button" class="btn btn-primary btn-icon">
-  <i class="bi bi-download"></i>Download
-</button>
-<button type="button" class="btn btn-neutral btn-icon">
-  <i class="bi bi-upload"></i>Upload
-</button>
-<button type="button" class="btn btn-secondary btn-icon">
-  <i class="bi bi-pencil"></i>Edit
-</button>
-<button type="button" class="btn btn-danger btn-icon">
-  <i class="bi bi-trash"></i>Delete
-</button>`;
-
-  buttonIconRightCode = `<button type="button" class="btn btn-primary btn-icon">
-  Save<i class="bi bi-check"></i>
-</button>
-<button type="button" class="btn btn-neutral btn-icon">
-  Search<i class="bi bi-search"></i>
-</button>
-<button type="button" class="btn btn-secondary btn-icon">
-  Settings<i class="bi bi-gear"></i>
-</button>`;
-
-  buttonIconOnlyCode = `<button type="button" class="btn btn-primary btn-icon" aria-label="Download">
-  <i class="bi bi-download"></i>
-</button>
-<button type="button" class="btn btn-neutral btn-icon" aria-label="Upload">
-  <i class="bi bi-upload"></i>
-</button>
-<button type="button" class="btn btn-secondary btn-icon" aria-label="Edit">
-  <i class="bi bi-pencil"></i>
-</button>
-<button type="button" class="btn btn-danger btn-icon" aria-label="Delete">
-  <i class="bi bi-trash"></i>
-</button>`;
-
-  dropdownButtonCode = `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropdown Primary
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropdown Neutral
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>`;
-
-  dropdownSizesCode = `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Large
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Default
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Small
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>`;
-
-  iconDropdownCode = `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="bi bi-gear"></i>
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="bi bi-gear"></i>
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="bi bi-gear"></i>
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>`;
-}

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

@@ -1,156 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'cards.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'cards.subtitle' | translate }}</p>
-
-  <section class="demo-section">
-    <h2 class="mb-4">{{ 'cards.section_examples' | translate }}</h2>
-    
-    <!-- Card with icon -->
-    <h3 class="mb-3">Card with Icon</h3>
-    <div class="demo-card-grid mb-3">
-      <div class="card" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="bi bi-check-circle card-title-icon"></i>
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="cardWithIconCode" title="Card with Icon and Header"></app-code-example>
-      
-    <!-- Card with checkbox -->
-    <h3 class="mb-3 mt-5">Card with Checkbox</h3>
-    <div class="demo-card-grid mb-3">
-      <div class="card" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check2" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="cardWithCheckboxCode" title="Card with Checkbox"></app-code-example>
-      
-    <!-- Disabled card with icon and checkbox -->
-    <h3 class="mb-3 mt-5">Disabled Card</h3>
-    <div class="demo-card-grid mb-3">
-      <div class="card disabled" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="bi bi-check-circle card-title-icon"></i>
-            <input class="card-title-checked  form-check-input ripple" disabled type="checkbox" value="" id="check1" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary disabled">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary disabled">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="disabledCardCode" title="Disabled Card with Icon and Checkbox"></app-code-example>
-
-      <!-- Card without shadow -->
-      <h3 class="mb-3 mt-5">Card without Shadow</h3>
-      <div class="demo-card-grid mb-3">
-      <div class="card shadow-none" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check2" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="cardNoShadowCode" title="Card with Shadow Removed (shadow-none)"></app-code-example>
-      
-      <!-- Expandable card with checkbox -->
-      <h3 class="mb-3 mt-5">Expandable Card (Interactive)</h3>
-      <div class="demo-card-grid mb-3">
-      <div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="bi bi-check-circle card-title-icon"></i>
-            <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check3" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
-          
-          @if (isExpanded(1)) {
-            <div class="card-expanded-content">
-              <p class="mt-3">{{ 'cards.expanded_content' | translate }}</p>
-              <ul>
-                <li>{{ 'cards.detail_1' | translate }}</li>
-                <li>{{ 'cards.detail_2' | translate }}</li>
-                <li>{{ 'cards.detail_3' | translate }}</li>
-              </ul>
-            </div>
-          }
-          
-          <div class="card-footer">
-            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(1)" [class.bi-chevron-down]="!isExpanded(1)" (click)="toggleCard(1)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example 
-      [htmlCode]="expandableCardHtmlCode" 
-      [tsCode]="expandableCardTsCode" 
-      title="Expandable Card with Checkbox - HTML Template"></app-code-example>
-      
-      <!-- Expandable card with actions -->
-      <h3 class="mb-3 mt-5">Expandable Card (Simple)</h3>
-      <div class="demo-card-grid mb-3">
-      <div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="bi bi-check-circle card-title-icon"></i>
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
-          
-          @if (isExpanded(2)) {
-            <div class="card-expanded-content">
-              <p class="mt-3">{{ 'cards.expanded_content' | translate }}</p>
-              <ul>
-                <li>{{ 'cards.detail_1' | translate }}</li>
-                <li>{{ 'cards.detail_2' | translate }}</li>
-                <li>{{ 'cards.detail_3' | translate }}</li>
-              </ul>
-              <div class="d-flex align-items-center gap-3 mb-3">
-                <button class="btn btn-sm btn-primary">{{ 'cards.action' | translate }}</button>
-                <button class="btn btn-sm btn-outline-secondary">{{ 'cards.cancel' | translate }}</button>
-              </div>
-            </div>
-          }
-          
-          <div class="card-footer">
-            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(2)" [class.bi-chevron-down]="!isExpanded(2)" (click)="toggleCard(2)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example 
-      [htmlCode]="expandableCardSimpleHtmlCode" 
-      [tsCode]="expandableCardTsCode" 
-      title="Expandable Card with Actions - HTML Template"></app-code-example>
-  </section>
-</div>