sdga-ui 1.0.3 → 1.0.5

package/demo-angular/src/app/app.scss

@@ -0,0 +1,430 @@
+// App Layout
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background-color: #eee;
+}
+
+// Sidebar
+.sidebar {
+  width: 280px;
+  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
+  color: #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  transition: transform 0.3s ease;
+  z-index: 1000;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #1e293b;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #475569;
+    border-radius: 3px;
+  }
+}
+
+.sidebar-collapsed .sidebar {
+  transform: translateX(-280px);
+}
+
+.sidebar-header {
+  padding: 2rem 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+  .logo {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .tagline {
+    margin: 0.5rem 0 0;
+    font-size: 0.875rem;
+    color: #94a3b8;
+  }
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 1rem 0;
+}
+
+.nav-group {
+  margin-bottom: 1.5rem;
+}
+
+.nav-group-title {
+  padding: 0.5rem 1.5rem;
+  margin: 0 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #64748b;
+}
+
+.nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #cbd5e1;
+  position: relative;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: #fff;
+  }
+
+  &.active {
+    background-color: rgba(102, 126, 234, 0.15);
+    color: #fff;
+    font-weight: 500;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    }
+  }
+}
+
+.nav-icon {
+  margin-right: 0.75rem;
+  font-size: 1.25rem;
+  width: 24px;
+  display: inline-block;
+  text-align: center;
+}
+
+.nav-label {
+  font-size: 0.9375rem;
+}
+
+.sidebar-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+  .version {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #64748b;
+    text-align: center;
+  }
+}
+
+// Main Content
+.main-content {
+  flex: 1;
+  margin-left: 280px;
+  transition: margin-left 0.3s ease, margin-right 0.3s ease;
+}
+
+// RTL: Adjust margin for right-positioned sidebar
+[dir="rtl"] .main-content {
+  margin-left: 0;
+  margin-right: 280px;
+}
+
+.sidebar-collapsed .main-content {
+  margin-left: 0;
+}
+
+// RTL: Reset right margin when collapsed
+[dir="rtl"] .sidebar-collapsed .main-content {
+  margin-right: 0;
+}
+
+.top-bar {
+  background: #fff;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.menu-toggle {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: #475569;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #1e293b;
+  }
+
+  .hamburger {
+    display: block;
+  }
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  text-transform: capitalize;
+  flex: 1;
+}
+
+.top-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.theme-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  select {
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    background-color: #fff;
+    color: #1e293b;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    min-width: 140px;
+
+    &:hover {
+      border-color: #cbd5e0;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #667eea;
+    }
+  }
+
+  .theme-note {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    font-style: italic;
+  }
+}
+
+.content-area {
+  padding: 2rem;
+}
+
+// View Styles
+.view {
+  max-width: 1200px;
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 0 0 1rem;
+  }
+
+  .intro {
+    font-size: 1.25rem;
+    color: #64748b;
+    margin-bottom: 3rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin: 2rem 0 1rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #475569;
+    margin: 1.5rem 0 1rem;
+  }
+
+  p {
+    color: #64748b;
+    line-height: 1.6;
+  }
+
+  .info-note {
+    background: #f0f9ff;
+    border-left: 4px solid #3b82f6;
+    padding: 1rem 1.25rem;
+    margin-top: 1rem;
+    border-radius: 0.375rem;
+    color: #1e40af;
+    font-size: 0.9375rem;
+
+    code {
+      background: #dbeafe;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.875rem;
+      color: #1e3a8a;
+    }
+  }
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  margin: 1rem 0;
+}
+
+// Demo Showcase (component + code)
+.demo-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.code-example {
+  background: #1e293b;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #334155;
+
+  .code-header {
+    background: #0f172a;
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #334155;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .code-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #94a3b8;
+    }
+  }
+
+  pre {
+    margin: 0;
+    padding: 1.5rem;
+    overflow-x: auto;
+    background: transparent;
+
+    code {
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      color: #e2e8f0;
+    }
+  }
+}
+
+// Props Table
+.props-table {
+  overflow-x: auto;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9375rem;
+
+    thead {
+      background: #f8fafc;
+      border-bottom: 2px solid #e2e8f0;
+
+      th {
+        padding: 1rem;
+        text-align: left;
+        font-weight: 600;
+        color: #1e293b;
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid #e2e8f0;
+
+        &:hover {
+          background: #f8fafc;
+        }
+
+        td {
+          padding: 1rem;
+          color: #475569;
+
+          code {
+            background: #f1f5f9;
+            padding: 0.2rem 0.4rem;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            color: #0f172a;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Code Sections
+.code-section {
+  margin-bottom: 2rem;
+
+  h3 {
+    margin-bottom: 0.5rem;
+  }
+
+  pre {
+    background: #1e293b;
+    color: #e2e8f0;
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 0;
+
+    code {
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-angular');
+  });
+});

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

@@ -0,0 +1,88 @@
+import { Component, signal, inject, effect } from '@angular/core';
+import { RouterOutlet, Router } from '@angular/router';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, TranslateModule],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly router = inject(Router);
+  protected readonly translate = inject(TranslateService);
+  
+  protected readonly sidebarOpen = signal(true);
+  protected readonly currentTheme = signal<string | null>(null);
+  protected readonly currentLang = signal<'en' | 'ar'>('en');
+  protected readonly isRTL = signal(false);
+
+  constructor() {
+    // Initialize translations
+    this.translate.setFallbackLang('en');
+    this.translate.use('en').subscribe();
+  }
+
+  protected readonly themes = [
+    { id: 'default', name: 'Default', description: 'Standard SDGA theme', file: null },
+    { id: 'dark', name: 'Dark', description: 'Modern dark color palette', file: 'dark.scss' },
+    { id: 'material', name: 'Material', description: 'Material Design inspired', file: 'material.scss' },
+    { id: 'rounded', name: 'Rounded', description: 'Soft and friendly', file: 'rounded.scss' },
+    { id: 'minimal', name: 'Minimal', description: 'Clean and simple', file: 'minimal.scss' },
+    { id: 'vibrant', name: 'Vibrant', description: 'Bold and colorful', file: 'vibrant.scss' },
+    { id: 'large', name: 'Large', description: 'Big and prominent', file: 'large.scss' }
+  ];
+
+  protected readonly menuItems = [
+    {
+      groupKey: 'nav.getting_started',
+      items: [
+        { id: 'home', labelKey: 'nav.home', icon: '🏠', route: '/home' }
+      ]
+    },
+    {
+      groupKey: 'nav.components',
+      items: [
+        { id: 'alerts', labelKey: 'nav.alerts', icon: '⚠️', route: '/alerts' },
+        { id: 'buttons', labelKey: 'nav.buttons', icon: '🔘', route: '/buttons' },
+        { id: 'cards', labelKey: 'nav.cards', icon: '🃏', route: '/cards' },
+        { id: 'forms', labelKey: 'nav.forms', icon: '📝', route: '/forms' },
+        { id: 'tables', labelKey: 'nav.tables', icon: '📊', route: '/tables' },
+        { id: 'toasts', labelKey: 'nav.toasts', icon: '🔔', route: '/toasts' },
+        { id: 'links', labelKey: 'nav.links', icon: '🔗', route: '/links' },
+        { id: 'utilities', labelKey: 'nav.utilities', icon: '🛠️', route: '/utilities' },
+        { id: 'bootstrap', labelKey: 'nav.all_components', icon: '🎨', route: '/bootstrap' }
+      ]
+    }
+  ];
+
+  navigateTo(route: string): void {
+    this.router.navigate([route]);
+  }
+
+  toggleSidebar(): void {
+    this.sidebarOpen.update(open => !open);
+  }
+
+  toggleLanguage(): void {
+    const newLang = this.currentLang() === 'en' ? 'ar' : 'en';
+    this.currentLang.set(newLang);
+    this.translate.use(newLang).subscribe(() => {
+      this.isRTL.set(newLang === 'ar');
+      document.documentElement.setAttribute('dir', newLang === 'ar' ? 'rtl' : 'ltr');
+      document.documentElement.setAttribute('lang', newLang);
+    });
+  }
+
+  applyTheme(themeId: string): void {
+    this.currentTheme.set(themeId === 'default' ? null : themeId);
+    
+    const theme = this.themes.find(t => t.id === themeId);
+    if (theme?.file) {
+      console.log(`To apply the ${theme.name} theme, import it in your styles.scss:`);
+      console.log(`@import 'dist/SDGA/themes/${theme.file}';`);
+    } else {
+      console.log('Using default theme (no import needed)');
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+<div class="code-example-wrapper">
+  <div class="code-header">
+    @if (title) {
+      <span class="code-title">{{ title }}</span>
+    }
+    <button class="btn-toggle" (click)="toggleExpand()" type="button">
+      {{ (isExpanded() ? 'code.hide' : 'code.show') | translate }}
+    </button>
+  </div>
+
+  @if (isExpanded()) {
+    <div class="code-example">
+      <div class="code-tabs">
+        @for (tab of availableTabs; track tab) {
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === tab"
+            (click)="setActiveTab(tab)"
+            type="button">
+            {{ 'code.' + tab | translate }}
+          </button>
+        }
+        <button class="btn-copy" (click)="copyCode()" type="button">
+          {{ (copySuccess() ? 'code.copied' : 'code.copy') | translate }}
+        </button>
+      </div>
+      <pre><code [innerHTML]="highlightedCode"></code></pre>
+    </div>
+  }
+</div>