sdga-ui 1.0.3 → 1.0.5

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

@@ -0,0 +1,289 @@
+<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="hgi hgi-stroke hgi-download-04"></i>{{ 'buttons.download' | translate }}
+      </button>
+      <button type="button" class="btn btn-neutral btn-icon">
+        <i class="hgi hgi-stroke hgi-upload-04"></i>{{ 'buttons.upload' | translate }}
+      </button>
+      <button type="button" class="btn btn-secondary btn-icon">
+        <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>{{ 'buttons.edit' | translate }}
+      </button>
+      <button type="button" class="btn btn-danger btn-icon">
+        <i class="hgi hgi-stroke hgi-delete-02"></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="hgi hgi-stroke hgi-tick-02"></i>
+      </button>
+      <button type="button" class="btn btn-neutral btn-icon">
+        {{ 'buttons.search' | translate }}<i class="hgi hgi-stroke hgi-search-01"></i>
+      </button>
+      <button type="button" class="btn btn-secondary btn-icon">
+        {{ 'buttons.settings' | translate }}<i class="hgi hgi-stroke hgi-settings-02"></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="hgi hgi-stroke hgi-plus-sign-circle"></i>{{ 'buttons.add' | translate }}
+      </button>
+      <button type="button" class="btn btn-outline-primary btn-icon">
+        <i class="hgi hgi-stroke hgi-arrow-right-01"></i>{{ 'buttons.next' | translate }}
+      </button>
+      <button type="button" class="btn btn-outline-secondary btn-icon">
+        <i class="hgi hgi-stroke hgi-arrow-left-01"></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="hgi hgi-stroke hgi-download-04"></i>
+      </button>
+      <button type="button" class="btn btn-neutral btn-icon" aria-label="{{ 'buttons.upload' | translate }}">
+        <i class="hgi hgi-stroke hgi-upload-04"></i>
+      </button>
+      <button type="button" class="btn btn-secondary btn-icon" aria-label="{{ 'buttons.edit' | translate }}">
+        <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>
+      </button>
+      <button type="button" class="btn btn-danger btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
+        <i class="hgi hgi-stroke hgi-delete-02"></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="hgi hgi-stroke hgi-search-01"></i>
+      </button>
+      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.settings' | translate }}">
+        <i class="hgi hgi-stroke hgi-settings-02"></i>
+      </button>
+      <button type="button" class="btn btn-outline-neutral btn-icon" aria-label="{{ 'buttons.add' | translate }}">
+        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>
+      </button>
+    </div>
+    <div class="component-showcase">
+      <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
+        <i class="hgi hgi-stroke hgi-search-01"></i>
+      </button>
+      <button type="button" class="btn btn-neutral btn-icon btn-sm" aria-label="{{ 'buttons.settings' | translate }}">
+        <i class="hgi hgi-stroke hgi-settings-02"></i>
+      </button>
+      <button type="button" class="btn btn-secondary btn-icon btn-xs" aria-label="{{ 'buttons.add' | translate }}">
+        <i class="hgi hgi-stroke hgi-plus-sign-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="hgi hgi-stroke hgi-settings-02"></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="hgi hgi-stroke hgi-settings-02"></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="hgi hgi-stroke hgi-settings-02"></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

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

@@ -0,0 +1,155 @@
+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="hgi hgi-stroke hgi-download-04"></i>Download
+</button>
+<button type="button" class="btn btn-neutral btn-icon">
+  <i class="hgi hgi-stroke hgi-upload-04"></i>Upload
+</button>
+<button type="button" class="btn btn-secondary btn-icon">
+  <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>Edit
+</button>
+<button type="button" class="btn btn-danger btn-icon">
+  <i class="hgi hgi-stroke hgi-delete-02"></i>Delete
+</button>`;
+
+  buttonIconRightCode = `<button type="button" class="btn btn-primary btn-icon">
+  Save<i class="hgi hgi-stroke hgi-tick-02"></i>
+</button>
+<button type="button" class="btn btn-neutral btn-icon">
+  Search<i class="hgi hgi-stroke hgi-search-01"></i>
+</button>
+<button type="button" class="btn btn-secondary btn-icon">
+  Settings<i class="hgi hgi-stroke hgi-settings-02"></i>
+</button>`;
+
+  buttonIconOnlyCode = `<button type="button" class="btn btn-primary btn-icon" aria-label="Download">
+  <i class="hgi hgi-stroke hgi-download-04"></i>
+</button>
+<button type="button" class="btn btn-neutral btn-icon" aria-label="Upload">
+  <i class="hgi hgi-stroke hgi-upload-04"></i>
+</button>
+<button type="button" class="btn btn-secondary btn-icon" aria-label="Edit">
+  <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>
+</button>
+<button type="button" class="btn btn-danger btn-icon" aria-label="Delete">
+  <i class="hgi hgi-stroke hgi-delete-02"></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="hgi hgi-stroke hgi-settings-02"></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="hgi hgi-stroke hgi-settings-02"></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="hgi hgi-stroke hgi-settings-02"></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

@@ -0,0 +1,156 @@
+<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="hgi hgi-stroke hgi-checkmark-circle-02 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="hgi hgi-stroke hgi-checkmark-circle-02 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="hgi hgi-stroke hgi-checkmark-circle-02 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="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(1)" [class.hgi-arrow-down-01]="!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="hgi hgi-stroke hgi-checkmark-circle-02 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="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(2)" [class.hgi-arrow-down-01]="!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>