sdga-ui 1.0.7 → 1.0.9

package/demo-angular/src/app/views/cards/cards.component.html.backup

@@ -1,156 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'cards.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'cards.subtitle' | translate }}</p>
-
-  <section class="demo-section">
-    <h2 class="mb-4">{{ 'cards.section_examples' | translate }}</h2>
-    
-    <div class="demo-card-grid">
-      <!-- Card with icon -->
-      <div class="card" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Card with icon and checkbox -->
-      <div class="card disabled" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
-            <input class="card-title-checked  form-check-input ripple" disabled type="checkbox" value="" id="check1" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary disabled">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary disabled">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-
-      <!-- Card with checkbox only -->
-      <div class="card" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check2" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-
-      
-      <!-- Card without shadow only -->
-      <div class="card shadow-none" tabindex="0">
-        <div class="card-body">
-          <h5 class="card-title">
-            <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check2" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.card_text' | translate }}</p>
-          <div class="card-footer">
-            <a href="javascript:void(0);" class="btn btn-outline-secondary">{{ 'cards.action_secondary' | translate }}</a>
-            <a href="javascript:void(0);" class="btn btn-primary">{{ 'cards.action' | translate }}</a>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Expandable card with checkbox -->
-      <div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
-            <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check3" aria-label="{{ 'cards.select_card' | translate }}">
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
-          
-          @if (isExpanded(1)) {
-            <div class="card-expanded-content">
-              <p class="mt-3">{{ 'cards.expanded_content' | translate }}</p>
-              <ul>
-                <li>{{ 'cards.detail_1' | translate }}</li>
-                <li>{{ 'cards.detail_2' | translate }}</li>
-                <li>{{ 'cards.detail_3' | translate }}</li>
-              </ul>
-            </div>
-          }
-          
-          <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(1)" [class.hgi-arrow-down-01]="!isExpanded(1)" (click)="toggleCard(1)"></i>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Expandable card -->
-      <div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
-        <div class="card-body">
-          <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
-          </h5>
-          <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
-          <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
-          
-          @if (isExpanded(2)) {
-            <div class="card-expanded-content">
-              <p class="mt-3">{{ 'cards.expanded_content' | translate }}</p>
-              <ul>
-                <li>{{ 'cards.detail_1' | translate }}</li>
-                <li>{{ 'cards.detail_2' | translate }}</li>
-                <li>{{ 'cards.detail_3' | translate }}</li>
-              </ul>
-              <div class="d-flex align-items-center gap-3 mb-3">
-                <button class="btn btn-sm btn-primary">{{ 'cards.action' | translate }}</button>
-                <button class="btn btn-sm btn-outline-secondary">{{ 'cards.cancel' | translate }}</button>
-              </div>
-            </div>
-          }
-          
-          <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(2)" [class.hgi-arrow-down-01]="!isExpanded(2)" (click)="toggleCard(2)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Code Examples -->
-    <div class="mt-5">
-      <h3 class="mb-4">Card with Icon</h3>
-      <app-code-example [htmlCode]="cardWithIconCode" title="Card with Icon and Header"></app-code-example>
-
-      <h3 class="mb-4 mt-5">Card with Checkbox</h3>
-      <app-code-example [htmlCode]="cardWithCheckboxCode" title="Card with Checkbox"></app-code-example>
-
-      <h3 class="mb-4 mt-5">Disabled Card</h3>
-      <app-code-example [htmlCode]="disabledCardCode" title="Disabled Card with Icon and Checkbox"></app-code-example>
-
-      <h3 class="mb-4 mt-5">Card without Shadow</h3>
-      <app-code-example [htmlCode]="cardNoShadowCode" title="Card with Shadow Removed (shadow-none)"></app-code-example>
-
-      <h3 class="mb-4 mt-5">Expandable Card (Interactive)</h3>
-      <app-code-example 
-        [htmlCode]="expandableCardHtmlCode" 
-        [tsCode]="expandableCardTsCode" 
-        title="Expandable Card with Checkbox - HTML Template"></app-code-example>
-
-      <h3 class="mb-4 mt-5">Expandable Card (Simple)</h3>
-      <app-code-example 
-        [htmlCode]="expandableCardSimpleHtmlCode" 
-        [tsCode]="expandableCardTsCode" 
-        title="Expandable Card with Actions - HTML Template"></app-code-example>
-    </div>
-  </section>
-</div>

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

@@ -1,11 +0,0 @@
-.demo-section {
-  margin-bottom: 4rem;
-}
-
-.demo-card-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  align-items: flex-start;
-}
-

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

@@ -1,194 +0,0 @@
-import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
-
-@Component({
-  selector: 'app-cards',
-  imports: [TranslateModule, CodeExampleComponent],
-  templateUrl: './cards.component.html',
-  styleUrl: './cards.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CardsComponent {
-  expandedCards = signal<Set<number>>(new Set());
-  
-  toggleCard(cardId: number) {
-    this.expandedCards.update(cards => {
-      const newSet = new Set(cards);
-      if (newSet.has(cardId)) {
-        newSet.delete(cardId);
-      } else {
-        newSet.add(cardId);
-      }
-      return newSet;
-    });
-  }
-  
-  isExpanded(cardId: number): boolean {
-    return this.expandedCards().has(cardId);
-  }
-
-  // Code examples for all card variations
-  cardWithIconCode = `<div class="card" tabindex="0">
-  <div class="card-body">
-    <h5 class="card-title">
-      <i class="bi bi-check-circle card-title-icon"></i>
-    </h5>
-    <h6 class="card-subtitle mb-2">Card Title</h6>
-    <p class="card-text">This is a sample card text that describes the content.</p>
-    <div class="card-footer">
-      <a href="javascript:void(0);" class="btn btn-outline-secondary">Secondary Action</a>
-      <a href="javascript:void(0);" class="btn btn-primary">Primary Action</a>
-    </div>
-  </div>
-</div>`;
-
-  cardWithCheckboxCode = `<div class="card" tabindex="0">
-  <div class="card-body">
-    <h5 class="card-title">
-      <input class="card-title-checked form-check-input ripple" 
-             type="checkbox" 
-             value="" 
-             id="check2" 
-             aria-label="Select card">
-    </h5>
-    <h6 class="card-subtitle mb-2">Card Title</h6>
-    <p class="card-text">This is a sample card text that describes the content.</p>
-    <div class="card-footer">
-      <a href="javascript:void(0);" class="btn btn-outline-secondary">Secondary Action</a>
-      <a href="javascript:void(0);" class="btn btn-primary">Primary Action</a>
-    </div>
-  </div>
-</div>`;
-
-  disabledCardCode = `<div class="card disabled" tabindex="0">
-  <div class="card-body">
-    <h5 class="card-title">
-      <i class="bi bi-check-circle card-title-icon"></i>
-      <input class="card-title-checked form-check-input ripple" 
-             disabled 
-             type="checkbox" 
-             value="" 
-             id="check1" 
-             aria-label="Select card">
-    </h5>
-    <h6 class="card-subtitle mb-2">Card Title</h6>
-    <p class="card-text">This is a sample card text that describes the content.</p>
-    <div class="card-footer">
-      <a href="javascript:void(0);" class="btn btn-outline-secondary disabled">Secondary Action</a>
-      <a href="javascript:void(0);" class="btn btn-primary disabled">Primary Action</a>
-    </div>
-  </div>
-</div>`;
-
-  cardNoShadowCode = `<div class="card shadow-none" tabindex="0">
-  <div class="card-body">
-    <h5 class="card-title">
-      <input class="card-title-checked form-check-input ripple" 
-             type="checkbox" 
-             value="" 
-             id="check2" 
-             aria-label="Select card">
-    </h5>
-    <h6 class="card-subtitle mb-2">Card Title</h6>
-    <p class="card-text">This is a sample card text that describes the content.</p>
-    <div class="card-footer">
-      <a href="javascript:void(0);" class="btn btn-outline-secondary">Secondary Action</a>
-      <a href="javascript:void(0);" class="btn btn-primary">Primary Action</a>
-    </div>
-  </div>
-</div>`;
-
-  expandableCardHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
-  <div class="card-body">
-    <h5 class="card-title">
-      <i class="bi bi-check-circle card-title-icon"></i>
-      <input class="card-title-checked form-check-input ripple" 
-             type="checkbox" 
-             value="" 
-             id="check3" 
-             aria-label="Select card">
-    </h5>
-    <h6 class="card-subtitle mb-2">Expandable Card Title</h6>
-    <p class="card-text">Click the arrow to see more details.</p>
-    
-    @if (isExpanded(1)) {
-      <div class="card-expanded-content">
-        <p class="mt-3">Additional content shown when expanded.</p>
-        <ul>
-          <li>Detail point 1</li>
-          <li>Detail point 2</li>
-          <li>Detail point 3</li>
-        </ul>
-      </div>
-    }
-    
-    <div class="card-footer">
-      <i class="bi card-expanded-icon" 
-         [class.bi-chevron-up]="isExpanded(1)" 
-         [class.bi-chevron-down]="!isExpanded(1)" 
-         (click)="toggleCard(1)"></i>
-    </div>
-  </div>
-</div>`;
-
-  expandableCardTsCode = `import { Component, signal } from '@angular/core';
-
-@Component({
-  selector: 'app-cards',
-  templateUrl: './cards.component.html',
-  styleUrl: './cards.component.scss'
-})
-export class CardsComponent {
-  // Use Angular signals to manage expanded state
-  expandedCards = signal<Set<number>>(new Set());
-  
-  toggleCard(cardId: number) {
-    this.expandedCards.update(cards => {
-      const newSet = new Set(cards);
-      if (newSet.has(cardId)) {
-        newSet.delete(cardId);
-      } else {
-        newSet.add(cardId);
-      }
-      return newSet;
-    });
-  }
-  
-  isExpanded(cardId: number): boolean {
-    return this.expandedCards().has(cardId);
-  }
-}`;
-
-  expandableCardSimpleHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
-  <div class="card-body">
-    <h5 class="card-title">
-      <i class="bi bi-check-circle card-title-icon"></i>
-    </h5>
-    <h6 class="card-subtitle mb-2">Expandable Card Title</h6>
-    <p class="card-text">Click the arrow to see more details.</p>
-    
-    @if (isExpanded(2)) {
-      <div class="card-expanded-content">
-        <p class="mt-3">Additional content shown when expanded.</p>
-        <ul>
-          <li>Detail point 1</li>
-          <li>Detail point 2</li>
-          <li>Detail point 3</li>
-        </ul>
-        <div class="d-flex align-items-center gap-3 mb-3">
-          <button class="btn btn-sm btn-primary">Primary Action</button>
-          <button class="btn btn-sm btn-outline-secondary">Cancel</button>
-        </div>
-      </div>
-    }
-    
-    <div class="card-footer">
-      <i class="bi card-expanded-icon" 
-         [class.bi-chevron-up]="isExpanded(2)" 
-         [class.bi-chevron-down]="!isExpanded(2)" 
-         (click)="toggleCard(2)"></i>
-    </div>
-  </div>
-</div>`;
-}

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

@@ -1,204 +0,0 @@
-<!-- Context-Aware Theming Demo -->
-<div class="container py-5">
-  <h1 class="mb-5">Context-Aware Theming System</h1>
-  <p class="lead mb-5">
-    Components automatically adapt their colors based on the background context.
-    Simply wrap content in context classes like <code>.on-primary</code>, <code>.on-dark</code>, etc.
-  </p>
-
-  <!-- Default Context (Light Background) -->
-  <section class="mb-5">
-    <h2>Default Context</h2>
-    <div class="p-4 border rounded">
-      <p class="mb-3">This is the default light background context.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Primary Button</button>
-        <button class="btn btn-secondary">Secondary Button</button>
-        <button class="btn btn-outline-primary">Outline Button</button>
-      </div>
-      <p class="mb-2">
-        <a href="#" class="me-3">Regular Link</a>
-        <a href="#" class="link-primary">Primary Link</a>
-      </p>
-      <input type="text" class="form-control" placeholder="Input field">
-    </div>
-  </section>
-
-  <!-- On Primary Context -->
-  <section class="mb-5">
-    <h2>On Primary Context</h2>
-    <div class="on-primary p-4 rounded context-section">
-      <h3>Content on Primary Background</h3>
-      <p class="mb-3">All components automatically adapt to white/light colors for better contrast.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Primary Button</button>
-        <button class="btn btn-secondary">Secondary Button</button>
-        <button class="btn btn-outline-primary">Outline Button</button>
-      </div>
-      <p class="mb-3">
-        <a href="#" class="me-3">Regular Link</a>
-        <span class="text-muted">Muted text adapts too</span>
-      </p>
-      <input type="text" class="form-control" placeholder="Input field adapts">
-      
-      <div class="card mt-3 on-light">
-        <div class="card-body">
-          <h5 class="card-title">Card in Primary Context</h5>
-          <p class="card-text">Cards have subtle transparency to blend with the background.</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- On Dark Context -->
-  <section class="mb-5">
-    <h2>On Dark Context</h2>
-    <div class="on-dark p-4 rounded context-section">
-      <h3>Content on Dark Background</h3>
-      <p class="mb-3">Perfect for dark mode or dark sections. All components adapt automatically.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Primary Button</button>
-        <button class="btn btn-secondary">Secondary Button</button>
-        <button class="btn btn-outline-primary">Outline Button</button>
-      </div>
-      <p class="mb-3">
-        <a href="#" class="me-3">Regular Link</a>
-        <span class="text-muted">Muted text is readable</span>
-      </p>
-      <input type="text" class="form-control mb-3" placeholder="Form fields work great">
-      <select class="form-select">
-        <option>Select options adapt too</option>
-        <option>Option 2</option>
-      </select>
-    </div>
-  </section>
-
-  <!-- On Danger Context -->
-  <section class="mb-5">
-    <h2>On Danger Context</h2>
-    <div class="on-danger p-4 rounded context-section">
-      <h3>Critical Alerts or Warnings</h3>
-      <p class="mb-3">Use for error states, critical warnings, or important notices.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Primary Action</button>
-        <button class="btn btn-secondary">Secondary Action</button>
-        <button class="btn btn-outline-primary">Outline Action</button>
-      </div>
-      <div class="alert alert-warning mb-0">
-        <strong>Warning!</strong> Even alerts adapt to the context.
-      </div>
-    </div>
-  </section>
-
-  <!-- On Success Context -->
-  <section class="mb-5">
-    <h2>On Success Context</h2>
-    <div class="on-success p-4 rounded context-section">
-      <h3>Success Messages or Confirmation</h3>
-      <p class="mb-3">Perfect for success states, completed actions, or positive feedback.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Continue</button>
-        <button class="btn btn-outline-primary">View Details</button>
-      </div>
-      <p class="mb-0">
-        <a href="#">Learn more about this success</a>
-      </p>
-    </div>
-  </section>
-
-  <!-- On Warning Context -->
-  <section class="mb-5">
-    <h2>On Warning Context</h2>
-    <div class="on-warning p-4 rounded context-section">
-      <h3>Warning or Attention Needed</h3>
-      <p class="mb-3">Note: Uses dark text for better contrast on yellow/warning background.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Take Action</button>
-        <button class="btn btn-secondary">Dismiss</button>
-      </div>
-      <input type="text" class="form-control" placeholder="Dark text on warning background">
-    </div>
-  </section>
-
-  <!-- On Light Context -->
-  <section class="mb-5">
-    <h2>On Light Context</h2>
-    <div class="on-light p-4 rounded context-section">
-      <h3>Subtle Light Background</h3>
-      <p class="mb-3">Slightly different from default - useful for sections, sidebars, or panels.</p>
-      <div class="d-flex gap-2 mb-3">
-        <button class="btn btn-primary">Primary Button</button>
-        <button class="btn btn-secondary">Secondary Button</button>
-        <button class="btn btn-outline-primary">Outline Button</button>
-      </div>
-      <p class="mb-3">
-        <a href="#">Links maintain primary color</a>
-        <span class="text-muted ms-3">Muted text for less emphasis</span>
-      </p>
-      <div class="row g-2">
-        <div class="col">
-          <input type="text" class="form-control" placeholder="First name">
-        </div>
-        <div class="col">
-          <input type="text" class="form-control" placeholder="Last name">
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Nested Contexts Example -->
-  <section class="mb-5">
-    <h2>Nested Contexts</h2>
-    <div class="on-primary p-4 rounded">
-      <h3>Primary Background</h3>
-      <p class="mb-3">You can nest different contexts for complex layouts.</p>
-      <button class="btn btn-primary me-2">Button on Primary</button>
-      
-      <div class="on-light p-3 rounded mt-3">
-        <h4>Light Context Inside Primary</h4>
-        <p class="mb-2">This light section is nested inside the primary background.</p>
-        <button class="btn btn-primary">Button on Light</button>
-      </div>
-    </div>
-  </section>
-
-  <!-- Usage Guide -->
-  <section class="mt-5 p-4 bg-light rounded">
-    <h2>How to Use</h2>
-    <div class="row">
-      <div class="col-md-6">
-        <h4>Available Context Classes:</h4>
-        <ul>
-          <li><code>.on-primary</code> - White text on primary color</li>
-          <li><code>.on-dark</code> - White text on dark background</li>
-          <li><code>.on-danger</code> - White text on danger/error color</li>
-          <li><code>.on-success</code> - White text on success color</li>
-          <li><code>.on-warning</code> - Dark text on warning color</li>
-          <li><code>.on-light</code> - Dark text on light background</li>
-        </ul>
-      </div>
-      <div class="col-md-6">
-        <h4>What Adapts Automatically:</h4>
-        <ul>
-          <li>✅ Buttons (all variants)</li>
-          <li>✅ Links</li>
-          <li>✅ Form inputs and selects</li>
-          <li>✅ Text colors</li>
-          <li>✅ Border colors</li>
-          <li>✅ Cards and alerts</li>
-          <li>✅ Tables and badges</li>
-        </ul>
-      </div>
-    </div>
-    
-    <div class="mt-4">
-      <h4>Example Code:</h4>
-      <pre class="bg-dark text-white p-3 rounded"><code>&lt;div class="on-primary p-4"&gt;
-  &lt;h3&gt;Content adapts automatically&lt;/h3&gt;
-  &lt;button class="btn btn-primary"&gt;Primary Button&lt;/button&gt;
-  &lt;a href="#"&gt;Link&lt;/a&gt;
-  &lt;input type="text" class="form-control" placeholder="Input"&gt;
-&lt;/div&gt;</code></pre>
-    </div>
-  </section>
-</div>

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

@@ -1,10 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-buttons',
-  imports: [TranslateModule],
-  templateUrl: './contexts.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContextsComponent {}