sdga-ui 1.0.8 → 1.0.10

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

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

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

@@ -1,97 +0,0 @@
-import { Component, signal, inject, effect } from '@angular/core';
-import { RouterOutlet, Router } from '@angular/router';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
-
-// Import package.json to get version
-import packageJson from '../../package.json';
-
-@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);
-  protected readonly version = packageJson.version;
-
-  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.layout',
-      items: [
-        // { id: 'header', labelKey: 'nav.header', icon: '📋', route: '/header' },
-        { id: 'footer', labelKey: 'nav.footer', icon: '📄', route: '/footer' }
-      ]
-    },
-    {
-      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' },
-      ]
-    }
-  ];
-
-  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

@@ -1,30 +0,0 @@
-<div class="code-example-wrapper" [class]="onColor ? 'on-' + onColor : ''">
-  <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>