sdga-ui 1.0.7 → 1.0.9

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

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

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

@@ -1,155 +0,0 @@
-<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="bi bi-check 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="bi bi-exclamation-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="bi bi-exclamation-triangle 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="bi bi-info-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="bi bi-info-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="bi bi-check 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="bi bi-exclamation-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="bi bi-exclamation-triangle 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="bi bi-info-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]="sideInfoAlertCode"></app-code-example>
-    
-    <div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
-      <i class="bi bi-info-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

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

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

@@ -1,134 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
-
-@Component({
-  selector: 'app-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="bi bi-check 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="bi bi-exclamation-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="bi bi-exclamation-triangle 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="bi bi-info-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="bi bi-info-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="bi bi-check 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="bi bi-exclamation-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="bi bi-exclamation-triangle 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="bi bi-info-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>`;
-
-  sideNeutralAlertCode = `<div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
-  <i class="bi bi-info-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>`;
-}