sdga-ui 1.0.3 → 1.0.4

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

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-home',
+  imports: [RouterLink, TranslateModule],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HomeComponent {}

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

@@ -0,0 +1,140 @@
+<div class="container py-5">
+  <h1 class="display-4 mb-4">{{ 'links.title' | translate }}</h1>
+  <p class="lead mb-5">{{ 'links.subtitle' | translate }}</p>
+
+  <section class="demo-section mb-5">
+    <h2>{{ 'links.section_basic' | translate }}</h2>
+    <div class="d-flex flex-column gap-3">
+      <div>
+        <a href="javascript:void(0);" class="link-primary">{{ 'links.primary_link' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-secondary">{{ 'links.secondary_link' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-success">{{ 'links.success_link' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-danger">{{ 'links.danger_link' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-warning">{{ 'links.warning_link' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-info">{{ 'links.info_link' | translate }}</a>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="basicLinksCode"></app-code-example>
+  </section>
+
+  <section class="demo-section mb-5">
+    <h2>{{ 'links.section_underline' | translate }}</h2>
+    <div class="d-flex flex-column gap-3">
+      <div>
+        <a href="javascript:void(0);" class="link-underline">{{ 'links.underline_link' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-underline-opacity-0">{{ 'links.no_underline' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-underline-opacity-25">{{ 'links.underline_25' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-underline-opacity-50">{{ 'links.underline_50' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-underline-opacity-75">{{ 'links.underline_75' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-underline-opacity-100">{{ 'links.underline_100' | translate }}</a>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="underlineLinksCode"></app-code-example>
+  </section>
+
+  <section class="demo-section mb-5">
+    <h2>{{ 'links.section_hover' | translate }}</h2>
+    <div class="d-flex flex-column gap-3">
+      <div>
+        <a href="javascript:void(0);" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">{{ 'links.hover_underline' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-secondary link-underline-opacity-100 link-underline-opacity-0-hover">{{ 'links.hover_remove' | translate }}</a>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="hoverLinksCode"></app-code-example>
+  </section>
+
+  <section class="demo-section mb-5">
+    <h2>{{ 'links.section_offset' | translate }}</h2>
+    <div class="d-flex flex-column gap-3">
+      <div>
+        <a href="javascript:void(0);" class="link-offset-1">{{ 'links.offset_1' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-offset-2">{{ 'links.offset_2' | translate }}</a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-offset-3">{{ 'links.offset_3' | translate }}</a>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="offsetLinksCode"></app-code-example>
+    
+    <h3 class="mt-4 mb-3">Combining Offset with Hover Effects</h3>
+    <div class="d-flex flex-column gap-3">
+      <div>
+        <a href="javascript:void(0);" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
+          Link with changing offset on hover
+        </a>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="offsetHoverCode"></app-code-example>
+  </section>
+
+  <section class="demo-section mb-5">
+    <h2>{{ 'links.section_icons' | translate }}</h2>
+    <div class="d-flex flex-column gap-3">
+      <div>
+        <a href="javascript:void(0);" class="link-primary">
+          <i class="hgi hgi-stroke hgi-link-01 me-2"></i>
+          {{ 'links.link_with_icon' | translate }}
+        </a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-secondary">
+          {{ 'links.external_link' | translate }}
+          <i class="hgi hgi-stroke hgi-link-external-01 ms-2"></i>
+        </a>
+      </div>
+      <div>
+        <a href="javascript:void(0);" class="link-success">
+          <i class="hgi hgi-stroke hgi-arrow-right-01 me-2"></i>
+          {{ 'links.arrow_link' | translate }}
+        </a>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="iconLinksCode"></app-code-example>
+  </section>
+
+  <section class="demo-section">
+    <h2>{{ 'links.section_custom' | translate }}</h2>
+    
+    <h3 class="h5 mb-3">Subtle Link</h3>
+    <div class="mb-3">
+      <a href="javascript:void(0);" class="custom-link-subtle">{{ 'links.subtle_link' | translate }}</a>
+    </div>
+    <app-code-example [htmlCode]="subtleLinkCode" [scssCode]="subtleLinkScss"></app-code-example>
+    
+    <h3 class="h5 mb-3 mt-4">Bold Link</h3>
+    <div class="mb-3">
+      <a href="javascript:void(0);" class="custom-link-bold">{{ 'links.bold_link' | translate }}</a>
+    </div>
+    <app-code-example [htmlCode]="boldLinkCode" [scssCode]="boldLinkScss"></app-code-example>
+    
+    <h3 class="h5 mb-3 mt-4">Decorated Link</h3>
+    <div class="mb-3">
+      <a href="javascript:void(0);" class="custom-link-decorated">{{ 'links.decorated_link' | translate }}</a>
+    </div>
+    <app-code-example [htmlCode]="decoratedLinkCode" [scssCode]="decoratedLinkScss"></app-code-example>
+  </section>
+</div>

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

@@ -0,0 +1,60 @@
+// Links Component Styles
+
+.demo-section {
+  margin-bottom: 3rem;
+
+  h2 {
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--dga-border-color);
+  }
+
+  a {
+    font-size: 1rem;
+    transition: all 0.2s ease;
+  }
+}
+
+// Custom link styles
+.custom-link-subtle {
+  color: var(--dga-neutral-600);
+  text-decoration: none;
+  
+  &:hover {
+    color: var(--dga-primary);
+    text-decoration: underline;
+  }
+}
+
+.custom-link-bold {
+  color: var(--dga-primary);
+  font-weight: 600;
+  text-decoration: none;
+  
+  &:hover {
+    color: var(--dga-primary-dark);
+    text-decoration: underline;
+  }
+}
+
+.custom-link-decorated {
+  color: var(--dga-secondary);
+  text-decoration: none;
+  position: relative;
+  padding-bottom: 2px;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background-color: var(--dga-secondary);
+    transition: width 0.3s ease;
+  }
+  
+  &:hover::after {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,123 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-links',
+  imports: [CommonModule, TranslateModule, CodeExampleComponent],
+  templateUrl: './links.component.html',
+  styleUrl: './links.component.scss'
+})
+export class LinksComponent {
+  // Basic link colors
+  basicLinksCode = `<a href="#" class="link-primary">Primary link</a>
+<a href="#" class="link-secondary">Secondary link</a>
+<a href="#" class="link-success">Success link</a>
+<a href="#" class="link-danger">Danger link</a>
+<a href="#" class="link-warning">Warning link</a>
+<a href="#" class="link-info">Info link</a>`;
+
+  // Underline utilities with opacity variants
+  underlineLinksCode = `<!-- Default underline -->
+<a href="#" class="link-underline">Link with underline</a>
+
+<!-- Opacity variants -->
+<a href="#" class="link-underline-opacity-0">No underline (opacity 0)</a>
+<a href="#" class="link-underline-opacity-25">25% underline opacity</a>
+<a href="#" class="link-underline-opacity-50">50% underline opacity</a>
+<a href="#" class="link-underline-opacity-75">75% underline opacity</a>
+<a href="#" class="link-underline-opacity-100">100% underline opacity</a>`;
+
+  // Hover underline effects
+  hoverLinksCode = `<!-- Show underline on hover -->
+<a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">
+  Underline appears on hover
+</a>
+
+<!-- Hide underline on hover -->
+<a href="#" class="link-secondary link-underline-opacity-100 link-underline-opacity-0-hover">
+  Underline disappears on hover
+</a>`;
+
+  // Underline offset utilities
+  offsetLinksCode = `<a href="#" class="link-offset-1">Link with offset 1</a>
+<a href="#" class="link-offset-2">Link with offset 2</a>
+<a href="#" class="link-offset-3">Link with offset 3</a>`;
+
+  // Combined offset and hover
+  offsetHoverCode = `<a href="#" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
+  Link with offset that changes on hover
+</a>`;
+
+  // Links with icons
+  iconLinksCode = `<!-- Icon before text -->
+<a href="#" class="link-primary">
+  <i class="hgi hgi-stroke hgi-link-01 me-2"></i>
+  Link with leading icon
+</a>
+
+<!-- Icon after text -->
+<a href="#" class="link-secondary">
+  External link
+  <i class="hgi hgi-stroke hgi-link-external-01 ms-2"></i>
+</a>
+
+<!-- Icon with arrow -->
+<a href="#" class="link-success">
+  <i class="hgi hgi-stroke hgi-arrow-right-01 me-2"></i>
+  Arrow link
+</a>`;
+
+  // Custom link styles - subtle
+  subtleLinkCode = `<a href="#" class="custom-link-subtle">Subtle link style</a>`;
+
+  subtleLinkScss = `.custom-link-subtle {
+  color: var(--dga-neutral-600);
+  text-decoration: none;
+  
+  &:hover {
+    color: var(--dga-primary);
+    text-decoration: underline;
+  }
+}`;
+
+  // Custom link styles - bold
+  boldLinkCode = `<a href="#" class="custom-link-bold">Bold link style</a>`;
+
+  boldLinkScss = `.custom-link-bold {
+  color: var(--dga-primary);
+  font-weight: 600;
+  text-decoration: none;
+  
+  &:hover {
+    color: var(--dga-primary-dark);
+    text-decoration: underline;
+  }
+}`;
+
+  // Custom link styles - decorated
+  decoratedLinkCode = `<a href="#" class="custom-link-decorated">Decorated link with animated underline</a>`;
+
+  decoratedLinkScss = `.custom-link-decorated {
+  color: var(--dga-secondary);
+  text-decoration: none;
+  position: relative;
+  padding-bottom: 2px;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background-color: var(--dga-secondary);
+    transition: width 0.3s ease;
+  }
+  
+  &:hover::after {
+    width: 100%;
+  }
+}`;
+}

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

@@ -0,0 +1,289 @@
+<div class="container py-5">
+  <h1 class="display-4 mb-4">{{ 'tables.title' | translate }}</h1>
+  <p class="lead mb-5">{{ 'tables.subtitle' | translate }}</p>
+
+  <section class="demo-section">
+    <h2>{{ 'tables.section_default' | translate }}</h2>
+    <p class="mb-4">Default table with checkboxes and link integration. The table includes checkbox inputs in the first column for row selection and links in data cells.</p>
+    
+    <div class="table-responsive">
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
+                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
+            <th scope="col">First</th>
+            <th scope="col">Last</th>
+            <th scope="col">Handle</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple"
+                id="chkNeutralMd"></th>
+            <td><a href="javascript:void(0);">Mark</a></td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Jacob</a></td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">John</a></td>
+            <td>Doe</td>
+            <td>@social</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <app-code-example [htmlCode]="defaultTableCode" title="Default Table with Checkboxes"></app-code-example>
+  </section>
+
+  <section class="demo-section">
+    <h2>Side-Borderless Table</h2>
+    <p class="mb-4">Table without left and right borders using the <code>side-borderless</code> class. This creates a cleaner look by removing the side borders while maintaining horizontal dividers.</p>
+    
+    <div class="table-responsive">
+      <table class="table side-borderless">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
+                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
+            <th scope="col">First</th>
+            <th scope="col">Last</th>
+            <th scope="col">Handle</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Mark</a></td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Jacob</a></td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">John</a></td>
+            <td>Doe</td>
+            <td>@social</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <app-code-example [htmlCode]="sideBorderlessTableCode" title="Side-Borderless Table"></app-code-example>
+  </section>
+
+  <section class="demo-section">
+    <h2>Striped Table</h2>
+    <p class="mb-4">Table with alternating row colors using the <code>table-striped</code> class. This improves readability by creating visual separation between rows.</p>
+    
+    <div class="table-responsive">
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
+                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
+            <th scope="col">First</th>
+            <th scope="col">Last</th>
+            <th scope="col">Handle</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Mark</a></td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Jacob</a></td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">John</a></td>
+            <td>Doe</td>
+            <td>@social</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <app-code-example [htmlCode]="stripedTableCode" title="Striped Table"></app-code-example>
+  </section>
+
+  <section class="demo-section">
+    <h2>Striped + Side-Borderless Table</h2>
+    <p class="mb-4">Combination of striped rows and side-borderless styling using <code>table-striped side-borderless</code> classes. This creates a modern, clean appearance with enhanced readability.</p>
+    
+    <div class="table-responsive">
+      <table class="table table-striped side-borderless">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 3.25rem;"><input type="checkbox"
+                class="form-check-input form-check-input-sm ripple" id="chkDemoMd"></th>
+            <th scope="col">First</th>
+            <th scope="col">Last</th>
+            <th scope="col">Handle</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Mark</a></td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">Jacob</a></td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <th scope="row"><input type="checkbox" class="form-check-input form-check-input-sm ripple" id="chkDemoMd">
+            </th>
+            <td><a href="javascript:void(0);">John</a></td>
+            <td>Doe</td>
+            <td>@social</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <app-code-example [htmlCode]="stripedSideBorderlessTableCode" title="Striped + Side-Borderless Table"></app-code-example>
+  </section>
+
+  <section class="demo-section">
+    <h2>Table with Links</h2>
+    <p class="mb-4">Comprehensive example showing multiple link types within table cells. Includes links for names, email addresses (mailto:), and action links.</p>
+    
+    <div class="table-responsive">
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">ID</th>
+            <th scope="col">Name</th>
+            <th scope="col">Email</th>
+            <th scope="col">Department</th>
+            <th scope="col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td><a href="javascript:void(0);">John Doe</a></td>
+            <td><a href="mailto:john.doe@example.com">john.doe@example.com</a></td>
+            <td>Engineering</td>
+            <td>
+              <a href="javascript:void(0);">Edit</a> | 
+              <a href="javascript:void(0);">Delete</a>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td><a href="javascript:void(0);">Jane Smith</a></td>
+            <td><a href="mailto:jane.smith@example.com">jane.smith@example.com</a></td>
+            <td>Marketing</td>
+            <td>
+              <a href="javascript:void(0);">Edit</a> | 
+              <a href="javascript:void(0);">Delete</a>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td><a href="javascript:void(0);">Mike Johnson</a></td>
+            <td><a href="mailto:mike.johnson@example.com">mike.johnson@example.com</a></td>
+            <td>Sales</td>
+            <td>
+              <a href="javascript:void(0);">Edit</a> | 
+              <a href="javascript:void(0);">Delete</a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <app-code-example [htmlCode]="tableWithLinksCode" title="Table with Links in Cells"></app-code-example>
+  </section>
+
+  <section class="demo-section">
+    <h2>Responsive Table</h2>
+    <p class="mb-4">Table wrapped in <code>table-responsive</code> div to enable horizontal scrolling on smaller screens. Essential for tables with many columns to maintain usability on mobile devices.</p>
+    
+    <div class="table-responsive">
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">ID</th>
+            <th scope="col">First Name</th>
+            <th scope="col">Last Name</th>
+            <th scope="col">Email</th>
+            <th scope="col">Department</th>
+            <th scope="col">Position</th>
+            <th scope="col">Hire Date</th>
+            <th scope="col">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>John</td>
+            <td>Doe</td>
+            <td>john.doe@example.com</td>
+            <td>Engineering</td>
+            <td>Senior Developer</td>
+            <td>2020-01-15</td>
+            <td>Active</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Jane</td>
+            <td>Smith</td>
+            <td>jane.smith@example.com</td>
+            <td>Marketing</td>
+            <td>Marketing Manager</td>
+            <td>2019-06-20</td>
+            <td>Active</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Mike</td>
+            <td>Johnson</td>
+            <td>mike.johnson@example.com</td>
+            <td>Sales</td>
+            <td>Sales Representative</td>
+            <td>2021-03-10</td>
+            <td>Active</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <app-code-example [htmlCode]="responsiveTableCode" title="Responsive Table Wrapper"></app-code-example>
+  </section>
+</div>

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

@@ -0,0 +1,3 @@
+.demo-section {
+  margin-bottom: 4rem;
+}