This component serves as an accordion container with built-in summary and content sections.\nIt uses a signal-based approach to manage its state.
\n<!-- 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>Model value for expanded state with two-way binding support
\n", "optional": true } } }, "AccordionContentComponent": { "name": "AccordionContentComponent", "selector": "tgui-accordion-content", "description": "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.
\n", "file": "src/lib/components/blocks/accordion/components/accordion-content/accordion-content.component.ts", "properties": {} }, "AccordionSummaryComponent": { "name": "AccordionSummaryComponent", "selector": "tgui-accordion-summary", "description": "AccordionSummary 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 Cell to provide\na consistent UI and accessibility features.
<!-- 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>The component accepts the following template inputs:
\nafterTemplate: Optional template displayed on the right side of the cell (replaces the default chevron)The AvatarAcronym component displays initials for an avatar,\nautomatically selecting the appropriate font size and typography component.
\n", "file": "src/lib/components/blocks/avatar/components/avatar-acronym/avatar-acronym.component.ts", "properties": {} }, "AvatarBadgeComponent": { "name": "AvatarBadgeComponent", "selector": "tgui-avatar-badge", "description": "The AvatarBadge component displays a numeric badge on the avatar,\nallowing to show the number of unread messages, notifications, etc.
\n", "file": "src/lib/components/blocks/avatar/components/avatar-badge/avatar-badge.component.ts", "properties": { "count": { "type": "any", "defaultValue": "0", "description": "Numeric value to display in the badge
\n", "optional": true } } }, "AvatarComponent": { "name": "AvatarComponent", "selector": "tgui-avatar", "description": "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.
\n", "file": "src/lib/components/blocks/avatar/avatar.component.ts", "properties": { "online": { "type": "any", "defaultValue": "false", "description": "Online status indicator
\n", "optional": true } } }, "AvatarStackComponent": { "name": "AvatarStackComponent", "selector": "tgui-avatar-stack", "description": "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.
\nAvatars are displayed with overlap, which is adjusted through the offset property.
\n", "file": "src/lib/components/blocks/avatar-stack/avatar-stack.component.ts", "properties": { "offset": { "type": "any", "defaultValue": "-12", "description": "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.
\n", "optional": true } } }, "BadgeComponent": { "name": "BadgeComponent", "selector": "tgui-badge", "description": "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.
\n", "file": "src/lib/components/blocks/badge/badge.component.ts", "properties": { "large": { "type": "any", "defaultValue": "false", "description": "Increases the badge size. Applied only when type='number'.
\n", "optional": true } } }, "BannerComponent": { "name": "BannerComponent", "selector": "tgui-banner", "description": "The Banner 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.
<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>The component accepts the following template inputs:
\nbeforeTemplate: Optional template displayed at the start of the banner, useful for iconscalloutTemplate: Optional template for callout text displayed above the headerheaderTemplate: Template for main header/title of the bannersubheaderTemplate: Optional template for text displayed below the headerdescriptionTemplate: Optional template for descriptive textbackgroundTemplate: Optional template for background contentbuttonsTemplate: Optional template for action buttonsRenders 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.
\n<tgui-blockquote icon="quote" text="Optional headline text">\n Content of the blockquote\n</tgui-blockquote>icon: Optional input to specify which icon to display in the top-right corner.\nDefault is "quote" icon. Uses the dynamic icon component.
text: Optional text to be displayed as a headline above the content.\nIf provided, it will be wrapped in the subheadline component.
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.
\nUsage:
\nExample :<tgui-breadcrumbs\n [items]="[\n { label: 'Home', url: '/' },\n { label: 'Catalog', url: '/catalog' },\n { label: 'Product' }\n ]"\n divider="slash"\n></tgui-breadcrumbs>Dot icon used in breadcrumb navigation as a separator
\n", "file": "src/lib/components/navigation/breadcrumbs/icons/dot-icon.component.ts", "properties": {} }, "BreadcrumbsItemComponent": { "name": "BreadcrumbsItemComponent", "selector": "tgui-breadcrumbs-item", "description": "A component that represents a single item within a breadcrumb navigation.\nIt can be used standalone or as part of a BreadCrumbs collection.
\n", "file": "src/lib/components/navigation/breadcrumbs/breadcrumbs-item.component.ts", "properties": {} }, "BreadcrumbsSlashIconComponent": { "name": "BreadcrumbsSlashIconComponent", "selector": "tgui-breadcrumbs-slash-icon", "description": "Slash icon used in breadcrumb navigation as a separator
\n", "file": "src/lib/components/navigation/breadcrumbs/icons/slash-icon.component.ts", "properties": {} }, "ButtonCellComponent": { "name": "ButtonCellComponent", "selector": "tgui-button-cell", "description": "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.
\n", "file": "src/lib/components/blocks/cell/components/button-cell/button-cell.component.ts", "properties": { "disabled": { "type": "any", "defaultValue": "false", "description": "Disables button interaction
\n", "optional": true } } }, "ButtonComponent": { "name": "ButtonComponent", "selector": "tgui-button", "description": "The Button component provides a customizable button with various styles and states.\nSupports different sizes, display modes, loading state, etc.
\n", "file": "src/lib/components/blocks/button/button.component.ts", "properties": { "disabled": { "type": "any", "defaultValue": "false", "description": "If true, the button will be disabled
\n", "optional": true }, "loading": { "type": "any", "defaultValue": "false", "description": "If true, shows a loading indicator instead of button content
\n", "optional": true }, "stretched": { "type": "any", "defaultValue": "false", "description": "If true, the button will stretch to the width of its container
\n", "optional": true } } }, "CaptionComponent": { "name": "CaptionComponent", "selector": "tgui-caption", "description": "The Caption component is a text wrapper that applies specific typographic styles,\nbased on the provided level 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.
CardCell component that represents a content section within a Card.
\n", "file": "src/lib/components/blocks/card/components/card-cell/card-cell.component.ts", "properties": { "header": { "type": "string", "description": "Optional header text for the cell
\n", "optional": true }, "isImage": { "type": "boolean", "defaultValue": "false", "description": "Whether the cell contains image content
\n", "optional": true }, "subtitle": { "type": "string", "description": "Optional subtitle text for the cell
\n", "optional": true } } }, "CardChipComponent": { "name": "CardChipComponent", "selector": "tgui-card-chip", "description": "CardChip component that displays a small actionable or informational element on the Card\nLeverages the ChipComponent with fixed positioning for use within cards
\n", "file": "src/lib/components/blocks/card/components/card-chip/card-chip.component.ts", "properties": { "after": { "type": "any", "description": "Content to be placed after the main text
\n", "optional": true }, "before": { "type": "any", "description": "Content to be placed before the main text
\n", "optional": true } } }, "CardComponent": { "name": "CardComponent", "selector": "tgui-card", "description": "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.
\n", "file": "src/lib/components/blocks/card/card.component.ts", "properties": { "image": { "type": "any", "description": "URL of the image to display at the top of the card
\n", "optional": true } } }, "CellComponent": { "name": "CellComponent", "selector": "tgui-cell", "description": "Cell 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 Tappable\ncomponent for interaction and is designed to be flexible and extensible.
<!-- 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>The component accepts the following template inputs:
\nbeforeTemplate: Optional template displayed on the left side of the cellafterTemplate: Optional template displayed on the right side of the celltitleBadge: Badge template displayed next to the titleAll other content should be provided via input properties:
\nsubhead: Optional content displayed above the main titletitle: Main title/header contenthint: Optional content displayed next to the titlesubtitle: Optional content displayed below the titledescription: Optional descriptive text below the subtitlepropagateEvents: When true, wraps content in semantic label for form control interactionDisabled state
\n", "optional": true }, "hovered": { "type": "any", "defaultValue": "false", "description": "Controls the hover state of the component externally, useful for keyboard navigation
\n", "optional": true }, "multiline": { "type": "any", "defaultValue": "false", "description": "Allows for multiline content without truncation
\n", "optional": true }, "propagateEvents": { "type": "any", "defaultValue": "false", "description": "When true, wraps content in semantic label for form control interaction
\n", "optional": true }, "readonly": { "type": "any", "defaultValue": "false", "description": "Readonly state
\n", "optional": true } } }, "CheckboxComponent": { "name": "CheckboxComponent", "selector": "tgui-checkbox", "description": "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.
\n", "file": "src/lib/components/form/checkbox/checkbox.component.ts", "properties": { "checked": { "type": "any", "defaultValue": "false", "description": "Set checked state
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Set disabled state
\n", "optional": true }, "indeterminate": { "type": "any", "defaultValue": "false", "description": "Set indeterminate state
\n", "optional": true } } }, "ChipComponent": { "name": "ChipComponent", "selector": "tgui-chip", "description": "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.
\n", "file": "src/lib/components/form/chip/chip.component.ts", "properties": { "after": { "type": "any", "defaultValue": "null", "description": "Content or component to be placed after the main text, such as an icon indicating an action.
\n", "optional": true }, "before": { "type": "any", "defaultValue": "null", "description": "Content or component to be placed before the main text, typically an icon or avatar.
\n", "optional": true } } }, "CircularProgressComponent": { "name": "CircularProgressComponent", "selector": "tgui-circular-progress", "description": "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 size input and visually represents\nthe progress input as a percentage of the circle's circumference.
Current progress of the circular indicator, expressed as a percentage from 0 to 100.
\n", "optional": true } } }, "ColorInputComponent": { "name": "ColorInputComponent", "selector": "tgui-color-input", "description": "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.
\n", "file": "src/lib/components/form/color-input/color-input.component.ts", "properties": { "before": { "type": "any", "defaultValue": "null", "description": "Content to be displayed before the color input
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Whether the input is disabled
\n", "optional": true } } }, "CompactPaginationComponent": { "name": "CompactPaginationComponent", "selector": "tgui-compact-pagination", "description": "CompactPagination component displays a set of dots for pagination.\nIt's typically used in carousels, sliders, or any component requiring compact pagination controls.
\nThe component supports different visual modes and manages the state of its pagination items.
\n", "file": "src/lib/components/navigation/compact-pagination/compact-pagination.component.ts", "properties": { "selectedIndex": { "type": "any", "defaultValue": "0", "description": "Selected index
\n", "optional": true } } }, "CompactPaginationItemComponent": { "name": "CompactPaginationItemComponent", "selector": "tgui-compact-pagination-item", "description": "CompactPaginationItem component represents an individual dot in a compact pagination.\nIt visually indicates whether it is selected and provides accessibility features.
\n", "file": "src/lib/components/navigation/compact-pagination/compact-pagination-item.component.ts", "properties": { "selected": { "type": "any", "defaultValue": "false", "description": "External selected state
\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": "Represents a horizontal line used to separate content within a layout or component.\nThe component allows customization through custom CSS classes.
\n", "file": "src/lib/components/misc/divider/divider.component.ts", "properties": {} }, "FileInputComponent": { "name": "FileInputComponent", "selector": "tgui-file-input", "description": "Renders a file input disguised as a button, enhancing the user interface and improving usability.\nIt leverages the ButtonCell component for consistent styling across the application.
Whether the input is disabled
\n", "optional": true }, "multiple": { "type": "any", "defaultValue": "false", "description": "Whether multiple files can be selected
\n", "optional": true } } }, "FixedLayoutComponent": { "name": "FixedLayoutComponent", "selector": "tgui-fixed-layout", "description": "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.
\n", "file": "src/lib/components/layout/fixed-layout/fixed-layout.component.ts", "properties": {} }, "FloatingArrowComponent": { "name": "FloatingArrowComponent", "selector": "tgui-floating-arrow", "description": "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.
\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": "FormInput is a base wrapper component for form elements.\nIt provides common styling, layout, and behavior for form inputs.
\nFeatures:
\nIndicates if there's content to be displayed after the form input (legacy support)
\n", "optional": true }, "before": { "type": "any", "defaultValue": "false", "description": "Indicates if there's content to be displayed before the form input (legacy support)
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Indicates if the form input is disabled
\n", "optional": true } } }, "FormInputTitleComponent": { "name": "FormInputTitleComponent", "selector": "tgui-form-input-title", "description": "FormInputTitle component that displays appropriate typography based on platform\nUsed internally by FormInput to display the header
\n", "file": "src/lib/components/form/form-input/components/form-input-title.component.ts", "properties": {} }, "HeadlineComponent": { "name": "HeadlineComponent", "selector": "tgui-headline", "description": "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 <h5> HTML tag, providing semantic meaning and ensuring good SEO practices,\nbut can be customized as needed.
Renders an icon button with customizable size and mode. It utilizes the Tappable component for enhanced\ntouch interaction, allowing it to serve various UI actions efficiently.
Disables the button
\n", "optional": true } } }, "IconCheckboxCheckedComponent": { "name": "IconCheckboxCheckedComponent", "selector": "tgui-icon-checkbox-checked", "description": "Icon component for checkbox in checked state
\n", "file": "src/lib/components/form/checkbox/icons/checkbox-checked.component.ts", "properties": {} }, "IconCheckboxComponent": { "name": "IconCheckboxComponent", "selector": "tgui-icon-checkbox", "description": "Icon component for checkbox in unchecked state
\n", "file": "src/lib/components/form/checkbox/icons/checkbox.component.ts", "properties": {} }, "IconCheckboxIndeterminateComponent": { "name": "IconCheckboxIndeterminateComponent", "selector": "tgui-icon-checkbox-indeterminate", "description": "Icon component for checkbox in indeterminate state
\n", "file": "src/lib/components/form/checkbox/icons/checkbox-indeterminate.component.ts", "properties": {} }, "IconContainerComponent": { "name": "IconContainerComponent", "selector": "tgui-icon-container", "description": "Icon container component provides a wrapper for icons with proper styling
\n", "file": "src/lib/components/blocks/icon-container/icon-container.component.ts", "properties": {} }, "IconHeartComponent": { "name": "IconHeartComponent", "selector": "tgui-icon-heart", "description": "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.
\n", "file": "src/lib/components/form/rating/story/custom-icon.component.ts", "properties": {} }, "IconRadioCheckedComponent": { "name": "IconRadioCheckedComponent", "selector": "tgui-icon-radio-checked", "description": "Icon component for radio button in checked state
\n", "file": "src/lib/components/form/radio/icons/radio-checked.component.ts", "properties": {} }, "IconRadioComponent": { "name": "IconRadioComponent", "selector": "tgui-icon-radio", "description": "Icon component for radio button in unchecked state
\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": "Badge component specifically designed to be used with Image component.\nOnly supports number type badges.
\n", "file": "src/lib/components/blocks/image/components/image-badge/image-badge.component.ts", "properties": { "count": { "type": "number", "defaultValue": "0", "description": "Badge count number
\n", "optional": true }, "maxCount": { "type": "number", "defaultValue": "99", "description": "Maximum count to display before showing "maxCount+"
\n", "optional": true } } }, "ImageComponent": { "name": "ImageComponent", "selector": "tgui-image", "description": "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.
\n", "file": "src/lib/components/blocks/image/image.component.ts", "properties": { "size": { "type": "any", "defaultValue": "40", "description": "Specifies the size of the image, with a default of 40. Sizes are defined in pixels.
\n", "optional": true } } }, "InlineButtonsComponent": { "name": "InlineButtonsComponent", "selector": "tgui-inline-buttons", "description": "InlineButtons acts as a container for InlineButtonsItem components.\nThis component provides a unified context for styling and interaction,\nleveraging the mode to apply consistent styling across all child components.\nIt ensures visual consistency across different platforms and supports custom styling modes.
InlineButtonsItem 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.
Disables the button
\n", "optional": true } } }, "InputComponent": { "name": "InputComponent", "selector": "tgui-input", "description": "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.
\n", "file": "src/lib/components/form/input/input.component.ts", "properties": { "disabled": { "type": "any", "defaultValue": "false", "description": "Whether the input is disabled
\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": "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 <h1> 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.
Link component provides a customizable anchor element.\nUsed for navigation with proper styling following the Telegram UI guidelines.
\n", "file": "src/lib/components/navigation/link/link.component.ts", "properties": {} }, "ListComponent": { "name": "ListComponent", "selector": "tgui-list", "description": "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.
\n", "file": "src/lib/components/blocks/list/list.component.ts", "properties": {} }, "ModalCloseComponent": { "name": "ModalCloseComponent", "selector": "tgui-modal-close", "description": "Modal close button component providing accessible close functionality.\nMust be used within a Modal component to function properly.\nSupports custom content and interactive animations.
\n", "file": "src/lib/components/overlays/modal/modal-close.component.ts", "properties": {} }, "ModalComponent": { "name": "ModalComponent", "selector": "tgui-modal", "description": "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.
\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": "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.
\n", "file": "src/lib/components/overlays/modal/modal-header.component.ts", "properties": { "forceHide": { "type": "any", "defaultValue": "false", "description": "Force hide header regardless of platform
\n", "optional": true }, "forceShow": { "type": "any", "defaultValue": "false", "description": "Force show header regardless of platform
\n", "optional": true } } }, "ModalOverlayComponent": { "name": "ModalOverlayComponent", "selector": "tgui-modal-overlay", "description": "Modal overlay component providing a backdrop behind the modal content.\nSupports theme-aware background colors and customizable opacity.
\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": "Renders a custom multiselectable checkbox input, adapting its icons based on the current platform (iOS or others).\nSupports all standard input checkbox properties.
\n", "file": "src/lib/components/form/multiselectable/multiselectable.component.ts", "properties": { "checked": { "type": "any", "defaultValue": "false", "description": "Set checked state
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Set disabled state
\n", "optional": true } } }, "PaginationComponent": { "name": "PaginationComponent", "selector": "tgui-pagination", "description": "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.
\n", "file": "src/lib/components/navigation/pagination/pagination.component.ts", "properties": { "boundaryCount": { "type": "any", "defaultValue": "1", "description": "Number of always visible pages at the beginning and end.
\n", "optional": true }, "count": { "type": "any", "defaultValue": "1", "description": "The total number of pages.
\n", "optional": true }, "defaultPage": { "type": "any", "defaultValue": "1", "description": "The page selected by default when the component is uncontrolled.
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Controls whether the Pagination component is interactive.
\n", "optional": true }, "hideNextButton": { "type": "any", "defaultValue": "false", "description": "If true, hide the next-page button.
If true, hide the previous-page button.
Number of always visible pages before and after the current page.
\n", "optional": true } } }, "PinInputButtonComponent": { "name": "PinInputButtonComponent", "selector": "tgui-pin-input-button", "description": "PinInputButton component for PIN code entry\nProvides a button optimized for number entry in PIN inputs\nSupports both content input property and ng-content projection
\n", "file": "src/lib/components/form/pin-input/components/pin-input-button/pin-input-button.component.ts", "properties": {} }, "PinInputCellComponent": { "name": "PinInputCellComponent", "selector": "tgui-pin-input-cell", "description": "Individual cell component for PIN input.\nDisplays a field for a single digit of a PIN code.
\n", "file": "src/lib/components/form/pin-input/components/pin-input-cell/pin-input-cell.component.ts", "properties": { "disabled": { "type": "any", "defaultValue": "false", "description": "Sets the disabled state
\n", "optional": true }, "isTyped": { "type": "any", "defaultValue": "false", "description": "Whether the cell has a value typed
\n", "optional": true } } }, "PinInputComponent": { "name": "PinInputComponent", "selector": "tgui-pin-input", "description": "Renders a set of input fields for entering pin codes with a virtual keypad for value entry and deletion.
\n", "file": "src/lib/components/form/pin-input/pin-input.component.ts", "properties": { "debug": { "type": "any", "defaultValue": "false", "description": "Enable debug mode to show platform information
\n", "optional": true }, "pinCount": { "type": "any", "defaultValue": "4", "description": "The number of pin input fields to display, with a minimum of 2.
\n", "optional": true } } }, "PinInputStoryWrapperComponent": { "name": "PinInputStoryWrapperComponent", "selector": "tgui-pin-input-story-wrapper", "description": "", "file": "src/lib/components/form/pin-input/story/pin-input.stories.ts", "properties": {} }, "PinStoryRootComponent": { "name": "PinStoryRootComponent", "selector": "tgui-pin-story-root", "description": "", "file": "src/lib/components/form/pin-input/story/pin-input.stories.ts", "properties": { "appearance": { "type": "AppearanceType", "defaultValue": "'light'", "description": "", "optional": true }, "followSystemTheme": { "type": "boolean", "defaultValue": "false", "description": "", "optional": true }, "platform": { "type": "PlatformType", "defaultValue": "'base'", "description": "", "optional": true } } }, "PlaceholderComponent": { "name": "PlaceholderComponent", "selector": "tgui-placeholder", "description": "A versatile component designed to display a placeholder with optional text, images, and actions.
\n", "file": "src/lib/components/blocks/placeholder/placeholder.component.ts", "properties": { "description": { "type": "string", "description": "Additional descriptive text to provide more details or context.
\n", "optional": true }, "header": { "type": "string", "description": "The primary text, usually a title or a header, for the placeholder.
\n", "optional": true } } }, "PlaygroundStoryComponent": { "name": "PlaygroundStoryComponent", "selector": "tgui-playground-story", "description": "", "file": "src/lib/components/blocks/accordion/stories/accordion.stories.ts", "properties": {} }, "PopperComponent": { "name": "PopperComponent", "selector": "tgui-popper", "description": "Renders a Popper component, leveraging floating UI for dynamic, responsive positioning.\nSupports advanced configurations like virtual elements, custom arrows, and auto-position updates.
\n", "file": "src/lib/components/overlays/popper/popper.component.ts", "properties": { "autoUpdateOnTargetResize": { "type": "any", "defaultValue": "false", "description": "", "optional": true }, "offsetByCrossAxis": { "type": "any", "defaultValue": "0", "description": "", "optional": true }, "offsetByMainAxis": { "type": "any", "defaultValue": "8", "description": "", "optional": true }, "sameWidth": { "type": "any", "defaultValue": "false", "description": "", "optional": true }, "withArrow": { "type": "any", "defaultValue": "true", "description": "", "optional": true } } }, "PopperDemoComponent": { "name": "PopperDemoComponent", "selector": "tgui-popper-demo", "description": "", "file": "src/lib/components/overlays/popper/story/popper.stories.ts", "properties": { "offsetByCrossAxis": { "type": "number", "defaultValue": "0", "description": "", "optional": true }, "offsetByMainAxis": { "type": "number", "defaultValue": "8", "description": "", "optional": true }, "placement": { "type": "string", "defaultValue": "'auto'", "description": "", "optional": true }, "sameWidth": { "type": "boolean", "defaultValue": "false", "description": "", "optional": true }, "withArrow": { "type": "boolean", "defaultValue": "true", "description": "", "optional": true } } }, "PopperStoryWrapperComponent": { "name": "PopperStoryWrapperComponent", "selector": "tgui-popper-story-wrapper", "description": "", "file": "src/lib/components/overlays/popper/story/popper.stories.ts", "properties": {} }, "ProgressComponent": { "name": "ProgressComponent", "selector": "tgui-progress", "description": "Renders a linear progress bar that visually represents completion percentage towards a goal.\nThe component respects accessibility standards by including appropriate ARIA attributes.
\n", "file": "src/lib/components/feedback/progress/progress.component.ts", "properties": { "value": { "type": "any", "defaultValue": "0", "description": "The current value of the progress bar, expressed as a percentage.\nThe value should be between 0 and 100.
\n", "optional": true } } }, "RadioComponent": { "name": "RadioComponent", "selector": "tgui-radio", "description": "Renders a radio button input with custom styling.\nThe component visually hides the actual input element for accessibility\nwhile providing a custom styled appearance.
\n", "file": "src/lib/components/form/radio/radio.component.ts", "properties": { "checked": { "type": "any", "defaultValue": "false", "description": "Sets the checked state
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Sets the disabled state
\n", "optional": true } } }, "RatingComponent": { "name": "RatingComponent", "selector": "tgui-rating", "description": "Renders a customizable rating component, allowing users to provide a rating by selecting a value using stars.\nSupports fractional ratings through precision control.
\nExample :<tgui-rating\n [(ratingValue)]="userRating"\n [precision]="0.5"\n [max]="5">\n</tgui-rating>The maximum rating value, representing the number of icons displayed.
\n", "optional": true }, "ratingValue": { "type": "any", "defaultValue": "0", "description": "The current value of the rating using Angular's two-way binding with model().
\n", "optional": true } } }, "RippleComponent": { "name": "RippleComponent", "selector": "tgui-ripple", "description": "", "file": "src/lib/components/utils/tappable/components/ripple/ripple.component.ts", "properties": {} }, "RootComponent": { "name": "RootComponent", "selector": "tgui-root", "description": "Root component for the TGUI library\nProvides theming, platform detection, and portal container functionality\nShould be used at the root of your application
\n", "file": "src/lib/components/utils/tgui-root/tgui-root.component.ts", "properties": { "appearance": { "type": "any", "description": "Application appearance, determined automatically if nothing passed
\n", "optional": true }, "followSystemTheme": { "type": "any", "defaultValue": "false", "description": "Whether to follow system theme changes when appearance is set manually
\n", "optional": true }, "platform": { "type": "any", "description": "Application platform, determined automatically if nothing passed
\n", "optional": true } } }, "RootPortalComponent": { "name": "RootPortalComponent", "selector": "tgui-root-portal", "description": "Component for rendering content in the portal container\nSimilar to RootRenderer in React version
\n", "file": "src/lib/components/utils/portal/root-portal.component.ts", "properties": {} }, "RootRendererComponent": { "name": "RootRendererComponent", "selector": "tgui-root-renderer", "description": "Component for rendering content in the portal container\nEquivalent to RootRenderer in React version\nUsed for rendering content outside of normal DOM hierarchy (modals, popups, etc.)
\n", "file": "src/lib/components/utils/root-renderer/root-renderer.component.ts", "properties": {} }, "SectionComponent": { "name": "SectionComponent", "selector": "tgui-section", "description": "The Section component organizes content into separate sections with optional\nheaders and footers. It automatically wraps strings and numbers in appropriate\nSectionHeader and SectionFooter components, and inserts dividers between\nchild elements.
\n", "file": "src/lib/components/blocks/section/section.component.ts", "properties": { "footer": { "type": "string | number | TemplateRefContent for the section footer. If a string is passed, SectionFooter is automatically used.\nFor centered footer, use
Content for the section header. If a string is passed, SectionHeader is automatically used.\nFor more control or a large header, use
The SectionFooter component represents a footer for the Section component.\nSupports centered mode for centered text.
\n", "file": "src/lib/components/blocks/section/components/section-footer/section-footer.component.ts", "properties": { "centered": { "type": "boolean", "defaultValue": "false", "description": "Text centering, adding additional padding
\n", "optional": true } } }, "SectionHeaderComponent": { "name": "SectionHeaderComponent", "selector": "tgui-section-header", "description": "The SectionHeader component represents a header for the Section component.\nSupports large mode for an enlarged header.
\n", "file": "src/lib/components/blocks/section/components/section-header/section-header.component.ts", "properties": { "large": { "type": "boolean", "defaultValue": "false", "description": "Enlarged header, changes font size, padding and color
\n", "optional": true } } }, "SegmentedControlComponent": { "name": "SegmentedControlComponent", "selector": "tgui-segmented-control", "description": "The SegmentedControl component renders a set of options as a segmented control,\ncommonly used for toggling between views or filtering content.\nIt is designed to adapt its appearance based on the platform,\noffering a native look and feel.
\n", "file": "src/lib/components/navigation/segmented-control/segmented-control.component.ts", "properties": { "selectedIndex": { "type": "any", "defaultValue": "0", "description": "Selected tab index
\n", "optional": true } } }, "SegmentedControlDemoComponent": { "name": "SegmentedControlDemoComponent", "selector": "tgui-segmented-control-demo", "description": "", "file": "src/lib/components/navigation/segmented-control/story/segmented-control.stories.ts", "properties": {} }, "SegmentedControlItemComponent": { "name": "SegmentedControlItemComponent", "selector": "tgui-segmented-control-item", "description": "SegmentedControlItem component represents an individual item within a SegmentedControl.\nIt can be interactively selected to display associated content.
\n", "file": "src/lib/components/navigation/segmented-control/segmented-control-item.component.ts", "properties": { "selected": { "type": "any", "defaultValue": "false", "description": "External parameter to mark item as selected
\n", "optional": true } } }, "SelectComponent": { "name": "SelectComponent", "selector": "tgui-select", "description": "Renders a custom styled select input within a FormInput container. This component is designed to integrate seamlessly\nwith the form input styles, providing a consistent look and enhanced features such as a custom dropdown arrow and support\nfor platform-specific typography. The FormInput wrapper facilitates the inclusion of headers and status messages.
Whether the input is disabled
\n", "optional": true } } }, "SkeletonComponent": { "name": "SkeletonComponent", "selector": "tgui-skeleton", "description": "Used as a placeholder during the loading state of a component or page.\nIt can visually mimic the layout that will be replaced by the actual content once loaded,\nimproving user experience by reducing perceived loading times.
\n", "file": "src/lib/components/feedback/skeleton/skeleton.component.ts", "properties": { "visible": { "type": "any", "defaultValue": "true", "description": "If true, the skeleton overlay is shown above the content.\nWhen false, the skeleton is hidden, showing any underlying content.
\n", "optional": true }, "withoutAnimation": { "type": "any", "defaultValue": "false", "description": "If true, disables the shimmering animation of the skeleton.
\n", "optional": true } } }, "SnackbarButtonComponent": { "name": "SnackbarButtonComponent", "selector": "tgui-snackbar-button", "description": "", "file": "src/lib/components/feedback/snackbar/components/snackbar-button/snackbar-button.component.ts", "properties": {} }, "SnackbarComponent": { "name": "SnackbarComponent", "selector": "tgui-snackbar", "description": "", "file": "src/lib/components/feedback/snackbar/snackbar.component.ts", "properties": { "description": { "type": "string", "description": "", "optional": true }, "duration": { "type": "number", "defaultValue": "4000", "description": "", "optional": true }, "onClose": { "type": "function", "description": "", "optional": true } } }, "SpinnerComponent": { "name": "SpinnerComponent", "selector": "tgui-spinner", "description": "Spinner component displays a loading indicator.\nAutomatically selects the appropriate indicator style based on the platform.
\n", "file": "src/lib/components/feedback/spinner/spinner.component.ts", "properties": {} }, "SpoilerComponent": { "name": "SpoilerComponent", "selector": "tgui-spoiler", "description": "Provides a way to hide or show content, such as details or spoilers, with a simple click.\nThe visibility state can be controlled externally via props or toggled by user interaction.
\n", "file": "src/lib/components/feedback/spoiler/spoiler.component.ts", "properties": { "visible": { "type": "any", "defaultValue": "false", "description": "", "optional": true } } }, "StepsComponent": { "name": "StepsComponent", "selector": "tgui-steps", "description": "Renders a visual indicator of steps or progress in a process, such as a tutorial or a multi-step form.\nIt visually represents total steps and current progress.
\n", "file": "src/lib/components/blocks/steps/steps.component.ts", "properties": { "count": { "type": "any", "defaultValue": "0", "description": "Total number of steps.
\n", "optional": true }, "progress": { "type": "any", "defaultValue": "0", "description": "Current progress, indicating how many steps have been completed.\nProgress is 0-indexed and goes up to count.
The Subheadline component is designed to render text that serves as a secondary heading\nor subheading within content. It leverages the Typography component for consistent text styling,\noffering additional control over the text's size through the level prop. By default, it renders\nas an <h6> element but can be customized with the tag property.
A custom switch component that mimics the behavior of a checkbox input but with enhanced styling.\nIt supports all the standard attributes of an HTML input element of type "checkbox".\nThe appearance of the switch can be customized to match either a base or iOS platform style.
\n", "file": "src/lib/components/form/switch/switch.component.ts", "properties": { "checked": { "type": "any", "defaultValue": "false", "description": "Sets the checked state
\n", "optional": true }, "disabled": { "type": "any", "defaultValue": "false", "description": "Sets the disabled state
\n", "optional": true } } }, "TabbarComponent": { "name": "TabbarComponent", "selector": "tgui-tabbar", "description": "Serves as a container for TabbarItem components, rendering a navigational tab bar.\nUtilizes a FixedLayout to ensure the tab bar remains positioned at a specific area within a view,\ntypically at the bottom of the screen, making it ideal for mobile or web application navigation menus.
The component adapts its styling based on the platform, providing a consistent look and feel across different devices.
\n", "file": "src/lib/components/layout/tabbar/tabbar.component.ts", "properties": { "selectedIndex": { "type": "any", "defaultValue": "0", "description": "Index of the selected tab
\n", "optional": true } } }, "TabbarItemComponent": { "name": "TabbarItemComponent", "selector": "tgui-tabbar-item", "description": "Represents an individual tab within a Tabbar.\nEach TabbarItem typically contains an icon and optional text.\nWhen selected, the tab exhibits different visual styles to indicate its active state.
The component adapts its styling based on the platform, providing a consistent look and feel across different devices.
\n", "file": "src/lib/components/layout/tabbar/tabbar-item.component.ts", "properties": {} }, "TabsItemComponent": { "name": "TabsItemComponent", "selector": "tgui-tabs-item", "description": "TabsItem component represents an individual tab within a TabsList.\nIt can be interactively selected to display associated content.
\n", "file": "src/lib/components/navigation/tabs-list/tabs-item.component.ts", "properties": { "selected": { "type": "any", "defaultValue": "false", "description": "External parameter for tab selection
\n", "optional": true } } }, "TabsListComponent": { "name": "TabsListComponent", "selector": "tgui-tabs-list", "description": "The TabsList component renders a list of tabs, typically used for navigating between different views\nor filtering content. It visually indicates the currently active tab and supports custom styling.
\n", "file": "src/lib/components/navigation/tabs-list/tabs-list.component.ts", "properties": { "selectedIndex": { "type": "any", "defaultValue": "0", "description": "Index of selected tab
\n", "optional": true } } }, "TabsListDemoComponent": { "name": "TabsListDemoComponent", "selector": "tgui-tabs-list-demo", "description": "", "file": "src/lib/components/navigation/tabs-list/story/tabs-list.stories.ts", "properties": {} }, "TabsListWithContentDemoComponent": { "name": "TabsListWithContentDemoComponent", "selector": "tgui-tabs-list-content-demo", "description": "", "file": "src/lib/components/navigation/tabs-list/story/tabs-list-with-content.stories.ts", "properties": {} }, "TappableComponent": { "name": "TappableComponent", "selector": "tgui-tappable", "description": "", "file": "src/lib/components/utils/tappable/tappable.component.ts", "properties": { "disabled": { "type": "any", "defaultValue": "false", "description": "Disable component
\n", "optional": true }, "readonly": { "type": "any", "defaultValue": "false", "description": "Make component read-only
\n", "optional": true } } }, "TextareaComponent": { "name": "TextareaComponent", "selector": "tgui-textarea", "description": "Wraps a standard HTML textarea element within a FormInput container, applying custom styles and functionality.\nThis component inherits the flexible design of the FormInput, allowing it to display a header and reflect different status styles.\nThe appearance and behavior of the textarea can be customized through various props, providing a seamless integration with forms.
Whether the textarea is disabled
\n", "optional": true } } }, "TextComponent": { "name": "TextComponent", "selector": "tgui-text", "description": "Text component is designed for general-purpose text rendering,\noffering a wide range of typographic options. It extends the Typography\ncomponent, inheriting its flexibility and styling capabilities.\nThis component is ideal for paragraphs, labels, or any textual content, providing\nconsistent styling across the application.
\n", "file": "src/lib/components/typography/text/text.component.ts", "properties": { "plain": { "type": "any", "defaultValue": "true", "description": "", "optional": true }, "caps": { "type": "any", "defaultValue": "false", "description": "", "optional": true } } }, "TguiComponent": { "name": "TguiComponent", "selector": "tgui-root", "description": "", "file": "src/lib/tgui.component.ts", "properties": {} }, "TguiDynamicIconComponent": { "name": "TguiDynamicIconComponent", "selector": "tgui-dynamic-icon", "description": "", "file": "src/lib/icons/dynamic-icon.component.ts", "properties": { "icon": { "type": "string", "description": "", "optional": true } } }, "TguiIcon12Quote": { "name": "TguiIcon12Quote", "selector": "tgui-icon12-quote", "description": "", "file": "src/lib/icons/icon12/tgui-icon12-quote.ts", "properties": {} }, "TguiIcon16Cancel": { "name": "TguiIcon16Cancel", "selector": "tgui-icon16-cancel", "description": "", "file": "src/lib/icons/icon16/tgui-icon16-cancel.ts", "properties": {} }, "TguiIcon16Chevron": { "name": "TguiIcon16Chevron", "selector": "tgui-icon16-chevron", "description": "", "file": "src/lib/icons/icon16/tgui-icon16-chevron.ts", "properties": {} }, "TguiIcon20ChevronDown": { "name": "TguiIcon20ChevronDown", "selector": "tgui-icon20-chevron-down", "description": "", "file": "src/lib/icons/icon20/tgui-icon20-chevron-down.ts", "properties": {} }, "TguiIcon20Copy": { "name": "TguiIcon20Copy", "selector": "tgui-icon20-copy", "description": "", "file": "src/lib/icons/icon20/tgui-icon20-copy.ts", "properties": {} }, "TguiIcon20QuestionMark": { "name": "TguiIcon20QuestionMark", "selector": "tgui-icon20-question-mark", "description": "", "file": "src/lib/icons/icon20/tgui-icon20-question-mark.ts", "properties": {} }, "TguiIcon20Select": { "name": "TguiIcon20Select", "selector": "tgui-icon20-select", "description": "", "file": "src/lib/icons/icon20/tgui-icon20-select.ts", "properties": {} }, "TguiIcon20SelectIos": { "name": "TguiIcon20SelectIos", "selector": "tgui-icon20-select-ios", "description": "", "file": "src/lib/icons/icon20/tgui-icon20-select-ios.ts", "properties": {} }, "TguiIcon24Cancel": { "name": "TguiIcon24Cancel", "selector": "tgui-icon24-cancel", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-cancel.ts", "properties": {} }, "TguiIcon24Channel": { "name": "TguiIcon24Channel", "selector": "tgui-icon24-channel", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-channel.ts", "properties": {} }, "TguiIcon24Chat": { "name": "TguiIcon24Chat", "selector": "tgui-icon24-chat", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-chat.ts", "properties": {} }, "TguiIcon24ChevronDown": { "name": "TguiIcon24ChevronDown", "selector": "tgui-icon24-chevron-down", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-chevron-down.ts", "properties": {} }, "TguiIcon24ChevronLeft": { "name": "TguiIcon24ChevronLeft", "selector": "tgui-icon24-chevron-left", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-chevron-left.ts", "properties": {} }, "TguiIcon24ChevronRight": { "name": "TguiIcon24ChevronRight", "selector": "tgui-icon24-chevron-right", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-chevron-right.ts", "properties": {} }, "TguiIcon24Close": { "name": "TguiIcon24Close", "selector": "tgui-icon24-close", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-close.ts", "properties": {} }, "TguiIcon24Notifications": { "name": "TguiIcon24Notifications", "selector": "tgui-icon24-notifications", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-notifications.ts", "properties": {} }, "TguiIcon24PersonRemove": { "name": "TguiIcon24PersonRemove", "selector": "tgui-icon24-person-remove", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-person-remove.ts", "properties": {} }, "TguiIcon24Qr": { "name": "TguiIcon24Qr", "selector": "tgui-icon24-qr", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-qr.ts", "properties": {} }, "TguiIcon24SunLow": { "name": "TguiIcon24SunLow", "selector": "tgui-icon24-sun-low", "description": "", "file": "src/lib/icons/icon24/tgui-icon24-sun-low.ts", "properties": {} }, "TguiIcon28AddCircle": { "name": "TguiIcon28AddCircle", "selector": "tgui-icon28-add-circle", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-add-circle.ts", "properties": {} }, "TguiIcon28Archive": { "name": "TguiIcon28Archive", "selector": "tgui-icon28-archive", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-archive.ts", "properties": {} }, "TguiIcon28Attach": { "name": "TguiIcon28Attach", "selector": "tgui-icon28-attach", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-attach.ts", "properties": {} }, "TguiIcon28Chat": { "name": "TguiIcon28Chat", "selector": "tgui-icon28-chat", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-chat.ts", "properties": {} }, "TguiIcon28Close": { "name": "TguiIcon28Close", "selector": "tgui-icon28-close", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-close.ts", "properties": {} }, "TguiIcon28CloseAmbient": { "name": "TguiIcon28CloseAmbient", "selector": "tgui-icon28-close-ambient", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-close-ambient.ts", "properties": {} }, "TguiIcon28Devices": { "name": "TguiIcon28Devices", "selector": "tgui-icon28-devices", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-devices.ts", "properties": {} }, "TguiIcon28Edit": { "name": "TguiIcon28Edit", "selector": "tgui-icon28-edit", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-edit.ts", "properties": {} }, "TguiIcon28Heart": { "name": "TguiIcon28Heart", "selector": "tgui-icon28-heart", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-heart.ts", "properties": {} }, "TguiIcon28Stats": { "name": "TguiIcon28Stats", "selector": "tgui-icon28-stats", "description": "", "file": "src/lib/icons/icon28/tgui-icon28-stats.ts", "properties": {} }, "TguiIcon32ProfileColoredSquare": { "name": "TguiIcon32ProfileColoredSquare", "selector": "tgui-icon32-profile-colored-square", "description": "", "file": "src/lib/icons/icon32/tgui-icon32-profile-colored-square.ts", "properties": {} }, "TguiIcon36Backspace": { "name": "TguiIcon36Backspace", "selector": "tgui-icon36-backspace", "description": "", "file": "src/lib/icons/icon36/tgui-icon36-backspace.ts", "properties": {} }, "TguiIconBase": { "name": "TguiIconBase", "description": "", "file": "src/lib/icons/icon-base.component.ts", "properties": {} }, "ThemeDemoComponent": { "name": "ThemeDemoComponent", "selector": "tgui-theme-demo", "description": "", "file": "src/lib/services/story/theme-demo.component.ts", "properties": {} }, "ThemeSwitchComponent": { "name": "ThemeSwitchComponent", "selector": "tgui-theme-switch", "description": "", "file": "src/lib/services/story/theme-switch.component.ts", "properties": {} }, "TimelineComponent": { "name": "TimelineComponent", "selector": "tgui-timeline", "description": "", "file": "src/lib/components/blocks/timeline/timeline.component.ts", "properties": {} }, "TimelineItemComponent": { "name": "TimelineItemComponent", "selector": "tgui-timeline-item", "description": "", "file": "src/lib/components/blocks/timeline/components/timeline-item/timeline-item.component.ts", "properties": { "header": { "type": "string", "description": "", "optional": true }, "horizontal": { "type": "boolean", "description": "", "optional": true }, "mode": { "type": "\"active\" | \"pre-active\"", "description": "", "optional": true } } }, "TitleComponent": { "name": "TitleComponent", "selector": "tgui-title", "description": "The Title component is designed to render text as a page or section heading,\nproviding clear hierarchy and structure within content. It supports three levels of emphasis,\nallowing for flexibility in design while maintaining semantic integrity. By default, it uses h3\nfor its semantic HTML element but can be customized via the level prop or explicitly with the tag property.
TODO: Implement as a directive to allow usage like:\n<tgui-button tguiTooltip [tguiTooltipContent]="TEMPLATE OR STRING CONTENT">
\nThe Tooltip component provides text labels that appear when the user hovers over, focuses on,\nor touches an element. It's built on top of the Popper component for automatic positioning\nrelative to the target element. The tooltip supports light and dark modes for different visual\ncontexts and uses the Caption component for its content to ensure consistent typography.
\n", "file": "src/lib/components/overlays/tooltip/tooltip.component.ts", "properties": { "autoUpdateOnTargetResize": { "type": "any", "defaultValue": "false", "description": "Whether to update tooltip position when target element resizes
\n", "optional": true }, "offsetByCrossAxis": { "type": "any", "defaultValue": "0", "description": "Offset along the cross axis
\n", "optional": true }, "offsetByMainAxis": { "type": "any", "defaultValue": "8", "description": "Offset along the main axis
\n", "optional": true }, "sameWidth": { "type": "any", "defaultValue": "false", "description": "Match width of the tooltip with target element
\n", "optional": true } } }, "TooltipDemoComponent": { "name": "TooltipDemoComponent", "selector": "tgui-tooltip-demo", "description": "", "file": "src/lib/components/overlays/tooltip/story/tooltip.stories.ts", "properties": { "mode": { "type": "\"light\" | \"dark\"", "defaultValue": "'light'", "description": "", "optional": true }, "placement": { "type": "string", "defaultValue": "'auto'", "description": "", "optional": true }, "sameWidth": { "type": "boolean", "defaultValue": "false", "description": "", "optional": true } } }, "TooltipStoryWrapperComponent": { "name": "TooltipStoryWrapperComponent", "selector": "tgui-tooltip-story-wrapper", "description": "", "file": "src/lib/components/overlays/tooltip/story/tooltip.stories.ts", "properties": { "mode": { "type": "\"light\" | \"dark\"", "defaultValue": "'light'", "description": "", "optional": true }, "placement": { "type": "string", "defaultValue": "'auto'", "description": "", "optional": true }, "sameWidth": { "type": "boolean", "defaultValue": "false", "description": "", "optional": true } } }, "TouchComponent": { "name": "TouchComponent", "selector": "tgui-touch", "description": "Component for handling touch and gesture events
\nThis component is ported from the VKUI library for convenient handling of pointer events\nhttps://github.com/VKCOM/VKUI/blob/master/packages/vkui/src/components/Touch/Touch.tsx
\n", "file": "src/lib/components/utils/touch/touch.component.ts", "properties": { "noSlideClick": { "type": "any", "defaultValue": "false", "description": "", "optional": true }, "slideThreshold": { "type": "any", "defaultValue": "5", "description": "", "optional": true }, "stopPropagation": { "type": "any", "defaultValue": "false", "description": "", "optional": true }, "useCapture": { "type": "any", "defaultValue": "false", "description": "", "optional": true }, "usePointerHover": { "type": "any", "defaultValue": "false", "description": "", "optional": true } } }, "TypographyComponent": { "name": "TypographyComponent", "selector": "tgui-typography", "description": "The Typography component is a versatile wrapper for text content, offering\ncustomizable styling options such as weight, capitalization, and HTML tag. It's designed\nto facilitate consistent text styling across your application, with support for customization\nthrough inputs.
\n", "file": "src/lib/components/typography/typography.component.ts", "properties": { "caps": { "type": "any", "defaultValue": "false", "description": "", "optional": true }, "plain": { "type": "any", "defaultValue": "true", "description": "", "optional": true } } } }, "services": { "FloatingMiddlewaresService": { "name": "FloatingMiddlewaresService", "description": "", "file": "src/lib/components/overlays/popper/hooks/use-floating-middlewares.ts", "methods": { "getMiddlewares": { "description": "", "returnType": "{ middlewares: {}; strictPlacement: any; }", "parameters": [ { "name": "options", "type": "UseFloatingMiddlewaresOptions", "deprecated": false, "deprecationMessage": "" } ] } } }, "PinInputService": { "name": "PinInputService", "description": "Service that provides functionality for PIN input component\nSimilar to the React usePinInput hook
\n", "file": "src/lib/components/form/pin-input/hooks/use-pin-input.ts", "methods": { "create": { "description": "Creates a PIN input controller with the specified parameters
\n", "returnType": "{ value: any; setInputRefByIndex: (index: number, ref: any) => void; handleClickValue: (enteredValue: number) => void; handleClickBackspace: () => void; handleButton: (index: number, button: string) => void; }", "parameters": [ { "name": "params", "type": "UsePinInputParams", "deprecated": false, "deprecationMessage": "" } ] } } }, "PlatformService": { "name": "PlatformService", "description": "", "file": "src/lib/services/platform.service.ts", "methods": { "isIOS": { "description": "Checks if current platform is iOS\nUses DOM class to determine platform, caches result for better performance
\n", "returnType": "boolean", "parameters": [] }, "setPlatform": { "description": "Set platform manually
\n", "returnType": "void", "parameters": [ { "name": "platform", "type": "PlatformType", "deprecated": false, "deprecationMessage": "" } ] } } }, "PortalService": { "name": "PortalService", "description": "Service for managing portal container references\nProvides functionality for components to render content outside of their DOM hierarchy
\n", "file": "src/lib/services/portal.service.ts", "methods": { "clearPortalContainer": { "description": "Clear the portal container reference\nThis should be called when the container is destroyed
\n", "returnType": "void", "parameters": [] }, "getPortalContainerElement": { "description": "Get the current portal container element\nReturns the native DOM element or null if not set
\n", "returnType": "HTMLElement | null", "parameters": [] }, "isPortalReady": { "description": "Check if portal container is ready for use
\n", "returnType": "boolean", "parameters": [] }, "setPortalContainer": { "description": "Set the portal container reference\nThis is typically called by the TGUIRootComponent
\n", "returnType": "void", "parameters": [ { "name": "elementRef", "type": "ElementRefAdd a new ripple wave effect at the specified coordinates
\n", "returnType": "RippleWave[]", "parameters": [ { "name": "x", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "y", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "pointerId", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "currentWaves", "type": "RippleWave[]", "deprecated": false, "deprecationMessage": "" } ] }, "handlePointerCancel": { "description": "Handle pointer cancel/up event
\n", "returnType": "void", "parameters": [ { "name": "pointerId", "type": "number", "deprecated": false, "deprecationMessage": "" } ] }, "handlePointerDown": { "description": "Handle pointer down event
\n", "returnType": "void", "parameters": [ { "name": "event", "type": "PointerEvent", "deprecated": false, "deprecationMessage": "" }, { "name": "wavesSignal", "type": "ReturnType<Angular service for using system themes\nUses signals to track theme changes
\n", "file": "src/lib/utils/theme-helper.ts", "methods": { "disableSystemTheme": { "description": "", "returnType": "void", "parameters": [] }, "enableSystemTheme": { "description": "", "returnType": "void", "parameters": [] }, "setTheme": { "description": "", "returnType": "void", "parameters": [ { "name": "theme", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "" } ] } } }, "TelegramService": { "name": "TelegramService", "description": "", "file": "src/lib/services/telegram.service.ts", "methods": { "getTelegramData": { "description": "", "returnType": "WebApp | undefined", "parameters": [] }, "hexToRGB": { "description": "", "returnType": "void", "parameters": [ { "name": "hex", "type": "string", "deprecated": false, "deprecationMessage": "" } ] } } }, "TguiService": { "name": "TguiService", "description": "", "file": "src/lib/tgui.service.ts", "methods": {} }, "ThemeService": { "name": "ThemeService", "description": "", "file": "src/lib/services/theme.service.ts", "methods": { "detectSystemTheme": { "description": "Detect and apply system theme
\n", "returnType": "void", "parameters": [] }, "loadGlobalStyles": { "description": "Load global CSS variables to make them available for all components
\n", "returnType": "void", "parameters": [] }, "setTheme": { "description": "Change the theme manually
\n", "returnType": "void", "parameters": [ { "name": "theme", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "" }, { "name": "followSystem", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "false" } ] }, "setupTheme": { "description": "Setup theme based on inputs and system preferences
\n", "returnType": "void", "parameters": [ { "name": "appearance", "type": "AppearanceType", "deprecated": false, "deprecationMessage": "", "optional": true }, { "name": "followSystem", "type": "boolean", "deprecated": false, "deprecationMessage": "", "defaultValue": "false" } ] } } }, "TypographyCellService": { "name": "TypographyCellService", "description": "Service that provides platform-specific typography components for Cell\nSimilar to the React useTypographyCellComponents hook
\n", "file": "src/lib/components/blocks/cell/services/typography-cell.service.ts", "methods": { "getDescriptionComponent": { "description": "Returns the appropriate component type for the description based on platform\niOS: CaptionComponent\nAndroid/Web: SubheadlineComponent with level 2
\n", "returnType": "TypeReturns the level to use for description component if it's a SubheadlineComponent
\n", "returnType": "string", "parameters": [] }, "getTitleComponent": { "description": "Returns the appropriate component type for the title based on platform\niOS: TextComponent\nAndroid/Web: SubheadlineComponent with level 1
\n", "returnType": "TypeReturns the level to use for title component if it's a SubheadlineComponent
\n", "returnType": "string", "parameters": [] } } } }, "directives": { "HorizontalScrollDirective": { "name": "HorizontalScrollDirective", "selector": "[tguiHorizontalScroll]", "description": "", "file": "src/lib/directives/horizontal-scroll.directive.ts" }, "PortalOutletDirective": { "name": "PortalOutletDirective", "selector": "[tguiPortalOutlet]", "description": "Directive that renders content into a portal container\nUse it to project content outside of its normal DOM hierarchy
\n", "file": "src/lib/directives/portal-outlet.directive.ts" }, "TguiSvgPropsDirective": { "name": "TguiSvgPropsDirective", "selector": "[tguiSvgProps]", "description": "Directive for automatic passing of icon properties to SVG element\nAllows using an approach similar to {...props} in React
\n", "file": "src/lib/icons/directives/svg-props.directive.ts" }, "ThemeDirective": { "name": "ThemeDirective", "selector": "[tguiTheme]", "description": "Directive that automatically loads the TGUI styles\nThis should be applied once on a root element (typically body or app-root)
\n", "file": "src/lib/directives/tgui-theme.directive.ts" }, "VisuallyHiddenDirective": { "name": "VisuallyHiddenDirective", "selector": "[tguiVisuallyHidden]", "description": "Directive that visually hides an element while keeping it accessible for screen readers.\nUsed for improving accessibility by providing context for screen reader users\nwithout affecting the visual presentation.
\n", "file": "src/lib/directives/visually-hidden.directive.ts" } }, "interfaces": { "BreadcrumbItem": { "name": "BreadcrumbItem", "description": "Interface for a breadcrumb item
\n", "file": "src/lib/components/navigation/breadcrumbs/breadcrumbs.component.ts", "properties": { "href": { "type": "string", "description": "Optional URL for external links (href attribute)
\n", "optional": true }, "label": { "type": "string", "description": "Display text for the breadcrumb item
\n", "optional": false }, "routerLink": { "type": "string | any[]", "description": "Optional URL for internal navigation (routerLink)
\n", "optional": true }, "target": { "type": "string", "description": "Optional target attribute for external links
\n", "optional": true } } }, "CircleAttributes": { "name": "CircleAttributes", "description": "", "file": "src/lib/components/feedback/circular-progress/utils/get-circle-attributes.ts", "properties": { "radius": { "type": "number", "description": "", "optional": false }, "size": { "type": "number", "description": "", "optional": false }, "strokeWidth": { "type": "number", "description": "", "optional": false } } }, "Coords": { "name": "Coords", "description": "", "file": "src/lib/components/overlays/popper/components/floating-arrow/floating-arrow.component.ts", "properties": { "x": { "type": "number", "description": "", "optional": true }, "y": { "type": "number", "description": "", "optional": true } } }, "CustomTouchEvent": { "name": "CustomTouchEvent", "description": "Custom touch event type combining MouseEvent and TouchEvent properties
\n", "file": "src/lib/components/utils/touch/touch.component.ts", "properties": { "changedTouches": { "type": "TouchList", "description": "", "optional": true }, "touches": { "type": "TouchList", "description": "", "optional": true } } }, "Gesture": { "name": "Gesture", "description": "Interface for a touch/gesture event
\n", "file": "src/lib/components/utils/touch/touch.component.ts", "properties": { "clientX": { "type": "number", "description": "", "optional": false }, "clientY": { "type": "number", "description": "", "optional": false }, "duration": { "type": "number", "description": "", "optional": false }, "isPressed": { "type": "boolean", "description": "", "optional": false }, "isSlide": { "type": "boolean", "description": "", "optional": false }, "isSlideX": { "type": "boolean", "description": "", "optional": false }, "isSlideY": { "type": "boolean", "description": "", "optional": false }, "isX": { "type": "boolean", "description": "", "optional": false }, "isY": { "type": "boolean", "description": "", "optional": false }, "shiftX": { "type": "number", "description": "", "optional": false }, "shiftXAbs": { "type": "number", "description": "", "optional": false }, "shiftY": { "type": "number", "description": "", "optional": false }, "shiftYAbs": { "type": "number", "description": "", "optional": false }, "startT": { "type": "Date", "description": "", "optional": false }, "startX": { "type": "number", "description": "", "optional": false }, "startY": { "type": "number", "description": "", "optional": false } } }, "ModalSnapPoint": { "name": "ModalSnapPoint", "description": "", "file": "src/lib/components/overlays/modal/modal.component.ts", "properties": { "headerHeight": { "type": "number", "description": "", "optional": true }, "height": { "type": "number | string", "description": "", "optional": false } } }, "PaginationItem": { "name": "PaginationItem", "description": "Represents a single item in the pagination control
\n", "file": "src/lib/components/navigation/pagination/hooks/pagination.types.ts", "properties": { "aria-current": { "type": "\"true\" | undefined", "description": "ARIA current attribute
\n", "optional": true }, "disabled": { "type": "boolean", "description": "Whether this item is disabled
\n", "optional": false }, "onClick": { "type": "function", "description": "Handler for when the item is clicked
\n", "optional": false }, "page": { "type": "number | null", "description": "Page number, or null for special items like ellipsis
\n", "optional": false }, "selected": { "type": "boolean", "description": "Whether this item is currently selected
\n", "optional": false }, "type": { "type": "PaginationType", "description": "Type of pagination item
\n", "optional": false } } }, "PaginationProps": { "name": "PaginationProps", "description": "Properties for the pagination component
\n", "file": "src/lib/components/navigation/pagination/hooks/pagination.types.ts", "properties": { "boundaryCount": { "type": "number", "description": "Number of always visible pages at the beginning and end.
\n", "optional": true }, "count": { "type": "number", "description": "The total number of pages.
\n", "optional": true }, "defaultPage": { "type": "number", "description": "The page selected by default when the component is uncontrolled
\n", "optional": true }, "disabled": { "type": "boolean", "description": "Controls whether the Pagination component is interactive.
\n", "optional": true }, "hideNextButton": { "type": "boolean", "description": "If true, hide the next-page button.
If true, hide the previous-page button.
The current page.
\n", "optional": true }, "siblingCount": { "type": "number", "description": "Number of always visible pages before and after the current page.
\n", "optional": true } } }, "PopperProps": { "name": "PopperProps", "description": "", "file": "src/lib/components/overlays/popper/popper.component.ts", "properties": { "arrowProps": { "type": "literal type", "description": "Configuration and customization options for the floating arrow component.
\n", "optional": true }, "autoUpdateOnTargetResize": { "type": "boolean", "description": "Opt-in feature to automatically update Popper's position when the target element resizes.
\n", "optional": true }, "targetRef": { "type": "HTMLElement | VirtualElement | null", "description": "Reference to the target element or virtual element for precise positioning.
\n", "optional": false } } }, "RatingProps": { "name": "RatingProps", "description": "", "file": "src/lib/components/form/rating/rating.component.ts", "properties": { "max": { "type": "number", "description": "The maximum rating value, representing the number of icons displayed.
\n", "optional": true }, "onChange": { "type": "function", "description": "Callback function invoked when the rating value changes.
\n", "optional": true }, "precision": { "type": "\"0.1\" | \"0.2\" | \"0.25\" | \"0.5\" | \"1\"", "description": "The precision of the rating, determining the fraction of the star that can be selected.
\n", "optional": true }, "value": { "type": "number", "description": "The current value of the rating.
\n", "optional": true } } }, "RippleDemoProps": { "name": "RippleDemoProps", "description": "", "file": "src/lib/components/utils/tappable/components/ripple/story/ripple.stories.ts", "properties": { "addRipple": { "type": "function", "description": "", "optional": false }, "waves": { "type": "RippleWave[]", "description": "", "optional": false } } }, "RippleWave": { "name": "RippleWave", "description": "", "file": "src/lib/services/ripple.service.ts", "properties": { "date": { "type": "number", "description": "", "optional": false }, "pointerId": { "type": "number", "description": "", "optional": false }, "x": { "type": "number", "description": "", "optional": false }, "y": { "type": "number", "description": "", "optional": false } } }, "SegmentedOption": { "name": "SegmentedOption", "description": "", "file": "src/lib/components/navigation/segmented-control/story/segmented-control.stories.ts", "properties": { "label": { "type": "string", "description": "", "optional": false }, "value": { "type": "string", "description": "", "optional": false } } }, "SnackbarOptions": { "name": "SnackbarOptions", "description": "", "file": "src/lib/components/feedback/snackbar/snackbar.service.ts", "properties": { "afterTemplate": { "type": "TemplateRefBase interface for icon components, compatible with React version
\n", "file": "src/lib/icons/icon.interface.ts", "properties": { "ariaLabel": { "type": "string", "description": "Aria label for accessibility
\n", "optional": true }, "autoFocus": { "type": "boolean", "description": "Whether the element should get focus on load
\n", "optional": true }, "class": { "type": "string", "description": "CSS class to apply to the icon
\n", "optional": true }, "fill": { "type": "string", "description": "Fill color of the icon
\n", "optional": true }, "height": { "type": "string | number", "description": "Height of the icon (can be CSS units or number)
\n", "optional": true }, "id": { "type": "string", "description": "ID of the element
\n", "optional": true }, "onBlur": { "type": "EventEmitterBlur event handler
\n", "optional": true }, "onClick": { "type": "EventEmitterClick event handler
\n", "optional": true }, "onFocus": { "type": "EventEmitterFocus event handler
\n", "optional": true }, "onKeyDown": { "type": "EventEmitterKey down event handler
\n", "optional": true }, "onMouseEnter": { "type": "EventEmitterMouse enter event handler
\n", "optional": true }, "onMouseLeave": { "type": "EventEmitterMouse leave event handler
\n", "optional": true }, "onPointerDown": { "type": "EventEmitterPointer down event handler
\n", "optional": true }, "onPointerUp": { "type": "EventEmitterPointer up event handler
\n", "optional": true }, "role": { "type": "string", "description": "Role attribute for accessibility
\n", "optional": true }, "stroke": { "type": "string", "description": "Stroke color of the icon
\n", "optional": true }, "style": { "type": "literal type", "description": "Additional styles to apply to the icon
\n", "optional": true }, "tabIndex": { "type": "number", "description": "Tab index for keyboard navigation
\n", "optional": true }, "title": { "type": "string", "description": "Title for the icon
\n", "optional": true }, "width": { "type": "string | number", "description": "Width of the icon (can be CSS units or number)
\n", "optional": true } } }, "ThemeParams": { "name": "ThemeParams", "description": "", "file": "src/lib/services/telegram.service.ts", "properties": { "accent_text_color": { "type": "string", "description": "", "optional": true }, "bg_color": { "type": "string", "description": "", "optional": true }, "button_color": { "type": "string", "description": "", "optional": true }, "button_text_color": { "type": "string", "description": "", "optional": true }, "destructive_text_color": { "type": "string", "description": "", "optional": true }, "header_bg_color": { "type": "string", "description": "", "optional": true }, "hint_color": { "type": "string", "description": "", "optional": true }, "link_color": { "type": "string", "description": "", "optional": true }, "secondary_bg_color": { "type": "string", "description": "", "optional": true }, "section_bg_color": { "type": "string", "description": "", "optional": true }, "section_header_text_color": { "type": "string", "description": "", "optional": true }, "subtitle_text_color": { "type": "string", "description": "", "optional": true }, "text_color": { "type": "string", "description": "", "optional": true } } }, "TouchEvent": { "name": "TouchEvent", "description": "Touch event with gesture information
\n", "file": "src/lib/components/utils/touch/touch.component.ts", "properties": { "originalEvent": { "type": "CustomTouchEvent", "description": "", "optional": false } } }, "UseFloatingMiddlewaresOptions": { "name": "UseFloatingMiddlewaresOptions", "description": "", "file": "src/lib/components/overlays/popper/hooks/use-floating-middlewares.ts", "properties": { "arrowHeight": { "type": "number", "description": "The height of the arrow. This is added to mainAxis to prevent the arrow from overlapping the anchor element.
A safe zone around the arrow to prevent it from exceeding the content bounds.
\n", "optional": true }, "arrowRef": { "type": "HTMLElement | null", "description": "Ref for arrow element
\n", "optional": true }, "customMiddlewares": { "type": "Middleware[]", "description": "An array of custom modifiers for Popper.
\n", "optional": true }, "offsetByCrossAxis": { "type": "number", "description": "Offset along the cross axis.
\n", "optional": true }, "offsetByMainAxis": { "type": "number", "description": "Offset along the main axis.
\n", "optional": true }, "placement": { "type": "PlacementWithAuto", "description": "By default, the component will automatically choose the best placement
\n", "optional": true }, "sameWidth": { "type": "boolean", "description": "Sets the width to match the target element.
\n", "optional": true }, "withArrow": { "type": "boolean", "description": "Whether to display an arrow pointing to the anchor element.
\n", "optional": true } } }, "UsePinInputParams": { "name": "UsePinInputParams", "description": "", "file": "src/lib/components/form/pin-input/hooks/use-pin-input.ts", "properties": { "onChange": { "type": "function", "description": "", "optional": true }, "pinCount": { "type": "number", "description": "", "optional": false }, "value": { "type": "number[]", "description": "", "optional": true } } }, "WebApp": { "name": "WebApp", "description": "", "file": "src/lib/services/telegram.service.ts", "properties": { "colorScheme": { "type": "\"light\" | \"dark\"", "description": "", "optional": false }, "themeParams": { "type": "ThemeParams", "description": "", "optional": false } } }, "Window": { "name": "Window", "description": "", "file": "src/lib/services/telegram.service.ts", "properties": { "Telegram": { "type": "literal type", "description": "", "optional": true } } } } }