sdga-ui 1.0.7 → 1.0.8

package/demo-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demo-angular",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "scripts": {
     "ng": "ng",
     "start": "npm run use:local && ng serve -o",
@@ -38,7 +38,7 @@
     "bootstrap": "^5.3.8",
     "highlight.js": "^11.11.1",
     "rxjs": "~7.8.0",
-    "sdga-ui": "^1.0.7",
+    "sdga-ui": "^1.0.8",
     "tslib": "^2.3.0"
   },
   "devDependencies": {

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

@@ -27,7 +27,7 @@
     </nav>
 
     <div class="sidebar-footer">
-      <p class="version">{{ 'app.version' | translate }}</p>
+      <p class="version">v{{ version }}</p>
     </div>
   </aside>
 

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

@@ -14,10 +14,6 @@ export const routes: Routes = [
     path: 'alerts',
     loadComponent: () => import('./views/alerts/alerts.component').then(m => m.AlertsComponent)
   },
-  {
-    path: 'contexts',
-    loadComponent: () => import('./views/contexts/contexts.component').then(m => m.ContextsComponent)
-  },
   {
     path: 'buttons',
     loadComponent: () => import('./views/buttons/buttons.component').then(m => m.ButtonsComponent)

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

@@ -2,6 +2,9 @@ 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],
@@ -16,6 +19,7 @@ export class App {
   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
@@ -43,7 +47,7 @@ export class App {
     {
       groupKey: 'nav.layout',
       items: [
-        { id: 'header', labelKey: 'nav.header', icon: '📋', route: '/header' },
+        // { id: 'header', labelKey: 'nav.header', icon: '📋', route: '/header' },
         { id: 'footer', labelKey: 'nav.footer', icon: '📄', route: '/footer' }
       ]
     },
@@ -51,7 +55,6 @@ export class App {
       groupKey: 'nav.components',
       items: [
         { id: 'alerts', labelKey: 'nav.alerts', icon: '⚠️', route: '/alerts' },
-        { id: 'contexts', labelKey: 'nav.contexts', icon: '🧩', route: '/contexts' },
         { id: 'buttons', labelKey: 'nav.buttons', icon: '🔘', route: '/buttons' },
         { id: 'cards', labelKey: 'nav.cards', icon: '🃏', route: '/cards' },
         { id: 'forms', labelKey: 'nav.forms', icon: '📝', route: '/forms' },

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

@@ -1,4 +1,4 @@
-<div class="code-example-wrapper">
+<div class="code-example-wrapper" [class]="onColor ? 'on-' + onColor : ''">
   <div class="code-header">
     @if (title) {
       <span class="code-title">{{ title }}</span>

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

@@ -15,6 +15,7 @@ export class CodeExampleComponent {
   @Input() scssCode?: string;
   @Input() title?: string;
   @Input() expanded = false;
+  @Input() onColor?: string;
 
   isExpanded = signal(false);
   activeTab = signal<'html' | 'ts' | 'scss'>('html');
@@ -38,12 +39,22 @@ export class CodeExampleComponent {
 
   get currentCode(): string {
     const tab = this.activeTab();
-    if (tab === 'html' && this.htmlCode) return this.htmlCode;
+    if (tab === 'html' && this.htmlCode) return this.wrappedHtmlCode;
     if (tab === 'ts' && this.tsCode) return this.tsCode;
     if (tab === 'scss' && this.scssCode) return this.scssCode;
     return '';
   }
 
+  get wrappedHtmlCode(): string {
+    if (!this.htmlCode) return '';
+    if (this.onColor) {
+      return `<div class="on-${this.onColor}">
+  ${this.htmlCode.split('\n').join('\n  ')}
+</div>`;
+    }
+    return this.htmlCode;
+  }
+
   get highlightedCode(): string {
     const code = this.currentCode;
     const tab = this.activeTab();

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

@@ -5,19 +5,45 @@
   <section class="demo-section">
     <h2>{{ 'buttons.section_solid' | translate }}</h2>
     <div class="component-showcase">
-      <button type="button" class="btn btn-primary">{{ 'buttons.primary' | translate }}</button>
-      <button type="button" class="btn btn-neutral">{{ 'buttons.neutral' | translate }}</button>
-      <button type="button" class="btn btn-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-danger">{{ 'buttons.danger' | translate }}</button>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-neutral">Neutral</button>
+      <button type="button" class="btn btn-secondary">Secondary</button>
+      <button type="button" class="btn btn-subtle">Subtle</button>
+      <button type="button" class="btn btn-transparent">Transparent</button>
     </div>
     <app-code-example [htmlCode]="solidButtonsCode"></app-code-example>
     
+    <h3 class="mt-5">Destructive Variants</h3>
+    <div class="component-showcase">
+      <button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+      <button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+      <button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+      <button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>
+    </div>
+    <app-code-example [htmlCode]="destructiveButtonsCode"></app-code-example>
+    
+    <h3 class="mt-5">On Primary Context</h3>
+    <div class="on-primary p-4 rounded-2">
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-neutral">Neutral</button>
+      <button type="button" class="btn btn-secondary">Secondary</button>
+      <button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
+      <button type="button" class="btn btn-subtle">Subtle</button>
+      <button type="button" class="btn btn-transparent">Transparent</button>
+      <button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+      <button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+      <button type="button" class="btn btn-destructive-outline-secondary">Destructive Outline</button>
+      <button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+      <button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>
+    </div>
+    </div>
+    <app-code-example [htmlCode]="onPrimaryButtonsCode" [onColor]="'primary'"></app-code-example>
+    
     <h3 class="mt-5">{{ 'buttons.section_outline' | translate }}</h3>
     <div class="component-showcase">
-      <button type="button" class="btn btn-outline-primary">{{ 'buttons.primary' | translate }}</button>
       <button type="button" class="btn btn-outline-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-outline-neutral">{{ 'buttons.neutral' | translate }}</button>
-      <button type="button" class="btn btn-outline-danger">{{ 'buttons.danger' | translate }}</button>
+      <button type="button" class="btn btn-destructive-outline-secondary">{{ 'buttons.danger' | translate }}</button>
     </div>
     <app-code-example [htmlCode]="outlineButtonsCode"></app-code-example>
     
@@ -46,10 +72,35 @@
       <button type="button" class="btn btn-secondary active">{{ 'buttons.active' | translate }}</button>
       <button type="button" class="btn btn-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
     </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-subtle active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-subtle" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-transparent">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-transparent active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-transparent" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-destructive-primary">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-primary active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-primary" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-destructive-secondary">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-secondary active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-destructive-subtle">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-subtle active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-subtle" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
     <div class="component-showcase">
-      <button type="button" class="btn btn-danger">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-danger active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-danger" disabled>{{ 'buttons.disabled' | translate }}</button>
+      <button type="button" class="btn btn-destructive-transparent">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-transparent active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-transparent" disabled>{{ 'buttons.disabled' | translate }}</button>
     </div>
     <app-code-example [htmlCode]="buttonStatesCode"></app-code-example>
     
@@ -64,9 +115,18 @@
       <button type="button" class="btn btn-secondary btn-icon">
         <i class="bi bi-pencil"></i>{{ 'buttons.edit' | translate }}
       </button>
-      <button type="button" class="btn btn-danger btn-icon">
+      <button type="button" class="btn btn-subtle btn-icon">
+        <i class="bi bi-eye"></i>View
+      </button>
+      <button type="button" class="btn btn-transparent btn-icon">
+        <i class="bi bi-link"></i>Link
+      </button>
+      <button type="button" class="btn btn-destructive-primary btn-icon">
         <i class="bi bi-trash"></i>{{ 'buttons.delete' | translate }}
       </button>
+      <button type="button" class="btn btn-destructive-secondary btn-icon">
+        <i class="bi bi-x-circle"></i>Cancel
+      </button>
     </div>
     <app-code-example [htmlCode]="buttonIconLeftCode"></app-code-example>
     <div class="component-showcase mb-3">
@@ -85,7 +145,7 @@
       <button type="button" class="btn btn-primary btn-icon btn-sm">
         <i class="bi bi-plus-circle"></i>{{ 'buttons.add' | translate }}
       </button>
-      <button type="button" class="btn btn-outline-primary btn-icon">
+      <button type="button" class="btn btn-outline-secondary btn-icon">
         <i class="bi bi-arrow-right"></i>{{ 'buttons.next' | translate }}
       </button>
       <button type="button" class="btn btn-outline-secondary btn-icon">
@@ -104,18 +164,18 @@
       <button type="button" class="btn btn-secondary btn-icon" aria-label="{{ 'buttons.edit' | translate }}">
         <i class="bi bi-pencil"></i>
       </button>
-      <button type="button" class="btn btn-danger btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
+      <button type="button" class="btn btn-destructive-primary btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
         <i class="bi bi-trash"></i>
       </button>
     </div>
     <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-outline-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
+      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
         <i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.settings' | translate }}">
         <i class="bi bi-gear"></i>
       </button>
-      <button type="button" class="btn btn-outline-neutral btn-icon" aria-label="{{ 'buttons.add' | translate }}">
+      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.add' | translate }}">
         <i class="bi bi-plus-circle"></i>
       </button>
     </div>
@@ -168,8 +228,8 @@
       </div>
       
       <div class="dropdown">
-        <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_danger' | translate }}
+        <button class="btn btn-subtle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          Subtle
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -177,13 +237,10 @@
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
         </ul>
       </div>
-    </div>
-    <app-code-example [htmlCode]="dropdownButtonCode"></app-code-example>
-    
-    <div class="component-showcase mb-3">
+      
       <div class="dropdown">
-        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
+        <button class="btn btn-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          Transparent
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -192,6 +249,20 @@
         </ul>
       </div>
       
+      <div class="dropdown">
+        <button class="btn btn-destructive-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          {{ 'buttons.dropdown_danger' | translate }}
+        </button>
+        <ul class="dropdown-menu">
+          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
+          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
+          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
+        </ul>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="dropdownButtonCode"></app-code-example>
+    
+    <div class="component-showcase mb-3">
       <div class="dropdown">
         <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
           {{ 'buttons.dropdown_outline' | translate }}
@@ -204,7 +275,7 @@
       </div>
       
       <div class="dropdown">
-        <button class="btn btn-outline-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-destructive-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
           {{ 'buttons.dropdown_outline' | translate }}
         </button>
         <ul class="dropdown-menu">

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

@@ -7,8 +7,5 @@
   gap: 1rem;
   flex-wrap: wrap;
   align-items: center;
-  padding: 1.5rem;
-  background: #f8f9fa;
-  border-radius: 0.5rem;
 }
 

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

@@ -13,12 +13,29 @@ export class ButtonsComponent {
   solidButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-neutral">Neutral</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
-<button type="button" class="btn btn-danger">Danger</button>`;
+<button type="button" class="btn btn-subtle">Subtle</button>
+<button type="button" class="btn btn-transparent">Transparent</button>`;
 
-  outlineButtonsCode = `<button type="button" class="btn btn-outline-primary">Primary</button>
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-neutral">Neutral</button>
-<button type="button" class="btn btn-outline-danger">Danger</button>`;
+  destructiveButtonsCode = `<button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+<button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+<button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+<button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>`;
+
+  onPrimaryButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-neutral">Neutral</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
+<button type="button" class="btn btn-subtle">Subtle</button>
+<button type="button" class="btn btn-transparent">Transparent</button>
+
+<button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+<button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+<button type="button" class="btn btn-destructive-outline-secondary">Destructive Outline</button>
+<button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+<button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>`;
+
+  outlineButtonsCode = `<button type="button" class="btn btn-outline-secondary">Secondary</button>
+<button type="button" class="btn btn-destructive-outline-secondary">Destructive</button>`;
 
   buttonSizesCode = `<button type="button" class="btn btn-primary btn-lg">Large</button>
 <button type="button" class="btn btn-primary">Default</button>
@@ -38,8 +55,17 @@ export class ButtonsComponent {
 <button type="button" class="btn btn-secondary btn-icon">
   <i class="bi bi-pencil"></i>Edit
 </button>
-<button type="button" class="btn btn-danger btn-icon">
+<button type="button" class="btn btn-subtle btn-icon">
+  <i class="bi bi-eye"></i>View
+</button>
+<button type="button" class="btn btn-transparent btn-icon">
+  <i class="bi bi-link"></i>Link
+</button>
+<button type="button" class="btn btn-destructive-primary btn-icon">
   <i class="bi bi-trash"></i>Delete
+</button>
+<button type="button" class="btn btn-destructive-secondary btn-icon">
+  <i class="bi bi-x-circle"></i>Cancel
 </button>`;
 
   buttonIconRightCode = `<button type="button" class="btn btn-primary btn-icon">
@@ -61,7 +87,7 @@ export class ButtonsComponent {
 <button type="button" class="btn btn-secondary btn-icon" aria-label="Edit">
   <i class="bi bi-pencil"></i>
 </button>
-<button type="button" class="btn btn-danger btn-icon" aria-label="Delete">
+<button type="button" class="btn btn-destructive-primary btn-icon" aria-label="Delete">
   <i class="bi bi-trash"></i>
 </button>`;
 
@@ -85,6 +111,50 @@ export class ButtonsComponent {
     <li><button class="dropdown-item" type="button">Another action</button></li>
     <li><button class="dropdown-item" type="button">Something else here</button></li>
   </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Dropdown Secondary
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-subtle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Subtle
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Transparent
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-destructive-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Destructive Primary
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
 </div>`;
 
   dropdownSizesCode = `<div class="dropdown">