6f0ab0cf5f
- Replace incorrect semantic token names with correct ones: • $semantic-border-width-thin → $semantic-border-width-1 • $semantic-color-border-default → $semantic-color-border-primary • $semantic-spacing-content-* → $semantic-spacing-component-* • $semantic-typography-body-* → $semantic-typography-font-size-* • $semantic-typography-caption-* → $semantic-typography-font-size-* • $semantic-motion-easing-standard → $semantic-easing-standard • $semantic-color-surface-tertiary → $semantic-color-surface-secondary • Various hover color tokens → base color tokens - Fix typography map usage errors: • Replace heading map tokens with individual size tokens • $semantic-typography-heading-h* → $semantic-typography-heading-h*-size - Update affected components: • tooltip, divider, progress-circle, range-slider components • Related demo components and SCSS files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
629 lines
21 KiB
TypeScript
629 lines
21 KiB
TypeScript
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component';
|
|
import {
|
|
// Solid icons from shared-ui
|
|
faUser,
|
|
faHome,
|
|
faCog,
|
|
faSearch,
|
|
faPlus,
|
|
faEdit,
|
|
faTrash,
|
|
faSave,
|
|
faCancel,
|
|
faCheck,
|
|
faTimes,
|
|
faArrowLeft,
|
|
faArrowRight,
|
|
faChevronLeft,
|
|
faChevronRight,
|
|
faChevronUp,
|
|
faChevronDown,
|
|
faBars,
|
|
faEllipsisV,
|
|
faEye,
|
|
faEyeSlash,
|
|
faDownload,
|
|
faUpload,
|
|
faRefresh,
|
|
faSpinner,
|
|
faExclamationTriangle,
|
|
faInfoCircle,
|
|
faCheckCircle,
|
|
faTimesCircle,
|
|
faEnvelope
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
import {
|
|
// Regular icons from shared-ui
|
|
faHeart,
|
|
faBookmark,
|
|
faComment,
|
|
faThumbsUp
|
|
} from '@fortawesome/free-regular-svg-icons';
|
|
import {
|
|
// Brand icons from shared-ui
|
|
faGithub,
|
|
faTwitter,
|
|
faLinkedin,
|
|
faGoogle
|
|
} from '@fortawesome/free-brands-svg-icons';
|
|
|
|
@Component({
|
|
selector: 'ui-fontawesome-demo',
|
|
standalone: true,
|
|
imports: [
|
|
CommonModule,
|
|
FaIconComponent,
|
|
ButtonComponent
|
|
],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<div class="demo-container">
|
|
<h2>Font Awesome Icons Showcase</h2>
|
|
|
|
<!-- Introduction -->
|
|
<section class="intro-section">
|
|
<h3>Font Awesome Integration</h3>
|
|
<p>This demo showcases the Font Awesome icons available in the shared-ui library. Icons are pre-configured and ready to use across the application.</p>
|
|
<div class="info-box">
|
|
<fa-icon [icon]="faInfoCircle" class="info-icon"></fa-icon>
|
|
<span><strong>Available Categories:</strong> Solid, Regular, and Brand icons from Font Awesome</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Basic Usage -->
|
|
<section class="demo-section">
|
|
<h3>Basic Usage</h3>
|
|
<div class="icon-grid">
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faUser" size="2x"></fa-icon>
|
|
<span class="icon-name">faUser</span>
|
|
<code>fa-icon [icon]="faUser"</code>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faHome" size="2x"></fa-icon>
|
|
<span class="icon-name">faHome</span>
|
|
<code>fa-icon [icon]="faHome"</code>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faCog" size="2x"></fa-icon>
|
|
<span class="icon-name">faCog</span>
|
|
<code>fa-icon [icon]="faCog"</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Icon Sizes -->
|
|
<section class="demo-section">
|
|
<h3>Icon Sizes</h3>
|
|
<div class="size-demo">
|
|
<div class="size-row">
|
|
<span class="size-label">xs:</span>
|
|
<fa-icon [icon]="faCheck" size="xs"></fa-icon>
|
|
<code>size="xs"</code>
|
|
</div>
|
|
<div class="size-row">
|
|
<span class="size-label">sm:</span>
|
|
<fa-icon [icon]="faCheck" size="sm"></fa-icon>
|
|
<code>size="sm"</code>
|
|
</div>
|
|
<div class="size-row">
|
|
<span class="size-label">lg:</span>
|
|
<fa-icon [icon]="faCheck" size="lg"></fa-icon>
|
|
<code>size="lg"</code>
|
|
</div>
|
|
<div class="size-row">
|
|
<span class="size-label">2x:</span>
|
|
<fa-icon [icon]="faCheck" size="2x"></fa-icon>
|
|
<code>size="2x"</code>
|
|
</div>
|
|
<div class="size-row">
|
|
<span class="size-label">3x:</span>
|
|
<fa-icon [icon]="faCheck" size="3x"></fa-icon>
|
|
<code>size="3x"</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Solid Icons -->
|
|
<section class="demo-section">
|
|
<h3>Solid Icons (free-solid-svg-icons)</h3>
|
|
<p>Most commonly used icons for UI elements, actions, and navigation.</p>
|
|
<div class="icon-grid">
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faUser" size="2x"></fa-icon>
|
|
<span class="icon-name">faUser</span>
|
|
<span class="icon-usage">User profiles, accounts</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faHome" size="2x"></fa-icon>
|
|
<span class="icon-name">faHome</span>
|
|
<span class="icon-usage">Home navigation</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faCog" size="2x"></fa-icon>
|
|
<span class="icon-name">faCog</span>
|
|
<span class="icon-usage">Settings</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faSearch" size="2x"></fa-icon>
|
|
<span class="icon-name">faSearch</span>
|
|
<span class="icon-usage">Search functionality</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faPlus" size="2x"></fa-icon>
|
|
<span class="icon-name">faPlus</span>
|
|
<span class="icon-usage">Add new items</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faEdit" size="2x"></fa-icon>
|
|
<span class="icon-name">faEdit</span>
|
|
<span class="icon-usage">Edit content</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faTrash" size="2x"></fa-icon>
|
|
<span class="icon-name">faTrash</span>
|
|
<span class="icon-usage">Delete items</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faSave" size="2x"></fa-icon>
|
|
<span class="icon-name">faSave</span>
|
|
<span class="icon-usage">Save changes</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faCheck" size="2x"></fa-icon>
|
|
<span class="icon-name">faCheck</span>
|
|
<span class="icon-usage">Confirm, success</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faTimes" size="2x"></fa-icon>
|
|
<span class="icon-name">faTimes</span>
|
|
<span class="icon-usage">Close, dismiss</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faArrowLeft" size="2x"></fa-icon>
|
|
<span class="icon-name">faArrowLeft</span>
|
|
<span class="icon-usage">Back navigation</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faArrowRight" size="2x"></fa-icon>
|
|
<span class="icon-name">faArrowRight</span>
|
|
<span class="icon-usage">Forward navigation</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faDownload" size="2x"></fa-icon>
|
|
<span class="icon-name">faDownload</span>
|
|
<span class="icon-usage">Download files</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faUpload" size="2x"></fa-icon>
|
|
<span class="icon-name">faUpload</span>
|
|
<span class="icon-usage">Upload files</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faRefresh" size="2x"></fa-icon>
|
|
<span class="icon-name">faRefresh</span>
|
|
<span class="icon-usage">Refresh content</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faSpinner" size="2x"></fa-icon>
|
|
<span class="icon-name">faSpinner</span>
|
|
<span class="icon-usage">Loading states</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Regular Icons -->
|
|
<section class="demo-section">
|
|
<h3>Regular Icons (free-regular-svg-icons)</h3>
|
|
<p>Outlined versions of icons, great for secondary actions and states.</p>
|
|
<div class="icon-grid">
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faHeart" size="2x"></fa-icon>
|
|
<span class="icon-name">faHeart</span>
|
|
<span class="icon-usage">Favorites, likes</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faBookmark" size="2x"></fa-icon>
|
|
<span class="icon-name">faBookmark</span>
|
|
<span class="icon-usage">Saved items</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faComment" size="2x"></fa-icon>
|
|
<span class="icon-name">faComment</span>
|
|
<span class="icon-usage">Comments</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faThumbsUp" size="2x"></fa-icon>
|
|
<span class="icon-name">faThumbsUp</span>
|
|
<span class="icon-usage">Approval</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Brand Icons -->
|
|
<section class="demo-section">
|
|
<h3>Brand Icons (free-brands-svg-icons)</h3>
|
|
<p>Social media and company logos for external integrations.</p>
|
|
<div class="icon-grid">
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faGithub" size="2x"></fa-icon>
|
|
<span class="icon-name">faGithub</span>
|
|
<span class="icon-usage">GitHub integration</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faTwitter" size="2x"></fa-icon>
|
|
<span class="icon-name">faTwitter</span>
|
|
<span class="icon-usage">Twitter sharing</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faLinkedin" size="2x"></fa-icon>
|
|
<span class="icon-name">faLinkedin</span>
|
|
<span class="icon-usage">LinkedIn integration</span>
|
|
</div>
|
|
<div class="icon-example">
|
|
<fa-icon [icon]="faGoogle" size="2x"></fa-icon>
|
|
<span class="icon-name">faGoogle</span>
|
|
<span class="icon-usage">Google services</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Icon Styling -->
|
|
<section class="demo-section">
|
|
<h3>Icon Styling & Transformations</h3>
|
|
<div class="styling-demo">
|
|
<div class="style-example">
|
|
<h4>Colors</h4>
|
|
<div class="color-row">
|
|
<fa-icon [icon]="faHeart" size="2x" style="color: #dc3545;"></fa-icon>
|
|
<fa-icon [icon]="faHeart" size="2x" style="color: #28a745;"></fa-icon>
|
|
<fa-icon [icon]="faHeart" size="2x" style="color: #007bff;"></fa-icon>
|
|
<fa-icon [icon]="faHeart" size="2x" style="color: #ffc107;"></fa-icon>
|
|
</div>
|
|
<code>style="color: #dc3545;"</code>
|
|
</div>
|
|
|
|
<div class="style-example">
|
|
<h4>Different Sizes</h4>
|
|
<div class="animation-row">
|
|
<fa-icon [icon]="faSpinner" size="lg"></fa-icon>
|
|
<fa-icon [icon]="faRefresh" size="2x"></fa-icon>
|
|
<fa-icon [icon]="faCog" size="3x"></fa-icon>
|
|
</div>
|
|
<code>size="lg", size="2x", size="3x"</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Common Use Cases -->
|
|
<section class="demo-section">
|
|
<h3>Common Use Cases</h3>
|
|
<div class="use-cases">
|
|
<div class="use-case">
|
|
<h4>Navigation</h4>
|
|
<div class="nav-example">
|
|
<div><fa-icon [icon]="faHome"></fa-icon> Home</div>
|
|
<div><fa-icon [icon]="faUser"></fa-icon> Profile</div>
|
|
<div><fa-icon [icon]="faCog"></fa-icon> Settings</div>
|
|
<div><fa-icon [icon]="faSearch"></fa-icon> Search</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-case">
|
|
<h4>Action Buttons</h4>
|
|
<div class="action-buttons">
|
|
<ui-button variant="filled" [icon]="faPlus" iconPosition="left">Add Item</ui-button>
|
|
<ui-button variant="outlined" [icon]="faEdit" iconPosition="left">Edit</ui-button>
|
|
<ui-button variant="outlined" [icon]="faTrash" iconPosition="left">Delete</ui-button>
|
|
<ui-button variant="tonal" [icon]="faSave" iconPosition="left">Save</ui-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-case">
|
|
<h4>Status Indicators</h4>
|
|
<div class="status-row">
|
|
<div class="status-item success">
|
|
<fa-icon [icon]="faCheckCircle"></fa-icon>
|
|
<span>Success</span>
|
|
</div>
|
|
<div class="status-item warning">
|
|
<fa-icon [icon]="faExclamationTriangle"></fa-icon>
|
|
<span>Warning</span>
|
|
</div>
|
|
<div class="status-item error">
|
|
<fa-icon [icon]="faTimesCircle"></fa-icon>
|
|
<span>Error</span>
|
|
</div>
|
|
<div class="status-item info">
|
|
<fa-icon [icon]="faInfoCircle"></fa-icon>
|
|
<span>Info</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Code Examples -->
|
|
<section class="demo-section">
|
|
<h3>Implementation Examples</h3>
|
|
<div class="code-examples">
|
|
<div class="code-example">
|
|
<h4>1. Import the Icon</h4>
|
|
<pre><code>import { faUser } from '@fortawesome/free-solid-svg-icons';</code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>2. Add to Component</h4>
|
|
<pre><code>export class MyComponent {
|
|
faUser = faUser;
|
|
faHome = faHome;
|
|
faCog = faCog;
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>3. Basic Icon Usage</h4>
|
|
<pre><code><fa-icon [icon]="faUser"></fa-icon>
|
|
<fa-icon [icon]="faHome" size="lg"></fa-icon>
|
|
<fa-icon [icon]="faCog" size="2x"></fa-icon></code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>4. Styled Icons</h4>
|
|
<pre><code><fa-icon
|
|
[icon]="faHeart"
|
|
size="2x"
|
|
style="color: #dc3545;">
|
|
</fa-icon></code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>5. Icons in Buttons</h4>
|
|
<pre><code><ui-button
|
|
variant="filled"
|
|
[icon]="faPlus"
|
|
iconPosition="left">
|
|
Add Item
|
|
</ui-button></code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>6. Navigation with Icons</h4>
|
|
<pre><code><nav class="nav-menu">
|
|
<a href="/home">
|
|
<fa-icon [icon]="faHome"></fa-icon> Home
|
|
</a>
|
|
<a href="/profile">
|
|
<fa-icon [icon]="faUser"></fa-icon> Profile
|
|
</a>
|
|
</nav></code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>7. Status Messages</h4>
|
|
<pre><code><div class="status-success">
|
|
<fa-icon [icon]="faCheckCircle"></fa-icon>
|
|
Operation completed successfully!
|
|
</div>
|
|
|
|
<div class="status-error">
|
|
<fa-icon [icon]="faTimesCircle"></fa-icon>
|
|
Something went wrong.
|
|
</div></code></pre>
|
|
</div>
|
|
|
|
<div class="code-example">
|
|
<h4>8. Loading States</h4>
|
|
<pre><code><div class="loading-container">
|
|
<fa-icon [icon]="faSpinner"></fa-icon>
|
|
Loading...
|
|
</div>
|
|
|
|
<ui-button
|
|
[disabled]="isLoading"
|
|
[icon]="isLoading ? faSpinner : faSave">
|
|
{{ isLoading ? 'Saving...' : 'Save' }}
|
|
</ui-button></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Best Practices -->
|
|
<section class="demo-section">
|
|
<h3>Best Practices</h3>
|
|
<div class="best-practices">
|
|
<div class="practice-item">
|
|
<fa-icon [icon]="faCheckCircle" class="practice-icon success"></fa-icon>
|
|
<div class="practice-content">
|
|
<h4>Import Only What You Need</h4>
|
|
<p>Only import the specific icons you're using to keep bundle size small.</p>
|
|
<code>import { faUser, faHome } from '@fortawesome/free-solid-svg-icons';</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="practice-item">
|
|
<fa-icon [icon]="faCheckCircle" class="practice-icon success"></fa-icon>
|
|
<div class="practice-content">
|
|
<h4>Use Semantic Naming</h4>
|
|
<p>Choose icons that clearly represent their function or meaning.</p>
|
|
<code>faTrash for delete, faEdit for edit, faPlus for add</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="practice-item">
|
|
<fa-icon [icon]="faCheckCircle" class="practice-icon success"></fa-icon>
|
|
<div class="practice-content">
|
|
<h4>Consistent Sizing</h4>
|
|
<p>Use consistent icon sizes throughout your application.</p>
|
|
<code>size="sm" for inline text, size="lg" for buttons</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="practice-item">
|
|
<fa-icon [icon]="faExclamationTriangle" class="practice-icon warning"></fa-icon>
|
|
<div class="practice-content">
|
|
<h4>Accessibility</h4>
|
|
<p>Add aria-labels for screen readers when icons convey important information.</p>
|
|
<code><fa-icon [icon]="faUser" aria-label="User profile"></fa-icon></code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Available Icon Reference -->
|
|
<section class="demo-section">
|
|
<h3>Quick Reference</h3>
|
|
<div class="reference-grid">
|
|
<div class="reference-category">
|
|
<h4>Actions</h4>
|
|
<div class="reference-list">
|
|
<code>faPlus</code> - Add/Create
|
|
<code>faEdit</code> - Edit/Modify
|
|
<code>faTrash</code> - Delete/Remove
|
|
<code>faSave</code> - Save/Confirm
|
|
<code>faCancel</code> - Cancel/Dismiss
|
|
<code>faRefresh</code> - Reload/Update
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reference-category">
|
|
<h4>Navigation</h4>
|
|
<div class="reference-list">
|
|
<code>faHome</code> - Home page
|
|
<code>faArrowLeft</code> - Go back
|
|
<code>faArrowRight</code> - Go forward
|
|
<code>faChevronUp</code> - Expand up
|
|
<code>faChevronDown</code> - Expand down
|
|
<code>faBars</code> - Menu toggle
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reference-category">
|
|
<h4>Status</h4>
|
|
<div class="reference-list">
|
|
<code>faCheckCircle</code> - Success
|
|
<code>faTimesCircle</code> - Error
|
|
<code>faExclamationTriangle</code> - Warning
|
|
<code>faInfoCircle</code> - Information
|
|
<code>faSpinner</code> - Loading
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reference-category">
|
|
<h4>User Interface</h4>
|
|
<div class="reference-list">
|
|
<code>faUser</code> - User/Profile
|
|
<code>faCog</code> - Settings
|
|
<code>faSearch</code> - Search
|
|
<code>faEye</code> - View/Show
|
|
<code>faEyeSlash</code> - Hide
|
|
<code>faDownload</code> - Download
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Demo -->
|
|
<section class="demo-section">
|
|
<h3>Interactive Demo</h3>
|
|
<div class="interactive-buttons">
|
|
<ui-button
|
|
variant="filled"
|
|
[icon]="faRefresh"
|
|
iconPosition="left"
|
|
(clicked)="refreshDemo()">
|
|
Refresh Demo
|
|
</ui-button>
|
|
<ui-button
|
|
variant="tonal"
|
|
[icon]="faDownload"
|
|
iconPosition="left"
|
|
(clicked)="downloadDemo()">
|
|
Download Examples
|
|
</ui-button>
|
|
<ui-button
|
|
variant="outlined"
|
|
[icon]="faGithub"
|
|
iconPosition="left"
|
|
(clicked)="viewSource()">
|
|
View Source
|
|
</ui-button>
|
|
</div>
|
|
|
|
@if (lastAction) {
|
|
<div class="action-feedback">
|
|
<fa-icon [icon]="faInfoCircle"></fa-icon>
|
|
<span>{{ lastAction }}</span>
|
|
</div>
|
|
}
|
|
</section>
|
|
</div>
|
|
`,
|
|
styleUrl: './fontawesome-demo.component.scss'
|
|
})
|
|
export class FontAwesomeDemoComponent {
|
|
lastAction: string = '';
|
|
isLoading: boolean = false;
|
|
|
|
// Export icons for template use
|
|
faInfoCircle = faInfoCircle;
|
|
faUser = faUser;
|
|
faHome = faHome;
|
|
faCog = faCog;
|
|
faSearch = faSearch;
|
|
faPlus = faPlus;
|
|
faEdit = faEdit;
|
|
faTrash = faTrash;
|
|
faSave = faSave;
|
|
faCancel = faCancel;
|
|
faCheck = faCheck;
|
|
faTimes = faTimes;
|
|
faArrowLeft = faArrowLeft;
|
|
faArrowRight = faArrowRight;
|
|
faChevronLeft = faChevronLeft;
|
|
faChevronRight = faChevronRight;
|
|
faChevronUp = faChevronUp;
|
|
faChevronDown = faChevronDown;
|
|
faBars = faBars;
|
|
faEllipsisV = faEllipsisV;
|
|
faEye = faEye;
|
|
faEyeSlash = faEyeSlash;
|
|
faDownload = faDownload;
|
|
faUpload = faUpload;
|
|
faRefresh = faRefresh;
|
|
faSpinner = faSpinner;
|
|
faExclamationTriangle = faExclamationTriangle;
|
|
faCheckCircle = faCheckCircle;
|
|
faTimesCircle = faTimesCircle;
|
|
faEnvelope = faEnvelope;
|
|
|
|
// Regular icons
|
|
faHeart = faHeart;
|
|
faBookmark = faBookmark;
|
|
faComment = faComment;
|
|
faThumbsUp = faThumbsUp;
|
|
|
|
// Brand icons
|
|
faGithub = faGithub;
|
|
faTwitter = faTwitter;
|
|
faLinkedin = faLinkedin;
|
|
faGoogle = faGoogle;
|
|
|
|
refreshDemo(): void {
|
|
this.lastAction = 'Demo refreshed - all selections cleared';
|
|
console.log('Demo refreshed');
|
|
}
|
|
|
|
downloadDemo(): void {
|
|
this.lastAction = 'Demo download initiated (simulated)';
|
|
console.log('Download demo');
|
|
}
|
|
|
|
viewSource(): void {
|
|
this.lastAction = 'Opening source code (simulated)';
|
|
console.log('View source');
|
|
}
|
|
} |