Add comprehensive component library and demo application
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -0,0 +1,629 @@
|
||||
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';
|
||||
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');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user