Frakton NG

https://www.fraktonng.com/docs/
Admin
Frakton NG is a next-generation Angular UI library providing enforced accessibility, signal-native...
Tokens:54,357
Snippets:637
Trust Score:2.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Month Mode Example

Source: https://www.fraktonng.com/docs/calendar-navigator/features

Example demonstrating month mode navigation with date selection and current date display.

```html
<fkt-calendar-navigator
			[mode]="mode()"
			[currentDate]="currentDate()"
		/>
```

--------------------------------

### Example with Labels and Value Formatting

Source: https://www.fraktonng.com/docs/progress-bar/features

Demonstrates combining labels, inline values, and custom formatting for non-percentage units within a card layout. Includes a guided badge.

```html
<div class="example-card">
    <div class="header">
        <div>
            <h3>Labels and value formatting</h3>
            <p class="muted">Combine labels, inline values, and custom formatting for non-percentage units.</p>
        </div>
        <span class="badge">Guided</span>
    </div>
```

--------------------------------

### Configurable Paginator Example

Source: https://www.fraktonng.com/docs/paginator/features

Shows different configurations of the paginator for various use cases. This example is suitable for demonstrating flexibility.

```html
<fkt-paginator-examples-configurable
	[page]="page"
	[pageSize]="pageSize"
	[total]="total"
/>
```

--------------------------------

### Form Integration Example

Source: https://www.fraktonng.com/docs/calendar-navigator/features

Example demonstrating how to integrate the calendar navigator with reactive forms and form validation.

```html
<div class="navigator">
	<fkt-calendar-navigator
		[mode]="mode()"
		[currentDate]="currentDate()"
	/>
</div>
<div class="info">
	Selected: {{ dateForm.selectedDate().value() | date:'fullDate' }}
</div>

```

--------------------------------

### Install Frakton NG Package

Source: https://www.fraktonng.com/docs/components-actions-button--raised

Install the Frakton NG library using npm. This is the first step to using any Frakton NG components.

```bash
npm install frakton-ng
```

--------------------------------

### Complete Progress Bar Example

Source: https://www.fraktonng.com/docs/progress-bar/features

Show a progress bar in a completed state. This example configures value, label, and other display properties.

```html
<fkt-progress-bar
	[value]="value"
	[label]="label"
	[showLabel]="showLabel"
	[showValue]="showValue"
	[color]="color"
	[size]="size"
/>
```

--------------------------------

### Basic Paginator Example

Source: https://www.fraktonng.com/docs/paginator/features

A default paginator example with all features enabled. Allows navigation and page size adjustments.

```html
<fkt-paginator-examples-basic
	[page]="page"
	[pageSize]="pageSize"
	[total]="total"
/>
```

--------------------------------

### Dynamic Mode Switching Example

Source: https://www.fraktonng.com/docs/calendar-navigator/features

Example showing dynamic mode switching between month and year navigation. Includes buttons to toggle mode and navigate to today.

```html
<div class="container">
			<fkt-calendar-navigator
				[mode]="internalMode()"
				[currentDate]="internalDate()"
			/>

			<div class="container__info">
				<div>
					<fkt-tag
						text="Mode: {{internalMode()}}"
						color="info">

					</fkt-tag>
				</div>

				<strong class="container__info-selected">
					Selected: {{ internalDate() | date:'fullDate' }}
				</strong>
			</div>

			<div class="container__actions">
				<fkt-button
					(click)="goToToday()"
					text="Today"
				>
				</fkt-button>

				<fkt-button
					(click)="toggleMode()"
					theme="stroked"
					text="Switch to {{ internalMode() === 'month' ? 'Year' : 'Month' }} mode"
				>
				</fkt-button>
			</div>
		</div>
```

--------------------------------

### Basic Calendar Navigator Setup

Source: https://www.fraktonng.com/docs/calendar-navigator/features

Basic setup for the calendar navigator component, setting the mode and current date.

```html
<fkt-calendar-navigator
	[mode]="mode"
	[currentDate]="currentDate"
/>
```

--------------------------------

### Basic Textarea Usage

Source: https://www.fraktonng.com/docs/textarea/features

A fundamental example of using the fkt-textarea component with a label and placeholder. This serves as a starting point for capturing free-form text.

```html
<div class="container">
	<fkt-textarea
		[field]="control"
		[label]="label()"
		[placeholder]="placeholder()"
		[spellcheck]="spellcheck()"
	/>

	<div class="container__info">
		<p>Current value: {{ control().value() || '(empty)' }}</p>
	</div>
</div>
```

--------------------------------

### Basic Navigator Example

Source: https://www.fraktonng.com/docs/navigator/features

A fundamental implementation of the navigator component, demonstrating simple previous/next navigation along with a counter state.

```html
<fkt-navigator
		[canGoToPrevious]="canGoToPrevious()"
		[canGoToNext]="canGoToNext()"
		(previous)="goToPrevious()"
		(next)="goToNext()"
	/>
```

--------------------------------

### Multi-Theme Setup for Switching

Source: https://www.fraktonng.com/docs/getting-started-theming-styling

Include both light and dark theme CSS files in your project configuration to enable easy theme switching.

```json
{
  "styles": [
    "node_modules/frakton-ng/assets/styles.css",
    "node_modules/frakton-ng/assets/themes/light.css",
    "node_modules/frakton-ng/assets/themes/dark.css"
  ]
}
```

--------------------------------

### Item Navigation Example

Source: https://www.fraktonng.com/docs/navigator/features

Example for navigating through a list of items, including proper boundary detection. This snippet displays the current item's title and description, along with navigation controls.

```html
<div class="container">
	<div class="container__header">
		<h3>{{ currentItem().title }}</h3>
		<p>{{ currentItem().description }}</p>
	</div>
	<fkt-navigator
		[canGoToPrevious]="canGoToPrevious()"
		[canGoToNext]="canGoToNext()"
		(previous)="previousItem()"
		(next)="nextItem()"
	>
		<div class="container__content">
			Item {{ currentIndex() + 1 }} of {{ items.length }}
		</div>
	</fkt-navigator>
</div>


```

--------------------------------

### Page Navigation Example

Source: https://www.fraktonng.com/docs/navigator/features

Example for pagination-style navigation, including page numbers and navigation controls. This snippet displays the current page and total pages, with controls to move between them.

```html
<div class="container">
	<fkt-navigator
		[canGoToPrevious]="canGoToPrevious()"
		[canGoToNext]="canGoToNext()"
		(previous)="previousPage()"
		(next)="nextPage()"
	>
		<div class="container__content">
			Page {{ currentPage() }} of {{ totalPages() }}
		</div>
	</fkt-navigator>
</div>


```

--------------------------------

### Basic Autocomplete Example

Source: https://www.fraktonng.com/docs/autocomplete/features

Demonstrates the basic implementation of the autocomplete component with predefined options, including search and selection.

```typescript
 
```

--------------------------------

### Template Reference Examples

Source: https://www.fraktonng.com/docs/table/features

Provides examples of using ng-templates for custom cell rendering, including customer details and formatted amounts.

```HTML
<ng-template #customerCell let-name let-since="since">
    <div class="customer-cell">
        <span class="customer-cell__name">{{ name }}</span>
        <span class="customer-cell__since">order {{ since }}</span>
    </div>
</ng-template>

<ng-template #totalCell let-amount>
    <span class="amount" [class.amount--high]="amount > 500" [class.amount--low]="amount < 200">
        <span class="amount__symbol">$</span>{{ amount.toFixed(2) }}
    </span>
</ng-template>
```

--------------------------------

### Date Navigation Example

Source: https://www.fraktonng.com/docs/navigator/features

Example for navigating through dates, ensuring proper handling of boundary conditions. This snippet includes custom content display and event handling for month navigation.

```html
<div class="container">
	<fkt-navigator
		[canGoToPrevious]="true"
		[canGoToNext]="true"
		(previous)="previousMonth()"
		(next)="nextMonth()"
	>
		<div class="container__content">
			{{ formattedDate() }}
		</div>
	</fkt-navigator>
</div>

```

--------------------------------

### Responsive Paginator Example

Source: https://www.fraktonng.com/docs/paginator/features

Illustrates the responsive design of the paginator, which adapts to different screen sizes with mobile-friendly reordering.

```html
<fkt-paginator-examples-responsive
	[page]="page"
	[pageSize]="pageSize"
	[total]="total"
/>
```

--------------------------------

### Disabled State Navigation Example

Source: https://www.fraktonng.com/docs/navigator/features

Demonstrates dynamic enable/disable states for the navigator's buttons based on specific business logic. This example shows individual disabling of previous, next, or both buttons.

```html
<div class="container">
	<div>
		<h3>Previous Disabled</h3>
		<fkt-navigator
			[canGoToPrevious]="false"
			[canGoToNext]="true"
			(previous)="onPrevious()"
			(next)="onNext()"
		/>
	</div>
	<div>
		<h3>Next Disabled</h3>
		<fkt-navigator
			[canGoToPrevious]="true"
			[canGoToNext]="false"
			(previous)="onPrevious()"
			(next)="onNext()"
		/>
	</div>
	<div>
		<h3>Both Disabled</h3>
		<fkt-navigator
			[canGoToPrevious]="false"
			[canGoToNext]="false"
			(previous)="onPrevious()"
			(next)="onNext()"
		/>
	</div>
</div>

```

--------------------------------

### Basic Select Example

Source: https://www.fraktonng.com/docs/select/features

Demonstrates a basic select dropdown with options. Use this for simple selection scenarios where no pre-selection or special states are needed.

```html
<fkt-select
	[field]="control"
	[label]="label()"
	[placeholder]="placeholder()"
	[options]="options()"
	[loading]="loading()"
	[noResults]="noResults()"
/>
<div class="info">
	<strong>Selected Value:</strong> {{ control().value() || 'None' }}
</div>

```

--------------------------------

### Aligning Spacing Systems

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Example CSS showing how to align spacing systems between libraries like Bootstrap and Frakton NG using a common spacing unit.

```css
/* Align spacing systems */
:root {
	--spacing-unit: 8px;

	/* Bootstrap spacing (if using Ng-Bootstrap) */
	--bs-spacer: var(--spacing-unit);

	/* Frakton spacing */
	--fkt-space-xs: calc(var(--spacing-unit) * 0.5);
	--fkt-space-sm: var(--spacing-unit);
	--fkt-space-md: calc(var(--spacing-unit) * 2);
}


```

--------------------------------

### Coordinating Theme Colors

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Example CSS demonstrating how to coordinate brand colors between different UI libraries (Material, Frakton NG) using CSS variables.

```css
/* Coordinate colors between libraries */
:root {
	/* Your brand colors */
	--brand-primary: #1976d2;
	--brand-accent: #ff4081;

	/* Material variables */
	--mat-primary: var(--brand-primary);

	/* Frakton variables */
	--fkt-color-primary: var(--brand-primary);
	--fkt-color-accent: var(--brand-accent);
}


```

--------------------------------

### Basic Calendar Usage

Source: https://www.fraktonng.com/docs/calendar/features

Demonstrates the basic setup of the FktCalendar component for date selection with month and year navigation.

```html
<div class="example-container">
	<fkt-calendar [(currentDate)]="currentDate" [borderless]="borderless()" />
</div>

```

--------------------------------

### Loading State Navigation Example

Source: https://www.fraktonng.com/docs/navigator/features

Illustrates navigation with loading states during asynchronous operations, such as data fetching. The navigator buttons are disabled while loading, and a spinner is shown.

```html
<div class="container">
	<fkt-button
		(click)="toggleLoading()"
		[text]="isLoading() ? 'Stop Loading' : 'Start Loading'"
	/>
	<fkt-navigator
		[canGoToPrevious]="!isLoading()"
		[canGoToNext]="!isLoading()"
		(previous)="handlePrevious()"
		(next)="handleNext()"
	>
		@if (isLoading()) {
			<fkt-spinner/>
			<div class="container__content">
				Loading...
			</div>
		}
	</fkt-navigator>

</div>


```

--------------------------------

### Interactive Overlay with Shared State

Source: https://www.fraktonng.com/docs/overlay/features

An interactive overlay example demonstrating how changes within the overlay can update shared application state.

```html
<div class="header">
			<h4 class="header__title">Shared State</h4>
			<hr>
			<div class="header__info">
				<span>Counter: <fkt-tag [text]="sharedCounter().toString()" color="success"></fkt-tag></span>
				<span>Items: <fkt-tag [text]="sharedItems().length.toString()" color="warning"></fkt-tag></span>
			</div>
			<div class="header__description">
				Changes made in overlays will update this shared state automatically.
			</div>
		</div>
		<hr>


```

--------------------------------

### Frakton NG Button and Overlay Menu Example (After Migration)

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Illustrates the equivalent functionality using Frakton NG's button with a built-in loading state and an overlay service for a dropdown menu.

```typescript
// After (Frakton NG)
import {FktButtonComponent} from 'frakton-ng/button';
import {FktOverlayService} from 'frakton-ng/overlay';

@Component({
	template: `
    <!-- Built-in loading state -->
    <fkt-button
      text="Save"
      [loading]="loading()"
      (click)="save()">
    </fkt-button>

    <!-- Type-safe overlay menu -->
    <fkt-button
      text="Actions"
      icon="chevron-down"
      (click)="openMenu($event)">
    </fkt-button>
  `,
	imports: [FktButtonComponent]
})
export class ExampleComponent {
	constructor(private overlay: FktOverlayService) {
	}

	openMenu(event: Event) {
		this.overlay.open({
			anchorElementRef: {nativeElement: event.target as HTMLElement},
			component: ActionsMenuComponent,
			data: {
				onEdit: () => this.edit(),
				onDelete: () => this.delete()
			}
		});
	}
}


```

--------------------------------

### Vertical Divider Variants Example

Source: https://www.fraktonng.com/docs/divider/features

Illustrates vertical dividers with different variants. This example iterates through variants to showcase distinct styling options for horizontal content separation.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-divider
		[orientation]="variant.value.orientation"
		[size]="variant.value.size"
		[spacing]="variant.value.spacing"
	/>
}
```

--------------------------------

### Default Light Theme Setup

Source: https://www.fraktonng.com/docs/getting-started-theming-styling

Configure your project to use Frakton NG's default light theme by including the main styles and the light theme CSS file.

```json
{
  "styles": [
    "node_modules/frakton-ng/assets/styles.css",
    "node_modules/frakton-ng/assets/themes/light.css"
  ]
}
```

--------------------------------

### Character Counter Example

Source: https://www.fraktonng.com/docs/textarea/features

Demonstrates a textarea with a live character counter, progress bar, and statistics. Useful for input fields with length restrictions.

```html
<div class="container">
	<fkt-textarea
		autoExpand
		[field]="control"
		[label]="label()"
		[placeholder]="placeholder()"
	/>

	<div class="container__elements">
		<!-- Character counter -->
		<div class="container__character-counter">
			<span class="container__character-counter__text">Character count:</span>
			<span
				class="container__character-counter__indicator"
				[class.container__character-counter__indicator--valid]="characterCount() <= warningThreshold()"
				[class.container__character-counter__indicator--warning]="characterCount() > warningThreshold() && characterCount() <= maxLength()"
				[class.container__character-counter__indicator--invalid]="characterCount() > maxLength()"
			>
				{{ characterCount() }} / {{ maxLength() }}
			</span>
		</div>

		<!-- Progress bar -->
		<div class="container__progress-bar">
			<div
				[class.container__progress-bar--valid]="characterCount() <= warningThreshold()"
				[class.container__progress-bar--warning]="characterCount() > warningThreshold() && characterCount() <= maxLength()"
				[class.class.container__progress-bar--invalid]="characterCount() > maxLength()"
				[style.width.%]="progressPercentage()"
			></div>
		</div>

		<!-- Stats -->
		<div class="container__stats">
			<div>
				<span>Words:</span> {{ wordCount() }}
			</div>
			<div>
				<span>Lines:</span> {{ lineCount() }}
			</div>
			<div>
				<span>Remaining:</span> {{ remainingCharacters() }}
			</div>
		</div>

		<!-- Warning messages -->
		@if (characterCount() > warningThreshold()) {
			<div class="container__warning-messages">
				@if (characterCount() <= maxLength()) {
					<p class="container__warning-messages--warning">⚠️ You're approaching the character limit</p>
				}
				@if (characterCount() > maxLength()) {
					<p class="container__warning-messages--invalid">❌ Character limit exceeded by {{ characterCount() - maxLength() }}
					characters</p>
				}
			</div>
		}
	</div>
</div>
```

--------------------------------

### Ng-Bootstrap Button and Dropdown Example (Before Migration)

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Shows a typical implementation using Ng-Bootstrap's button and dropdown components, including a loading state for the button.

```typescript
// Before (Ng-Bootstrap)
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@Component({
	template: `
    <button type="button" class="btn btn-primary" (click)="save()">
      <span *ngIf="loading" class="spinner-border spinner-border-sm me-2"></span>
      {{ loading ? 'Saving...' : 'Save' }}
    </button>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" ngbDropdownToggle>
        Actions
      </button>
      <div class="dropdown-menu" ngbDropdownMenu>
        <button class="dropdown-item" (click)="edit()">Edit</button>
        <button class="dropdown-item" (click)="delete()">Delete</button>
      </div>
    </div>
  `,
	imports: [NgbModule]
})

```

--------------------------------

### Raised Button Example

Source: https://www.fraktonng.com/docs/button

A standard raised button for primary actions. Configure text, theme, and disabled state.

```html
<fkt-button
	[text]="text"
	[theme]="theme"
	[disabled]="disabled"
/>
```

--------------------------------

### Frakton NG Component Usage Example

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Demonstrates the usage of Frakton NG components like fkt-button, fkt-input, and fkt-select within a component's template.

```typescript
@Component({
	template: `
    <fkt-button text="Click me" (click)="handleClick()"></fkt-button>
    <fkt-input [(value)]="value" placeholder="Enter text"></fkt-input>
    <fkt-select [options]="cities" [(value)]="selectedCity"></fkt-select>
  `,
	imports: [FktButtonComponent, FktInputComponent, FktSelectComponent]
})

```

--------------------------------

### Skeleton Types Example

Source: https://www.fraktonng.com/docs/skeleton/features

Showcases different skeleton types including text, circle, rectangle, button, and image placeholders.

```html
<div class="example">
	<h3>Skeleton Types</h3>
	<p>Different skeleton types for various content placeholders.</p>
	
	<div class="types-grid">
		<div class="type-demo">
			@if (showLabels()) {
				<h4>Text</h4>
				<p>Single and multi-line text placeholders</p>
			}
			<fkt-skeleton-container direction="column" gap="sm">
				<fkt-skeleton type="text" />
				<fkt-skeleton type="text" [lines]="3" />
			</fkt-skeleton-container>
		</div>

		<div class="type-demo">
			@if (showLabels()) {
				<h4>Circle</h4>
				<p>Perfect for avatars and profile images</p>
			}
			<fkt-skeleton-container direction="row" gap="md">
				<fkt-skeleton type="circle" height="40px" />
				<fkt-skeleton type="circle" height="60px" />
				<fkt-skeleton type="circle" height="80px" />
			</fkt-skeleton-container>
		</div>

		<div class="type-demo">
			@if (showLabels()) {
				<h4>Rectangle</h4>
				<p>General purpose rectangular placeholders</p>
			}
			<fkt-skeleton-container direction="column" gap="sm">
				<fkt-skeleton type="rect" height="40px" />
				<fkt-skeleton type="rect" height="60px" />
				<fkt-skeleton type="rect" height="80px" />
			</fkt-skeleton-container>
		</div>

		<div class="type-demo">
			@if (showLabels()) {
				<h4>Button</h4>
				<p>Button-shaped placeholders</p>
			}
			<fkt-skeleton-container direction="row" gap="md">
				<fkt-skeleton type="button" width="80px" />
				<fkt-skeleton type="button" width="120px" />
				<fkt-skeleton type="button" width="100px" />
			</fkt-skeleton-container>
		</div>

```

--------------------------------

### Basic Checkbox Example

Source: https://www.fraktonng.com/docs/checkbox/features

A basic FktCheckbox with label text. Clicking the checkbox or label toggles its state. This is useful for simple agreement or selection scenarios.

```html
<div class="container">
	<fkt-checkbox
		[field]="field"
		[label]="label()"
	/>
</div>
```

--------------------------------

### Horizontal Divider Sizes with Label

Source: https://www.fraktonng.com/docs/divider/features

Demonstrates different horizontal divider sizes with labels. This example iterates through variants to display various configurations.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-divider
		[orientation]="variant.value.orientation"
		[variant]="variant.value.variant"
		[spacing]="variant.value.spacing"
		[label]="variant.value.label"
	/>
}
```

--------------------------------

### Loading Button Example

Source: https://www.fraktonng.com/docs/button

A button that displays a loading state with custom text, useful for asynchronous operations. Configure text, loadingText, theme, color, loading, and disabled state.

```html
<fkt-button
	[text]="text"
	[loadingText]="loadingText"
	[theme]="theme"
	[color]="color"
	[loading]="loading"
	[disabled]="disabled"
/>
```

--------------------------------

### Button with Icon Example

Source: https://www.fraktonng.com/docs/button

A button that includes an icon alongside text. Configure text, theme, color, icon, and disabled state.

```html
<fkt-button
	[text]="text"
	[theme]="theme"
	[color]="color"
	[icon]="icon"
	[disabled]="disabled"
/>
```

--------------------------------

### Adding New Functionality with Frakton NG

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Demonstrates starting a migration by integrating new features using Frakton NG components alongside existing UI elements.

```typescript
// Begin with new features or components
@Component({
	ttemplate: `
    <!-- Keep existing UI -->
    <div class="existing-ui">...</div>

    <!-- Add Frakton for new functionality -->
    <fkt-color-picker [(value)]="newFeatureColor"></fkt-color-picker>
  `
})


```

--------------------------------

### Progress Bar Variants

Source: https://www.fraktonng.com/docs/progress-bar/features

Showcase different visual variants of the progress bar. This example iterates through a list of variants to apply different styles.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-progress-bar
		[value]="variant.value.value"
		[color]="variant.value.color"
		[size]="variant.value.size"
		[variant]="variant.value.variant"
	/>
}
```

--------------------------------

### Vertical Divider Sizes Example

Source: https://www.fraktonng.com/docs/divider/features

Demonstrates vertical dividers with different sizes. This code iterates through variants to apply various size and spacing configurations for vertical separation.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-divider
		[orientation]="variant.value.orientation"
		[variant]="variant.value.variant"
		[size]="variant.value.size"
		[spacing]="variant.value.spacing"
	/>
}
```

--------------------------------

### Form Integration with Textarea

Source: https://www.fraktonng.com/docs/textarea/features

Demonstrates integrating the textarea component into a reactive form with multiple input fields. This example showcases validation, control, and submission handling.

```html
<div class="container">
	<h3>Contact Form</h3>

	<form (submit)="handleSubmit()">
		<div class="container__form">
			<div>
				<fkt-input
					[field]="form.name"
					[label]="'Name'"
					[placeholder]="'Your name'"
					[type]="'text'"
				/>
				<fkt-field-error [show]="form.name().invalid() && form.name().touched()"
								 [error]="form.name().errors()[0]?.message"/>
			</div>
			<div>
				<fkt-input
					[field]="form.email"
					[label]="'Email'"
					[placeholder]="'your@email.com'"
					[type]="'email'"
				/>
				<fkt-field-error [show]="form.email().invalid() && form.email().touched()"
								 [error]="form.email().errors()[0]?.message"/>
			</div>
			<div>
				<fkt-textarea
					[field]="form.message"
					autoExpand
					noResize
					[label]="'Message'"
					[placeholder]="'Please describe your inquiry in detail...'"
				/>
				<fkt-field-error [show]="form.message().invalid() && form.message().touched()"
								 [error]="form.message().errors()[0]?.message"/>
			</div>
			<div>
				<fkt-textarea
					[field]="form.additionalInfo"
					autoExpand
					noResize
					[label]="'Additional Information (Optional)'"
					[placeholder]="'Any other details you would like to share...'"
				/>
				<fkt-field-error [show]="form.additionalInfo().invalid() && form.additionalInfo().touched()"
								 [error]="form.additionalInfo().errors()[0]?.message"/>
			</div>


			<div class="container__form__footer">
				<div class="container__form__footer-message">
						<span [class.container__form__footer-message--valid]="form().valid()">
							{{ form().valid() ? '✓ Form is valid' : 'Please fill all required fields' }}
						</span>
				</div>

				<div class="container__form__actions">
					<fkt-button
						(click)="resetForm()"
						text="Reset"
						theme="stroked"
					>
					</fkt-button>
					<fkt-button
						type="submit"
						text="Submit"
						[disabled]="!form().valid()"
					>
					</fkt-button>
				</div>
			</div>
		</div>

```

--------------------------------

### Frakton NG Type-Safe Overlays: Usage Example

Source: https://www.fraktonng.com/docs/foundation-typography

Demonstrates how to use Frakton NG's overlay service to open a dialog (UserEditDialog) with full TypeScript type safety for data and callbacks.

```typescript
// Use overlay with full type safety
export class MyComponent {
    private overlay = inject(FktOverlayService)

    openEditDialog(user: User) {
        const ref = this.overlay.open({
            component: UserEditDialog,
            data: {
                userId: user.id,              // ✅ Auto-typed as string
                userName: user.name,          // ✅ Auto-typed as string
                onSave: (userData) => {       // ✅ userData auto-typed as {name: string, email: string}
                    this.updateUser(userData);
                    ref.close();
                },
                onCancel: () => ref.close()   // ✅ Auto-typed as () => void
            }
        });
    }
}

```

--------------------------------

### Table with Cell Alias

Source: https://www.fraktonng.com/docs/table/features

Example of a table utilizing cell aliases for rendering specific column data.

```HTML
<fkt-table
    [data]="products()"
    [columns]="columns"
/>
```

--------------------------------

### Pre-checked Checkbox Example

Source: https://www.fraktonng.com/docs/checkbox/features

A checkbox that is initialized in a checked state. The control is set up with 'true' as its default value.

```html
<div class="container">
  <fkt-checkbox
    [field]="field"
    [label]="label()"
  />
</div>
```

--------------------------------

### Stroked Button Example

Source: https://www.fraktonng.com/docs/button

An outlined button for secondary actions. Configure text, theme, color, and disabled state.

```html
<fkt-button
	[text]="text"
	[theme]="theme"
	[color]="color"
	[disabled]="disabled"
/>
```

--------------------------------

### Mapping Design System Tokens to Frakton Tokens

Source: https://www.fraktonng.com/docs/getting-started-theming-styling

Illustrates how to create a design system layer and map its tokens to Frakton's custom properties for consistent theming.

```css
/* Create your design system layer */
:root {
  /* Your design tokens */
  --ds-color-brand-100: #e0f2fe;
  --ds-color-brand-500: #0ea5e9;
  --ds-color-brand-900: #0c4a6e;

  /* Map to Frakton tokens */
  --fkt-color-primary: var(--ds-color-brand-500);
  --fkt-color-primary-hover: var(--ds-color-brand-600);
  --fkt-color-primary-opacity-20: var(--ds-color-brand-100);
}
```

--------------------------------

### Import FktOverlayService

Source: https://www.fraktonng.com/docs/overlay/features

Import the FktOverlayService from the 'frakton-ng/overlay' package.

```typescript
import {FktOverlayService} from "frakton-ng/overlay";
```

--------------------------------

### Disabled State Example

Source: https://www.fraktonng.com/docs/textarea/features

Shows the textarea in a disabled state, preventing user interaction. Useful for read-only or preview scenarios.

```html
<div class="container">
	<fkt-textarea
		autoExpand
		[field]="control"
		[label]="label()"
		[placeholder]="placeholder()"
	/>

	<div class="container__status">
		<fkt-button
			(click)="toggleDisabled()"
			[text]="(control().disabled() ? 'Enable' : 'Disable') + ' textarea'"
		>
		</fkt-button>

		<span>
			Status: <strong>{{ control().disabled() ? 'Disabled' : 'Enabled' }}</strong>
		</span>
	</div>

	<div class="container__message">
		<p>Disabled textareas prevent user interaction while preserving the current value.</p>
		<p>Common use cases include read-only views, locked fields, or conditional editing.</p>
	</div>
</div>
```

--------------------------------

### Basic Tooltip Implementation

Source: https://www.fraktonng.com/docs/tooltip/features

Demonstrates the basic usage of the fktTooltip directive on buttons. Tooltips are triggered on hover and can display simple text messages. The tooltipColor input can be used to customize the tooltip's appearance.

```html
<div class="container">
	<div class="container__list">
		<fkt-button
			color="primary"
			fktTooltip="This is a basic tooltip message"
			[tooltipColor]="tooltipColor()"
			text="Hover me"
			theme="stroked"
		></fkt-button>

		<fkt-button
			color="primary"
			fktTooltip="Click this button to perform an action"
			[tooltipColor]="tooltipColor()"
			text="Info Button"
			theme="raised"
		></fkt-button>

		<fkt-button
			[disabled]="true"
			color="primary"
			fktTooltip="This button is disabled"
			[tooltipColor]="tooltipColor()"
			text="Disabled State"
			theme="stroked"
		></fkt-button>
	</div>
</div>
```

--------------------------------

### Search Results Empty State

Source: https://www.fraktonng.com/docs/no-results/features

Configure the component for search result scenarios. This example specifically uses the 'searchConfig' input.

```html
<fkt-no-results
		[noResults]="searchConfig"
	/>
```

--------------------------------

### Tooltip on Interactive Elements

Source: https://www.fraktonng.com/docs/tooltip/features

Example of applying a tooltip to a custom interactive element. This demonstrates flexibility in attaching tooltips to non-standard components.

```HTML
<div
	fktTooltip="Custom interactive element with gradient background"
	[tooltipColor]="tooltipColor()"
	position="left-center"
>
	?
</div>
```

--------------------------------

### Simple Overlay Positioning

Source: https://www.fraktonng.com/docs/overlay/features

Demonstrates basic overlay implementation with content positioned relative to different screen edges.

```html
<div class="container">
			<div #left>
				<fkt-button
					text="Left Center"
					theme="stroked"
					color="accent"
					(click)="openOverlay(left, 'left-center')"
				></fkt-button>
			</div>
			<div #right>
				<fkt-button
					text="Right Center"
					theme="stroked"
					color="primary"
					(click)="openOverlay(right, 'right-center')"
				></fkt-button>
			</div>
			<div #top>
				<fkt-button
					text="Top Center"
					theme="stroked"
					color="success"
					(click)="openOverlay(top, 'top-center')"
				></fkt-button>
			</div>
			<div #bottom>
				<fkt-button
					text="Bottom Center (Default)"
					theme="stroked"
					(click)="openOverlay(bottom, 'bottom-center')"
				></fkt-button>
			</div>
		</div>


```

--------------------------------

### Disabled Checkbox Example

Source: https://www.fraktonng.com/docs/checkbox/features

A disabled FktCheckbox. It cannot be toggled and is visually indicated with reduced opacity. Use this for options that are not currently available to the user.

```html
<div class="container">
  <fkt-checkbox
    [field]="field"
    label="This checkbox can be disabled"
  />
</div>
```

--------------------------------

### Import FktNavigatorComponent

Source: https://www.fraktonng.com/docs/navigator/features

Import the FktNavigatorComponent from the 'frakton-ng/navigator' module.

```typescript
import {FktNavigatorComponent} from "frakton-ng/navigator";
```

--------------------------------

### Mixing UI Libraries

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Demonstrates how Frakton NG components can coexist with components from Angular Material, PrimeNG, and Ng-Bootstrap without style conflicts.

```html
<!-- Mix and match with ANY other UI library -->
<mat-toolbar>Angular Material toolbar</mat-toolbar>
<p-button>PrimeNG button</p-button>
<ng-bootstrap-button>Ng-Bootstrap button</ng-bootstrap-button>
<fkt-button>Frakton NG button</fkt-button>
<!-- All work together perfectly - no style conflicts -->

```

--------------------------------

### Basic Tag Usage

Source: https://www.fraktonng.com/docs/tag/features

Demonstrates the basic usage of the fkt-tag component with text, color, and variant properties. This is a standard badge with success state and opaque styling.

```html
<fkt-tag
	[text]="text"
	[color]="color"
	[variant]="variant"
/>
```

--------------------------------

### Indeterminate Progress Bar

Source: https://www.fraktonng.com/docs/progress-bar/features

Display a progress bar in an indeterminate state, indicating an ongoing process without a defined end. This example iterates through variants.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-progress-bar
		[indeterminate]="variant.value.indeterminate"
		[color]="variant.value.color"
		[size]="variant.value.size"
	/>
}
```

--------------------------------

### Progress Bar Semantic Colors

Source: https://www.fraktonng.com/docs/progress-bar/features

Apply semantic colors (e.g., success, warning, danger) to the progress bar. The example iterates through predefined variants.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-progress-bar
		[value]="variant.value.value"
		[size]="variant.value.size"
		[color]="variant.value.color"
	/>
}
```

--------------------------------

### File Upload Empty State

Source: https://www.fraktonng.com/docs/no-results/features

Adapt the empty state for file management interfaces, incorporating upload capabilities. This example utilizes the 'filesConfig' input.

```html
<fkt-no-results
		[noResults]="filesConfig"
	/>
```

--------------------------------

### Button with Left Icon Example

Source: https://www.fraktonng.com/docs/button

A button with an icon positioned to the left of the text. Configure text, icon, iconPosition, theme, color, and disabled state.

```html
<fkt-button
	[text]="text"
	[icon]="icon"
	[iconPosition]="iconPosition"
	[theme]="theme"
	[color]="color"
	[disabled]="disabled"
/>
```

--------------------------------

### Common Skeleton Patterns

Source: https://www.fraktonng.com/docs/skeleton/features

Demonstrates typical skeleton layouts for user profile cards, article previews, and product cards.

```html
<div class="example">
	<h3>Common Skeleton Patterns</h3>
	<p>Typical layouts you'll use for loading states.</p>

	<div class="patterns">
		<div class="pattern">
			<h4>User Profile Card</h4>
			<fkt-skeleton-container direction="row" gap="md" align="start">
				<fkt-skeleton type="circle" height="60px" />
				<fkt-skeleton-container direction="column" gap="sm">
					<fkt-skeleton type="text" width="150px" />
					<fkt-skeleton type="text" [lines]="2" />
					<fkt-skeleton type="button" width="100px" />
				</fkt-skeleton-container>
			</fkt-skeleton-container>
		</div>

		<div class="pattern">
			<h4>Article Preview</h4>
			<fkt-skeleton-container direction="column" gap="md">
				<fkt-skeleton type="image" aspectRatio="16/9" />
				<fkt-skeleton type="text" width="80%" />
				<fkt-skeleton type="text" [lines]="3" />
				<fkt-skeleton-container direction="row" gap="sm" align="center">
					<fkt-skeleton type="circle" height="32px" />
					<fkt-skeleton type="text" width="120px" />
				</fkt-skeleton-container>
			</fkt-skeleton-container>
		</div>



		<div class="pattern">
			<h4>Product Card</h4>
			<fkt-skeleton-container direction="column" gap="sm">
				<fkt-skeleton type="image" aspectRatio="1/1" />
				<fkt-skeleton type="text" width="90%" />
				<fkt-skeleton type="text" width="60%" />
				<fkt-skeleton-container direction="row" gap="sm" justify="space-between" align="center">
					<fkt-skeleton type="text" width="80px" />
					<fkt-skeleton type="button" width="80px" height="32px" />
				</fkt-skeleton-container>
			</fkt-skeleton-container>
		</div>

        <div class="pattern">
            <h4>Data Table Row</h4>
            <fkt-skeleton-container direction="row" gap="lg" align="center">
                <fkt-skeleton type="circle" height="32px" />
                <fkt-skeleton type="text" width="150px" />
                <fkt-skeleton type="text" width="100px" />
                <fkt-skeleton type="circle" height="24px" />
            </fkt-skeleton-container>
        </div>
	</div>
</div>
```

--------------------------------

### Icon Only Button Example

Source: https://www.fraktonng.com/docs/button

A compact circular button displaying only an icon, ideal for toolbars. Configure icon, ariaLabel, theme, color, and disabled state.

```html
<fkt-button
	[icon]="icon"
	[ariaLabel]="ariaLabel"
	[theme]="theme"
	[color]="color"
	[disabled]="disabled"
/>
```

--------------------------------

### Horizontal Divider Variants with Label

Source: https://www.fraktonng.com/docs/divider/features

Showcases different horizontal divider variants with labels. This example iterates through predefined variants to apply different styles.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-divider
		[orientation]="variant.value.orientation"
		[variant]="variant.value.variant"
		[size]="variant.value.size"
		[spacing]="variant.value.spacing"
		[label]="variant.value.label"
	/>
}
```

--------------------------------

### Basic Skeleton Usage

Source: https://www.fraktonng.com/docs/skeleton/features

Use the fkt-skeleton component with configurable properties like width, height, type, and animation.

```html
<fkt-skeleton
	[width]="width"
	[height]="height"
	[type]="type"
	[animation]="animation"
/>
```

--------------------------------

### Import FktButtonsListComponent

Source: https://www.fraktonng.com/docs/buttons-list/features

Import the FktButtonsListComponent from the 'frakton-ng/buttons-list' module.

```typescript
import {FktButtonsListComponent} from "frakton-ng/buttons-list";
```

--------------------------------

### Import FktInputComponent

Source: https://www.fraktonng.com/docs/input

Import the FktInputComponent from the frakton-ng/input library.

```typescript
import {FktInputComponent} from "frakton-ng/input";
```

--------------------------------

### Progress Bar Sizes

Source: https://www.fraktonng.com/docs/progress-bar/features

Demonstrates the usage of different size options for the progress bar. Iterate through variants to apply various sizes.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-progress-bar
		[value]="variant.value.value"
		[color]="variant.value.color"
		[size]="variant.value.size"
	/>
}
```

--------------------------------

### Import Autocomplete Component

Source: https://www.fraktonng.com/docs/autocomplete/features

Import the FktAutocompleteComponent from the Frakton NG library.

```typescript
import {FktAutocompleteComponent} from "frakton-ng/autocomplete";
```

--------------------------------

### Import FktSkeletonComponent

Source: https://www.fraktonng.com/docs/skeleton/features

Import the FktSkeletonComponent from the 'frakton-ng/skeleton' library.

```typescript
import {FktSkeletonComponent} from "frakton-ng/skeleton";
```

--------------------------------

### Custom Color Progress Bar

Source: https://www.fraktonng.com/docs/progress-bar/features

Apply a custom hex color to the progress bar. This example iterates through variants and configures value display and indeterminate state.

```html
@for (variant of variants; track variant.label) {
	<strong>{{ variant.label }}</strong>
	<fkt-progress-bar
		[value]="variant.value.value"
		[showValue]="variant.value.showValue"
		[size]="variant.value.size"
		[indeterminate]="variant.value.indeterminate"
	/>
}
```

--------------------------------

### Introducing Signals with Frakton NG Input

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Illustrates the gradual adoption of modern patterns by using Frakton NG's fkt-input with Angular signals and form controls.

```typescript
// Gradually introduce signals
export class ModernComponent {
	// Replace reactive forms with signal forms
	email = new FormControl('', [Validators.required, Validators.email]);

	// Use with Frakton components
	ttemplate = `
    <fkt-input
      [control]="email"
      label="Email Address"
      type="email">
    </fkt-input>
  `;
}


```

--------------------------------

### Import FktDatePickerComponent

Source: https://www.fraktonng.com/docs/date-picker/features

Import the FktDatePickerComponent from the 'frakton-ng/date-picker' module.

```typescript
import {FktDatePickerComponent} from "frakton-ng/date-picker";
```

--------------------------------

### Interactive Tooltip Element

Source: https://www.fraktonng.com/docs/tooltip/features

An interactive tooltip element that allows dynamic control over its text, position, and enabled state. This example uses Angular bindings for dynamic properties.

```HTML
<div
	[fktTooltip]="form.text().value()"
	[position]="form.position().value()"
	[tooltipEnabled]="form.enabled().value()"
	[tooltipColor]="tooltipColor()"
	disableAutoReposition
>
	<p>
		Interactive tooltip element
	</p>
</div>

<form>
	<div class="container__form">
		<div>
			<fkt-select
				[field]="form.position"
				[label]="'Tooltip Position'"
				[options]="positionOptions"
			></fkt-select>
			<fkt-input
				[field]="form.text"
				[label]="'Tooltip Text'"
				[placeholder]="'Enter tooltip message...'"
				[type]="'text'"
			></fkt-input>
		</div>

		<fkt-checkbox
			[field]="form.enabled"
			[label]="'Enable Tooltips'"
		></fkt-checkbox>
	</div>
</form>
```

--------------------------------

### Tooltip Positioning - Top

Source: https://www.fraktonng.com/docs/tooltip/features

Examples of tooltips positioned at the top. The 'position' attribute can be set to 'top-start', 'top-center', or 'top-end'. The 'disableAutoReposition' attribute is used to prevent automatic repositioning.

```html
<div class="container">
	<div class="container__list">
		<!-- Top positions -->
		<div class="container__item">
			<h4 class="container__item-title">Top Positions</h4>
			<div class="container__item-buttons">
				<fkt-button
					color="primary"
					disableAutoReposition
					fktTooltip="Top start positioned tooltip"
					[tooltipColor]="tooltipColor()"
					position="top-start"
					text="Top Start"
					theme="stroked"
				></fkt-button>

				<fkt-button
					color="primary"
					disableAutoReposition
					fktTooltip="Top center positioned tooltip"
					[tooltipColor]="tooltipColor()"
					position="top-center"
					text="Top Center"
					theme="stroked"
				></fkt-button>

				<fkt-button
					color="primary"
					disableAutoReposition
					fktTooltip="Top end positioned tooltip"
					[tooltipColor]="tooltipColor()"
					position="top-end"
					text="Top End"
					theme="stroked"
				></fkt-button>
			</div>
		</div>
```

--------------------------------

### Import FktCalendarNavigatorComponent

Source: https://www.fraktonng.com/docs/calendar-navigator/features

Import the FktCalendarNavigatorComponent from the 'frakton-ng/calendar-navigator' module.

```typescript
import {FktCalendarNavigatorComponent} from "frakton-ng/calendar-navigator";
```

--------------------------------

### Migrating from PrimeNG Components to Frakton NG

Source: https://www.fraktonng.com/docs/getting-started-migration-guides/features

Illustrates a direct replacement strategy for migrating from PrimeNG components to their Frakton NG equivalents, showing the 'before' state with PrimeNG imports and template.

```typescript
// Before (PrimeNG)
import {ButtonModule} from 'primeng/button';
import {InputTextModule} from 'primeng/inputtext';
import {DropdownModule} from 'primeng/dropdown';

@Component({
	template: `
    <p-button label="Click me" (onClick)="handleClick()">p-button>
    <input pInputText [(ngModel)]="value" placeholder="Enter text">
    <p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
  `,
	imports: [ButtonModule, InputTextModule, DropdownModule]
})

```
Tokens:
Raw