sdga-ui 1.0.8 → 1.0.9

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

@@ -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>
-    
-    <!-- Card with icon -->
-    <h3 class="mb-3">Card with Icon</h3>
-    <div class="demo-card-grid mb-3">
-      <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">{{ '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>
-    </div>
-    <app-code-example [htmlCode]="cardWithIconCode" title="Card with Icon and Header"></app-code-example>
-      
-    <!-- Card with checkbox -->
-    <h3 class="mb-3 mt-5">Card with Checkbox</h3>
-    <div class="demo-card-grid mb-3">
-      <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>
-    </div>
-    <app-code-example [htmlCode]="cardWithCheckboxCode" title="Card with Checkbox"></app-code-example>
-      
-    <!-- Disabled card with icon and checkbox -->
-    <h3 class="mb-3 mt-5">Disabled Card</h3>
-    <div class="demo-card-grid mb-3">
-      <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="{{ '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>
-    </div>
-    <app-code-example [htmlCode]="disabledCardCode" title="Disabled Card with Icon and Checkbox"></app-code-example>
-
-      <!-- Card without shadow -->
-      <h3 class="mb-3 mt-5">Card without Shadow</h3>
-      <div class="demo-card-grid mb-3">
-      <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>
-    </div>
-    <app-code-example [htmlCode]="cardNoShadowCode" title="Card with Shadow Removed (shadow-none)"></app-code-example>
-      
-      <!-- Expandable card with checkbox -->
-      <h3 class="mb-3 mt-5">Expandable Card (Interactive)</h3>
-      <div class="demo-card-grid mb-3">
-      <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="{{ '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="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(1)" [class.bi-chevron-down]="!isExpanded(1)" (click)="toggleCard(1)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example 
-      [htmlCode]="expandableCardHtmlCode" 
-      [tsCode]="expandableCardTsCode" 
-      title="Expandable Card with Checkbox - HTML Template"></app-code-example>
-      
-      <!-- Expandable card with actions -->
-      <h3 class="mb-3 mt-5">Expandable Card (Simple)</h3>
-      <div class="demo-card-grid mb-3">
-      <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">{{ '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="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(2)" [class.bi-chevron-down]="!isExpanded(2)" (click)="toggleCard(2)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-    <app-code-example 
-      [htmlCode]="expandableCardSimpleHtmlCode" 
-      [tsCode]="expandableCardTsCode" 
-      title="Expandable Card with Actions - HTML Template"></app-code-example>
-  </section>
-</div>

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>`;
-}