sdga-ui 1.0.3 → 1.0.4

package/demo-angular/src/app/shared/code-example/code-example.component.scss

@@ -0,0 +1,183 @@
+.code-example-wrapper {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-bottom: none;
+  border-radius: 0.375rem 0.375rem 0 0;
+
+  .code-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #495057;
+  }
+
+  .btn-toggle {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: #e9ecef;
+    }
+  }
+}
+
+.code-example {
+  background: #282c34;
+  border: 1px solid #dee2e6;
+  border-radius: 0 0 0.375rem 0.375rem;
+  overflow: hidden;
+  direction: ltr;
+
+  .code-tabs {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: #21252b;
+    border-bottom: 1px solid #181a1f;
+
+    .tab-btn {
+      padding: 0.375rem 0.875rem;
+      font-size: 0.813rem;
+      font-weight: 500;
+      color: #abb2bf;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      text-transform: uppercase;
+
+      &:hover {
+        color: #ffffff;
+        background: #282c34;
+      }
+
+      &.active {
+        color: #61afef;
+        background: #282c34;
+        border-color: #61afef;
+      }
+    }
+
+    .btn-copy {
+      margin-inline-start: auto;
+      padding: 0.375rem 0.875rem;
+      font-size: 0.813rem;
+      font-weight: 500;
+      color: #98c379;
+      background: transparent;
+      border: 1px solid #98c379;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        background: #98c37920;
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+
+  pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+    background: #282c34;
+
+    code {
+      font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      color: #abb2bf;
+    }
+  }
+}
+
+// Syntax highlighting styles (Atom One Dark theme)
+:host ::ng-deep {
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61afef;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}

package/demo-angular/src/app/shared/code-example/code-example.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import hljs from 'highlight.js';
+
+@Component({
+  selector: 'app-code-example',
+  imports: [CommonModule, TranslateModule],
+  templateUrl: './code-example.component.html',
+  styleUrls: ['./code-example.component.scss'],
+})
+export class CodeExampleComponent {
+  @Input() htmlCode?: string;
+  @Input() tsCode?: string;
+  @Input() scssCode?: string;
+  @Input() title?: string;
+  @Input() expanded = false;
+
+  isExpanded = signal(false);
+  activeTab = signal<'html' | 'ts' | 'scss'>('html');
+  copySuccess = signal(false);
+
+  ngOnInit() {
+    this.isExpanded.set(this.expanded);
+    // Set initial active tab to first available code
+    if (this.htmlCode) this.activeTab.set('html');
+    else if (this.tsCode) this.activeTab.set('ts');
+    else if (this.scssCode) this.activeTab.set('scss');
+  }
+
+  toggleExpand() {
+    this.isExpanded.update((value) => !value);
+  }
+
+  setActiveTab(tab: 'html' | 'ts' | 'scss') {
+    this.activeTab.set(tab);
+  }
+
+  get currentCode(): string {
+    const tab = this.activeTab();
+    if (tab === 'html' && this.htmlCode) return this.htmlCode;
+    if (tab === 'ts' && this.tsCode) return this.tsCode;
+    if (tab === 'scss' && this.scssCode) return this.scssCode;
+    return '';
+  }
+
+  get highlightedCode(): string {
+    const code = this.currentCode;
+    const tab = this.activeTab();
+    let language = 'html';
+    if (tab === 'ts') language = 'typescript';
+    if (tab === 'scss') language = 'scss';
+
+    try {
+      return hljs.highlight(code, { language }).value;
+    } catch {
+      return code;
+    }
+  }
+
+  get availableTabs(): Array<'html' | 'ts' | 'scss'> {
+    const tabs: Array<'html' | 'ts' | 'scss'> = [];
+    if (this.htmlCode) tabs.push('html');
+    if (this.tsCode) tabs.push('ts');
+    if (this.scssCode) tabs.push('scss');
+    return tabs;
+  }
+
+  async copyCode() {
+    try {
+      await navigator.clipboard.writeText(this.currentCode);
+      this.copySuccess.set(true);
+      setTimeout(() => this.copySuccess.set(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy code:', err);
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+<div class="container py-5">
+  <h1 class="display-4 mb-4">{{ 'alerts.title' | translate }}</h1>
+  <p class="lead mb-5">{{ 'alerts.subtitle' | translate }}</p>
+
+  <section class="demo-section">
+    <h2>{{ 'alerts.section_dismissible' | translate }}</h2>
+    <div class="d-flex flex-wrap gap-3">
+    <section>
+    <h3 class="h5 mb-3">Standard Alerts</h3>
+    <div class="alert alert-success alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.success' | translate }}</strong> {{ 'alerts.success_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="successAlertCode"></app-code-example>
+    
+    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.danger' | translate }}</strong> {{ 'alerts.danger_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="dangerAlertCode"></app-code-example>
+    
+    <div class="alert alert-warning alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.warning' | translate }}</strong> {{ 'alerts.warning_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="warningAlertCode"></app-code-example>
+    
+     <div class="alert alert-info alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.info' | translate }}</strong> {{ 'alerts.info_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="infoAlertCode"></app-code-example>
+    
+    <div class="alert alert-neutral alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.neutral' | translate }}</strong> {{ 'alerts.neutral_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="neutralAlertCode"></app-code-example>
+    </section>
+    
+    <section>
+    <h3 class="h5 mb-3">Side-bordered Alerts</h3>
+    <div class="alert alert-side alert-success alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.success' | translate }}</strong> {{ 'alerts.success_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="sideSuccessAlertCode"></app-code-example>
+    
+    <div class="alert alert-side alert-danger alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.danger' | translate }}</strong> {{ 'alerts.danger_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="sideDangerAlertCode"></app-code-example>
+    
+    <div class="alert alert-side alert-warning alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.warning' | translate }}</strong> {{ 'alerts.warning_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="sideWarningAlertCode"></app-code-example>
+    
+    <div class="alert alert-side alert-info alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.info' | translate }}</strong> {{ 'alerts.info_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="sideInfoAlertCode"></app-code-example>
+    
+    <div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
+      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <div>
+        <strong class="alert-title">{{ 'alerts.neutral' | translate }}</strong> {{ 'alerts.neutral_text' | translate }}
+        <div class="alert-footer">
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+          <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" [attr.aria-label]="'common.close' | translate"></button>
+    </div>
+    
+    <app-code-example [htmlCode]="sideNeutralAlertCode"></app-code-example>
+    </section>
+    </div>
+  </section>
+</div>

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

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

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

@@ -0,0 +1,134 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-alerts',
+  imports: [TranslateModule, CodeExampleComponent],
+  templateUrl: './alerts.component.html',
+  styleUrl: './alerts.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AlertsComponent {
+  // Standard Dismissible Alerts
+  successAlertCode = `<div class="alert alert-success alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+  <div>
+    <strong class="alert-title">Success!</strong> Your action completed successfully.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Action</button>
+      <button type="button" class="btn btn-subtle">Cancel</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  dangerAlertCode = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <div>
+    <strong class="alert-title">Error!</strong> Something went wrong with your request.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Retry</button>
+      <button type="button" class="btn btn-subtle">Cancel</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  warningAlertCode = `<div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+  <div>
+    <strong class="alert-title">Warning!</strong> Please review before proceeding.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Review</button>
+      <button type="button" class="btn btn-subtle">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  infoAlertCode = `<div class="alert alert-info alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <div>
+    <strong class="alert-title">Info</strong> Here's some helpful information.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Learn More</button>
+      <button type="button" class="btn btn-subtle">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  neutralAlertCode = `<div class="alert alert-neutral alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <div>
+    <strong class="alert-title">Neutral</strong> Standard notification message.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Action</button>
+      <button type="button" class="btn btn-subtle">Cancel</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  // Side-bordered Alerts
+  sideSuccessAlertCode = `<div class="alert alert-side alert-success alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+  <div>
+    <strong class="alert-title">Success!</strong> Your action completed successfully.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Action</button>
+      <button type="button" class="btn btn-subtle">Cancel</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  sideDangerAlertCode = `<div class="alert alert-side alert-danger alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <div>
+    <strong class="alert-title">Error!</strong> Something went wrong with your request.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Retry</button>
+      <button type="button" class="btn btn-subtle">Cancel</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  sideWarningAlertCode = `<div class="alert alert-side alert-warning alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+  <div>
+    <strong class="alert-title">Warning!</strong> Please review before proceeding.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Review</button>
+      <button type="button" class="btn btn-subtle">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  sideInfoAlertCode = `<div class="alert alert-side alert-info alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+  <div>
+    <strong class="alert-title">Info</strong> Here's some helpful information.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Learn More</button>
+      <button type="button" class="btn btn-subtle">Dismiss</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+
+  sideNeutralAlertCode = `<div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
+  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <div>
+    <strong class="alert-title">Neutral</strong> Standard notification message.
+    <div class="alert-footer">
+      <button type="button" class="btn btn-subtle">Action</button>
+      <button type="button" class="btn btn-subtle">Cancel</button>
+    </div>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`;
+}

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

@@ -0,0 +1,14 @@
+<div class="container py-5">
+  <h1 class="display-4 mb-4">{{ 'bootstrap.title' | translate }}</h1>
+  <p class="lead mb-5">{{ 'bootstrap.subtitle' | translate }}</p>
+
+  <app-alerts />
+  
+  <app-buttons />
+  
+  <app-cards />
+  
+  <app-forms />
+  
+  <app-tables />
+</div>

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

@@ -0,0 +1,91 @@
+.demo-section {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid #e5e7eb;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  h2 {
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #1B8354;
+  }
+  
+  h3 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    color: #384250;
+  }
+}
+
+.component-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+  align-items: flex-start;
+  
+  > * {
+    flex: 0 0 auto;
+  }
+}
+
+.demo-card-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.toast-container-demo {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1090;
+}
+
+// Radius Showcase
+.radius-showcase {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.radius-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.radius-box {
+  width: 180px;
+  height: 140px;
+  background-color: #ffffff;
+  border: 1px solid #D2D6DB;
+  
+  &.circle {
+    width: 140px;
+    height: 140px;
+  }
+}
+
+.radius-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #111927;
+}
+
+.radius-value {
+  font-size: 0.875rem;
+  color: #4D5761;
+}
+
+.radius-pixels {
+  font-size: 0.75rem;
+  color: #6C737F;
+}

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

@@ -0,0 +1,23 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { AlertsComponent } from '../alerts/alerts.component';
+import { ButtonsComponent } from '../buttons/buttons.component';
+import { CardsComponent } from '../cards/cards.component';
+import { FormsComponent } from '../forms/forms.component';
+import { TablesComponent } from '../tables/tables.component';
+
+@Component({
+  selector: 'app-bootstrap',
+  imports: [
+    TranslateModule,
+    AlertsComponent,
+    ButtonsComponent,
+    CardsComponent,
+    FormsComponent,
+    TablesComponent
+  ],
+  templateUrl: './bootstrap.component.html',
+  styleUrl: './bootstrap.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BootstrapComponent {}