sdga-ui 1.0.3 → 1.0.4

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

@@ -0,0 +1,278 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-tables',
+  imports: [TranslateModule, CodeExampleComponent],
+  templateUrl: './tables.component.html',
+  styleUrl: './tables.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TablesComponent {
+  // Default table with checkboxes
+  defaultTableCode = `<div class="table-responsive">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col" style="width: 3.25rem;">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
+        </th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
+        </th>
+        <td><a href="javascript:void(0);">Mark</a></td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
+        </th>
+        <td><a href="javascript:void(0);">Jacob</a></td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
+        </th>
+        <td><a href="javascript:void(0);">John</a></td>
+        <td>Doe</td>
+        <td>@social</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`;
+
+  // Side-borderless table
+  sideBorderlessTableCode = `<div class="table-responsive">
+  <table class="table side-borderless">
+    <thead>
+      <tr>
+        <th scope="col" style="width: 3.25rem;">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
+        </th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
+        </th>
+        <td><a href="javascript:void(0);">Mark</a></td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
+        </th>
+        <td><a href="javascript:void(0);">Jacob</a></td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
+        </th>
+        <td><a href="javascript:void(0);">John</a></td>
+        <td>Doe</td>
+        <td>@social</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`;
+
+  // Striped table
+  stripedTableCode = `<div class="table-responsive">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th scope="col" style="width: 3.25rem;">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
+        </th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
+        </th>
+        <td><a href="javascript:void(0);">Mark</a></td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
+        </th>
+        <td><a href="javascript:void(0);">Jacob</a></td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
+        </th>
+        <td><a href="javascript:void(0);">John</a></td>
+        <td>Doe</td>
+        <td>@social</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`;
+
+  // Combination: striped + side-borderless
+  stripedSideBorderlessTableCode = `<div class="table-responsive">
+  <table class="table table-striped side-borderless">
+    <thead>
+      <tr>
+        <th scope="col" style="width: 3.25rem;">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkSelectAll">
+        </th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow1">
+        </th>
+        <td><a href="javascript:void(0);">Mark</a></td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow2">
+        </th>
+        <td><a href="javascript:void(0);">Jacob</a></td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkRow3">
+        </th>
+        <td><a href="javascript:void(0);">John</a></td>
+        <td>Doe</td>
+        <td>@social</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`;
+
+  // Table with links in cells - more comprehensive example
+  tableWithLinksCode = `<div class="table-responsive">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Name</th>
+        <th scope="col">Email</th>
+        <th scope="col">Department</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td><a href="javascript:void(0);">John Doe</a></td>
+        <td><a href="mailto:john.doe@example.com">john.doe@example.com</a></td>
+        <td>Engineering</td>
+        <td>
+          <a href="javascript:void(0);">Edit</a> | 
+          <a href="javascript:void(0);">Delete</a>
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td><a href="javascript:void(0);">Jane Smith</a></td>
+        <td><a href="mailto:jane.smith@example.com">jane.smith@example.com</a></td>
+        <td>Marketing</td>
+        <td>
+          <a href="javascript:void(0);">Edit</a> | 
+          <a href="javascript:void(0);">Delete</a>
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td><a href="javascript:void(0);">Mike Johnson</a></td>
+        <td><a href="mailto:mike.johnson@example.com">mike.johnson@example.com</a></td>
+        <td>Sales</td>
+        <td>
+          <a href="javascript:void(0);">Edit</a> | 
+          <a href="javascript:void(0);">Delete</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>`;
+
+  // Responsive table wrapper
+  responsiveTableCode = `<!-- Responsive wrapper ensures horizontal scrolling on small screens -->
+<div class="table-responsive">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Email</th>
+        <th scope="col">Department</th>
+        <th scope="col">Position</th>
+        <th scope="col">Hire Date</th>
+        <th scope="col">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>John</td>
+        <td>Doe</td>
+        <td>john.doe@example.com</td>
+        <td>Engineering</td>
+        <td>Senior Developer</td>
+        <td>2020-01-15</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jane</td>
+        <td>Smith</td>
+        <td>jane.smith@example.com</td>
+        <td>Marketing</td>
+        <td>Marketing Manager</td>
+        <td>2019-06-20</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Mike</td>
+        <td>Johnson</td>
+        <td>mike.johnson@example.com</td>
+        <td>Sales</td>
+        <td>Sales Representative</td>
+        <td>2021-03-10</td>
+        <td>Active</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`;
+}

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

@@ -0,0 +1,201 @@
+<div class="container py-5">
+    <h1 class="display-4 mb-4">{{ 'toasts.title' | translate }}</h1>
+    <p class="lead mb-5">{{ 'toasts.subtitle' | translate }}</p>
+
+    <section class="demo-section mb-5">
+        <h2 class="mt-5">{{ 'toasts.section_variants' | translate }}</h2>
+        
+        <!-- Success Toast with Icon -->
+        <h3 class="h5 mt-4 mb-3">Success Toast with Icon</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast-container">
+                <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
+                    <div class="toast-icon">
+                        <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+                    </div>
+                    <div class="toast-content">
+                        <div class="toast-header">
+                            <strong>{{ 'toasts.success' | translate }}</strong>
+                        </div>
+                        <div class="toast-body">
+                            {{ 'toasts.success_text' | translate }}
+                        </div>
+                        <div class="toast-footer">
+                            <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                            <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                        </div>
+                    </div>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="successToastCode"
+            title="Success Toast with Icon">
+        </app-code-example>
+
+        <!-- Danger Toast with Icon -->
+        <h3 class="h5 mt-4 mb-3">Danger Toast with Icon</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast show fade toast-danger" role="alert" aria-live="polite" aria-atomic="true">
+                <div class="toast-icon">
+                    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+                </div>
+                <div class="toast-content">
+                    <div class="toast-header">
+                        <strong>{{ 'toasts.danger' | translate }}</strong>
+                    </div>
+                    <div class="toast-body">
+                        {{ 'toasts.danger_text' | translate }}
+                    </div>
+                    <div class="toast-footer">
+                        <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                        <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="dangerToastCode"
+            title="Danger Toast with Icon">
+        </app-code-example>
+
+        <!-- Warning Toast with Icon -->
+        <h3 class="h5 mt-4 mb-3">Warning Toast with Icon</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast show fade toast-warning" role="alert" aria-live="polite" aria-atomic="true">
+                <div class="toast-icon">
+                    <i class="hgi hgi-stroke hgi-alert-02 toast-icon"></i>
+                </div>
+                <div class="toast-content">
+                    <div class="toast-header">
+                        <strong>{{ 'toasts.warning' | translate }}</strong>
+                    </div>
+                    <div class="toast-body">
+                        {{ 'toasts.warning_text' | translate }}
+                    </div>
+                    <div class="toast-footer">
+                        <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                        <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="warningToastCode"
+            title="Warning Toast with Icon">
+        </app-code-example>
+
+        <!-- Info Toast with Icon -->
+        <h3 class="h5 mt-4 mb-3">Info Toast with Icon</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast show fade toast-info" role="alert" aria-live="polite" aria-atomic="true">
+                <div class="toast-icon">
+                    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+                </div>
+                <div class="toast-content">
+                    <div class="toast-header">
+                        <strong>{{ 'toasts.info' | translate }}</strong>
+                    </div>
+                    <div class="toast-body">
+                        {{ 'toasts.info_text' | translate }}
+                    </div>
+                    <div class="toast-footer">
+                        <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                        <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="infoToastCode"
+            title="Info Toast with Icon">
+        </app-code-example>
+
+        <!-- Neutral Toast with Icon -->
+        <h3 class="h5 mt-4 mb-3">Neutral Toast with Icon</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast show fade toast-neutral" role="alert" aria-live="polite" aria-atomic="true">
+                <div class="toast-icon">
+                    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+                </div>
+                <div class="toast-content">
+                    <div class="toast-header">
+                        <strong>{{ 'toasts.neutral' | translate }}</strong>
+                    </div>
+                    <div class="toast-body">
+                        {{ 'toasts.neutral_text' | translate }}
+                    </div>
+                    <div class="toast-footer">
+                        <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                        <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="neutralToastCode"
+            title="Neutral Toast with Icon">
+        </app-code-example>
+
+        <!-- Toast with Header, Body, and Footer Actions -->
+        <h3 class="h5 mt-4 mb-3">Toast with Header, Body, and Footer Actions</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast-container">
+                <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
+                    <div class="toast-icon">
+                        <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+                    </div>
+                    <div class="toast-content">
+                        <div class="toast-header">
+                            <strong>{{ 'toasts.success' | translate }}</strong>
+                        </div>
+                        <div class="toast-body">
+                            {{ 'toasts.success_text' | translate }}
+                        </div>
+                        <div class="toast-footer">
+                            <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                            <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                        </div>
+                    </div>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="fullToastCode"
+            title="Toast with Header, Body, and Footer Actions">
+        </app-code-example>
+
+        <!-- Dismissible Toast -->
+        <h3 class="h5 mt-4 mb-3">Dismissible Toast</h3>
+        <div class="d-flex flex-wrap gap-3 mb-3">
+            <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
+                <div class="toast-icon">
+                    <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+                </div>
+                <div class="toast-content">
+                    <div class="toast-header">
+                        <strong>{{ 'toasts.success' | translate }}</strong>
+                    </div>
+                    <div class="toast-body">
+                        {{ 'toasts.success_text' | translate }}
+                    </div>
+                    <div class="toast-footer">
+                        <button type="button" class="btn btn-subtle btn-sm">{{ 'toasts.action' | translate }}</button>
+                        <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">{{ 'toasts.dismiss' | translate }}</button>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+        <app-code-example 
+            [htmlCode]="dismissibleToastCode"
+            title="Dismissible Toast">
+        </app-code-example>
+    </section>
+</div>

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

@@ -0,0 +1,182 @@
+import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-toasts',
+  imports: [CommonModule, TranslateModule, CodeExampleComponent],
+  templateUrl: './toasts.component.html',
+  styleUrl: './toasts.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToastsComponent {
+  protected readonly showToast1 = signal(false);
+  protected readonly showToast2 = signal(false);
+  protected readonly showToast3 = signal(false);
+  protected readonly showToast4 = signal(false);
+  protected readonly showToast5 = signal(false);
+  protected readonly showToast6 = signal(false);
+
+  // Success Toast with Icon
+  successToastCode = `<div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
+  <div class="toast-icon">
+    <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+  </div>
+  <div class="toast-content">
+    <div class="toast-header">
+      <strong>Success</strong>
+    </div>
+    <div class="toast-body">
+      Your action was completed successfully!
+    </div>
+    <div class="toast-footer">
+      <button type="button" class="btn btn-subtle btn-sm">Action</button>
+      <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>`;
+
+  // Danger Toast with Icon
+  dangerToastCode = `<div class="toast show fade toast-danger" role="alert" aria-live="polite" aria-atomic="true">
+  <div class="toast-icon">
+    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+  </div>
+  <div class="toast-content">
+    <div class="toast-header">
+      <strong>Error</strong>
+    </div>
+    <div class="toast-body">
+      There was an error processing your request.
+    </div>
+    <div class="toast-footer">
+      <button type="button" class="btn btn-subtle btn-sm">Action</button>
+      <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>`;
+
+  // Warning Toast with Icon
+  warningToastCode = `<div class="toast show fade toast-warning" role="alert" aria-live="polite" aria-atomic="true">
+  <div class="toast-icon">
+    <i class="hgi hgi-stroke hgi-alert-02 toast-icon"></i>
+  </div>
+  <div class="toast-content">
+    <div class="toast-header">
+      <strong>Warning</strong>
+    </div>
+    <div class="toast-body">
+      Please review your changes before proceeding.
+    </div>
+    <div class="toast-footer">
+      <button type="button" class="btn btn-subtle btn-sm">Action</button>
+      <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>`;
+
+  // Info Toast with Icon
+  infoToastCode = `<div class="toast show fade toast-info" role="alert" aria-live="polite" aria-atomic="true">
+  <div class="toast-icon">
+    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+  </div>
+  <div class="toast-content">
+    <div class="toast-header">
+      <strong>Information</strong>
+    </div>
+    <div class="toast-body">
+      Here's some helpful information for you.
+    </div>
+    <div class="toast-footer">
+      <button type="button" class="btn btn-subtle btn-sm">Action</button>
+      <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>`;
+
+  // Neutral Toast with Icon
+  neutralToastCode = `<div class="toast show fade toast-neutral" role="alert" aria-live="polite" aria-atomic="true">
+  <div class="toast-icon">
+    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+  </div>
+  <div class="toast-content">
+    <div class="toast-header">
+      <strong>Neutral</strong>
+    </div>
+    <div class="toast-body">
+      This is a neutral notification message.
+    </div>
+    <div class="toast-footer">
+      <button type="button" class="btn btn-subtle btn-sm">Action</button>
+      <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>`;
+
+  // Toast with Header, Body, and Footer
+  fullToastCode = `<div class="toast-container">
+  <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
+    <div class="toast-icon">
+      <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+    </div>
+    <div class="toast-content">
+      <div class="toast-header">
+        <strong>Success</strong>
+      </div>
+      <div class="toast-body">
+        Your action was completed successfully!
+      </div>
+      <div class="toast-footer">
+        <button type="button" class="btn btn-subtle btn-sm">Action</button>
+        <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+      </div>
+    </div>
+    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+</div>`;
+
+  // Dismissible Toast
+  dismissibleToastCode = `<div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
+  <div class="toast-icon">
+    <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+  </div>
+  <div class="toast-content">
+    <div class="toast-header">
+      <strong>Success</strong>
+    </div>
+    <div class="toast-body">
+      Your action was completed successfully!
+    </div>
+    <div class="toast-footer">
+      <button type="button" class="btn btn-subtle btn-sm">Action</button>
+      <button type="button" class="btn btn-subtle btn-sm" data-bs-dismiss="toast" aria-label="Close">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>`;
+
+  hideToast(number: number): void {
+    switch(number) {
+      case 1: this.showToast1.set(false); break;
+      case 2: this.showToast2.set(false); break;
+      case 3: this.showToast3.set(false); break;
+      case 4: this.showToast4.set(false); break;
+      case 5: this.showToast5.set(false); break;
+      case 6: this.showToast6.set(false); break;
+    }
+  }
+
+  showAllToasts(): void {
+    this.showToast1.set(true);
+    this.showToast2.set(true);
+    this.showToast3.set(true);
+    this.showToast4.set(true);
+    this.showToast5.set(true);
+    this.showToast6.set(true);
+  }
+}