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
993 lines • 127 kB
JSON
{
"libraryInfo": {
"name": "TGUI Angular",
"packageName": "tgui-angular",
"version": "1.0.x",
"description": "Comprehensive Angular UI library for building Telegram Web Apps",
"framework": "Angular 14+",
"architecture": "Standalone Components",
"stateManagement": "Angular Signals",
"styling": "CSS Variables + Platform-specific",
"generatedAt": "2025-06-15T23:11:39.970Z"
},
"installation": {
"command": "npm install tgui-angular",
"requirements": [
"Angular 14+",
"TypeScript 4.7+"
]
},
"coreSetup": {
"required": true,
"component": "RootComponent",
"selector": "tgui-root",
"import": "import { RootComponent } from 'tgui-angular';",
"usage": "<tgui-root [platform]=\"'ios'\" [appearance]=\"'dark'\"><!-- content --></tgui-root>"
},
"components": {
"AccordionComponent": {
"name": "AccordionComponent",
"selector": "tgui-accordion",
"description": "<p>This component serves as an accordion container with built-in summary and content sections.\nIt uses a signal-based approach to manage its state.</p>\n<h2>Usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><!-- With string summary -->\n<tgui-accordion\n summary="Simple string title"\n [(expanded)]="isExpanded">\n Accordion content here\n</tgui-accordion>\n\n<!-- With template summary -->\n<tgui-accordion\n [summary]="summaryTemplate"\n [afterTemplate]="afterTemplate"\n [(expanded)]="isExpanded">\n Accordion content here\n</tgui-accordion></code></pre></div>",
"file": "src/lib/components/blocks/accordion/accordion.component.ts",
"properties": {
"expanded": {
"type": "any",
"defaultValue": "false",
"description": "<p>Model value for expanded state with two-way binding support</p>\n",
"optional": true
}
}
},
"AccordionContentComponent": {
"name": "AccordionContentComponent",
"selector": "tgui-accordion-content",
"description": "<p>Renders the content part of an accordion, leveraging signals to control visibility and animation.\nUtilizes element measurements for smooth height transitions during expand/collapse actions.</p>\n",
"file": "src/lib/components/blocks/accordion/components/accordion-content/accordion-content.component.ts",
"properties": {}
},
"AccordionSummaryComponent": {
"name": "AccordionSummaryComponent",
"selector": "tgui-accordion-summary",
"description": "<p><code>AccordionSummary</code> serves as the clickable header for an accordion section, toggling the visibility of the content.\nIt incorporates an expand/collapse icon to visually indicate state. This component extends <code>Cell</code> to provide\na consistent UI and accessibility features.</p>\n<h2>Usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><!-- Using default chevron icon -->\n<tgui-accordion-summary>\n Accordion title\n</tgui-accordion-summary>\n\n<!-- Using custom after template -->\n<tgui-accordion-summary [afterTemplate]="customAfterTemplate">\n Accordion title\n</tgui-accordion-summary>\n\n<ng-template #customAfterTemplate>\n <tgui-badge type="number">5</tgui-badge>\n</ng-template></code></pre></div><h2>Template Inputs</h2>\n<p>The component accepts the following template inputs:</p>\n<ul>\n<li><code>afterTemplate</code>: Optional template displayed on the right side of the cell (replaces the default chevron)</li>\n</ul>\n",
"file": "src/lib/components/blocks/accordion/components/accordion-summary/accordion-summary.component.ts",
"properties": {}
},
"AvatarAcronymComponent": {
"name": "AvatarAcronymComponent",
"selector": "tgui-avatar-acronym",
"description": "<p>The AvatarAcronym component displays initials for an avatar,\nautomatically selecting the appropriate font size and typography component.</p>\n",
"file": "src/lib/components/blocks/avatar/components/avatar-acronym/avatar-acronym.component.ts",
"properties": {}
},
"AvatarBadgeComponent": {
"name": "AvatarBadgeComponent",
"selector": "tgui-avatar-badge",
"description": "<p>The AvatarBadge component displays a numeric badge on the avatar,\nallowing to show the number of unread messages, notifications, etc.</p>\n",
"file": "src/lib/components/blocks/avatar/components/avatar-badge/avatar-badge.component.ts",
"properties": {
"count": {
"type": "any",
"defaultValue": "0",
"description": "<p>Numeric value to display in the badge</p>\n",
"optional": true
}
}
},
"AvatarComponent": {
"name": "AvatarComponent",
"selector": "tgui-avatar",
"description": "<p>The Avatar component displays an avatar with optional initials or image.\nThe component supports various sizes and shapes, as well as an online status indicator.</p>\n",
"file": "src/lib/components/blocks/avatar/avatar.component.ts",
"properties": {
"online": {
"type": "any",
"defaultValue": "false",
"description": "<p>Online status indicator</p>\n",
"optional": true
}
}
},
"AvatarStackComponent": {
"name": "AvatarStackComponent",
"selector": "tgui-avatar-stack",
"description": "<p>The AvatarStack component displays a container for avatars in a stack format.\nIt allows to visually group avatars, often used to represent\nmultiple users or participants.</p>\n<p>Avatars are displayed with overlap, which is adjusted through the offset property.</p>\n",
"file": "src/lib/components/blocks/avatar-stack/avatar-stack.component.ts",
"properties": {
"offset": {
"type": "any",
"defaultValue": "-12",
"description": "<p>Offset between avatars in pixels (default -12px).\nNegative value determines the degree of overlap between avatars.\nThe smaller the value (e.g., -18px), the greater the overlap between avatars.\nThe larger the value (e.g., -6px), the less the overlap between avatars.</p>\n",
"optional": true
}
}
},
"BadgeComponent": {
"name": "BadgeComponent",
"selector": "tgui-badge",
"description": "<p>Badge component displays a small numeric or dot indicator,\ntypically used for notifications, statuses, or counters.\nSupports multiple visual modes for different contexts (e.g., critical, primary),\nand can be regular or large size.</p>\n",
"file": "src/lib/components/blocks/badge/badge.component.ts",
"properties": {
"large": {
"type": "any",
"defaultValue": "false",
"description": "<p>Increases the badge size. Applied only when type='number'.</p>\n",
"optional": true
}
}
},
"BannerComponent": {
"name": "BannerComponent",
"selector": "tgui-banner",
"description": "<p>The <code>Banner</code> component renders a prominent graphical element, typically displayed at the top of a page or section,\ndesigned to grab the user's attention and convey important information.\nIt is a versatile tool used for various purposes such as branding, promotion, announcements, or navigation.</p>\n<h2>Usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><tgui-banner\n type="inline"\n (onCloseIcon)="onCloseIcon($event)"\n [beforeTemplate]="beforeTemplate"\n [calloutTemplate]="calloutTemplate"\n [headerTemplate]="headerTemplate"\n [descriptionTemplate]="descriptionTemplate"\n [buttonsTemplate]="buttonsTemplate"\n [backgroundTemplate]="backgroundTemplate">\n</tgui-banner>\n\n<ng-template #beforeTemplate>\n <tgui-icon24-qr></tgui-icon24-qr>\n</ng-template>\n\n<ng-template #calloutTemplate>\n Urgent notification\n</ng-template>\n\n<ng-template #headerTemplate>\n Introducing TON Space\n</ng-template>\n\n<ng-template #descriptionTemplate>\n Start exploring TON in a new, better way\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <tgui-button size="s">Try it out</tgui-button>\n <tgui-button size="s" mode="plain">Maybe later</tgui-button>\n</ng-template></code></pre></div><h2>Template Inputs</h2>\n<p>The component accepts the following template inputs:</p>\n<ul>\n<li><code>beforeTemplate</code>: Optional template displayed at the start of the banner, useful for icons</li>\n<li><code>calloutTemplate</code>: Optional template for callout text displayed above the header</li>\n<li><code>headerTemplate</code>: Template for main header/title of the banner</li>\n<li><code>subheaderTemplate</code>: Optional template for text displayed below the header</li>\n<li><code>descriptionTemplate</code>: Optional template for descriptive text</li>\n<li><code>backgroundTemplate</code>: Optional template for background content</li>\n<li><code>buttonsTemplate</code>: Optional template for action buttons</li>\n</ul>\n",
"file": "src/lib/components/blocks/banner/banner.component.ts",
"properties": {}
},
"BaseSpinnerComponent": {
"name": "BaseSpinnerComponent",
"selector": "tgui-base-spinner",
"description": "",
"file": "src/lib/components/feedback/spinner/components/base-spinner/base-spinner.component.ts",
"properties": {}
},
"BlockquoteComponent": {
"name": "BlockquoteComponent",
"selector": "tgui-blockquote",
"description": "<p>Renders a stylized blockquote element, typically used for quotations or special text.\nThe component can display a text in the subheadline and content below it.\nThe component can include a customizable icon in the top right corner.</p>\n<h2>Usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><tgui-blockquote icon="quote" text="Optional headline text">\n Content of the blockquote\n</tgui-blockquote></code></pre></div><h3>Properties</h3>\n<ul>\n<li><p><code>icon</code>: Optional input to specify which icon to display in the top-right corner.\nDefault is "quote" icon. Uses the dynamic icon component.</p>\n</li>\n<li><p><code>text</code>: Optional text to be displayed as a headline above the content.\nIf provided, it will be wrapped in the subheadline component.</p>\n</li>\n</ul>\n",
"file": "src/lib/components/blocks/blockquote/blockquote.component.ts",
"properties": {}
},
"BreadcrumbsComponent": {
"name": "BreadcrumbsComponent",
"selector": "tgui-breadcrumbs",
"description": "<p>The Breadcrumbs component displays a navigation trail for users to follow back to the starting or entry point.\nIt supports customizable dividers to fit different design needs.</p>\n<p>Usage:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><tgui-breadcrumbs\n [items]="[\n { label: 'Home', url: '/' },\n { label: 'Catalog', url: '/catalog' },\n { label: 'Product' }\n ]"\n divider="slash"\n></tgui-breadcrumbs></code></pre></div>",
"file": "src/lib/components/navigation/breadcrumbs/breadcrumbs.component.ts",
"properties": {}
},
"BreadcrumbsDotIconComponent": {
"name": "BreadcrumbsDotIconComponent",
"selector": "tgui-breadcrumbs-dot-icon",
"description": "<p>Dot icon used in breadcrumb navigation as a separator</p>\n",
"file": "src/lib/components/navigation/breadcrumbs/icons/dot-icon.component.ts",
"properties": {}
},
"BreadcrumbsItemComponent": {
"name": "BreadcrumbsItemComponent",
"selector": "tgui-breadcrumbs-item",
"description": "<p>A component that represents a single item within a breadcrumb navigation.\nIt can be used standalone or as part of a BreadCrumbs collection.</p>\n",
"file": "src/lib/components/navigation/breadcrumbs/breadcrumbs-item.component.ts",
"properties": {}
},
"BreadcrumbsSlashIconComponent": {
"name": "BreadcrumbsSlashIconComponent",
"selector": "tgui-breadcrumbs-slash-icon",
"description": "<p>Slash icon used in breadcrumb navigation as a separator</p>\n",
"file": "src/lib/components/navigation/breadcrumbs/icons/slash-icon.component.ts",
"properties": {}
},
"ButtonCellComponent": {
"name": "ButtonCellComponent",
"selector": "tgui-button-cell",
"description": "<p>Renders an interactive cell component with optional leading and trailing elements.\nDesigned to be flexible, supporting various content structures and interaction models within UI designs.</p>\n",
"file": "src/lib/components/blocks/cell/components/button-cell/button-cell.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Disables button interaction</p>\n",
"optional": true
}
}
},
"ButtonComponent": {
"name": "ButtonComponent",
"selector": "tgui-button",
"description": "<p>The Button component provides a customizable button with various styles and states.\nSupports different sizes, display modes, loading state, etc.</p>\n",
"file": "src/lib/components/blocks/button/button.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>If true, the button will be disabled</p>\n",
"optional": true
},
"loading": {
"type": "any",
"defaultValue": "false",
"description": "<p>If true, shows a loading indicator instead of button content</p>\n",
"optional": true
},
"stretched": {
"type": "any",
"defaultValue": "false",
"description": "<p>If true, the button will stretch to the width of its container</p>\n",
"optional": true
}
}
},
"CaptionComponent": {
"name": "CaptionComponent",
"selector": "tgui-caption",
"description": "<p>The Caption component is a text wrapper that applies specific typographic styles,\nbased on the provided <code>level</code> prop. It's built on top of the Typography component,\nensuring consistent text styling across the application. It primarily serves for text\nthat acts as a small, descriptive label or annotation.</p>\n",
"file": "src/lib/components/typography/caption/caption.component.ts",
"properties": {
"caps": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
},
"plain": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
}
}
},
"CardCellComponent": {
"name": "CardCellComponent",
"selector": "tgui-card-cell",
"description": "<p>CardCell component that represents a content section within a Card.</p>\n",
"file": "src/lib/components/blocks/card/components/card-cell/card-cell.component.ts",
"properties": {
"header": {
"type": "string",
"description": "<p>Optional header text for the cell</p>\n",
"optional": true
},
"isImage": {
"type": "boolean",
"defaultValue": "false",
"description": "<p>Whether the cell contains image content</p>\n",
"optional": true
},
"subtitle": {
"type": "string",
"description": "<p>Optional subtitle text for the cell</p>\n",
"optional": true
}
}
},
"CardChipComponent": {
"name": "CardChipComponent",
"selector": "tgui-card-chip",
"description": "<p>CardChip component that displays a small actionable or informational element on the Card\nLeverages the ChipComponent with fixed positioning for use within cards</p>\n",
"file": "src/lib/components/blocks/card/components/card-chip/card-chip.component.ts",
"properties": {
"after": {
"type": "any",
"description": "<p>Content to be placed after the main text</p>\n",
"optional": true
},
"before": {
"type": "any",
"description": "<p>Content to be placed before the main text</p>\n",
"optional": true
}
}
},
"CardComponent": {
"name": "CardComponent",
"selector": "tgui-card",
"description": "<p>Serves as a container for card-styled UI elements, providing context for its child components.\nIt supports different visual styles and can encapsulate various content types.</p>\n",
"file": "src/lib/components/blocks/card/card.component.ts",
"properties": {
"image": {
"type": "any",
"description": "<p>URL of the image to display at the top of the card</p>\n",
"optional": true
}
}
},
"CellComponent": {
"name": "CellComponent",
"selector": "tgui-cell",
"description": "<p><code>Cell</code> component acts as a flexible and interactive container for various types of content,\nenabling the creation of complex list items, form fields, and more. It leverages the <code>Tappable</code>\ncomponent for interaction and is designed to be flexible and extensible.</p>\n<h2>Usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><!-- Using input properties and template references -->\n<tgui-cell\n subhead="Subhead text"\n title="Title text"\n hint="Hint text"\n subtitle="Subtitle text"\n description="Description text"\n [titleBadge]="badgeTemplate"\n [beforeTemplate]="beforeTemplate"\n [afterTemplate]="afterTemplate">\n Main content\n</tgui-cell>\n\n<!-- Using with event propagation for form controls (combines semantic label with tappable effects) -->\n<tgui-cell\n [propagateEvents]="true"\n description="Click anywhere to toggle - includes ripple effects!"\n [afterTemplate]="switchTemplate">\n Toggle option\n</tgui-cell>\n\n<ng-template #beforeTemplate>\n <tgui-avatar size="l"></tgui-avatar>\n</ng-template>\n\n<ng-template #afterTemplate>\n <tgui-badge type="number">99</tgui-badge>\n</ng-template>\n\n<ng-template #switchTemplate>\n <tgui-switch [checked]="true"></tgui-switch>\n</ng-template>\n\n<ng-template #badgeTemplate>\n <tgui-badge type="dot"></tgui-badge>\n</ng-template></code></pre></div><h2>Template Inputs</h2>\n<p>The component accepts the following template inputs:</p>\n<ul>\n<li><code>beforeTemplate</code>: Optional template displayed on the left side of the cell</li>\n<li><code>afterTemplate</code>: Optional template displayed on the right side of the cell</li>\n<li><code>titleBadge</code>: Badge template displayed next to the title</li>\n</ul>\n<p>All other content should be provided via input properties:</p>\n<ul>\n<li><code>subhead</code>: Optional content displayed above the main title</li>\n<li><code>title</code>: Main title/header content</li>\n<li><code>hint</code>: Optional content displayed next to the title</li>\n<li><code>subtitle</code>: Optional content displayed below the title</li>\n<li><code>description</code>: Optional descriptive text below the subtitle</li>\n<li><code>propagateEvents</code>: When true, wraps content in semantic label for form control interaction</li>\n</ul>\n",
"file": "src/lib/components/blocks/cell/cell.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Disabled state</p>\n",
"optional": true
},
"hovered": {
"type": "any",
"defaultValue": "false",
"description": "<p>Controls the hover state of the component externally, useful for keyboard navigation</p>\n",
"optional": true
},
"multiline": {
"type": "any",
"defaultValue": "false",
"description": "<p>Allows for multiline content without truncation</p>\n",
"optional": true
},
"propagateEvents": {
"type": "any",
"defaultValue": "false",
"description": "<p>When true, wraps content in semantic label for form control interaction</p>\n",
"optional": true
},
"readonly": {
"type": "any",
"defaultValue": "false",
"description": "<p>Readonly state</p>\n",
"optional": true
}
}
},
"CheckboxComponent": {
"name": "CheckboxComponent",
"selector": "tgui-checkbox",
"description": "<p>Renders a checkbox input with custom styling and optional indeterminate state.\nThe component visually hides the actual input element for accessibility\nwhile providing a custom styled appearance.</p>\n",
"file": "src/lib/components/form/checkbox/checkbox.component.ts",
"properties": {
"checked": {
"type": "any",
"defaultValue": "false",
"description": "<p>Set checked state</p>\n",
"optional": true
},
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Set disabled state</p>\n",
"optional": true
},
"indeterminate": {
"type": "any",
"defaultValue": "false",
"description": "<p>Set indeterminate state</p>\n",
"optional": true
}
}
},
"ChipComponent": {
"name": "ChipComponent",
"selector": "tgui-chip",
"description": "<p>Renders a compact element representing an input, attribute, or action.\nChips can include icons, text, or both, and are used to trigger actions,\ninput information, or represent a complex piece of information in a compact form.</p>\n",
"file": "src/lib/components/form/chip/chip.component.ts",
"properties": {
"after": {
"type": "any",
"defaultValue": "null",
"description": "<p>Content or component to be placed after the main text, such as an icon indicating an action.</p>\n",
"optional": true
},
"before": {
"type": "any",
"defaultValue": "null",
"description": "<p>Content or component to be placed before the main text, typically an icon or avatar.</p>\n",
"optional": true
}
}
},
"CircularProgressComponent": {
"name": "CircularProgressComponent",
"selector": "tgui-circular-progress",
"description": "<p>Renders a circular progress indicator, useful for displaying loading states or progress metrics.\nThe component dynamically adjusts its size and stroke based on the provided <code>size</code> input and visually represents\nthe <code>progress</code> input as a percentage of the circle's circumference.</p>\n",
"file": "src/lib/components/feedback/circular-progress/circular-progress.component.ts",
"properties": {
"progress": {
"type": "any",
"defaultValue": "0",
"description": "<p>Current progress of the circular indicator, expressed as a percentage from 0 to 100.</p>\n",
"optional": true
}
}
},
"ColorInputComponent": {
"name": "ColorInputComponent",
"selector": "tgui-color-input",
"description": "<p>Renders a color picker input within a form structure, displaying the selected color value.\nIt adapts the text style based on the platform and supports additional properties like header and status.</p>\n",
"file": "src/lib/components/form/color-input/color-input.component.ts",
"properties": {
"before": {
"type": "any",
"defaultValue": "null",
"description": "<p>Content to be displayed before the color input</p>\n",
"optional": true
},
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Whether the input is disabled</p>\n",
"optional": true
}
}
},
"CompactPaginationComponent": {
"name": "CompactPaginationComponent",
"selector": "tgui-compact-pagination",
"description": "<p>CompactPagination component displays a set of dots for pagination.\nIt's typically used in carousels, sliders, or any component requiring compact pagination controls.</p>\n<p>The component supports different visual modes and manages the state of its pagination items.</p>\n",
"file": "src/lib/components/navigation/compact-pagination/compact-pagination.component.ts",
"properties": {
"selectedIndex": {
"type": "any",
"defaultValue": "0",
"description": "<p>Selected index</p>\n",
"optional": true
}
}
},
"CompactPaginationItemComponent": {
"name": "CompactPaginationItemComponent",
"selector": "tgui-compact-pagination-item",
"description": "<p>CompactPaginationItem component represents an individual dot in a compact pagination.\nIt visually indicates whether it is selected and provides accessibility features.</p>\n",
"file": "src/lib/components/navigation/compact-pagination/compact-pagination-item.component.ts",
"properties": {
"selected": {
"type": "any",
"defaultValue": "false",
"description": "<p>External selected state</p>\n",
"optional": true
}
}
},
"CustomAfterTemplateStoryComponent": {
"name": "CustomAfterTemplateStoryComponent",
"selector": "tgui-custom-after-template-story",
"description": "",
"file": "src/lib/components/blocks/accordion/stories/accordion.stories.ts",
"properties": {}
},
"DemoControlsComponent": {
"name": "DemoControlsComponent",
"selector": "tgui-demo-controls",
"description": "",
"file": "src/lib/components/utils/tgui-root/story/tgui-root.stories.ts",
"properties": {}
},
"DemoSnackbarComponent": {
"name": "DemoSnackbarComponent",
"selector": "demo-snackbar",
"description": "",
"file": "src/lib/components/feedback/snackbar/story/snackbar.stories.ts",
"properties": {}
},
"DividerComponent": {
"name": "DividerComponent",
"selector": "tgui-divider",
"description": "<p>Represents a horizontal line used to separate content within a layout or component.\nThe component allows customization through custom CSS classes.</p>\n",
"file": "src/lib/components/misc/divider/divider.component.ts",
"properties": {}
},
"FileInputComponent": {
"name": "FileInputComponent",
"selector": "tgui-file-input",
"description": "<p>Renders a file input disguised as a button, enhancing the user interface and improving usability.\nIt leverages the <code>ButtonCell</code> component for consistent styling across the application.</p>\n",
"file": "src/lib/components/form/file-input/file-input.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Whether the input is disabled</p>\n",
"optional": true
},
"multiple": {
"type": "any",
"defaultValue": "false",
"description": "<p>Whether multiple files can be selected</p>\n",
"optional": true
}
}
},
"FixedLayoutComponent": {
"name": "FixedLayoutComponent",
"selector": "tgui-fixed-layout",
"description": "<p>This component provides a flexible way to create a layout that is fixed to either the top or bottom of its parent container.\nIt's useful for creating headers, footers, or any element that should remain in view regardless of the scrolling content.</p>\n",
"file": "src/lib/components/layout/fixed-layout/fixed-layout.component.ts",
"properties": {}
},
"FloatingArrowComponent": {
"name": "FloatingArrowComponent",
"selector": "tgui-floating-arrow",
"description": "<p>FloatingArrow dynamically positions an arrow indicator relative to a floating element,\nsuch as a tooltip to signify its association with a target element.\nSupports custom arrow icons and positioning adjustments.</p>\n",
"file": "src/lib/components/overlays/popper/components/floating-arrow/floating-arrow.component.ts",
"properties": {
"isStaticOffset": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
}
}
},
"FormInputComponent": {
"name": "FormInputComponent",
"selector": "tgui-form-input",
"description": "<p>FormInput is a base wrapper component for form elements.\nIt provides common styling, layout, and behavior for form inputs.</p>\n<p>Features:</p>\n<ul>\n<li>Platform-specific styling (iOS vs base)</li>\n<li>Status handling (default, error, focused)</li>\n<li>Support for content before and after the input (as string or TemplateRef)</li>\n<li>Optional header display</li>\n<li>Focus and blur handling</li>\n</ul>\n",
"file": "src/lib/components/form/form-input/form-input.component.ts",
"properties": {
"after": {
"type": "any",
"defaultValue": "false",
"description": "<p>Indicates if there's content to be displayed after the form input (legacy support)</p>\n",
"optional": true
},
"before": {
"type": "any",
"defaultValue": "false",
"description": "<p>Indicates if there's content to be displayed before the form input (legacy support)</p>\n",
"optional": true
},
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Indicates if the form input is disabled</p>\n",
"optional": true
}
}
},
"FormInputTitleComponent": {
"name": "FormInputTitleComponent",
"selector": "tgui-form-input-title",
"description": "<p>FormInputTitle component that displays appropriate typography based on platform\nUsed internally by FormInput to display the header</p>\n",
"file": "src/lib/components/form/form-input/components/form-input-title.component.ts",
"properties": {}
},
"HeadlineComponent": {
"name": "HeadlineComponent",
"selector": "tgui-headline",
"description": "<p>The Headline component serves as a wrapper for text that is intended to be displayed prominently,\ntypically used for section headings or important titles within the application. It leverages the Typography\ncomponent for consistent typographic styling, offering a range of customization options through its props.\nThe component defaults to an <code><h5></code> HTML tag, providing semantic meaning and ensuring good SEO practices,\nbut can be customized as needed.</p>\n",
"file": "src/lib/components/typography/headline/headline.component.ts",
"properties": {
"caps": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
},
"plain": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
}
}
},
"IconButtonComponent": {
"name": "IconButtonComponent",
"selector": "tgui-icon-button",
"description": "<p>Renders an icon button with customizable size and mode. It utilizes the <code>Tappable</code> component for enhanced\ntouch interaction, allowing it to serve various UI actions efficiently.</p>\n",
"file": "src/lib/components/blocks/icon-button/icon-button.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Disables the button</p>\n",
"optional": true
}
}
},
"IconCheckboxCheckedComponent": {
"name": "IconCheckboxCheckedComponent",
"selector": "tgui-icon-checkbox-checked",
"description": "<p>Icon component for checkbox in checked state</p>\n",
"file": "src/lib/components/form/checkbox/icons/checkbox-checked.component.ts",
"properties": {}
},
"IconCheckboxComponent": {
"name": "IconCheckboxComponent",
"selector": "tgui-icon-checkbox",
"description": "<p>Icon component for checkbox in unchecked state</p>\n",
"file": "src/lib/components/form/checkbox/icons/checkbox.component.ts",
"properties": {}
},
"IconCheckboxIndeterminateComponent": {
"name": "IconCheckboxIndeterminateComponent",
"selector": "tgui-icon-checkbox-indeterminate",
"description": "<p>Icon component for checkbox in indeterminate state</p>\n",
"file": "src/lib/components/form/checkbox/icons/checkbox-indeterminate.component.ts",
"properties": {}
},
"IconContainerComponent": {
"name": "IconContainerComponent",
"selector": "tgui-icon-container",
"description": "<p>Icon container component provides a wrapper for icons with proper styling</p>\n",
"file": "src/lib/components/blocks/icon-container/icon-container.component.ts",
"properties": {}
},
"IconHeartComponent": {
"name": "IconHeartComponent",
"selector": "tgui-icon-heart",
"description": "<p>This is a placeholder component for demonstrating custom icons in the Rating component.\nIn the future, you could replace the star icon with this or any other SVG icon.</p>\n",
"file": "src/lib/components/form/rating/story/custom-icon.component.ts",
"properties": {}
},
"IconRadioCheckedComponent": {
"name": "IconRadioCheckedComponent",
"selector": "tgui-icon-radio-checked",
"description": "<p>Icon component for radio button in checked state</p>\n",
"file": "src/lib/components/form/radio/icons/radio-checked.component.ts",
"properties": {}
},
"IconRadioComponent": {
"name": "IconRadioComponent",
"selector": "tgui-icon-radio",
"description": "<p>Icon component for radio button in unchecked state</p>\n",
"file": "src/lib/components/form/radio/icons/radio.component.ts",
"properties": {}
},
"IconsShowcaseComponent": {
"name": "IconsShowcaseComponent",
"selector": "tgui-icons-showcase",
"description": "",
"file": "src/lib/icons/story/icons.stories.ts",
"properties": {}
},
"ImageBadgeComponent": {
"name": "ImageBadgeComponent",
"selector": "tgui-image-badge",
"description": "<p>Badge component specifically designed to be used with Image component.\nOnly supports number type badges.</p>\n",
"file": "src/lib/components/blocks/image/components/image-badge/image-badge.component.ts",
"properties": {
"count": {
"type": "number",
"defaultValue": "0",
"description": "<p>Badge count number</p>\n",
"optional": true
},
"maxCount": {
"type": "number",
"defaultValue": "99",
"description": "<p>Maximum count to display before showing "maxCount+"</p>\n",
"optional": true
}
}
},
"ImageComponent": {
"name": "ImageComponent",
"selector": "tgui-image",
"description": "<p>Renders an image with optional fallback content. It supports custom sizing and will automatically\nhandle loading states and errors by optionally displaying a fallback icon. This component can also\ninclude additional content, such as badges or overlays, as children.</p>\n",
"file": "src/lib/components/blocks/image/image.component.ts",
"properties": {
"size": {
"type": "any",
"defaultValue": "40",
"description": "<p>Specifies the size of the image, with a default of 40. Sizes are defined in pixels.</p>\n",
"optional": true
}
}
},
"InlineButtonsComponent": {
"name": "InlineButtonsComponent",
"selector": "tgui-inline-buttons",
"description": "<p><code>InlineButtons</code> acts as a container for <code>InlineButtonsItem</code> components.\nThis component provides a unified context for styling and interaction,\nleveraging the <code>mode</code> to apply consistent styling across all child components.\nIt ensures visual consistency across different platforms and supports custom styling modes.</p>\n",
"file": "src/lib/components/blocks/inline-buttons/inline-buttons.component.ts",
"properties": {}
},
"InlineButtonsItemComponent": {
"name": "InlineButtonsItemComponent",
"selector": "tgui-inline-buttons-item",
"description": "<p><code>InlineButtonsItem</code> is designed for use within an InlineButtons container but can also serve\nas a standalone button if used by itself. It supports displaying optional text and can inherit\na styling mode from its parent InlineButtons context or utilize a locally defined mode.</p>\n",
"file": "src/lib/components/blocks/inline-buttons/components/inline-buttons-item.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Disables the button</p>\n",
"optional": true
}
}
},
"InputComponent": {
"name": "InputComponent",
"selector": "tgui-input",
"description": "<p>Renders a text input field with enhanced styling and integration into a form structure.\nIt automatically adapts typography and layout based on the platform, ensuring a consistent user experience across devices.</p>\n",
"file": "src/lib/components/form/input/input.component.ts",
"properties": {
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Whether the input is disabled</p>\n",
"optional": true
}
}
},
"IOSSpinnerComponent": {
"name": "IOSSpinnerComponent",
"selector": "tgui-ios-spinner",
"description": "",
"file": "src/lib/components/feedback/spinner/components/ios-spinner/ios-spinner.component.ts",
"properties": {}
},
"LargeTitleComponent": {
"name": "LargeTitleComponent",
"selector": "tgui-large-title",
"description": "<p>The LargeTitle component is designed for prominent display text, typically used for major headings\nor titles within an application. It encapsulates the Typography component's features, offering\nextensive styling and semantic customization options while defaulting to an <code><h1></code> HTML element.\nThis choice of default component underscores the importance and hierarchy of the text it encapsulates,\nmaking it suitable for primary page titles or significant headings.</p>\n",
"file": "src/lib/components/typography/large-title/large-title.component.ts",
"properties": {
"caps": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
},
"plain": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
}
}
},
"LinkComponent": {
"name": "LinkComponent",
"selector": "tgui-link",
"description": "<p>Link component provides a customizable anchor element.\nUsed for navigation with proper styling following the Telegram UI guidelines.</p>\n",
"file": "src/lib/components/navigation/link/link.component.ts",
"properties": {}
},
"ListComponent": {
"name": "ListComponent",
"selector": "tgui-list",
"description": "<p>Renders a container for list items, applying platform-specific styles for consistency\nacross different operating systems. This component serves as a foundational element\nfor creating lists in a user interface.</p>\n",
"file": "src/lib/components/blocks/list/list.component.ts",
"properties": {}
},
"ModalCloseComponent": {
"name": "ModalCloseComponent",
"selector": "tgui-modal-close",
"description": "<p>Modal close button component providing accessible close functionality.\nMust be used within a Modal component to function properly.\nSupports custom content and interactive animations.</p>\n",
"file": "src/lib/components/overlays/modal/modal-close.component.ts",
"properties": {}
},
"ModalComponent": {
"name": "ModalComponent",
"selector": "tgui-modal",
"description": "<p>Modal component providing a flexible dialog framework with customizable content.\nSupports swipe gestures, snap points, and portal rendering for mobile-optimized experience.\nBased on React TGUI Modal component but implemented with Angular Signal API.</p>\n",
"file": "src/lib/components/overlays/modal/modal.component.ts",
"properties": {
"dismissible": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
},
"modal": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
},
"nested": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
},
"open": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
},
"preventScrollRestoration": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
},
"scrollLockTimeout": {
"type": "any",
"defaultValue": "500",
"description": "",
"optional": true
}
}
},
"ModalDemoComponent": {
"name": "ModalDemoComponent",
"selector": "tgui-modal-demo",
"description": "",
"file": "src/lib/components/overlays/modal/story/modal.stories.ts",
"properties": {
"dismissible": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
},
"modal": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
},
"preventScrollRestoration": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
},
"scrollLockTimeout": {
"type": "any",
"defaultValue": "500",
"description": "",
"optional": true
},
"showCloseButton": {
"type": "any",
"defaultValue": "false",
"description": "",
"optional": true
},
"showHeader": {
"type": "any",
"defaultValue": "true",
"description": "",
"optional": true
}
}
},
"ModalHeaderComponent": {
"name": "ModalHeaderComponent",
"selector": "tgui-modal-header",
"description": "<p>Modal header component providing a title area with drag handle indicator.\nSupports before/after content slots for additional elements like close buttons.\nOnly visible on iOS platform following design guidelines.</p>\n",
"file": "src/lib/components/overlays/modal/modal-header.component.ts",
"properties": {
"forceHide": {
"type": "any",
"defaultValue": "false",
"description": "<p>Force hide header regardless of platform</p>\n",
"optional": true
},
"forceShow": {
"type": "any",
"defaultValue": "false",
"description": "<p>Force show header regardless of platform</p>\n",
"optional": true
}
}
},
"ModalOverlayComponent": {
"name": "ModalOverlayComponent",
"selector": "tgui-modal-overlay",
"description": "<p>Modal overlay component providing a backdrop behind the modal content.\nSupports theme-aware background colors and customizable opacity.</p>\n",
"file": "src/lib/components/overlays/modal/modal-overlay.component.ts",
"properties": {}
},
"ModalStoryWrapperComponent": {
"name": "ModalStoryWrapperComponent",
"selector": "tgui-modal-story-wrapper",
"description": "",
"file": "src/lib/components/overlays/modal/story/modal.stories.ts",
"properties": {
"closeThreshold": {
"type": "number",
"defaultValue": "0.5",
"description": "",
"optional": true
},
"dismissible": {
"type": "boolean",
"defaultValue": "true",
"description": "",
"optional": true
},
"headerText": {
"type": "string",
"defaultValue": "'Modal Header'",
"description": "",
"optional": true
},
"modal": {
"type": "boolean",
"defaultValue": "true",
"description": "",
"optional": true
},
"preventScrollRestoration": {
"type": "boolean",
"defaultValue": "true",
"description": "",
"optional": true
},
"scrollLockTimeout": {
"type": "number",
"defaultValue": "500",
"description": "",
"optional": true
},
"showCloseButton": {
"type": "boolean",
"defaultValue": "false",
"description": "",
"optional": true
},
"showHeader": {
"type": "boolean",
"defaultValue": "true",
"description": "",
"optional": true
},
"snapPoints": {
"type": "(number | string)[]",
"defaultValue": "[]",
"description": "",
"optional": true
},
"theme": {
"type": "\"light\" | \"dark\"",
"defaultValue": "'light'",
"description": "",
"optional": true
}
}
},
"MultipleAccordionsStoryComponent": {
"name": "MultipleAccordionsStoryComponent",
"selector": "tgui-multiple-accordions-story",
"description": "",
"file": "src/lib/components/blocks/accordion/stories/accordion.stories.ts",
"properties": {}
},
"MultiselectableComponent": {
"name": "MultiselectableComponent",
"selector": "tgui-multiselectable",
"description": "<p>Renders a custom multiselectable checkbox input, adapting its icons based on the current platform (iOS or others).\nSupports all standard input checkbox properties.</p>\n",
"file": "src/lib/components/form/multiselectable/multiselectable.component.ts",
"properties": {
"checked": {
"type": "any",
"defaultValue": "false",
"description": "<p>Set checked state</p>\n",
"optional": true
},
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Set disabled state</p>\n",
"optional": true
}
}
},
"PaginationComponent": {
"name": "PaginationComponent",
"selector": "tgui-pagination",
"description": "<p>The Pagination component displays a set of navigation controls allowing users to navigate through pages of content.\nIt is built on top of a custom hook that manages pagination logic and state.\nThis component can be customized to hide next/previous buttons, specify boundary and sibling count for pagination items,\nand handle page changes through a pageChange output.</p>\n",
"file": "src/lib/components/navigation/pagination/pagination.component.ts",
"properties": {
"boundaryCount": {
"type": "any",
"defaultValue": "1",
"description": "<p>Number of always visible pages at the beginning and end.</p>\n",
"optional": true
},
"count": {
"type": "any",
"defaultValue": "1",
"description": "<p>The total number of pages.</p>\n",
"optional": true
},
"defaultPage": {
"type": "any",
"defaultValue": "1",
"description": "<p>The page selected by default when the component is uncontrolled.</p>\n",
"optional": true
},
"disabled": {
"type": "any",
"defaultValue": "false",
"description": "<p>Controls whether the Pagination component is interactive.</p>\n",
"optional": true
},
"hideNextButton": {
"type": "any",
"defaultValue": "false",
"description": "<p>If <code>true</code>, hide the next-page button.</p>\n",
"optional": true
},
"hidePrevButton": {
"type": "any",
"defaultValue": "false",
"description": "<p>If <code>true</code>, hide the previous-page button.</p>\n",
"optional": true
},
"siblingCount": {
"type": "any",
"defaultValue": "1",
"description": "<p>Number of always visible pages before and