sdga-ui 1.0.6 → 1.0.7

package/demo-angular/src/app/views/footer/footer.html

@@ -0,0 +1,282 @@
+<footer class="dga-footer on-primary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups (5 columns) -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+        <!-- Social Media -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-twitter"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-facebook"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-instagram"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-linkedin"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- Accessibility Tools -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-eye"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-volume-up"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-universal-access"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <!-- Footer Links Row -->
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+
+          <!-- Copyright -->
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Right Reserved For Digital Government Authority © 2024</p>
+            <div class="dga-footer-copyright-links">
+              <a href="#" class="link-neutral small">Terms and Conditions</a>
+              <a href="#" class="link-neutral small">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logos -->
+        <div class="col-lg-4">
+          <div class="dga-logo-container">
+            <img src="https://placehold.co/125x42" alt="logo">
+            <img src="https://placehold.co/125x42" alt="logo">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<app-code-example [htmlCode]="primaryFooterCode"></app-code-example>
+
+
+<footer class="dga-footer on-secondary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups (5 columns) -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+        <!-- Social Media -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-twitter"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-facebook"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-instagram"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-linkedin"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- Accessibility Tools -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-eye"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-volume-up"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-universal-access"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <!-- Footer Links Row -->
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+
+          <!-- Copyright -->
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Right Reserved For Digital Government Authority © 2024</p>
+            <div class="dga-footer-copyright-links">
+              <a href="#" class="link-neutral small">Terms and Conditions</a>
+              <a href="#" class="link-neutral small">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logos -->
+        <div class="col-lg-4">
+          <div class="dga-logo-container">
+            <img src="https://placehold.co/125x42" alt="logo">
+            <img src="https://placehold.co/125x42" alt="logo">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<app-code-example [htmlCode]="secondaryFooterCode"></app-code-example>

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

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

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

@@ -0,0 +1,142 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-footer',
+  imports: [TranslateModule, CodeExampleComponent],
+  templateUrl: './footer.html',
+  styleUrl: './footer.scss',
+})
+export class Footer {
+  primaryFooterCode = `<footer class="dga-footer on-primary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups (5 columns) -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+          <!-- Social Media -->
+          <div>
+            <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
+            <div class="d-flex gap-2 flex-wrap">
+              <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Twitter">
+                <i class="bi bi-twitter"></i>
+              </button>
+              <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Facebook">
+                <i class="bi bi-facebook"></i>
+              </button>
+            </div>
+          </div>
+
+          <!-- Accessibility Tools -->
+          <div>
+            <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
+            <div class="d-flex gap-2 flex-wrap">
+              <button class="btn btn-outline-secondary btn-icon" aria-label="Vision">
+                <i class="bi bi-eye"></i>
+              </button>
+              <button class="btn btn-outline-secondary btn-icon" aria-label="Audio">
+                <i class="bi bi-volume-up"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <!-- Footer Links Row -->
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+
+          <!-- Copyright -->
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Rights Reserved © 2024</p>
+            <div class="dga-footer-copyright-links">
+              <a href="#" class="link-neutral small">Terms and Conditions</a>
+              <a href="#" class="link-neutral small">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logos -->
+        <div class="col-lg-4">
+          <div class="dga-logo-container">
+            <img src="https://placehold.co/125x42" alt="logo">
+            <img src="https://placehold.co/125x42" alt="logo">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>`;
+
+  secondaryFooterCode = `<footer class="dga-footer on-secondary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+          <div>
+            <h6 class="border-bottom pb-2 mb-3">Social Media</h6>
+            <div class="d-flex gap-2 flex-wrap">
+              <button type="button" class="btn btn-outline-secondary btn-icon">
+                <i class="bi bi-twitter"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Rights Reserved © 2024</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>`;
+}

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

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

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

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

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

@@ -29,10 +29,5 @@
       <h3>{{ 'nav.tables' | translate }}</h3>
       <p>{{ 'home.tables_desc' | translate }}</p>
     </a>
-    
-    <a routerLink="/utilities" class="component-card">
-      <h3>{{ 'nav.utilities' | translate }}</h3>
-      <p>{{ 'home.utilities_desc' | translate }}</p>
-    </a>
   </div>
 </div>

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

@@ -10,8 +10,8 @@
       <!-- Neutral link -->
       <a href="javascript:void(0);" class="link-neutral link-offset-2">{{ 'links.neutral_link' | translate }}</a>
       <!-- On-color link displayed on a primary background -->
-      <div class="p-3 bg-primary rounded-2" style="width:max-content;">
-        <a href="javascript:void(0);" class="link-oncolor link-offset-2">{{ 'links.oncolor_link' | translate }}</a>
+      <div class="p-3 on-primary rounded-2" style="width:max-content;">
+        <a href="javascript:void(0);" class="link-neutral link-offset-2">{{ 'links.neutral_link' | translate }}</a>
       </div>
       <!-- Disabled link (non-interactive) -->
       <a href="javascript:void(0);" class="link-primary disabled link-offset-2" aria-disabled="true" tabindex="-1">{{ 'links.disabled_link' | translate }}</a>

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

@@ -11,7 +11,7 @@
             <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>
+                        <i class="bi bi-check-circle toast-icon"></i>
                     </div>
                     <div class="toast-content">
                         <div class="toast-header">
@@ -39,7 +39,7 @@
         <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>
+                    <i class="bi bi-exclamation-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -66,7 +66,7 @@
         <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>
+                    <i class="bi bi-exclamation-triangle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -93,7 +93,7 @@
         <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>
+                    <i class="bi bi-info-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -120,7 +120,7 @@
         <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>
+                    <i class="bi bi-info-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -148,7 +148,7 @@
             <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>
+                        <i class="bi bi-check-circle toast-icon"></i>
                     </div>
                     <div class="toast-content">
                         <div class="toast-header">
@@ -176,7 +176,7 @@
         <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>
+                    <i class="bi bi-check-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">

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

@@ -21,7 +21,7 @@ export class ToastsComponent {
   // 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>
+    <i class="bi bi-check-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -41,7 +41,7 @@ export class ToastsComponent {
   // 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>
+    <i class="bi bi-exclamation-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -61,7 +61,7 @@ export class ToastsComponent {
   // 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>
+    <i class="bi bi-exclamation-triangle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -81,7 +81,7 @@ export class ToastsComponent {
   // 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>
+    <i class="bi bi-info-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -101,7 +101,7 @@ export class ToastsComponent {
   // 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>
+    <i class="bi bi-info-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -122,7 +122,7 @@ export class ToastsComponent {
   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>
+      <i class="bi bi-check-circle toast-icon"></i>
     </div>
     <div class="toast-content">
       <div class="toast-header">
@@ -143,7 +143,7 @@ export class ToastsComponent {
   // 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>
+    <i class="bi bi-check-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">