# TGUI Angular - API Reference for AI

*Generated automatically from TypeScript source code*

## Library Overview

**TGUI Angular** is a comprehensive Angular UI component library designed specifically for building Telegram Web Apps. It provides modern, accessible components with automatic theme detection and platform-specific styling.

**Package Name:** `tgui-angular`
**Installation:** `npm install tgui-angular`
**Version:** 1.0.x

## Required Setup

### Root Component (MANDATORY)
```typescript
import { RootComponent } from 'tgui-angular';

@Component({
  template: `
    <tgui-root [platform]="'ios'" [appearance]="'dark'">
      <!-- All app content must be inside tgui-root -->
    </tgui-root>
  `,
  imports: [RootComponent]
})
```

## Components


### BLOCKS Components

#### AccordionComponent

**Selector:** `tgui-accordion`

<p>This component serves as an accordion container with built-in summary and content sections.
It uses a signal-based approach to manage its state.</p>
<h2>Usage</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- With string summary --&gt;
&lt;tgui-accordion
  summary=&quot;Simple string title&quot;
  [(expanded)]=&quot;isExpanded&quot;&gt;
  Accordion content here
&lt;/tgui-accordion&gt;

&lt;!-- With template summary --&gt;
&lt;tgui-accordion
  [summary]=&quot;summaryTemplate&quot;
  [afterTemplate]=&quot;afterTemplate&quot;
  [(expanded)]=&quot;isExpanded&quot;&gt;
  Accordion content here
&lt;/tgui-accordion&gt;</code></pre></div>

**Source:** `src/lib/components/blocks/accordion/accordion.component.ts`

**Import:**
```typescript
import { AccordionComponent } from 'tgui-angular';
```

**Properties:**

- `expanded`: `any` **[required]** (default: `false`) - <p>Model value for expanded state with two-way binding support</p>


**Methods:**

- `getAfterTemplate(): TemplateRef | null` - <p>Get the template to display in the after slot</p>

- `getSummaryTemplate(): TemplateRef<any>` - <p>Get appropriate template based on summary type</p>

- `toggleExpanded(): void` - <p>Toggle the expanded state of the accordion</p>


**Example:**
```html
<tgui-accordion
  [expanded]="value"></tgui-accordion>
```

#### AccordionContentComponent

**Selector:** `tgui-accordion-content`

<p>Renders the content part of an accordion, leveraging signals to control visibility and animation.
Utilizes element measurements for smooth height transitions during expand/collapse actions.</p>


**Source:** `src/lib/components/blocks/accordion/components/accordion-content/accordion-content.component.ts`

**Import:**
```typescript
import { AccordionContentComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-accordion-content></tgui-accordion-content>
```

#### AccordionSummaryComponent

**Selector:** `tgui-accordion-summary`

<p><code>AccordionSummary</code> serves as the clickable header for an accordion section, toggling the visibility of the content.
It incorporates an expand/collapse icon to visually indicate state. This component extends <code>Cell</code> to provide
a consistent UI and accessibility features.</p>
<h2>Usage</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Using default chevron icon --&gt;
&lt;tgui-accordion-summary&gt;
  Accordion title
&lt;/tgui-accordion-summary&gt;

&lt;!-- Using custom after template --&gt;
&lt;tgui-accordion-summary [afterTemplate]=&quot;customAfterTemplate&quot;&gt;
  Accordion title
&lt;/tgui-accordion-summary&gt;

&lt;ng-template #customAfterTemplate&gt;
  &lt;tgui-badge type=&quot;number&quot;&gt;5&lt;/tgui-badge&gt;
&lt;/ng-template&gt;</code></pre></div><h2>Template Inputs</h2>
<p>The component accepts the following template inputs:</p>
<ul>
<li><code>afterTemplate</code>: Optional template displayed on the right side of the cell (replaces the default chevron)</li>
</ul>


**Source:** `src/lib/components/blocks/accordion/components/accordion-summary/accordion-summary.component.ts`

**Import:**
```typescript
import { AccordionSummaryComponent } from 'tgui-angular';
```

**Methods:**

- `getAfterTemplate(): TemplateRef | null` - <p>Get the template to display in the after slot</p>

- `onClick(): void` - No description

**Example:**
```html
<tgui-accordion-summary></tgui-accordion-summary>
```

#### AvatarAcronymComponent

**Selector:** `tgui-avatar-acronym`

<p>The AvatarAcronym component displays initials for an avatar,
automatically selecting the appropriate font size and typography component.</p>


**Source:** `src/lib/components/blocks/avatar/components/avatar-acronym/avatar-acronym.component.ts`

**Import:**
```typescript
import { AvatarAcronymComponent } from 'tgui-angular';
```

**Methods:**

- `formatInitials(): string` - <p>Formats the passed text into initials, extracting the first letters of each word (up to 2 letters)</p>

- `getCaptionLevel(): "1" | "2"` - <p>Determines Caption level based on avatar size</p>

- `getTypographyComponent(): "caption" | "headline" | "title" | "large-title"` - <p>Determines which typography component to use based on avatar size</p>


**Example:**
```html
<tgui-avatar-acronym></tgui-avatar-acronym>
```

#### AvatarBadgeComponent

**Selector:** `tgui-avatar-badge`

<p>The AvatarBadge component displays a numeric badge on the avatar,
allowing to show the number of unread messages, notifications, etc.</p>


**Source:** `src/lib/components/blocks/avatar/components/avatar-badge/avatar-badge.component.ts`

**Import:**
```typescript
import { AvatarBadgeComponent } from 'tgui-angular';
```

**Properties:**

- `count`: `any` **[required]** (default: `0`) - <p>Numeric value to display in the badge</p>


**Example:**
```html
<tgui-avatar-badge
  [count]="value"></tgui-avatar-badge>
```

#### AvatarComponent

**Selector:** `tgui-avatar`

<p>The Avatar component displays an avatar with optional initials or image.
The component supports various sizes and shapes, as well as an online status indicator.</p>


**Source:** `src/lib/components/blocks/avatar/avatar.component.ts`

**Import:**
```typescript
import { AvatarComponent } from 'tgui-angular';
```

**Properties:**

- `online`: `any` **[required]** (default: `false`) - <p>Online status indicator</p>


**Methods:**

- `getBackgroundColor(): string` - <p>Returns background color for avatar with initials</p>


**Example:**
```html
<tgui-avatar
  [online]="value"></tgui-avatar>
```

#### AvatarStackComponent

**Selector:** `tgui-avatar-stack`

<p>The AvatarStack component displays a container for avatars in a stack format.
It allows to visually group avatars, often used to represent
multiple users or participants.</p>
<p>Avatars are displayed with overlap, which is adjusted through the offset property.</p>


**Source:** `src/lib/components/blocks/avatar-stack/avatar-stack.component.ts`

**Import:**
```typescript
import { AvatarStackComponent } from 'tgui-angular';
```

**Properties:**

- `offset`: `any` **[required]** (default: `-12`) - <p>Offset between avatars in pixels (default -12px).
Negative value determines the degree of overlap between avatars.
The smaller the value (e.g., -18px), the greater the overlap between avatars.
The larger the value (e.g., -6px), the less the overlap between avatars.</p>


**Example:**
```html
<tgui-avatar-stack
  [offset]="value"></tgui-avatar-stack>
```

#### BadgeComponent

**Selector:** `tgui-badge`

<p>Badge component displays a small numeric or dot indicator,
typically used for notifications, statuses, or counters.
Supports multiple visual modes for different contexts (e.g., critical, primary),
and can be regular or large size.</p>


**Source:** `src/lib/components/blocks/badge/badge.component.ts`

**Import:**
```typescript
import { BadgeComponent } from 'tgui-angular';
```

**Properties:**

- `large`: `any` **[required]** (default: `false`) - <p>Increases the badge size. Applied only when type=&#39;number&#39;.</p>


**Example:**
```html
<tgui-badge
  [large]="value"></tgui-badge>
```

#### BannerComponent

**Selector:** `tgui-banner`

<p>The <code>Banner</code> component renders a prominent graphical element, typically displayed at the top of a page or section,
designed to grab the user&#39;s attention and convey important information.
It is a versatile tool used for various purposes such as branding, promotion, announcements, or navigation.</p>
<h2>Usage</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;tgui-banner
  type=&quot;inline&quot;
  (onCloseIcon)=&quot;onCloseIcon($event)&quot;
  [beforeTemplate]=&quot;beforeTemplate&quot;
  [calloutTemplate]=&quot;calloutTemplate&quot;
  [headerTemplate]=&quot;headerTemplate&quot;
  [descriptionTemplate]=&quot;descriptionTemplate&quot;
  [buttonsTemplate]=&quot;buttonsTemplate&quot;
  [backgroundTemplate]=&quot;backgroundTemplate&quot;&gt;
&lt;/tgui-banner&gt;

&lt;ng-template #beforeTemplate&gt;
  &lt;tgui-icon24-qr&gt;&lt;/tgui-icon24-qr&gt;
&lt;/ng-template&gt;

&lt;ng-template #calloutTemplate&gt;
  Urgent notification
&lt;/ng-template&gt;

&lt;ng-template #headerTemplate&gt;
  Introducing TON Space
&lt;/ng-template&gt;

&lt;ng-template #descriptionTemplate&gt;
  Start exploring TON in a new, better way
&lt;/ng-template&gt;

&lt;ng-template #buttonsTemplate&gt;
  &lt;tgui-button size=&quot;s&quot;&gt;Try it out&lt;/tgui-button&gt;
  &lt;tgui-button size=&quot;s&quot; mode=&quot;plain&quot;&gt;Maybe later&lt;/tgui-button&gt;
&lt;/ng-template&gt;</code></pre></div><h2>Template Inputs</h2>
<p>The component accepts the following template inputs:</p>
<ul>
<li><code>beforeTemplate</code>: Optional template displayed at the start of the banner, useful for icons</li>
<li><code>calloutTemplate</code>: Optional template for callout text displayed above the header</li>
<li><code>headerTemplate</code>: Template for main header/title of the banner</li>
<li><code>subheaderTemplate</code>: Optional template for text displayed below the header</li>
<li><code>descriptionTemplate</code>: Optional template for descriptive text</li>
<li><code>backgroundTemplate</code>: Optional template for background content</li>
<li><code>buttonsTemplate</code>: Optional template for action buttons</li>
</ul>


**Source:** `src/lib/components/blocks/banner/banner.component.ts`

**Import:**
```typescript
import { BannerComponent } from 'tgui-angular';
```

**Events:**

- `onCloseIcon`: `EventEmitter` - No description

**Methods:**

- `getCloseIconName(): string` - <p>Determines which close icon to use based on platform and background</p>


**Example:**
```html
<tgui-banner></tgui-banner>
```

#### BlockquoteComponent

**Selector:** `tgui-blockquote`

<p>Renders a stylized blockquote element, typically used for quotations or special text.
The component can display a text in the subheadline and content below it.
The component can include a customizable icon in the top right corner.</p>
<h2>Usage</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;tgui-blockquote icon=&quot;quote&quot; text=&quot;Optional headline text&quot;&gt;
  Content of the blockquote
&lt;/tgui-blockquote&gt;</code></pre></div><h3>Properties</h3>
<ul>
<li><p><code>icon</code>: Optional input to specify which icon to display in the top-right corner.
Default is &quot;quote&quot; icon. Uses the dynamic icon component.</p>
</li>
<li><p><code>text</code>: Optional text to be displayed as a headline above the content.
If provided, it will be wrapped in the subheadline component.</p>
</li>
</ul>


**Source:** `src/lib/components/blocks/blockquote/blockquote.component.ts`

**Import:**
```typescript
import { BlockquoteComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-blockquote></tgui-blockquote>
```

#### ButtonCellComponent

**Selector:** `tgui-button-cell`

<p>Renders an interactive cell component with optional leading and trailing elements.
Designed to be flexible, supporting various content structures and interaction models within UI designs.</p>


**Source:** `src/lib/components/blocks/cell/components/button-cell/button-cell.component.ts`

**Import:**
```typescript
import { ButtonCellComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Disables button interaction</p>


**Example:**
```html
<tgui-button-cell
  [disabled]="value">
  <!-- Content goes here -->
</tgui-button-cell>
```

#### ButtonComponent

**Selector:** `tgui-button`

<p>The Button component provides a customizable button with various styles and states.
Supports different sizes, display modes, loading state, etc.</p>


**Source:** `src/lib/components/blocks/button/button.component.ts`

**Import:**
```typescript
import { ButtonComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>If true, the button will be disabled</p>

- `loading`: `any` **[required]** (default: `false`) - <p>If true, shows a loading indicator instead of button content</p>

- `stretched`: `any` **[required]** (default: `false`) - <p>If true, the button will stretch to the width of its container</p>


**Methods:**

- `onSelectStart(event: Event): boolean` - No description

**Example:**
```html
<tgui-button
  [disabled]="value"
  [loading]="value"
  [stretched]="value">
  <!-- Content goes here -->
</tgui-button>
```

#### CardCellComponent

**Selector:** `tgui-card-cell`

<p>CardCell component that represents a content section within a Card.</p>


**Source:** `src/lib/components/blocks/card/components/card-cell/card-cell.component.ts`

**Import:**
```typescript
import { CardCellComponent } from 'tgui-angular';
```

**Properties:**

- `header`: `string` - <p>Optional header text for the cell</p>

- `isImage`: `boolean` (default: `false`) - <p>Whether the cell contains image content</p>

- `subtitle`: `string` - <p>Optional subtitle text for the cell</p>


**Example:**
```html
<tgui-card-cell>
  <!-- Content goes here -->
</tgui-card-cell>
```

#### CardChipComponent

**Selector:** `tgui-card-chip`

<p>CardChip component that displays a small actionable or informational element on the Card
Leverages the ChipComponent with fixed positioning for use within cards</p>


**Source:** `src/lib/components/blocks/card/components/card-chip/card-chip.component.ts`

**Import:**
```typescript
import { CardChipComponent } from 'tgui-angular';
```

**Properties:**

- `after`: `any` **[required]** - <p>Content to be placed after the main text</p>

- `before`: `any` **[required]** - <p>Content to be placed before the main text</p>


**Example:**
```html
<tgui-card-chip
  [after]="value"
  [before]="value"></tgui-card-chip>
```

#### CardComponent

**Selector:** `tgui-card`

<p>Serves as a container for card-styled UI elements, providing context for its child components.
It supports different visual styles and can encapsulate various content types.</p>


**Source:** `src/lib/components/blocks/card/card.component.ts`

**Import:**
```typescript
import { CardComponent } from 'tgui-angular';
```

**Properties:**

- `image`: `any` **[required]** - <p>URL of the image to display at the top of the card</p>


**Example:**
```html
<tgui-card
  [image]="value"></tgui-card>
```

#### CellComponent

**Selector:** `tgui-cell`

<p><code>Cell</code> component acts as a flexible and interactive container for various types of content,
enabling the creation of complex list items, form fields, and more. It leverages the <code>Tappable</code>
component for interaction and is designed to be flexible and extensible.</p>
<h2>Usage</h2>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Using input properties and template references --&gt;
&lt;tgui-cell
  subhead=&quot;Subhead text&quot;
  title=&quot;Title text&quot;
  hint=&quot;Hint text&quot;
  subtitle=&quot;Subtitle text&quot;
  description=&quot;Description text&quot;
  [titleBadge]=&quot;badgeTemplate&quot;
  [beforeTemplate]=&quot;beforeTemplate&quot;
  [afterTemplate]=&quot;afterTemplate&quot;&gt;
  Main content
&lt;/tgui-cell&gt;

&lt;!-- Using with event propagation for form controls (combines semantic label with tappable effects) --&gt;
&lt;tgui-cell
  [propagateEvents]=&quot;true&quot;
  description=&quot;Click anywhere to toggle - includes ripple effects!&quot;
  [afterTemplate]=&quot;switchTemplate&quot;&gt;
  Toggle option
&lt;/tgui-cell&gt;

&lt;ng-template #beforeTemplate&gt;
  &lt;tgui-avatar size=&quot;l&quot;&gt;&lt;/tgui-avatar&gt;
&lt;/ng-template&gt;

&lt;ng-template #afterTemplate&gt;
  &lt;tgui-badge type=&quot;number&quot;&gt;99&lt;/tgui-badge&gt;
&lt;/ng-template&gt;

&lt;ng-template #switchTemplate&gt;
  &lt;tgui-switch [checked]=&quot;true&quot;&gt;&lt;/tgui-switch&gt;
&lt;/ng-template&gt;

&lt;ng-template #badgeTemplate&gt;
  &lt;tgui-badge type=&quot;dot&quot;&gt;&lt;/tgui-badge&gt;
&lt;/ng-template&gt;</code></pre></div><h2>Template Inputs</h2>
<p>The component accepts the following template inputs:</p>
<ul>
<li><code>beforeTemplate</code>: Optional template displayed on the left side of the cell</li>
<li><code>afterTemplate</code>: Optional template displayed on the right side of the cell</li>
<li><code>titleBadge</code>: Badge template displayed next to the title</li>
</ul>
<p>All other content should be provided via input properties:</p>
<ul>
<li><code>subhead</code>: Optional content displayed above the main title</li>
<li><code>title</code>: Main title/header content</li>
<li><code>hint</code>: Optional content displayed next to the title</li>
<li><code>subtitle</code>: Optional content displayed below the title</li>
<li><code>description</code>: Optional descriptive text below the subtitle</li>
<li><code>propagateEvents</code>: When true, wraps content in semantic label for form control interaction</li>
</ul>


**Source:** `src/lib/components/blocks/cell/cell.component.ts`

**Import:**
```typescript
import { CellComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Disabled state</p>

- `hovered`: `any` **[required]** (default: `false`) - <p>Controls the hover state of the component externally, useful for keyboard navigation</p>

- `multiline`: `any` **[required]** (default: `false`) - <p>Allows for multiline content without truncation</p>

- `propagateEvents`: `any` **[required]** (default: `false`) - <p>When true, wraps content in semantic label for form control interaction</p>

- `readonly`: `any` **[required]** (default: `false`) - <p>Readonly state</p>


**Example:**
```html
<tgui-cell
  [disabled]="value"
  [hovered]="value"
  [multiline]="value">
  <!-- Content goes here -->
</tgui-cell>
```

#### CustomAfterTemplateStoryComponent

**Selector:** `tgui-custom-after-template-story`

No description available

**Source:** `src/lib/components/blocks/accordion/stories/accordion.stories.ts`

**Import:**
```typescript
import { CustomAfterTemplateStoryComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-custom-after-template-story></tgui-custom-after-template-story>
```

#### IconButtonComponent

**Selector:** `tgui-icon-button`

<p>Renders an icon button with customizable size and mode. It utilizes the <code>Tappable</code> component for enhanced
touch interaction, allowing it to serve various UI actions efficiently.</p>


**Source:** `src/lib/components/blocks/icon-button/icon-button.component.ts`

**Import:**
```typescript
import { IconButtonComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Disables the button</p>


**Example:**
```html
<tgui-icon-button
  [disabled]="value">
  <!-- Content goes here -->
</tgui-icon-button>
```

#### IconContainerComponent

**Selector:** `tgui-icon-container`

<p>Icon container component provides a wrapper for icons with proper styling</p>


**Source:** `src/lib/components/blocks/icon-container/icon-container.component.ts`

**Import:**
```typescript
import { IconContainerComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-container></tgui-icon-container>
```

#### ImageBadgeComponent

**Selector:** `tgui-image-badge`

<p>Badge component specifically designed to be used with Image component.
Only supports number type badges.</p>


**Source:** `src/lib/components/blocks/image/components/image-badge/image-badge.component.ts`

**Import:**
```typescript
import { ImageBadgeComponent } from 'tgui-angular';
```

**Properties:**

- `count`: `number` (default: `0`) - <p>Badge count number</p>

- `maxCount`: `number` (default: `99`) - <p>Maximum count to display before showing &quot;maxCount+&quot;</p>


**Example:**
```html
<tgui-image-badge></tgui-image-badge>
```

#### ImageComponent

**Selector:** `tgui-image`

<p>Renders an image with optional fallback content. It supports custom sizing and will automatically
handle loading states and errors by optionally displaying a fallback icon. This component can also
include additional content, such as badges or overlays, as children.</p>


**Source:** `src/lib/components/blocks/image/image.component.ts`

**Import:**
```typescript
import { ImageComponent } from 'tgui-angular';
```

**Properties:**

- `size`: `any` **[required]** (default: `40`) - <p>Specifies the size of the image, with a default of 40. Sizes are defined in pixels.</p>


**Methods:**

- `getBorderRadius(size: number): number` - <p>Calculate border radius based on image size</p>

- `handleImageError(event: Event): void` - <p>Handle image error event</p>

- `handleImageLoad(event: Event): void` - <p>Handle image load event</p>


**Example:**
```html
<tgui-image
  [size]="value"></tgui-image>
```

#### InlineButtonsComponent

**Selector:** `tgui-inline-buttons`

<p><code>InlineButtons</code> acts as a container for <code>InlineButtonsItem</code> components.
This component provides a unified context for styling and interaction,
leveraging the <code>mode</code> to apply consistent styling across all child components.
It ensures visual consistency across different platforms and supports custom styling modes.</p>


**Source:** `src/lib/components/blocks/inline-buttons/inline-buttons.component.ts`

**Import:**
```typescript
import { InlineButtonsComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-inline-buttons>
  <!-- Content goes here -->
</tgui-inline-buttons>
```

#### InlineButtonsItemComponent

**Selector:** `tgui-inline-buttons-item`

<p><code>InlineButtonsItem</code> is designed for use within an InlineButtons container but can also serve
as a standalone button if used by itself. It supports displaying optional text and can inherit
a styling mode from its parent InlineButtons context or utilize a locally defined mode.</p>


**Source:** `src/lib/components/blocks/inline-buttons/components/inline-buttons-item.component.ts`

**Import:**
```typescript
import { InlineButtonsItemComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Disables the button</p>


**Example:**
```html
<tgui-inline-buttons-item
  [disabled]="value">
  <!-- Content goes here -->
</tgui-inline-buttons-item>
```

#### ListComponent

**Selector:** `tgui-list`

<p>Renders a container for list items, applying platform-specific styles for consistency
across different operating systems. This component serves as a foundational element
for creating lists in a user interface.</p>


**Source:** `src/lib/components/blocks/list/list.component.ts`

**Import:**
```typescript
import { ListComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-list>
  <!-- Content goes here -->
</tgui-list>
```

#### MultipleAccordionsStoryComponent

**Selector:** `tgui-multiple-accordions-story`

No description available

**Source:** `src/lib/components/blocks/accordion/stories/accordion.stories.ts`

**Import:**
```typescript
import { MultipleAccordionsStoryComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-multiple-accordions-story></tgui-multiple-accordions-story>
```

#### PlaceholderComponent

**Selector:** `tgui-placeholder`

<p>A versatile component designed to display a placeholder with optional text, images, and actions.</p>


**Source:** `src/lib/components/blocks/placeholder/placeholder.component.ts`

**Import:**
```typescript
import { PlaceholderComponent } from 'tgui-angular';
```

**Properties:**

- `description`: `string` - <p>Additional descriptive text to provide more details or context.</p>

- `header`: `string` - <p>The primary text, usually a title or a header, for the placeholder.</p>


**Example:**
```html
<tgui-placeholder></tgui-placeholder>
```

#### PlaygroundStoryComponent

**Selector:** `tgui-playground-story`

No description available

**Source:** `src/lib/components/blocks/accordion/stories/accordion.stories.ts`

**Import:**
```typescript
import { PlaygroundStoryComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-playground-story></tgui-playground-story>
```

#### SectionComponent

**Selector:** `tgui-section`

<p>The Section component organizes content into separate sections with optional
headers and footers. It automatically wraps strings and numbers in appropriate
SectionHeader and SectionFooter components, and inserts dividers between
child elements.</p>


**Source:** `src/lib/components/blocks/section/section.component.ts`

**Import:**
```typescript
import { SectionComponent } from 'tgui-angular';
```

**Properties:**

- `footer`: `string | number | TemplateRef<any>` - <p>Content for the section footer. If a string is passed, SectionFooter is automatically used.
For centered footer, use <tgui-section-footer centered>...</tgui-section-footer>.</p>

- `header`: `string | number | TemplateRef<any>` - <p>Content for the section header. If a string is passed, SectionHeader is automatically used.
For more control or a large header, use <tgui-section-header large>...</tgui-section-header>.</p>


**Methods:**

- `isPrimitive(value: any): boolean` - <p>Checks if the value is a primitive (string or number)</p>

- `isPrimitiveContent(content: any): boolean` - <p>Checks if the content is a primitive</p>


**Example:**
```html
<tgui-section>
  <!-- Content goes here -->
</tgui-section>
```

#### SectionFooterComponent

**Selector:** `tgui-section-footer`

<p>The SectionFooter component represents a footer for the Section component.
Supports centered mode for centered text.</p>


**Source:** `src/lib/components/blocks/section/components/section-footer/section-footer.component.ts`

**Import:**
```typescript
import { SectionFooterComponent } from 'tgui-angular';
```

**Properties:**

- `centered`: `boolean` (default: `false`) - <p>Text centering, adding additional padding</p>


**Example:**
```html
<tgui-section-footer>
  <!-- Content goes here -->
</tgui-section-footer>
```

#### SectionHeaderComponent

**Selector:** `tgui-section-header`

<p>The SectionHeader component represents a header for the Section component.
Supports large mode for an enlarged header.</p>


**Source:** `src/lib/components/blocks/section/components/section-header/section-header.component.ts`

**Import:**
```typescript
import { SectionHeaderComponent } from 'tgui-angular';
```

**Properties:**

- `large`: `boolean` (default: `false`) - <p>Enlarged header, changes font size, padding and color</p>


**Example:**
```html
<tgui-section-header>
  <!-- Content goes here -->
</tgui-section-header>
```

#### StepsComponent

**Selector:** `tgui-steps`

<p>Renders a visual indicator of steps or progress in a process, such as a tutorial or a multi-step form.
It visually represents total steps and current progress.</p>


**Source:** `src/lib/components/blocks/steps/steps.component.ts`

**Import:**
```typescript
import { StepsComponent } from 'tgui-angular';
```

**Properties:**

- `count`: `any` **[required]** (default: `0`) - <p>Total number of steps.</p>

- `progress`: `any` **[required]** (default: `0`) - <p>Current progress, indicating how many steps have been completed.
Progress is 0-indexed and goes up to <code>count</code>.</p>


**Example:**
```html
<tgui-steps
  [count]="value"
  [progress]="value"></tgui-steps>
```

#### TimelineComponent

**Selector:** `tgui-timeline`

No description available

**Source:** `src/lib/components/blocks/timeline/timeline.component.ts`

**Import:**
```typescript
import { TimelineComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-timeline></tgui-timeline>
```

#### TimelineItemComponent

**Selector:** `tgui-timeline-item`

No description available

**Source:** `src/lib/components/blocks/timeline/components/timeline-item/timeline-item.component.ts`

**Import:**
```typescript
import { TimelineItemComponent } from 'tgui-angular';
```

**Properties:**

- `header`: `string` - No description
- `horizontal`: `boolean` - No description
- `mode`: `"active" | "pre-active"` - No description

**Example:**
```html
<tgui-timeline-item
  [mode]="value"></tgui-timeline-item>
```


### FORM Components

#### CheckboxComponent

**Selector:** `tgui-checkbox`

<p>Renders a checkbox input with custom styling and optional indeterminate state.
The component visually hides the actual input element for accessibility
while providing a custom styled appearance.</p>


**Source:** `src/lib/components/form/checkbox/checkbox.component.ts`

**Import:**
```typescript
import { CheckboxComponent } from 'tgui-angular';
```

**Properties:**

- `checked`: `any` **[required]** (default: `false`) - <p>Set checked state</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Set disabled state</p>

- `indeterminate`: `any` **[required]** (default: `false`) - <p>Set indeterminate state</p>


**Events:**

- `change`: `EventEmitter` - <p>Event when state changes</p>


**Methods:**

- `onChange(event: Event): void` - <p>Change event handler</p>


**Example:**
```html
<tgui-checkbox
  [checked]="value"
  [disabled]="value"
  [indeterminate]="value"></tgui-checkbox>
```

#### ChipComponent

**Selector:** `tgui-chip`

<p>Renders a compact element representing an input, attribute, or action.
Chips can include icons, text, or both, and are used to trigger actions,
input information, or represent a complex piece of information in a compact form.</p>


**Source:** `src/lib/components/form/chip/chip.component.ts`

**Import:**
```typescript
import { ChipComponent } from 'tgui-angular';
```

**Properties:**

- `after`: `any` **[required]** (default: `null`) - <p>Content or component to be placed after the main text, such as an icon indicating an action.</p>

- `before`: `any` **[required]** (default: `null`) - <p>Content or component to be placed before the main text, typically an icon or avatar.</p>


**Example:**
```html
<tgui-chip
  [after]="value"
  [before]="value"></tgui-chip>
```

#### ColorInputComponent

**Selector:** `tgui-color-input`

<p>Renders a color picker input within a form structure, displaying the selected color value.
It adapts the text style based on the platform and supports additional properties like header and status.</p>


**Source:** `src/lib/components/form/color-input/color-input.component.ts`

**Import:**
```typescript
import { ColorInputComponent } from 'tgui-angular';
```

**Properties:**

- `before`: `any` **[required]** (default: `null`) - <p>Content to be displayed before the color input</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Whether the input is disabled</p>


**Example:**
```html
<tgui-color-input
  [before]="value"
  [disabled]="value"></tgui-color-input>
```

#### FileInputComponent

**Selector:** `tgui-file-input`

<p>Renders a file input disguised as a button, enhancing the user interface and improving usability.
It leverages the <code>ButtonCell</code> component for consistent styling across the application.</p>


**Source:** `src/lib/components/form/file-input/file-input.component.ts`

**Import:**
```typescript
import { FileInputComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Whether the input is disabled</p>

- `multiple`: `any` **[required]** (default: `false`) - <p>Whether multiple files can be selected</p>


**Events:**

- `change`: `EventEmitter` - <p>Emitted when files are selected</p>


**Methods:**

- `handleChange(event: Event): void` - <p>Handles the change event when files are selected</p>


**Example:**
```html
<tgui-file-input
  [disabled]="value"
  [multiple]="value"></tgui-file-input>
```

#### FormInputComponent

**Selector:** `tgui-form-input`

<p>FormInput is a base wrapper component for form elements.
It provides common styling, layout, and behavior for form inputs.</p>
<p>Features:</p>
<ul>
<li>Platform-specific styling (iOS vs base)</li>
<li>Status handling (default, error, focused)</li>
<li>Support for content before and after the input (as string or TemplateRef)</li>
<li>Optional header display</li>
<li>Focus and blur handling</li>
</ul>


**Source:** `src/lib/components/form/form-input/form-input.component.ts`

**Import:**
```typescript
import { FormInputComponent } from 'tgui-angular';
```

**Properties:**

- `after`: `any` **[required]** (default: `false`) - <p>Indicates if there&#39;s content to be displayed after the form input (legacy support)</p>

- `before`: `any` **[required]** (default: `false`) - <p>Indicates if there&#39;s content to be displayed before the form input (legacy support)</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Indicates if the form input is disabled</p>


**Methods:**

- `onFocusIn(): void` - No description
- `onFocusOut(): void` - No description

**Example:**
```html
<tgui-form-input
  [after]="value"
  [before]="value"
  [disabled]="value"></tgui-form-input>
```

#### FormInputTitleComponent

**Selector:** `tgui-form-input-title`

<p>FormInputTitle component that displays appropriate typography based on platform
Used internally by FormInput to display the header</p>


**Source:** `src/lib/components/form/form-input/components/form-input-title.component.ts`

**Import:**
```typescript
import { FormInputTitleComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-form-input-title></tgui-form-input-title>
```

#### IconCheckboxCheckedComponent

**Selector:** `tgui-icon-checkbox-checked`

<p>Icon component for checkbox in checked state</p>


**Source:** `src/lib/components/form/checkbox/icons/checkbox-checked.component.ts`

**Import:**
```typescript
import { IconCheckboxCheckedComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-checkbox-checked></tgui-icon-checkbox-checked>
```

#### IconCheckboxComponent

**Selector:** `tgui-icon-checkbox`

<p>Icon component for checkbox in unchecked state</p>


**Source:** `src/lib/components/form/checkbox/icons/checkbox.component.ts`

**Import:**
```typescript
import { IconCheckboxComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-checkbox></tgui-icon-checkbox>
```

#### IconCheckboxIndeterminateComponent

**Selector:** `tgui-icon-checkbox-indeterminate`

<p>Icon component for checkbox in indeterminate state</p>


**Source:** `src/lib/components/form/checkbox/icons/checkbox-indeterminate.component.ts`

**Import:**
```typescript
import { IconCheckboxIndeterminateComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-checkbox-indeterminate></tgui-icon-checkbox-indeterminate>
```

#### IconHeartComponent

**Selector:** `tgui-icon-heart`

<p>This is a placeholder component for demonstrating custom icons in the Rating component.
In the future, you could replace the star icon with this or any other SVG icon.</p>


**Source:** `src/lib/components/form/rating/story/custom-icon.component.ts`

**Import:**
```typescript
import { IconHeartComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-heart></tgui-icon-heart>
```

#### IconRadioCheckedComponent

**Selector:** `tgui-icon-radio-checked`

<p>Icon component for radio button in checked state</p>


**Source:** `src/lib/components/form/radio/icons/radio-checked.component.ts`

**Import:**
```typescript
import { IconRadioCheckedComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-radio-checked></tgui-icon-radio-checked>
```

#### IconRadioComponent

**Selector:** `tgui-icon-radio`

<p>Icon component for radio button in unchecked state</p>


**Source:** `src/lib/components/form/radio/icons/radio.component.ts`

**Import:**
```typescript
import { IconRadioComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon-radio></tgui-icon-radio>
```

#### InputComponent

**Selector:** `tgui-input`

<p>Renders a text input field with enhanced styling and integration into a form structure.
It automatically adapts typography and layout based on the platform, ensuring a consistent user experience across devices.</p>


**Source:** `src/lib/components/form/input/input.component.ts`

**Import:**
```typescript
import { InputComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Whether the input is disabled</p>


**Methods:**

- `onChange(event: Event): void` - <p>Handles change events</p>

- `onInput(event: Event): void` - <p>Handles input events</p>


**Example:**
```html
<tgui-input
  [disabled]="value"></tgui-input>
```

#### MultiselectableComponent

**Selector:** `tgui-multiselectable`

<p>Renders a custom multiselectable checkbox input, adapting its icons based on the current platform (iOS or others).
Supports all standard input checkbox properties.</p>


**Source:** `src/lib/components/form/multiselectable/multiselectable.component.ts`

**Import:**
```typescript
import { MultiselectableComponent } from 'tgui-angular';
```

**Properties:**

- `checked`: `any` **[required]** (default: `false`) - <p>Set checked state</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Set disabled state</p>


**Events:**

- `change`: `EventEmitter` - <p>Event when state changes</p>


**Methods:**

- `onChange(event: Event): void` - <p>Change event handler</p>


**Example:**
```html
<tgui-multiselectable
  [checked]="value"
  [disabled]="value"></tgui-multiselectable>
```

#### PinInputButtonComponent

**Selector:** `tgui-pin-input-button`

<p>PinInputButton component for PIN code entry
Provides a button optimized for number entry in PIN inputs
Supports both content input property and ng-content projection</p>


**Source:** `src/lib/components/form/pin-input/components/pin-input-button/pin-input-button.component.ts`

**Import:**
```typescript
import { PinInputButtonComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-pin-input-button>
  <!-- Content goes here -->
</tgui-pin-input-button>
```

#### PinInputCellComponent

**Selector:** `tgui-pin-input-cell`

<p>Individual cell component for PIN input.
Displays a field for a single digit of a PIN code.</p>


**Source:** `src/lib/components/form/pin-input/components/pin-input-cell/pin-input-cell.component.ts`

**Import:**
```typescript
import { PinInputCellComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Sets the disabled state</p>

- `isTyped`: `any` **[required]** (default: `false`) - <p>Whether the cell has a value typed</p>


**Example:**
```html
<tgui-pin-input-cell
  [disabled]="value"
  [isTyped]="value">
  <!-- Content goes here -->
</tgui-pin-input-cell>
```

#### PinInputComponent

**Selector:** `tgui-pin-input`

<p>Renders a set of input fields for entering pin codes with a virtual keypad for value entry and deletion.</p>


**Source:** `src/lib/components/form/pin-input/pin-input.component.ts`

**Import:**
```typescript
import { PinInputComponent } from 'tgui-angular';
```

**Properties:**

- `debug`: `any` **[required]** (default: `false`) - <p>Enable debug mode to show platform information</p>

- `pinCount`: `any` **[required]** (default: `4`) - <p>The number of pin input fields to display, with a minimum of 2.</p>


**Example:**
```html
<tgui-pin-input
  [debug]="value"
  [pinCount]="value"></tgui-pin-input>
```

#### PinInputStoryWrapperComponent

**Selector:** `tgui-pin-input-story-wrapper`

No description available

**Source:** `src/lib/components/form/pin-input/story/pin-input.stories.ts`

**Import:**
```typescript
import { PinInputStoryWrapperComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-pin-input-story-wrapper></tgui-pin-input-story-wrapper>
```

#### PinStoryRootComponent

**Selector:** `tgui-pin-story-root`

No description available

**Source:** `src/lib/components/form/pin-input/story/pin-input.stories.ts`

**Import:**
```typescript
import { PinStoryRootComponent } from 'tgui-angular';
```

**Properties:**

- `appearance`: `AppearanceType` (default: `'light'`) - No description
- `followSystemTheme`: `boolean` (default: `false`) - No description
- `platform`: `PlatformType` (default: `'base'`) - No description

**Example:**
```html
<tgui-pin-story-root></tgui-pin-story-root>
```

#### RadioComponent

**Selector:** `tgui-radio`

<p>Renders a radio button input with custom styling.
The component visually hides the actual input element for accessibility
while providing a custom styled appearance.</p>


**Source:** `src/lib/components/form/radio/radio.component.ts`

**Import:**
```typescript
import { RadioComponent } from 'tgui-angular';
```

**Properties:**

- `checked`: `any` **[required]** (default: `false`) - <p>Sets the checked state</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Sets the disabled state</p>


**Events:**

- `change`: `EventEmitter` - <p>Event emitted on change</p>


**Methods:**

- `onChange(event: Event): void` - <p>Change event handler</p>


**Example:**
```html
<tgui-radio
  [checked]="value"
  [disabled]="value"></tgui-radio>
```

#### RatingComponent

**Selector:** `tgui-rating`

<p>Renders a customizable rating component, allowing users to provide a rating by selecting a value using stars.
Supports fractional ratings through precision control.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;tgui-rating
  [(ratingValue)]=&quot;userRating&quot;
  [precision]=&quot;0.5&quot;
  [max]=&quot;5&quot;&gt;
&lt;/tgui-rating&gt;</code></pre></div>

**Source:** `src/lib/components/form/rating/rating.component.ts`

**Import:**
```typescript
import { RatingComponent } from 'tgui-angular';
```

**Properties:**

- `max`: `any` **[required]** (default: `5`) - <p>The maximum rating value, representing the number of icons displayed.</p>

- `ratingValue`: `any` **[required]** (default: `0`) - <p>The current value of the rating using Angular&#39;s two-way binding with model().</p>


**Methods:**

- `getElementsWithPrecision(): number[]` - No description
- `getKeys(): number[]` - No description
- `getPickedElementWidth(elementNumber: number): number | undefined` - No description
- `isInputChecked(key: number, element: number): boolean` - No description
- `onRatingChange(value: number): void` - No description

**Example:**
```html
<tgui-rating
  [max]="value"
  [ratingValue]="value"></tgui-rating>
```

#### SelectComponent

**Selector:** `tgui-select`

<p>Renders a custom styled select input within a <code>FormInput</code> container. This component is designed to integrate seamlessly
with the form input styles, providing a consistent look and enhanced features such as a custom dropdown arrow and support
for platform-specific typography. The <code>FormInput</code> wrapper facilitates the inclusion of headers and status messages.</p>


**Source:** `src/lib/components/form/select/select.component.ts`

**Import:**
```typescript
import { SelectComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Whether the input is disabled</p>


**Example:**
```html
<tgui-select
  [disabled]="value"></tgui-select>
```

#### SwitchComponent

**Selector:** `tgui-switch`

<p>A custom switch component that mimics the behavior of a checkbox input but with enhanced styling.
It supports all the standard attributes of an HTML input element of type &quot;checkbox&quot;.
The appearance of the switch can be customized to match either a base or iOS platform style.</p>


**Source:** `src/lib/components/form/switch/switch.component.ts`

**Import:**
```typescript
import { SwitchComponent } from 'tgui-angular';
```

**Properties:**

- `checked`: `any` **[required]** (default: `false`) - <p>Sets the checked state</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Sets the disabled state</p>


**Events:**

- `change`: `EventEmitter` - <p>Event emitted when the switch state changes</p>


**Methods:**

- `onChange(event: Event): void` - <p>Handler for change event</p>


**Example:**
```html
<tgui-switch
  [checked]="value"
  [disabled]="value"></tgui-switch>
```

#### TextareaComponent

**Selector:** `tgui-textarea`

<p>Wraps a standard HTML textarea element within a <code>FormInput</code> container, applying custom styles and functionality.
This component inherits the flexible design of the <code>FormInput</code>, allowing it to display a header and reflect different status styles.
The appearance and behavior of the textarea can be customized through various props, providing a seamless integration with forms.</p>


**Source:** `src/lib/components/form/textarea/textarea.component.ts`

**Import:**
```typescript
import { TextareaComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Whether the textarea is disabled</p>


**Methods:**

- `onChange(event: Event): void` - <p>Handles change events</p>

- `onInput(event: Event): void` - <p>Handles input events</p>


**Example:**
```html
<tgui-textarea
  [disabled]="value"></tgui-textarea>
```


### TYPOGRAPHY Components

#### CaptionComponent

**Selector:** `tgui-caption`

<p>The Caption component is a text wrapper that applies specific typographic styles,
based on the provided <code>level</code> prop. It&#39;s built on top of the Typography component,
ensuring consistent text styling across the application. It primarily serves for text
that acts as a small, descriptive label or annotation.</p>


**Source:** `src/lib/components/typography/caption/caption.component.ts`

**Import:**
```typescript
import { CaptionComponent } from 'tgui-angular';
```

**Properties:**

- `caps`: `any` **[required]** (default: `false`) - No description
- `plain`: `any` **[required]** (default: `true`) - No description

**Example:**
```html
<tgui-caption
  [caps]="value"
  [plain]="value"></tgui-caption>
```

#### HeadlineComponent

**Selector:** `tgui-headline`

<p>The Headline component serves as a wrapper for text that is intended to be displayed prominently,
typically used for section headings or important titles within the application. It leverages the Typography
component for consistent typographic styling, offering a range of customization options through its props.
The component defaults to an <code>&lt;h5&gt;</code> HTML tag, providing semantic meaning and ensuring good SEO practices,
but can be customized as needed.</p>


**Source:** `src/lib/components/typography/headline/headline.component.ts`

**Import:**
```typescript
import { HeadlineComponent } from 'tgui-angular';
```

**Properties:**

- `caps`: `any` **[required]** (default: `false`) - No description
- `plain`: `any` **[required]** (default: `true`) - No description

**Example:**
```html
<tgui-headline
  [caps]="value"
  [plain]="value"></tgui-headline>
```

#### LargeTitleComponent

**Selector:** `tgui-large-title`

<p>The LargeTitle component is designed for prominent display text, typically used for major headings
or titles within an application. It encapsulates the Typography component&#39;s features, offering
extensive styling and semantic customization options while defaulting to an <code>&lt;h1&gt;</code> HTML element.
This choice of default component underscores the importance and hierarchy of the text it encapsulates,
making it suitable for primary page titles or significant headings.</p>


**Source:** `src/lib/components/typography/large-title/large-title.component.ts`

**Import:**
```typescript
import { LargeTitleComponent } from 'tgui-angular';
```

**Properties:**

- `caps`: `any` **[required]** (default: `false`) - No description
- `plain`: `any` **[required]** (default: `true`) - No description

**Example:**
```html
<tgui-large-title
  [caps]="value"
  [plain]="value"></tgui-large-title>
```

#### SubheadlineComponent

**Selector:** `tgui-subheadline`

<p>The Subheadline component is designed to render text that serves as a secondary heading
or subheading within content. It leverages the Typography component for consistent text styling,
offering additional control over the text&#39;s size through the <code>level</code> prop. By default, it renders
as an <code>&lt;h6&gt;</code> element but can be customized with the <code>tag</code> property.</p>


**Source:** `src/lib/components/typography/subheadline/subheadline.component.ts`

**Import:**
```typescript
import { SubheadlineComponent } from 'tgui-angular';
```

**Properties:**

- `caps`: `any` **[required]** (default: `false`) - No description
- `plain`: `any` **[required]** (default: `true`) - No description

**Example:**
```html
<tgui-subheadline
  [caps]="value"
  [plain]="value"></tgui-subheadline>
```

#### TextComponent

**Selector:** `tgui-text`

<p>Text component is designed for general-purpose text rendering,
offering a wide range of typographic options. It extends the Typography
component, inheriting its flexibility and styling capabilities.
This component is ideal for paragraphs, labels, or any textual content, providing
consistent styling across the application.</p>


**Source:** `src/lib/components/typography/text/text.component.ts`

**Import:**
```typescript
import { TextComponent } from 'tgui-angular';
```

**Properties:**

- `plain`: `any` **[required]** (default: `true`) - No description
- `caps`: `any` **[required]** (default: `false`) - No description

**Example:**
```html
<tgui-text
  [plain]="value"
  [caps]="value"></tgui-text>
```

#### TitleComponent

**Selector:** `tgui-title`

<p>The Title component is designed to render text as a page or section heading,
providing clear hierarchy and structure within content. It supports three levels of emphasis,
allowing for flexibility in design while maintaining semantic integrity. By default, it uses <code>h3</code>
for its semantic HTML element but can be customized via the <code>level</code> prop or explicitly with the <code>tag</code> property.</p>


**Source:** `src/lib/components/typography/title/title.component.ts`

**Import:**
```typescript
import { TitleComponent } from 'tgui-angular';
```

**Properties:**

- `caps`: `any` **[required]** (default: `false`) - No description
- `plain`: `any` **[required]** (default: `true`) - No description

**Example:**
```html
<tgui-title
  [caps]="value"
  [plain]="value"></tgui-title>
```

#### TypographyComponent

**Selector:** `tgui-typography`

<p>The Typography component is a versatile wrapper for text content, offering
customizable styling options such as weight, capitalization, and HTML tag. It&#39;s designed
to facilitate consistent text styling across your application, with support for customization
through inputs.</p>


**Source:** `src/lib/components/typography/typography.component.ts`

**Import:**
```typescript
import { TypographyComponent } from 'tgui-angular';
```

**Properties:**

- `caps`: `any` **[required]** (default: `false`) - No description
- `plain`: `any` **[required]** (default: `true`) - No description

**Example:**
```html
<tgui-typography
  [caps]="value"
  [plain]="value"></tgui-typography>
```


### NAVIGATION Components

#### BreadcrumbsComponent

**Selector:** `tgui-breadcrumbs`

<p>The Breadcrumbs component displays a navigation trail for users to follow back to the starting or entry point.
It supports customizable dividers to fit different design needs.</p>
<p>Usage:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;tgui-breadcrumbs
  [items]=&quot;[
    { label: &#39;Home&#39;, url: &#39;/&#39; },
    { label: &#39;Catalog&#39;, url: &#39;/catalog&#39; },
    { label: &#39;Product&#39; }
  ]&quot;
  divider=&quot;slash&quot;
&gt;&lt;/tgui-breadcrumbs&gt;</code></pre></div>

**Source:** `src/lib/components/navigation/breadcrumbs/breadcrumbs.component.ts`

**Import:**
```typescript
import { BreadcrumbsComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-breadcrumbs></tgui-breadcrumbs>
```

#### BreadcrumbsDotIconComponent

**Selector:** `tgui-breadcrumbs-dot-icon`

<p>Dot icon used in breadcrumb navigation as a separator</p>


**Source:** `src/lib/components/navigation/breadcrumbs/icons/dot-icon.component.ts`

**Import:**
```typescript
import { BreadcrumbsDotIconComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-breadcrumbs-dot-icon></tgui-breadcrumbs-dot-icon>
```

#### BreadcrumbsItemComponent

**Selector:** `tgui-breadcrumbs-item`

<p>A component that represents a single item within a breadcrumb navigation.
It can be used standalone or as part of a BreadCrumbs collection.</p>


**Source:** `src/lib/components/navigation/breadcrumbs/breadcrumbs-item.component.ts`

**Import:**
```typescript
import { BreadcrumbsItemComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-breadcrumbs-item></tgui-breadcrumbs-item>
```

#### BreadcrumbsSlashIconComponent

**Selector:** `tgui-breadcrumbs-slash-icon`

<p>Slash icon used in breadcrumb navigation as a separator</p>


**Source:** `src/lib/components/navigation/breadcrumbs/icons/slash-icon.component.ts`

**Import:**
```typescript
import { BreadcrumbsSlashIconComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-breadcrumbs-slash-icon></tgui-breadcrumbs-slash-icon>
```

#### CompactPaginationComponent

**Selector:** `tgui-compact-pagination`

<p>CompactPagination component displays a set of dots for pagination.
It&#39;s typically used in carousels, sliders, or any component requiring compact pagination controls.</p>
<p>The component supports different visual modes and manages the state of its pagination items.</p>


**Source:** `src/lib/components/navigation/compact-pagination/compact-pagination.component.ts`

**Import:**
```typescript
import { CompactPaginationComponent } from 'tgui-angular';
```

**Properties:**

- `selectedIndex`: `any` **[required]** (default: `0`) - <p>Selected index</p>


**Events:**

- `selectedIndexChange`: `EventEmitter` - <p>Selected index change event</p>


**Methods:**

- `selectItem(index: number): void` - <p>Select item by index</p>


**Example:**
```html
<tgui-compact-pagination
  [selectedIndex]="value"></tgui-compact-pagination>
```

#### CompactPaginationItemComponent

**Selector:** `tgui-compact-pagination-item`

<p>CompactPaginationItem component represents an individual dot in a compact pagination.
It visually indicates whether it is selected and provides accessibility features.</p>


**Source:** `src/lib/components/navigation/compact-pagination/compact-pagination-item.component.ts`

**Import:**
```typescript
import { CompactPaginationItemComponent } from 'tgui-angular';
```

**Properties:**

- `selected`: `any` **[required]** (default: `false`) - <p>External selected state</p>


**Events:**

- `select`: `EventEmitter` - <p>Select event</p>


**Methods:**

- `onClick(): void` - <p>Click handler</p>

- `setSelected(value: boolean): void` - <p>Public method to set selected state from parent component</p>


**Example:**
```html
<tgui-compact-pagination-item
  [selected]="value"></tgui-compact-pagination-item>
```

#### LinkComponent

**Selector:** `tgui-link`

<p>Link component provides a customizable anchor element.
Used for navigation with proper styling following the Telegram UI guidelines.</p>


**Source:** `src/lib/components/navigation/link/link.component.ts`

**Import:**
```typescript
import { LinkComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-link></tgui-link>
```

#### PaginationComponent

**Selector:** `tgui-pagination`

<p>The Pagination component displays a set of navigation controls allowing users to navigate through pages of content.
It is built on top of a custom hook that manages pagination logic and state.
This component can be customized to hide next/previous buttons, specify boundary and sibling count for pagination items,
and handle page changes through a pageChange output.</p>


**Source:** `src/lib/components/navigation/pagination/pagination.component.ts`

**Import:**
```typescript
import { PaginationComponent } from 'tgui-angular';
```

**Properties:**

- `boundaryCount`: `any` **[required]** (default: `1`) - <p>Number of always visible pages at the beginning and end.</p>

- `count`: `any` **[required]** (default: `1`) - <p>The total number of pages.</p>

- `defaultPage`: `any` **[required]** (default: `1`) - <p>The page selected by default when the component is uncontrolled.</p>

- `disabled`: `any` **[required]** (default: `false`) - <p>Controls whether the Pagination component is interactive.</p>

- `hideNextButton`: `any` **[required]** (default: `false`) - <p>If <code>true</code>, hide the next-page button.</p>

- `hidePrevButton`: `any` **[required]** (default: `false`) - <p>If <code>true</code>, hide the previous-page button.</p>

- `siblingCount`: `any` **[required]** (default: `1`) - <p>Number of always visible pages before and after the current page.</p>


**Events:**

- `pageChange`: `EventEmitter` - <p>Event emitted when the page changes.</p>


**Methods:**

- `handleItemClick(item: PaginationItem): void` - <p>Handle item click if the item is not disabled and not an ellipsis</p>

- `isEllipsis(item: PaginationItem): boolean` - <p>Check if an item is an ellipsis</p>


**Example:**
```html
<tgui-pagination
  [boundaryCount]="value"
  [count]="value"
  [defaultPage]="value"></tgui-pagination>
```

#### SegmentedControlComponent

**Selector:** `tgui-segmented-control`

<p>The SegmentedControl component renders a set of options as a segmented control,
commonly used for toggling between views or filtering content.
It is designed to adapt its appearance based on the platform,
offering a native look and feel.</p>


**Source:** `src/lib/components/navigation/segmented-control/segmented-control.component.ts`

**Import:**
```typescript
import { SegmentedControlComponent } from 'tgui-angular';
```

**Properties:**

- `selectedIndex`: `any` **[required]** (default: `0`) - <p>Selected tab index</p>


**Events:**

- `selectedIndexChange`: `EventEmitter` - <p>Selected index change event</p>


**Methods:**

- `getSliderTransform(): string` - <p>Get slider transform</p>

- `selectTab(index: number): void` - <p>Select tab by index</p>


**Example:**
```html
<tgui-segmented-control
  [selectedIndex]="value"></tgui-segmented-control>
```

#### SegmentedControlDemoComponent

**Selector:** `tgui-segmented-control-demo`

No description available

**Source:** `src/lib/components/navigation/segmented-control/story/segmented-control.stories.ts`

**Import:**
```typescript
import { SegmentedControlDemoComponent } from 'tgui-angular';
```

**Methods:**

- `onSelectionChange(index: number): void` - No description

**Example:**
```html
<tgui-segmented-control-demo></tgui-segmented-control-demo>
```

#### SegmentedControlItemComponent

**Selector:** `tgui-segmented-control-item`

<p>SegmentedControlItem component represents an individual item within a SegmentedControl.
It can be interactively selected to display associated content.</p>


**Source:** `src/lib/components/navigation/segmented-control/segmented-control-item.component.ts`

**Import:**
```typescript
import { SegmentedControlItemComponent } from 'tgui-angular';
```

**Properties:**

- `selected`: `any` **[required]** (default: `false`) - <p>External parameter to mark item as selected</p>


**Events:**

- `select`: `EventEmitter` - <p>Event triggered when the item is clicked</p>


**Methods:**

- `onClick(): void` - <p>Handle click on the item</p>

- `setSelected(value: boolean): void` - <p>Public method to set the selection state
from the parent component</p>


**Example:**
```html
<tgui-segmented-control-item
  [selected]="value"></tgui-segmented-control-item>
```

#### TabsItemComponent

**Selector:** `tgui-tabs-item`

<p>TabsItem component represents an individual tab within a TabsList.
It can be interactively selected to display associated content.</p>


**Source:** `src/lib/components/navigation/tabs-list/tabs-item.component.ts`

**Import:**
```typescript
import { TabsItemComponent } from 'tgui-angular';
```

**Properties:**

- `selected`: `any` **[required]** (default: `false`) - <p>External parameter for tab selection</p>


**Events:**

- `select`: `EventEmitter` - <p>Event that fires when tab is clicked</p>


**Methods:**

- `onClick(): void` - <p>Tab click handler</p>

- `setSelected(value: boolean): void` - <p>Public method to set tab selection value
from parent component</p>


**Example:**
```html
<tgui-tabs-item
  [selected]="value"></tgui-tabs-item>
```

#### TabsListComponent

**Selector:** `tgui-tabs-list`

<p>The TabsList component renders a list of tabs, typically used for navigating between different views
or filtering content. It visually indicates the currently active tab and supports custom styling.</p>


**Source:** `src/lib/components/navigation/tabs-list/tabs-list.component.ts`

**Import:**
```typescript
import { TabsListComponent } from 'tgui-angular';
```

**Properties:**

- `selectedIndex`: `any` **[required]** (default: `0`) - <p>Index of selected tab</p>


**Events:**

- `selectedIndexChange`: `EventEmitter` - <p>Event for selected tab change</p>


**Methods:**

- `getSliderTransform(): string` - <p>Gets transformation for slider</p>

- `selectTab(index: number): void` - <p>Selects tab by index</p>


**Example:**
```html
<tgui-tabs-list
  [selectedIndex]="value">
  <!-- Content goes here -->
</tgui-tabs-list>
```

#### TabsListDemoComponent

**Selector:** `tgui-tabs-list-demo`

No description available

**Source:** `src/lib/components/navigation/tabs-list/story/tabs-list.stories.ts`

**Import:**
```typescript
import { TabsListDemoComponent } from 'tgui-angular';
```

**Methods:**

- `onTabChange(index: number): void` - No description

**Example:**
```html
<tgui-tabs-list-demo>
  <!-- Content goes here -->
</tgui-tabs-list-demo>
```

#### TabsListWithContentDemoComponent

**Selector:** `tgui-tabs-list-content-demo`

No description available

**Source:** `src/lib/components/navigation/tabs-list/story/tabs-list-with-content.stories.ts`

**Import:**
```typescript
import { TabsListWithContentDemoComponent } from 'tgui-angular';
```

**Methods:**

- `setActiveTab(index: number): void` - No description

**Example:**
```html
<tgui-tabs-list-content-demo>
  <!-- Content goes here -->
</tgui-tabs-list-content-demo>
```


### FEEDBACK Components

#### BaseSpinnerComponent

**Selector:** `tgui-base-spinner`

No description available

**Source:** `src/lib/components/feedback/spinner/components/base-spinner/base-spinner.component.ts`

**Import:**
```typescript
import { BaseSpinnerComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-base-spinner></tgui-base-spinner>
```

#### CircularProgressComponent

**Selector:** `tgui-circular-progress`

<p>Renders a circular progress indicator, useful for displaying loading states or progress metrics.
The component dynamically adjusts its size and stroke based on the provided <code>size</code> input and visually represents
the <code>progress</code> input as a percentage of the circle&#39;s circumference.</p>


**Source:** `src/lib/components/feedback/circular-progress/circular-progress.component.ts`

**Import:**
```typescript
import { CircularProgressComponent } from 'tgui-angular';
```

**Properties:**

- `progress`: `any` **[required]** (default: `0`) - <p>Current progress of the circular indicator, expressed as a percentage from 0 to 100.</p>


**Example:**
```html
<tgui-circular-progress
  [progress]="value"></tgui-circular-progress>
```

#### DemoSnackbarComponent

**Selector:** `demo-snackbar`

No description available

**Source:** `src/lib/components/feedback/snackbar/story/snackbar.stories.ts`

**Import:**
```typescript
import { DemoSnackbarComponent } from 'tgui-angular';
```

**Methods:**

- `showDeleteSnackbar(): void` - No description
- `showUndoSnackbar(): void` - No description

**Example:**
```html
<demo-snackbar></demo-snackbar>
```

#### IOSSpinnerComponent

**Selector:** `tgui-ios-spinner`

No description available

**Source:** `src/lib/components/feedback/spinner/components/ios-spinner/ios-spinner.component.ts`

**Import:**
```typescript
import { IOSSpinnerComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-ios-spinner></tgui-ios-spinner>
```

#### ProgressComponent

**Selector:** `tgui-progress`

<p>Renders a linear progress bar that visually represents completion percentage towards a goal.
The component respects accessibility standards by including appropriate ARIA attributes.</p>


**Source:** `src/lib/components/feedback/progress/progress.component.ts`

**Import:**
```typescript
import { ProgressComponent } from 'tgui-angular';
```

**Properties:**

- `value`: `any` **[required]** (default: `0`) - <p>The current value of the progress bar, expressed as a percentage.
The value should be between 0 and 100.</p>


**Example:**
```html
<tgui-progress
  [value]="value"></tgui-progress>
```

#### SkeletonComponent

**Selector:** `tgui-skeleton`

<p>Used as a placeholder during the loading state of a component or page.
It can visually mimic the layout that will be replaced by the actual content once loaded,
improving user experience by reducing perceived loading times.</p>


**Source:** `src/lib/components/feedback/skeleton/skeleton.component.ts`

**Import:**
```typescript
import { SkeletonComponent } from 'tgui-angular';
```

**Properties:**

- `visible`: `any` **[required]** (default: `true`) - <p>If true, the skeleton overlay is shown above the content.
When false, the skeleton is hidden, showing any underlying content.</p>

- `withoutAnimation`: `any` **[required]** (default: `false`) - <p>If true, disables the shimmering animation of the skeleton.</p>


**Example:**
```html
<tgui-skeleton
  [visible]="value"
  [withoutAnimation]="value"></tgui-skeleton>
```

#### SnackbarButtonComponent

**Selector:** `tgui-snackbar-button`

No description available

**Source:** `src/lib/components/feedback/snackbar/components/snackbar-button/snackbar-button.component.ts`

**Import:**
```typescript
import { SnackbarButtonComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-snackbar-button>
  <!-- Content goes here -->
</tgui-snackbar-button>
```

#### SnackbarComponent

**Selector:** `tgui-snackbar`

No description available

**Source:** `src/lib/components/feedback/snackbar/snackbar.component.ts`

**Import:**
```typescript
import { SnackbarComponent } from 'tgui-angular';
```

**Properties:**

- `description`: `string` - No description
- `duration`: `number` (default: `4000`) - No description
- `onClose`: `function` - No description

**Methods:**

- `close(): void` - No description
- `startCloseTimer(): void` - No description

**Example:**
```html
<tgui-snackbar></tgui-snackbar>
```

#### SpinnerComponent

**Selector:** `tgui-spinner`

<p>Spinner component displays a loading indicator.
Automatically selects the appropriate indicator style based on the platform.</p>


**Source:** `src/lib/components/feedback/spinner/spinner.component.ts`

**Import:**
```typescript
import { SpinnerComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-spinner></tgui-spinner>
```

#### SpoilerComponent

**Selector:** `tgui-spoiler`

<p>Provides a way to hide or show content, such as details or spoilers, with a simple click.
The visibility state can be controlled externally via props or toggled by user interaction.</p>


**Source:** `src/lib/components/feedback/spoiler/spoiler.component.ts`

**Import:**
```typescript
import { SpoilerComponent } from 'tgui-angular';
```

**Properties:**

- `visible`: `any` **[required]** (default: `false`) - No description

**Methods:**

- `onClick(event: Event): void` - No description
- `onKeyDown(event: KeyboardEvent): void` - No description

**Example:**
```html
<tgui-spoiler
  [visible]="value"></tgui-spoiler>
```


### OVERLAYS Components

#### FloatingArrowComponent

**Selector:** `tgui-floating-arrow`

<p>FloatingArrow dynamically positions an arrow indicator relative to a floating element,
such as a tooltip to signify its association with a target element.
Supports custom arrow icons and positioning adjustments.</p>


**Source:** `src/lib/components/overlays/popper/components/floating-arrow/floating-arrow.component.ts`

**Import:**
```typescript
import { FloatingArrowComponent } from 'tgui-angular';
```

**Properties:**

- `isStaticOffset`: `any` **[required]** (default: `false`) - No description

**Example:**
```html
<tgui-floating-arrow
  [isStaticOffset]="value"></tgui-floating-arrow>
```

#### ModalCloseComponent

**Selector:** `tgui-modal-close`

<p>Modal close button component providing accessible close functionality.
Must be used within a Modal component to function properly.
Supports custom content and interactive animations.</p>


**Source:** `src/lib/components/overlays/modal/modal-close.component.ts`

**Import:**
```typescript
import { ModalCloseComponent } from 'tgui-angular';
```

**Methods:**

- `handleClick(): void` - No description
- `handleKeyDown(event: KeyboardEvent): void` - No description

**Example:**
```html
<tgui-modal-close></tgui-modal-close>
```

#### ModalComponent

**Selector:** `tgui-modal`

<p>Modal component providing a flexible dialog framework with customizable content.
Supports swipe gestures, snap points, and portal rendering for mobile-optimized experience.
Based on React TGUI Modal component but implemented with Angular Signal API.</p>


**Source:** `src/lib/components/overlays/modal/modal.component.ts`

**Import:**
```typescript
import { ModalComponent } from 'tgui-angular';
```

**Properties:**

- `dismissible`: `any` **[required]** (default: `true`) - No description
- `modal`: `any` **[required]** (default: `true`) - No description
- `nested`: `any` **[required]** (default: `false`) - No description
- `open`: `any` **[required]** (default: `false`) - No description
- `preventScrollRestoration`: `any` **[required]** (default: `true`) - No description
- `scrollLockTimeout`: `any` **[required]** (default: `500`) - No description

**Events:**

- `openChange`: `EventEmitter` - No description

**Methods:**

- `closeModal(): void` - No description
- `handleDrag(gesture: TouchEvent): void` - No description
- `handleDragEnd(gesture: TouchEvent): void` - No description
- `handleDragStart(gesture: TouchEvent): void` - No description
- `handleKeyDown(event: KeyboardEvent): void` - No description
- `handleOverlayClick(): void` - No description
- `handleTriggerClick(): void` - No description
- `isOpen(): boolean` - No description
- `openModal(): void` - No description

**Example:**
```html
<tgui-modal
  [dismissible]="value"
  [modal]="value"
  [nested]="value"></tgui-modal>
```

#### ModalDemoComponent

**Selector:** `tgui-modal-demo`

No description available

**Source:** `src/lib/components/overlays/modal/story/modal.stories.ts`

**Import:**
```typescript
import { ModalDemoComponent } from 'tgui-angular';
```

**Properties:**

- `dismissible`: `any` **[required]** (default: `true`) - No description
- `modal`: `any` **[required]** (default: `true`) - No description
- `preventScrollRestoration`: `any` **[required]** (default: `true`) - No description
- `scrollLockTimeout`: `any` **[required]** (default: `500`) - No description
- `showCloseButton`: `any` **[required]** (default: `false`) - No description
- `showHeader`: `any` **[required]** (default: `true`) - No description

**Methods:**

- `closeModal(): void` - No description
- `onOpenChange(open: boolean): void` - No description
- `openModal(): void` - No description

**Example:**
```html
<tgui-modal-demo
  [dismissible]="value"
  [modal]="value"
  [preventScrollRestoration]="value"></tgui-modal-demo>
```

#### ModalHeaderComponent

**Selector:** `tgui-modal-header`

<p>Modal header component providing a title area with drag handle indicator.
Supports before/after content slots for additional elements like close buttons.
Only visible on iOS platform following design guidelines.</p>


**Source:** `src/lib/components/overlays/modal/modal-header.component.ts`

**Import:**
```typescript
import { ModalHeaderComponent } from 'tgui-angular';
```

**Properties:**

- `forceHide`: `any` **[required]** (default: `false`) - <p>Force hide header regardless of platform</p>

- `forceShow`: `any` **[required]** (default: `false`) - <p>Force show header regardless of platform</p>


**Example:**
```html
<tgui-modal-header
  [forceHide]="value"
  [forceShow]="value"></tgui-modal-header>
```

#### ModalOverlayComponent

**Selector:** `tgui-modal-overlay`

<p>Modal overlay component providing a backdrop behind the modal content.
Supports theme-aware background colors and customizable opacity.</p>


**Source:** `src/lib/components/overlays/modal/modal-overlay.component.ts`

**Import:**
```typescript
import { ModalOverlayComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-modal-overlay></tgui-modal-overlay>
```

#### ModalStoryWrapperComponent

**Selector:** `tgui-modal-story-wrapper`

No description available

**Source:** `src/lib/components/overlays/modal/story/modal.stories.ts`

**Import:**
```typescript
import { ModalStoryWrapperComponent } from 'tgui-angular';
```

**Properties:**

- `closeThreshold`: `number` (default: `0.5`) - No description
- `dismissible`: `boolean` (default: `true`) - No description
- `headerText`: `string` (default: `'Modal Header'`) - No description
- `modal`: `boolean` (default: `true`) - No description
- `preventScrollRestoration`: `boolean` (default: `true`) - No description
- `scrollLockTimeout`: `number` (default: `500`) - No description
- `showCloseButton`: `boolean` (default: `false`) - No description
- `showHeader`: `boolean` (default: `true`) - No description
- `snapPoints`: `(number | string)[]` (default: `[]`) - No description
- `theme`: `"light" | "dark"` (default: `'light'`) - No description

**Example:**
```html
<tgui-modal-story-wrapper></tgui-modal-story-wrapper>
```

#### PopperComponent

**Selector:** `tgui-popper`

<p>Renders a Popper component, leveraging floating UI for dynamic, responsive positioning.
Supports advanced configurations like virtual elements, custom arrows, and auto-position updates.</p>


**Source:** `src/lib/components/overlays/popper/popper.component.ts`

**Import:**
```typescript
import { PopperComponent } from 'tgui-angular';
```

**Properties:**

- `autoUpdateOnTargetResize`: `any` **[required]** (default: `false`) - No description
- `offsetByCrossAxis`: `any` **[required]** (default: `0`) - No description
- `offsetByMainAxis`: `any` **[required]** (default: `8`) - No description
- `sameWidth`: `any` **[required]** (default: `false`) - No description
- `withArrow`: `any` **[required]** (default: `true`) - No description

**Events:**

- `popperCreated`: `EventEmitter` - No description
- `popperShown`: `EventEmitter` - No description
- `popperUpdated`: `EventEmitter` - No description

**Methods:**

- `cleanupFloating(): void` - No description
- `setupFloating(): void` - No description

**Example:**
```html
<tgui-popper
  [autoUpdateOnTargetResize]="value"
  [offsetByCrossAxis]="value"
  [offsetByMainAxis]="value"></tgui-popper>
```

#### PopperDemoComponent

**Selector:** `tgui-popper-demo`

No description available

**Source:** `src/lib/components/overlays/popper/story/popper.stories.ts`

**Import:**
```typescript
import { PopperDemoComponent } from 'tgui-angular';
```

**Properties:**

- `offsetByCrossAxis`: `number` (default: `0`) - No description
- `offsetByMainAxis`: `number` (default: `8`) - No description
- `placement`: `string` (default: `'auto'`) - No description
- `sameWidth`: `boolean` (default: `false`) - No description
- `withArrow`: `boolean` (default: `true`) - No description

**Methods:**

- `initializeVirtualElement(): void` - No description
- `onPopperCreated(instance: any): void` - No description
- `onPopperShown(): void` - No description
- `onPopperUpdated(state: any): void` - No description
- `trackMousePosition(event: MouseEvent): void` - No description
- `updateVirtualElement(event: MouseEvent): void` - No description

**Example:**
```html
<tgui-popper-demo></tgui-popper-demo>
```

#### PopperStoryWrapperComponent

**Selector:** `tgui-popper-story-wrapper`

No description available

**Source:** `src/lib/components/overlays/popper/story/popper.stories.ts`

**Import:**
```typescript
import { PopperStoryWrapperComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-popper-story-wrapper></tgui-popper-story-wrapper>
```

#### StoryRootComponent

**Selector:** `tgui-story-root`

No description available

**Source:** `src/lib/components/overlays/modal/story/modal.stories.ts`

**Import:**
```typescript
import { StoryRootComponent } from 'tgui-angular';
```

**Properties:**

- `appearance`: `AppearanceType` (default: `'light'`) - No description
- `followSystemTheme`: `boolean` (default: `false`) - No description
- `platform`: `PlatformType` (default: `'base'`) - No description

**Example:**
```html
<tgui-story-root></tgui-story-root>
```

#### StoryRootComponent

**Selector:** `tgui-story-root`

No description available

**Source:** `src/lib/components/overlays/popper/story/popper.stories.ts`

**Import:**
```typescript
import { StoryRootComponent } from 'tgui-angular';
```

**Properties:**

- `appearance`: `AppearanceType` (default: `'light'`) - No description
- `followSystemTheme`: `boolean` (default: `false`) - No description
- `platform`: `PlatformType` (default: `'base'`) - No description

**Example:**
```html
<tgui-story-root></tgui-story-root>
```

#### StoryRootComponent

**Selector:** `tgui-story-root`

No description available

**Source:** `src/lib/components/overlays/tooltip/story/tooltip.stories.ts`

**Import:**
```typescript
import { StoryRootComponent } from 'tgui-angular';
```

**Properties:**

- `appearance`: `AppearanceType` (default: `'light'`) - No description
- `followSystemTheme`: `boolean` (default: `false`) - No description
- `platform`: `PlatformType` (default: `'base'`) - No description

**Example:**
```html
<tgui-story-root></tgui-story-root>
```

#### TooltipComponent

**Selector:** `tgui-tooltip`

<p>TODO: Implement as a directive to allow usage like:
&lt;tgui-button tguiTooltip [tguiTooltipContent]=&quot;TEMPLATE OR STRING CONTENT&quot;&gt;</p>
<p>The Tooltip component provides text labels that appear when the user hovers over, focuses on,
or touches an element. It&#39;s built on top of the Popper component for automatic positioning
relative to the target element. The tooltip supports light and dark modes for different visual
contexts and uses the Caption component for its content to ensure consistent typography.</p>


**Source:** `src/lib/components/overlays/tooltip/tooltip.component.ts`

**Import:**
```typescript
import { TooltipComponent } from 'tgui-angular';
```

**Properties:**

- `autoUpdateOnTargetResize`: `any` **[required]** (default: `false`) - <p>Whether to update tooltip position when target element resizes</p>

- `offsetByCrossAxis`: `any` **[required]** (default: `0`) - <p>Offset along the cross axis</p>

- `offsetByMainAxis`: `any` **[required]** (default: `8`) - <p>Offset along the main axis</p>

- `sameWidth`: `any` **[required]** (default: `false`) - <p>Match width of the tooltip with target element</p>


**Example:**
```html
<tgui-tooltip
  [autoUpdateOnTargetResize]="value"
  [offsetByCrossAxis]="value"
  [offsetByMainAxis]="value"></tgui-tooltip>
```

#### TooltipDemoComponent

**Selector:** `tgui-tooltip-demo`

No description available

**Source:** `src/lib/components/overlays/tooltip/story/tooltip.stories.ts`

**Import:**
```typescript
import { TooltipDemoComponent } from 'tgui-angular';
```

**Properties:**

- `mode`: `"light" | "dark"` (default: `'light'`) - No description
- `placement`: `string` (default: `'auto'`) - No description
- `sameWidth`: `boolean` (default: `false`) - No description

**Methods:**

- `toggleTooltip(): void` - No description

**Example:**
```html
<tgui-tooltip-demo
  [mode]="value"></tgui-tooltip-demo>
```

#### TooltipStoryWrapperComponent

**Selector:** `tgui-tooltip-story-wrapper`

No description available

**Source:** `src/lib/components/overlays/tooltip/story/tooltip.stories.ts`

**Import:**
```typescript
import { TooltipStoryWrapperComponent } from 'tgui-angular';
```

**Properties:**

- `mode`: `"light" | "dark"` (default: `'light'`) - No description
- `placement`: `string` (default: `'auto'`) - No description
- `sameWidth`: `boolean` (default: `false`) - No description

**Example:**
```html
<tgui-tooltip-story-wrapper
  [mode]="value"></tgui-tooltip-story-wrapper>
```


### LAYOUT Components

#### FixedLayoutComponent

**Selector:** `tgui-fixed-layout`

<p>This component provides a flexible way to create a layout that is fixed to either the top or bottom of its parent container.
It&#39;s useful for creating headers, footers, or any element that should remain in view regardless of the scrolling content.</p>


**Source:** `src/lib/components/layout/fixed-layout/fixed-layout.component.ts`

**Import:**
```typescript
import { FixedLayoutComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-fixed-layout></tgui-fixed-layout>
```

#### TabbarComponent

**Selector:** `tgui-tabbar`

<p>Serves as a container for <code>TabbarItem</code> components, rendering a navigational tab bar.
Utilizes a <code>FixedLayout</code> to ensure the tab bar remains positioned at a specific area within a view,
typically at the bottom of the screen, making it ideal for mobile or web application navigation menus.</p>
<p>The component adapts its styling based on the platform, providing a consistent look and feel across different devices.</p>


**Source:** `src/lib/components/layout/tabbar/tabbar.component.ts`

**Import:**
```typescript
import { TabbarComponent } from 'tgui-angular';
```

**Properties:**

- `selectedIndex`: `any` **[required]** (default: `0`) - <p>Index of the selected tab</p>


**Events:**

- `selectedIndexChange`: `EventEmitter` - <p>Event emitted when selected tab changes</p>


**Methods:**

- `selectTab(index: number): void` - <p>Handles tab selection event</p>


**Example:**
```html
<tgui-tabbar
  [selectedIndex]="value"></tgui-tabbar>
```

#### TabbarItemComponent

**Selector:** `tgui-tabbar-item`

<p>Represents an individual tab within a <code>Tabbar</code>.
Each <code>TabbarItem</code> typically contains an icon and optional text.
When selected, the tab exhibits different visual styles to indicate its active state.</p>
<p>The component adapts its styling based on the platform, providing a consistent look and feel across different devices.</p>


**Source:** `src/lib/components/layout/tabbar/tabbar-item.component.ts`

**Import:**
```typescript
import { TabbarItemComponent } from 'tgui-angular';
```

**Methods:**

- `onClick(): void` - No description

**Example:**
```html
<tgui-tabbar-item></tgui-tabbar-item>
```


### MISC Components

#### DividerComponent

**Selector:** `tgui-divider`

<p>Represents a horizontal line used to separate content within a layout or component.
The component allows customization through custom CSS classes.</p>


**Source:** `src/lib/components/misc/divider/divider.component.ts`

**Import:**
```typescript
import { DividerComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-divider></tgui-divider>
```

#### IconsShowcaseComponent

**Selector:** `tgui-icons-showcase`

No description available

**Source:** `src/lib/icons/story/icons.stories.ts`

**Import:**
```typescript
import { IconsShowcaseComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-icons-showcase></tgui-icons-showcase>
```

#### TguiComponent

**Selector:** `tgui-root`

No description available

**Source:** `src/lib/tgui.component.ts`

**Import:**
```typescript
import { TguiComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-root></tgui-root>
```

#### TguiDynamicIconComponent

**Selector:** `tgui-dynamic-icon`

No description available

**Source:** `src/lib/icons/dynamic-icon.component.ts`

**Import:**
```typescript
import { TguiDynamicIconComponent } from 'tgui-angular';
```

**Properties:**

- `icon`: `string` - No description

**Example:**
```html
<tgui-dynamic-icon></tgui-dynamic-icon>
```

#### TguiIcon12Quote

**Selector:** `tgui-icon12-quote`

No description available

**Source:** `src/lib/icons/icon12/tgui-icon12-quote.ts`

**Import:**
```typescript
import { TguiIcon12Quote } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon12-quote></tgui-icon12-quote>
```

#### TguiIcon16Cancel

**Selector:** `tgui-icon16-cancel`

No description available

**Source:** `src/lib/icons/icon16/tgui-icon16-cancel.ts`

**Import:**
```typescript
import { TguiIcon16Cancel } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon16-cancel></tgui-icon16-cancel>
```

#### TguiIcon16Chevron

**Selector:** `tgui-icon16-chevron`

No description available

**Source:** `src/lib/icons/icon16/tgui-icon16-chevron.ts`

**Import:**
```typescript
import { TguiIcon16Chevron } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon16-chevron></tgui-icon16-chevron>
```

#### TguiIcon20ChevronDown

**Selector:** `tgui-icon20-chevron-down`

No description available

**Source:** `src/lib/icons/icon20/tgui-icon20-chevron-down.ts`

**Import:**
```typescript
import { TguiIcon20ChevronDown } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon20-chevron-down></tgui-icon20-chevron-down>
```

#### TguiIcon20Copy

**Selector:** `tgui-icon20-copy`

No description available

**Source:** `src/lib/icons/icon20/tgui-icon20-copy.ts`

**Import:**
```typescript
import { TguiIcon20Copy } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon20-copy></tgui-icon20-copy>
```

#### TguiIcon20QuestionMark

**Selector:** `tgui-icon20-question-mark`

No description available

**Source:** `src/lib/icons/icon20/tgui-icon20-question-mark.ts`

**Import:**
```typescript
import { TguiIcon20QuestionMark } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon20-question-mark></tgui-icon20-question-mark>
```

#### TguiIcon20Select

**Selector:** `tgui-icon20-select`

No description available

**Source:** `src/lib/icons/icon20/tgui-icon20-select.ts`

**Import:**
```typescript
import { TguiIcon20Select } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon20-select></tgui-icon20-select>
```

#### TguiIcon20SelectIos

**Selector:** `tgui-icon20-select-ios`

No description available

**Source:** `src/lib/icons/icon20/tgui-icon20-select-ios.ts`

**Import:**
```typescript
import { TguiIcon20SelectIos } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon20-select-ios></tgui-icon20-select-ios>
```

#### TguiIcon24Cancel

**Selector:** `tgui-icon24-cancel`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-cancel.ts`

**Import:**
```typescript
import { TguiIcon24Cancel } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-cancel></tgui-icon24-cancel>
```

#### TguiIcon24Channel

**Selector:** `tgui-icon24-channel`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-channel.ts`

**Import:**
```typescript
import { TguiIcon24Channel } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-channel></tgui-icon24-channel>
```

#### TguiIcon24Chat

**Selector:** `tgui-icon24-chat`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-chat.ts`

**Import:**
```typescript
import { TguiIcon24Chat } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-chat></tgui-icon24-chat>
```

#### TguiIcon24ChevronDown

**Selector:** `tgui-icon24-chevron-down`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-chevron-down.ts`

**Import:**
```typescript
import { TguiIcon24ChevronDown } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-chevron-down></tgui-icon24-chevron-down>
```

#### TguiIcon24ChevronLeft

**Selector:** `tgui-icon24-chevron-left`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-chevron-left.ts`

**Import:**
```typescript
import { TguiIcon24ChevronLeft } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-chevron-left></tgui-icon24-chevron-left>
```

#### TguiIcon24ChevronRight

**Selector:** `tgui-icon24-chevron-right`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-chevron-right.ts`

**Import:**
```typescript
import { TguiIcon24ChevronRight } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-chevron-right></tgui-icon24-chevron-right>
```

#### TguiIcon24Close

**Selector:** `tgui-icon24-close`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-close.ts`

**Import:**
```typescript
import { TguiIcon24Close } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-close></tgui-icon24-close>
```

#### TguiIcon24Notifications

**Selector:** `tgui-icon24-notifications`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-notifications.ts`

**Import:**
```typescript
import { TguiIcon24Notifications } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-notifications></tgui-icon24-notifications>
```

#### TguiIcon24PersonRemove

**Selector:** `tgui-icon24-person-remove`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-person-remove.ts`

**Import:**
```typescript
import { TguiIcon24PersonRemove } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-person-remove></tgui-icon24-person-remove>
```

#### TguiIcon24Qr

**Selector:** `tgui-icon24-qr`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-qr.ts`

**Import:**
```typescript
import { TguiIcon24Qr } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-qr></tgui-icon24-qr>
```

#### TguiIcon24SunLow

**Selector:** `tgui-icon24-sun-low`

No description available

**Source:** `src/lib/icons/icon24/tgui-icon24-sun-low.ts`

**Import:**
```typescript
import { TguiIcon24SunLow } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon24-sun-low></tgui-icon24-sun-low>
```

#### TguiIcon28AddCircle

**Selector:** `tgui-icon28-add-circle`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-add-circle.ts`

**Import:**
```typescript
import { TguiIcon28AddCircle } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-add-circle></tgui-icon28-add-circle>
```

#### TguiIcon28Archive

**Selector:** `tgui-icon28-archive`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-archive.ts`

**Import:**
```typescript
import { TguiIcon28Archive } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-archive></tgui-icon28-archive>
```

#### TguiIcon28Attach

**Selector:** `tgui-icon28-attach`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-attach.ts`

**Import:**
```typescript
import { TguiIcon28Attach } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-attach></tgui-icon28-attach>
```

#### TguiIcon28Chat

**Selector:** `tgui-icon28-chat`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-chat.ts`

**Import:**
```typescript
import { TguiIcon28Chat } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-chat></tgui-icon28-chat>
```

#### TguiIcon28Close

**Selector:** `tgui-icon28-close`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-close.ts`

**Import:**
```typescript
import { TguiIcon28Close } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-close></tgui-icon28-close>
```

#### TguiIcon28CloseAmbient

**Selector:** `tgui-icon28-close-ambient`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-close-ambient.ts`

**Import:**
```typescript
import { TguiIcon28CloseAmbient } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-close-ambient></tgui-icon28-close-ambient>
```

#### TguiIcon28Devices

**Selector:** `tgui-icon28-devices`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-devices.ts`

**Import:**
```typescript
import { TguiIcon28Devices } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-devices></tgui-icon28-devices>
```

#### TguiIcon28Edit

**Selector:** `tgui-icon28-edit`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-edit.ts`

**Import:**
```typescript
import { TguiIcon28Edit } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-edit></tgui-icon28-edit>
```

#### TguiIcon28Heart

**Selector:** `tgui-icon28-heart`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-heart.ts`

**Import:**
```typescript
import { TguiIcon28Heart } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-heart></tgui-icon28-heart>
```

#### TguiIcon28Stats

**Selector:** `tgui-icon28-stats`

No description available

**Source:** `src/lib/icons/icon28/tgui-icon28-stats.ts`

**Import:**
```typescript
import { TguiIcon28Stats } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon28-stats></tgui-icon28-stats>
```

#### TguiIcon32ProfileColoredSquare

**Selector:** `tgui-icon32-profile-colored-square`

No description available

**Source:** `src/lib/icons/icon32/tgui-icon32-profile-colored-square.ts`

**Import:**
```typescript
import { TguiIcon32ProfileColoredSquare } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon32-profile-colored-square></tgui-icon32-profile-colored-square>
```

#### TguiIcon36Backspace

**Selector:** `tgui-icon36-backspace`

No description available

**Source:** `src/lib/icons/icon36/tgui-icon36-backspace.ts`

**Import:**
```typescript
import { TguiIcon36Backspace } from 'tgui-angular';
```

**Example:**
```html
<tgui-icon36-backspace></tgui-icon36-backspace>
```

#### TguiIconBase

**Selector:** `N/A`

No description available

**Source:** `src/lib/icons/icon-base.component.ts`

**Import:**
```typescript
import { TguiIconBase } from 'tgui-angular';
```

**Example:**
```html
<unknown-component></unknown-component>
```

#### ThemeDemoComponent

**Selector:** `tgui-theme-demo`

No description available

**Source:** `src/lib/services/story/theme-demo.component.ts`

**Import:**
```typescript
import { ThemeDemoComponent } from 'tgui-angular';
```

**Methods:**

- `detectSystemTheme(): void` - No description
- `setDarkTheme(): void` - No description
- `setLightTheme(): void` - No description
- `toggleTheme(): void` - No description

**Example:**
```html
<tgui-theme-demo></tgui-theme-demo>
```

#### ThemeSwitchComponent

**Selector:** `tgui-theme-switch`

No description available

**Source:** `src/lib/services/story/theme-switch.component.ts`

**Import:**
```typescript
import { ThemeSwitchComponent } from 'tgui-angular';
```

**Methods:**

- `isDarkTheme(): boolean` - No description
- `onSwitchChange(event: Event): void` - No description
- `onSwitchStandaloneChange(event: Event): void` - No description
- `toggleTheme(): void` - No description

**Example:**
```html
<tgui-theme-switch></tgui-theme-switch>
```


### UTILS Components

#### DemoControlsComponent

**Selector:** `tgui-demo-controls`

No description available

**Source:** `src/lib/components/utils/tgui-root/story/tgui-root.stories.ts`

**Import:**
```typescript
import { DemoControlsComponent } from 'tgui-angular';
```

**Methods:**

- `getHostClasses(): string` - No description
- `togglePlatform(): void` - No description
- `toggleTheme(): void` - No description

**Example:**
```html
<tgui-demo-controls></tgui-demo-controls>
```

#### RippleComponent

**Selector:** `tgui-ripple`

No description available

**Source:** `src/lib/components/utils/tappable/components/ripple/ripple.component.ts`

**Import:**
```typescript
import { RippleComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-ripple></tgui-ripple>
```

#### RootComponent

**Selector:** `tgui-root`

<p>Root component for the TGUI library
Provides theming, platform detection, and portal container functionality
Should be used at the root of your application</p>


**Source:** `src/lib/components/utils/tgui-root/tgui-root.component.ts`

**Import:**
```typescript
import { RootComponent } from 'tgui-angular';
```

**Properties:**

- `appearance`: `any` **[required]** - <p>Application appearance, determined automatically if nothing passed</p>

- `followSystemTheme`: `any` **[required]** (default: `false`) - <p>Whether to follow system theme changes when appearance is set manually</p>

- `platform`: `any` **[required]** - <p>Application platform, determined automatically if nothing passed</p>


**Example:**
```html
<tgui-root
  [appearance]="value"
  [followSystemTheme]="value"
  [platform]="value"></tgui-root>
```

#### RootPortalComponent

**Selector:** `tgui-root-portal`

<p>Component for rendering content in the portal container
Similar to RootRenderer in React version</p>


**Source:** `src/lib/components/utils/portal/root-portal.component.ts`

**Import:**
```typescript
import { RootPortalComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-root-portal></tgui-root-portal>
```

#### RootRendererComponent

**Selector:** `tgui-root-renderer`

<p>Component for rendering content in the portal container
Equivalent to RootRenderer in React version
Used for rendering content outside of normal DOM hierarchy (modals, popups, etc.)</p>


**Source:** `src/lib/components/utils/root-renderer/root-renderer.component.ts`

**Import:**
```typescript
import { RootRendererComponent } from 'tgui-angular';
```

**Example:**
```html
<tgui-root-renderer></tgui-root-renderer>
```

#### TappableComponent

**Selector:** `tgui-tappable`

No description available

**Source:** `src/lib/components/utils/tappable/tappable.component.ts`

**Import:**
```typescript
import { TappableComponent } from 'tgui-angular';
```

**Properties:**

- `disabled`: `any` **[required]** (default: `false`) - <p>Disable component</p>

- `readonly`: `any` **[required]** (default: `false`) - <p>Make component read-only</p>


**Methods:**

- `onPointerCancel(event: PointerEvent): void` - <p>Pointercancel/pointerup/pointerleave event handler</p>

- `onPointerDown(event: PointerEvent): void` - <p>Pointerdown event handler</p>


**Example:**
```html
<tgui-tappable
  [disabled]="value"
  [readonly]="value"></tgui-tappable>
```

#### TouchComponent

**Selector:** `tgui-touch`

<p>Component for handling touch and gesture events</p>
<p>This component is ported from the VKUI library for convenient handling of pointer events
<a href="https://github.com/VKCOM/VKUI/blob/master/packages/vkui/src/components/Touch/Touch.tsx">https://github.com/VKCOM/VKUI/blob/master/packages/vkui/src/components/Touch/Touch.tsx</a></p>


**Source:** `src/lib/components/utils/touch/touch.component.ts`

**Import:**
```typescript
import { TouchComponent } from 'tgui-angular';
```

**Properties:**

- `noSlideClick`: `any` **[required]** (default: `false`) - No description
- `slideThreshold`: `any` **[required]** (default: `5`) - No description
- `stopPropagation`: `any` **[required]** (default: `false`) - No description
- `useCapture`: `any` **[required]** (default: `false`) - No description
- `usePointerHover`: `any` **[required]** (default: `false`) - No description

**Events:**

- `onEnd`: `EventEmitter` - No description
- `onEndX`: `EventEmitter` - No description
- `onEndY`: `EventEmitter` - No description
- `onEnter`: `EventEmitter` - No description
- `onLeave`: `EventEmitter` - No description
- `onMove`: `EventEmitter` - No description
- `onMoveX`: `EventEmitter` - No description
- `onMoveY`: `EventEmitter` - No description
- `onStart`: `EventEmitter` - No description
- `onStartX`: `EventEmitter` - No description
- `onStartY`: `EventEmitter` - No description

**Methods:**

- `onClick(e: MouseEvent): void` - <p>Cancel the transition through nested links if a swipe was detected</p>

- `onDragStart(e: DragEvent): void` - <p>Dragstart event handler
Cancels the native browser behavior for nested links and images</p>


**Example:**
```html
<tgui-touch
  [noSlideClick]="value"
  [slideThreshold]="value"
  [stopPropagation]="value"></tgui-touch>
```


## Services

#### FloatingMiddlewaresService

**Import:** `import { FloatingMiddlewaresService } from 'tgui-angular';`

**Methods:**
- `getMiddlewares(options: UseFloatingMiddlewaresOptions): { middlewares: {}; strictPlacement: any; }`

#### PinInputService

<p>Service that provides functionality for PIN input component
Similar to the React usePinInput hook</p>


**Import:** `import { PinInputService } from 'tgui-angular';`

**Methods:**
- `create(params: UsePinInputParams): { value: any; setInputRefByIndex: (index: number, ref: any) => void; handleClickValue: (enteredValue: number) => void; handleClickBackspace: () => void; handleButton: (index: number, button: string) => void; }` - <p>Creates a PIN input controller with the specified parameters</p>


#### PlatformService

**Import:** `import { PlatformService } from 'tgui-angular';`

**Methods:**
- `isIOS(): boolean` - <p>Checks if current platform is iOS
Uses DOM class to determine platform, caches result for better performance</p>

- `setPlatform(platform: PlatformType): void` - <p>Set platform manually</p>


#### PortalService

<p>Service for managing portal container references
Provides functionality for components to render content outside of their DOM hierarchy</p>


**Import:** `import { PortalService } from 'tgui-angular';`

**Methods:**
- `clearPortalContainer(): void` - <p>Clear the portal container reference
This should be called when the container is destroyed</p>

- `getPortalContainerElement(): HTMLElement | null` - <p>Get the current portal container element
Returns the native DOM element or null if not set</p>

- `isPortalReady(): boolean` - <p>Check if portal container is ready for use</p>

- `setPortalContainer(elementRef: ElementRef<HTMLElement>): void` - <p>Set the portal container reference
This is typically called by the TGUIRootComponent</p>


#### RippleService

**Import:** `import { RippleService } from 'tgui-angular';`

**Methods:**
- `addWave(x: number, y: number, pointerId: number, currentWaves: RippleWave[]): RippleWave[]` - <p>Add a new ripple wave effect at the specified coordinates</p>

- `handlePointerCancel(pointerId: number): void` - <p>Handle pointer cancel/up event</p>

- `handlePointerDown(event: PointerEvent, wavesSignal: ReturnType<<RippleWave[]>>): void` - <p>Handle pointer down event</p>


#### SnackbarService

**Import:** `import { SnackbarService } from 'tgui-angular';`

**Methods:**
- `closeAll(): void`
- `show(message: string, options: SnackbarOptions): void`

#### SystemThemeService

<p>Angular service for using system themes
Uses signals to track theme changes</p>


**Import:** `import { SystemThemeService } from 'tgui-angular';`

**Methods:**
- `disableSystemTheme(): void`
- `enableSystemTheme(): void`
- `setTheme(theme: AppearanceType): void`

#### TelegramService

**Import:** `import { TelegramService } from 'tgui-angular';`

**Methods:**
- `getTelegramData(): WebApp | undefined`
- `hexToRGB(hex: string): void`

#### TguiService

**Import:** `import { TguiService } from 'tgui-angular';`

#### ThemeService

**Import:** `import { ThemeService } from 'tgui-angular';`

**Methods:**
- `detectSystemTheme(): void` - <p>Detect and apply system theme</p>

- `loadGlobalStyles(): void` - <p>Load global CSS variables to make them available for all components</p>

- `setTheme(theme: AppearanceType, followSystem: any): void` - <p>Change the theme manually</p>

- `setupTheme(appearance: AppearanceType, followSystem: boolean): void` - <p>Setup theme based on inputs and system preferences</p>


#### TypographyCellService

<p>Service that provides platform-specific typography components for Cell
Similar to the React useTypographyCellComponents hook</p>


**Import:** `import { TypographyCellService } from 'tgui-angular';`

**Methods:**
- `getDescriptionComponent(): Type<any>` - <p>Returns the appropriate component type for the description based on platform
iOS: CaptionComponent
Android/Web: SubheadlineComponent with level 2</p>

- `getDescriptionLevel(): string` - <p>Returns the level to use for description component if it&#39;s a SubheadlineComponent</p>

- `getTitleComponent(): Type<any>` - <p>Returns the appropriate component type for the title based on platform
iOS: TextComponent
Android/Web: SubheadlineComponent with level 1</p>

- `getTitleLevel(): string` - <p>Returns the level to use for title component if it&#39;s a SubheadlineComponent</p>



## Directives

#### HorizontalScrollDirective

**Selector:** `[tguiHorizontalScroll]`

**Usage:** `<div [tguiHorizontalScroll]>Content</div>`

#### PortalOutletDirective

**Selector:** `[tguiPortalOutlet]`

<p>Directive that renders content into a portal container
Use it to project content outside of its normal DOM hierarchy</p>


**Usage:** `<div [tguiPortalOutlet]>Content</div>`

#### TguiSvgPropsDirective

**Selector:** `[tguiSvgProps]`

<p>Directive for automatic passing of icon properties to SVG element
Allows using an approach similar to {...props} in React</p>


**Usage:** `<div [tguiSvgProps]>Content</div>`

#### ThemeDirective

**Selector:** `[tguiTheme]`

<p>Directive that automatically loads the TGUI styles
This should be applied once on a root element (typically body or app-root)</p>


**Usage:** `<div [tguiTheme]>Content</div>`

#### VisuallyHiddenDirective

**Selector:** `[tguiVisuallyHidden]`

<p>Directive that visually hides an element while keeping it accessible for screen readers.
Used for improving accessibility by providing context for screen reader users
without affecting the visual presentation.</p>


**Usage:** `<div [tguiVisuallyHidden]>Content</div>`


## Interfaces & Types

#### BreadcrumbItem

<p>Interface for a breadcrumb item</p>


**Properties:**
- `href`: `string` - <p>Optional URL for external links (href attribute)</p>

- `label`: `string` - <p>Display text for the breadcrumb item</p>

- `routerLink`: `string | any[]` - <p>Optional URL for internal navigation (routerLink)</p>

- `target`: `string` - <p>Optional target attribute for external links</p>


#### CircleAttributes

**Properties:**
- `radius`: `number`
- `size`: `number`
- `strokeWidth`: `number`

#### Coords

**Properties:**
- `x`: `number`
- `y`: `number`

#### CustomTouchEvent

<p>Custom touch event type combining MouseEvent and TouchEvent properties</p>


**Properties:**
- `changedTouches`: `TouchList`
- `touches`: `TouchList`

#### Gesture

<p>Interface for a touch/gesture event</p>


**Properties:**
- `clientX`: `number`
- `clientY`: `number`
- `duration`: `number`
- `isPressed`: `boolean`
- `isSlide`: `boolean`
- `isSlideX`: `boolean`
- `isSlideY`: `boolean`
- `isX`: `boolean`
- `isY`: `boolean`
- `shiftX`: `number`
- `shiftXAbs`: `number`
- `shiftY`: `number`
- `shiftYAbs`: `number`
- `startT`: `Date`
- `startX`: `number`
- `startY`: `number`

#### ModalSnapPoint

**Properties:**
- `headerHeight`: `number`
- `height`: `number | string`

#### PaginationItem

<p>Represents a single item in the pagination control</p>


**Properties:**
- `aria-current`: `"true" | undefined` - <p>ARIA current attribute</p>

- `disabled`: `boolean` - <p>Whether this item is disabled</p>

- `onClick`: `function` - <p>Handler for when the item is clicked</p>

- `page`: `number | null` - <p>Page number, or null for special items like ellipsis</p>

- `selected`: `boolean` - <p>Whether this item is currently selected</p>

- `type`: `PaginationType` - <p>Type of pagination item</p>


#### PaginationProps

<p>Properties for the pagination component</p>


**Properties:**
- `boundaryCount`: `number` - <p>Number of always visible pages at the beginning and end.</p>

- `count`: `number` - <p>The total number of pages.</p>

- `defaultPage`: `number` - <p>The page selected by default when the component is uncontrolled</p>

- `disabled`: `boolean` - <p>Controls whether the Pagination component is interactive.</p>

- `hideNextButton`: `boolean` - <p>If <code>true</code>, hide the next-page button.</p>

- `hidePrevButton`: `boolean` - <p>If <code>true</code>, hide the previous-page button.</p>

- `page`: `number` - <p>The current page.</p>

- `siblingCount`: `number` - <p>Number of always visible pages before and after the current page.</p>


#### PopperProps

**Properties:**
- `arrowProps`: `literal type` - <p>Configuration and customization options for the floating arrow component.</p>

- `autoUpdateOnTargetResize`: `boolean` - <p>Opt-in feature to automatically update Popper&#39;s position when the target element resizes.</p>

- `targetRef`: `HTMLElement | VirtualElement | null` - <p>Reference to the target element or virtual element for precise positioning.</p>


#### RatingProps

**Properties:**
- `max`: `number` - <p>The maximum rating value, representing the number of icons displayed.</p>

- `onChange`: `function` - <p>Callback function invoked when the rating value changes.</p>

- `precision`: `"0.1" | "0.2" | "0.25" | "0.5" | "1"` - <p>The precision of the rating, determining the fraction of the star that can be selected.</p>

- `value`: `number` - <p>The current value of the rating.</p>


#### RippleDemoProps

**Properties:**
- `addRipple`: `function`
- `waves`: `RippleWave[]`

#### RippleWave

**Properties:**
- `date`: `number`
- `pointerId`: `number`
- `x`: `number`
- `y`: `number`

#### SegmentedOption

**Properties:**
- `label`: `string`
- `value`: `string`

#### SnackbarOptions

**Properties:**
- `afterTemplate`: `TemplateRef<any>`
- `beforeTemplate`: `TemplateRef<any>`
- `description`: `string`
- `duration`: `number`
- `linkTemplate`: `TemplateRef<any>`

#### StoryComponentProps

**Properties:**
- `lastEvent`: `WritableSignal<string>`
- `swipePosition`: `WritableSignal<number>`

#### TguiIconProps

<p>Base interface for icon components, compatible with React version</p>


**Properties:**
- `ariaLabel`: `string` - <p>Aria label for accessibility</p>

- `autoFocus`: `boolean` - <p>Whether the element should get focus on load</p>

- `class`: `string` - <p>CSS class to apply to the icon</p>

- `fill`: `string` - <p>Fill color of the icon</p>

- `height`: `string | number` - <p>Height of the icon (can be CSS units or number)</p>

- `id`: `string` - <p>ID of the element</p>

- `onBlur`: `EventEmitter<FocusEvent>` - <p>Blur event handler</p>

- `onClick`: `EventEmitter<MouseEvent>` - <p>Click event handler</p>

- `onFocus`: `EventEmitter<FocusEvent>` - <p>Focus event handler</p>

- `onKeyDown`: `EventEmitter<KeyboardEvent>` - <p>Key down event handler</p>

- `onMouseEnter`: `EventEmitter<MouseEvent>` - <p>Mouse enter event handler</p>

- `onMouseLeave`: `EventEmitter<MouseEvent>` - <p>Mouse leave event handler</p>

- `onPointerDown`: `EventEmitter<PointerEvent>` - <p>Pointer down event handler</p>

- `onPointerUp`: `EventEmitter<PointerEvent>` - <p>Pointer up event handler</p>

- `role`: `string` - <p>Role attribute for accessibility</p>

- `stroke`: `string` - <p>Stroke color of the icon</p>

- `style`: `literal type` - <p>Additional styles to apply to the icon</p>

- `tabIndex`: `number` - <p>Tab index for keyboard navigation</p>

- `title`: `string` - <p>Title for the icon</p>

- `width`: `string | number` - <p>Width of the icon (can be CSS units or number)</p>


#### ThemeParams

**Properties:**
- `accent_text_color`: `string`
- `bg_color`: `string`
- `button_color`: `string`
- `button_text_color`: `string`
- `destructive_text_color`: `string`
- `header_bg_color`: `string`
- `hint_color`: `string`
- `link_color`: `string`
- `secondary_bg_color`: `string`
- `section_bg_color`: `string`
- `section_header_text_color`: `string`
- `subtitle_text_color`: `string`
- `text_color`: `string`

#### TouchEvent

<p>Touch event with gesture information</p>


**Properties:**
- `originalEvent`: `CustomTouchEvent`

#### UseFloatingMiddlewaresOptions

**Properties:**
- `arrowHeight`: `number` - <p>The height of the arrow. This is added to <code>mainAxis</code> to prevent the arrow from overlapping the anchor element.</p>

- `arrowPadding`: `number` - <p>A safe zone around the arrow to prevent it from exceeding the content bounds.</p>

- `arrowRef`: `HTMLElement | null` - <p>Ref for arrow element</p>

- `customMiddlewares`: `Middleware[]` - <p>An array of custom modifiers for Popper.</p>

- `offsetByCrossAxis`: `number` - <p>Offset along the cross axis.</p>

- `offsetByMainAxis`: `number` - <p>Offset along the main axis.</p>

- `placement`: `PlacementWithAuto` - <p>By default, the component will automatically choose the best placement</p>

- `sameWidth`: `boolean` - <p>Sets the width to match the target element.</p>

- `withArrow`: `boolean` - <p>Whether to display an arrow pointing to the anchor element.</p>


#### UsePinInputParams

**Properties:**
- `onChange`: `function`
- `pinCount`: `number`
- `value`: `number[]`

#### WebApp

**Properties:**
- `colorScheme`: `"light" | "dark"`
- `themeParams`: `ThemeParams`

#### Window

**Properties:**
- `Telegram`: `literal type`


## Best Practices for AI Usage

### 1. Always Wrap in Root Component
```typescript
// ✅ Correct
<tgui-root>
  <tgui-section>
    <tgui-button>Action</tgui-button>
  </tgui-section>
</tgui-root>

// ❌ Incorrect
<tgui-button>Action</tgui-button>
```

### 2. Import Strategy
```typescript
// ✅ Recommended - Import specific components
import { ButtonComponent, InputComponent } from 'tgui-angular';

// ❌ Avoid - Importing everything
import * from 'tgui-angular';
```

*This documentation is automatically generated from TypeScript source code and JSDoc comments.*