tgui-angular

Version:

🚀 Angular UI library for Telegram Web Apps with modern components and theming support | 💼 Author is open to work opportunities | 📧 Contact: a.blagovestnov@gmail.com | 💬 Telegram: @ablagovestnov

ablagovestnov.github.io/tgui-angular

ablagovestnov/tgui-angular

1,922 lines (1,254 loc) • 114 kB

Markdown

# 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'">  </tgui-root> `, imports: [RootComponent] }) ``` ## Components ### BLOCKS Components #### AccordionComponent **Selector:** `tgui-accordion` This component serves as an accordion container with built-in summary and content sections. It uses a signal-based approach to manage its state. <h2>Usage</h2> Example :<div><pre class="line-numbers"><code class="language-html"> <tgui-accordion summary="Simple string title" [(expanded)]="isExpanded"> Accordion content here </tgui-accordion>  <tgui-accordion [summary]="summaryTemplate" [afterTemplate]="afterTemplate" [(expanded)]="isExpanded"> Accordion content here </tgui-accordion></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`) - Model value for expanded state with two-way binding support **Methods:** - `getAfterTemplate(): TemplateRef | null` - Get the template to display in the after slot - `getSummaryTemplate(): TemplateRef<any>` - Get appropriate template based on summary type - `toggleExpanded(): void` - Toggle the expanded state of the accordion **Example:** ```html <tgui-accordion [expanded]="value"></tgui-accordion> ``` #### AccordionContentComponent **Selector:** `tgui-accordion-content` 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. **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` <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. <h2>Usage</h2> Example :<div><pre class="line-numbers"><code class="language-html"> <tgui-accordion-summary> Accordion title </tgui-accordion-summary>  <tgui-accordion-summary [afterTemplate]="customAfterTemplate"> Accordion title </tgui-accordion-summary> <ng-template #customAfterTemplate> <tgui-badge type="number">5</tgui-badge> </ng-template></code></pre></div><h2>Template Inputs</h2> The component accepts the following template inputs: <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` - Get the template to display in the after slot - `onClick(): void` - No description **Example:** ```html <tgui-accordion-summary></tgui-accordion-summary> ``` #### AvatarAcronymComponent **Selector:** `tgui-avatar-acronym` The AvatarAcronym component displays initials for an avatar, automatically selecting the appropriate font size and typography component. **Source:** `src/lib/components/blocks/avatar/components/avatar-acronym/avatar-acronym.component.ts` **Import:** ```typescript import { AvatarAcronymComponent } from 'tgui-angular'; ``` **Methods:** - `formatInitials(): string` - Formats the passed text into initials, extracting the first letters of each word (up to 2 letters) - `getCaptionLevel(): "1" | "2"` - Determines Caption level based on avatar size - `getTypographyComponent(): "caption" | "headline" | "title" | "large-title"` - Determines which typography component to use based on avatar size **Example:** ```html <tgui-avatar-acronym></tgui-avatar-acronym> ``` #### AvatarBadgeComponent **Selector:** `tgui-avatar-badge` The AvatarBadge component displays a numeric badge on the avatar, allowing to show the number of unread messages, notifications, etc. **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`) - Numeric value to display in the badge **Example:** ```html <tgui-avatar-badge [count]="value"></tgui-avatar-badge> ``` #### AvatarComponent **Selector:** `tgui-avatar` 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. **Source:** `src/lib/components/blocks/avatar/avatar.component.ts` **Import:** ```typescript import { AvatarComponent } from 'tgui-angular'; ``` **Properties:** - `online`: `any` **[required]** (default: `false`) - Online status indicator **Methods:** - `getBackgroundColor(): string` - Returns background color for avatar with initials **Example:** ```html <tgui-avatar [online]="value"></tgui-avatar> ``` #### AvatarStackComponent **Selector:** `tgui-avatar-stack` 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. Avatars are displayed with overlap, which is adjusted through the offset property. **Source:** `src/lib/components/blocks/avatar-stack/avatar-stack.component.ts` **Import:** ```typescript import { AvatarStackComponent } from 'tgui-angular'; ``` **Properties:** - `offset`: `any` **[required]** (default: `-12`) - 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. **Example:** ```html <tgui-avatar-stack [offset]="value"></tgui-avatar-stack> ``` #### BadgeComponent **Selector:** `tgui-badge` 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. **Source:** `src/lib/components/blocks/badge/badge.component.ts` **Import:** ```typescript import { BadgeComponent } from 'tgui-angular'; ``` **Properties:** - `large`: `any` **[required]** (default: `false`) - Increases the badge size. Applied only when type='number'. **Example:** ```html <tgui-badge [large]="value"></tgui-badge> ``` #### BannerComponent **Selector:** `tgui-banner` 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's attention and convey important information. It is a versatile tool used for various purposes such as branding, promotion, announcements, or navigation. <h2>Usage</h2> Example :<div><pre class="line-numbers"><code class="language-html"><tgui-banner type="inline" (onCloseIcon)="onCloseIcon($event)" [beforeTemplate]="beforeTemplate" [calloutTemplate]="calloutTemplate" [headerTemplate]="headerTemplate" [descriptionTemplate]="descriptionTemplate" [buttonsTemplate]="buttonsTemplate" [backgroundTemplate]="backgroundTemplate"> </tgui-banner> <ng-template #beforeTemplate> <tgui-icon24-qr></tgui-icon24-qr> </ng-template> <ng-template #calloutTemplate> Urgent notification </ng-template> <ng-template #headerTemplate> Introducing TON Space </ng-template> <ng-template #descriptionTemplate> Start exploring TON in a new, better way </ng-template> <ng-template #buttonsTemplate> <tgui-button size="s">Try it out</tgui-button> <tgui-button size="s" mode="plain">Maybe later</tgui-button> </ng-template></code></pre></div><h2>Template Inputs</h2> The component accepts the following template inputs: <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` - Determines which close icon to use based on platform and background **Example:** ```html <tgui-banner></tgui-banner> ``` #### BlockquoteComponent **Selector:** `tgui-blockquote` 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. <h2>Usage</h2> Example :<div><pre class="line-numbers"><code class="language-html"><tgui-blockquote icon="quote" text="Optional headline text"> Content of the blockquote </tgui-blockquote></code></pre></div><h3>Properties</h3> <ul> <li><code>icon</code>: Optional input to specify which icon to display in the top-right corner. Default is "quote" icon. Uses the dynamic icon component. </li> <li><code>text</code>: Optional text to be displayed as a headline above the content. If provided, it will be wrapped in the subheadline component. </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` 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. **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`) - Disables button interaction **Example:** ```html <tgui-button-cell [disabled]="value">  </tgui-button-cell> ``` #### ButtonComponent **Selector:** `tgui-button` The Button component provides a customizable button with various styles and states. Supports different sizes, display modes, loading state, etc. **Source:** `src/lib/components/blocks/button/button.component.ts` **Import:** ```typescript import { ButtonComponent } from 'tgui-angular'; ``` **Properties:** - `disabled`: `any` **[required]** (default: `false`) - If true, the button will be disabled - `loading`: `any` **[required]** (default: `false`) - If true, shows a loading indicator instead of button content - `stretched`: `any` **[required]** (default: `false`) - If true, the button will stretch to the width of its container **Methods:** - `onSelectStart(event: Event): boolean` - No description **Example:** ```html <tgui-button [disabled]="value" [loading]="value" [stretched]="value">  </tgui-button> ``` #### CardCellComponent **Selector:** `tgui-card-cell` CardCell component that represents a content section within a Card. **Source:** `src/lib/components/blocks/card/components/card-cell/card-cell.component.ts` **Import:** ```typescript import { CardCellComponent } from 'tgui-angular'; ``` **Properties:** - `header`: `string` - Optional header text for the cell - `isImage`: `boolean` (default: `false`) - Whether the cell contains image content - `subtitle`: `string` - Optional subtitle text for the cell **Example:** ```html <tgui-card-cell>  </tgui-card-cell> ``` #### CardChipComponent **Selector:** `tgui-card-chip` CardChip component that displays a small actionable or informational element on the Card Leverages the ChipComponent with fixed positioning for use within cards **Source:** `src/lib/components/blocks/card/components/card-chip/card-chip.component.ts` **Import:** ```typescript import { CardChipComponent } from 'tgui-angular'; ``` **Properties:** - `after`: `any` **[required]** - Content to be placed after the main text - `before`: `any` **[required]** - Content to be placed before the main text **Example:** ```html <tgui-card-chip [after]="value" [before]="value"></tgui-card-chip> ``` #### CardComponent **Selector:** `tgui-card` 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. **Source:** `src/lib/components/blocks/card/card.component.ts` **Import:** ```typescript import { CardComponent } from 'tgui-angular'; ``` **Properties:** - `image`: `any` **[required]** - URL of the image to display at the top of the card **Example:** ```html <tgui-card [image]="value"></tgui-card> ``` #### CellComponent **Selector:** `tgui-cell` <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. <h2>Usage</h2> Example :<div><pre class="line-numbers"><code class="language-html"> <tgui-cell subhead="Subhead text" title="Title text" hint="Hint text" subtitle="Subtitle text" description="Description text" [titleBadge]="badgeTemplate" [beforeTemplate]="beforeTemplate" [afterTemplate]="afterTemplate"> Main content </tgui-cell>  <tgui-cell [propagateEvents]="true" description="Click anywhere to toggle - includes ripple effects!" [afterTemplate]="switchTemplate"> Toggle option </tgui-cell> <ng-template #beforeTemplate> <tgui-avatar size="l"></tgui-avatar> </ng-template> <ng-template #afterTemplate> <tgui-badge type="number">99</tgui-badge> </ng-template> <ng-template #switchTemplate> <tgui-switch [checked]="true"></tgui-switch> </ng-template> <ng-template #badgeTemplate> <tgui-badge type="dot"></tgui-badge> </ng-template></code></pre></div><h2>Template Inputs</h2> The component accepts the following template inputs: <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> All other content should be provided via input properties: <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`) - Disabled state - `hovered`: `any` **[required]** (default: `false`) - Controls the hover state of the component externally, useful for keyboard navigation - `multiline`: `any` **[required]** (default: `false`) - Allows for multiline content without truncation - `propagateEvents`: `any` **[required]** (default: `false`) - When true, wraps content in semantic label for form control interaction - `readonly`: `any` **[required]** (default: `false`) - Readonly state **Example:** ```html <tgui-cell [disabled]="value" [hovered]="value" [multiline]="value">  </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` 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. **Source:** `src/lib/components/blocks/icon-button/icon-button.component.ts` **Import:** ```typescript import { IconButtonComponent } from 'tgui-angular'; ``` **Properties:** - `disabled`: `any` **[required]** (default: `false`) - Disables the button **Example:** ```html <tgui-icon-button [disabled]="value">  </tgui-icon-button> ``` #### IconContainerComponent **Selector:** `tgui-icon-container` Icon container component provides a wrapper for icons with proper styling **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` Badge component specifically designed to be used with Image component. Only supports number type badges. **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`) - Badge count number - `maxCount`: `number` (default: `99`) - Maximum count to display before showing "maxCount+" **Example:** ```html <tgui-image-badge></tgui-image-badge> ``` #### ImageComponent **Selector:** `tgui-image` 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. **Source:** `src/lib/components/blocks/image/image.component.ts` **Import:** ```typescript import { ImageComponent } from 'tgui-angular'; ``` **Properties:** - `size`: `any` **[required]** (default: `40`) - Specifies the size of the image, with a default of 40. Sizes are defined in pixels. **Methods:** - `getBorderRadius(size: number): number` - Calculate border radius based on image size - `handleImageError(event: Event): void` - Handle image error event - `handleImageLoad(event: Event): void` - Handle image load event **Example:** ```html <tgui-image [size]="value"></tgui-image> ``` #### InlineButtonsComponent **Selector:** `tgui-inline-buttons` <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. **Source:** `src/lib/components/blocks/inline-buttons/inline-buttons.component.ts` **Import:** ```typescript import { InlineButtonsComponent } from 'tgui-angular'; ``` **Example:** ```html <tgui-inline-buttons>  </tgui-inline-buttons> ``` #### InlineButtonsItemComponent **Selector:** `tgui-inline-buttons-item` <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. **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`) - Disables the button **Example:** ```html <tgui-inline-buttons-item [disabled]="value">  </tgui-inline-buttons-item> ``` #### ListComponent **Selector:** `tgui-list` 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. **Source:** `src/lib/components/blocks/list/list.component.ts` **Import:** ```typescript import { ListComponent } from 'tgui-angular'; ``` **Example:** ```html <tgui-list>  </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` A versatile component designed to display a placeholder with optional text, images, and actions. **Source:** `src/lib/components/blocks/placeholder/placeholder.component.ts` **Import:** ```typescript import { PlaceholderComponent } from 'tgui-angular'; ``` **Properties:** - `description`: `string` - Additional descriptive text to provide more details or context. - `header`: `string` - The primary text, usually a title or a header, for the placeholder. **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` 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. **Source:** `src/lib/components/blocks/section/section.component.ts` **Import:** ```typescript import { SectionComponent } from 'tgui-angular'; ``` **Properties:** - `footer`: `string | number | TemplateRef<any>` - 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>. - `header`: `string | number | TemplateRef<any>` - 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>. **Methods:** - `isPrimitive(value: any): boolean` - Checks if the value is a primitive (string or number) - `isPrimitiveContent(content: any): boolean` - Checks if the content is a primitive **Example:** ```html <tgui-section>  </tgui-section> ``` #### SectionFooterComponent **Selector:** `tgui-section-footer` The SectionFooter component represents a footer for the Section component. Supports centered mode for centered text. **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`) - Text centering, adding additional padding **Example:** ```html <tgui-section-footer>  </tgui-section-footer> ``` #### SectionHeaderComponent **Selector:** `tgui-section-header` The SectionHeader component represents a header for the Section component. Supports large mode for an enlarged header. **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`) - Enlarged header, changes font size, padding and color **Example:** ```html <tgui-section-header>  </tgui-section-header> ``` #### StepsComponent **Selector:** `tgui-steps` 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. **Source:** `src/lib/components/blocks/steps/steps.component.ts` **Import:** ```typescript import { StepsComponent } from 'tgui-angular'; ``` **Properties:** - `count`: `any` **[required]** (default: `0`) - Total number of steps. - `progress`: `any` **[required]** (default: `0`) - Current progress, indicating how many steps have been completed. Progress is 0-indexed and goes up to <code>count</code>. **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` 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. **Source:** `src/lib/components/form/checkbox/checkbox.component.ts` **Import:** ```typescript import { CheckboxComponent } from 'tgui-angular'; ``` **Properties:** - `checked`: `any` **[required]** (default: `false`) - Set checked state - `disabled`: `any` **[required]** (default: `false`) - Set disabled state - `indeterminate`: `any` **[required]** (default: `false`) - Set indeterminate state **Events:** - `change`: `EventEmitter` - Event when state changes **Methods:** - `onChange(event: Event): void` - Change event handler **Example:** ```html <tgui-checkbox [checked]="value" [disabled]="value" [indeterminate]="value"></tgui-checkbox> ``` #### ChipComponent **Selector:** `tgui-chip` 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. **Source:** `src/lib/components/form/chip/chip.component.ts` **Import:** ```typescript import { ChipComponent } from 'tgui-angular'; ``` **Properties:** - `after`: `any` **[required]** (default: `null`) - Content or component to be placed after the main text, such as an icon indicating an action. - `before`: `any` **[required]** (default: `null`) - Content or component to be placed before the main text, typically an icon or avatar. **Example:** ```html <tgui-chip [after]="value" [before]="value"></tgui-chip> ``` #### ColorInputComponent **Selector:** `tgui-color-input` 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. **Source:** `src/lib/components/form/color-input/color-input.component.ts` **Import:** ```typescript import { ColorInputComponent } from 'tgui-angular'; ``` **Properties:** - `before`: `any` **[required]** (default: `null`) - Content to be displayed before the color input - `disabled`: `any` **[required]** (default: `false`) - Whether the input is disabled **Example:** ```html <tgui-color-input [before]="value" [disabled]="value"></tgui-color-input> ``` #### FileInputComponent **Selector:** `tgui-file-input` 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. **Source:** `src/lib/components/form/file-input/file-input.component.ts` **Import:** ```typescript import { FileInputComponent } from 'tgui-angular'; ``` **Properties:** - `disabled`: `any` **[required]** (default: `false`) - Whether the input is disabled - `multiple`: `any` **[required]** (default: `false`) - Whether multiple files can be selected **Events:** - `change`: `EventEmitter` - Emitted when files are selected **Methods:** - `handleChange(event: Event): void` - Handles the change event when files are selected **Example:** ```html <tgui-file-input [disabled]="value" [multiple]="value"></tgui-file-input> ``` #### FormInputComponent **Selector:** `tgui-form-input` FormInput is a base wrapper component for form elements. It provides common styling, layout, and behavior for form inputs. Features: <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`) - Indicates if there's content to be displayed after the form input (legacy support) - `before`: `any` **[required]** (default: `false`) - Indicates if there's content to be displayed before the form input (legacy support) - `disabled`: `any` **[required]** (default: `false`) - Indicates if the form input is disabled **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` FormInputTitle component that displays appropriate typography based on platform Used internally by FormInput to display the header **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` Icon component for checkbox in checked state **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` Icon component for checkbox in unchecked state **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` Icon component for checkbox in indeterminate state **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` 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. **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` Icon component for radio button in checked state **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` Icon component for radio button in unchecked state **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` 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. **Source:** `src/lib/components/form/input/input.component.ts` **Import:** ```typescript import { InputComponent } from 'tgui-angular'; ``` **Properties:** - `disabled`: `any` **[required]** (default: `false`) - Whether the input is disabled **Methods:** - `onChange(event: Event): void` - Handles change events - `onInput(event: Event): void` - Handles input events **Example:** ```html <tgui-input [disabled]="value"></tgui-input> ``` #### MultiselectableComponent **Selector:** `tgui-multiselectable` Renders a custom multiselectable checkbox input, adapting its icons based on the current platform (iOS or others). Supports all standard input checkbox properties. **Source:** `src/lib/components/form/multiselectable/multiselectable.component.ts` **Import:** ```typescript import { MultiselectableComponent } from 'tgui-angular'; ``` **Properties:** - `checked`: `any` **[required]** (default: `false`) - Set checked state - `disabled`: `any` **[required]** (default: `false`) - Set disabled state **Events:** - `change`: `EventEmitter` - Event when state changes **Methods:** - `onChange(event: Event): void` - Change event handler **Example:** ```html <tgui-multiselectable [checked]="value" [disabled]="value"></tgui-multiselectable> ``` #### PinInputButtonComponent **Selector:** `tgui-pin-input-button` 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 **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>  </tgui-pin-input-button> ``` #### PinInputCellComponent **Selector:** `tgui-pin-input-cell` Individual cell component for PIN input. Displays a field for a single digit of a PIN code. **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`) - Sets the disabled state - `isTyped`: `any` **[required]** (default: `false`) - Whether the cell has a value typed **Example:** ```html <tgui-pin-input-cell [disabled]="value" [isTyped]="value">  </tgui-pin-input-cell> ``` #### PinInputComponent **Selector:** `tgui-pin-input` Renders a set of input fields for entering pin codes with a virtual keypad for value entry and deletion. **Source:** `src/lib/components/form/pin-input/pin-input.component.ts` **Import:** ```typescript import { PinInputComponent } from 'tgui-angular'; ``` **Properties:** - `debug`: `any` **[required]** (default: `false`) - Enable debug mode to show platform information - `pinCount`: `any` **[required]** (default: `4`) - The number of pin input fields to display, with a minimum of 2. **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` Renders a radio button input with custom styling. The component visually hides the actual input element for accessibility while providing a custom styled appearance. **Source:** `src/lib/components/form/radio/radio.component.ts` **Import:** ```typescript import { RadioComponent } from 'tgui-angular'; ``` **Properties:** - `checked`: `any` **[required]** (default: `false`) - Sets the checked state - `disabled`: `any` **[required]** (default: `false`) - Sets the disabled state **Events:** - `change`: `EventEmitter` - Event emitted on change **Methods:** - `onChange(event: Event): void` - Change event handler **Example:** ```html <tgui-radio [checked]="value" [disabled]="value"></tgui-radio> ``` #### RatingComponent **Selector:** `tgui-rating` Renders a customizable rating component, allowing users to provide a rating by selecting a value using stars. Supports fractional ratings through precision control. Example :<div><pre class="line-numbers"><code class="language-html"><tgui-rating [(ratingValue)]="userRating" [precision]="0.5" [max]="5"> </tgui-rating></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`) - The maximum rating value, representing the number of icons displayed. - `ratingValue`: `any` **[required]** (default: `0`) - The current value of the rating using Angular's two-way binding with model(). **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` 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. **Source:** `src/lib/components/form/select/select.component.ts` **Import:** ```typescript import { SelectComponent } from 'tgui-angular'; ``` **Properties:** - `disabled`: `any` **[required]** (default: `false`) - Whether the input is disabled **Example:** ```html <tgui-select [disabled]="value"></tgui-select> ``` #### SwitchComponent **Selector:** `tgui-switch` 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 "checkbox". The appearance of the switch can be customized to match either a base or iOS platform style. **Source:** `src/lib/components/form/switch/switch.component.ts` **Import:** ```typescript import { SwitchComponent } from 'tgui-angular'; ``` **Properties:** - `checked`: `any` **[required]** (default: `false`) - Sets the checked state - `disabled`: `any` **[required]** (default: `false`) - Sets the disabled state **Events:** - `change`: `EventEmitter` - Event emitted when the switch state changes **Methods:** - `onChange(event: Event): void` - Handler for change event **Example:** ```html <tgui-switch [checked]="value" [disabled]="value"></tgui-switch> ``` #### TextareaComponent **Selector:** `tgui-textarea` 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. **Source:** `src/lib/components/form/textarea/textarea.component.ts` **Import:** ```typescript import { TextareaComponent } from 'tgui-angular'; ``` **Properties:** - `disabled`: `any` **[required]** (default: `false`) - Whether the textarea is disabled **Methods:** - `onChange(event: Event): void` - Handles change events - `onInput(event: Event): void` - Handles input events **Example:** ```html <tgui-textarea [disabled]="value"></tgui-textarea> ``` ### TYPOGRAPHY Components #### CaptionComponent **Selector:** `tgui-caption` The Caption component is a text wrapper that applies specific typographic styles, based on the provided <code>level</code> prop. It'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. **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` 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><h5></code> HTML tag, providing semantic meaning and ensuring good SEO practices, but can be customized as needed. **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` The LargeTitle component is designed for prominent display text, typically used for major headings or titles within an application. It encapsulates the Typography component's features, offering extensive styling and semantic customization options while defaulting to an <code><h1></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. **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` 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's size through the <code>level</code> prop. By default, it renders as an <code><h6></code> element but can be customized with the <code>tag</code> property. **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` 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. **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"