sdga-ui 1.0.2 → 1.0.4

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

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

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

@@ -0,0 +1,194 @@
+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="hgi hgi-stroke hgi-checkmark-circle-02 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="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="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="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="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="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>`;
+
+  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="hgi hgi-stroke hgi-checkmark-circle-02 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="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>`;
+}