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
107 lines (106 loc) • 5.79 kB
TypeScript
import { TemplateRef } from '@angular/core';
import { PlatformService } from '../../../services/platform.service';
import { TypographyCellService } from './services/typography-cell.service';
import * as i0 from "@angular/core";
/**
* `Cell` component acts as a flexible and interactive container for various types of content,
* enabling the creation of complex list items, form fields, and more. It leverages the `Tappable`
* component for interaction and is designed to be flexible and extensible.
*
* ## Usage
*
* ```html
* <!-- Using input properties and template references -->
* <tgui-cell
* subhead="Subhead text"
* title="Title text"
* hint="Hint text"
* subtitle="Subtitle text"
* description="Description text"
* [titleBadge]="badgeTemplate"
* [beforeTemplate]="beforeTemplate"
* [afterTemplate]="afterTemplate">
* Main content
* </tgui-cell>
*
* <!-- Using with event propagation for form controls (combines semantic label with tappable effects) -->
* <tgui-cell
* [propagateEvents]="true"
* description="Click anywhere to toggle - includes ripple effects!"
* [afterTemplate]="switchTemplate">
* Toggle option
* </tgui-cell>
*
* <ng-template #beforeTemplate>
* <tgui-avatar size="l"></tgui-avatar>
* </ng-template>
*
* <ng-template #afterTemplate>
* <tgui-badge type="number">99</tgui-badge>
* </ng-template>
*
* <ng-template #switchTemplate>
* <tgui-switch [checked]="true"></tgui-switch>
* </ng-template>
*
* <ng-template #badgeTemplate>
* <tgui-badge type="dot"></tgui-badge>
* </ng-template>
* ```
*
* ## Template Inputs
*
* The component accepts the following template inputs:
*
* - `beforeTemplate`: Optional template displayed on the left side of the cell
* - `afterTemplate`: Optional template displayed on the right side of the cell
* - `titleBadge`: Badge template displayed next to the title
*
* All other content should be provided via input properties:
* - `subhead`: Optional content displayed above the main title
* - `title`: Main title/header content
* - `hint`: Optional content displayed next to the title
* - `subtitle`: Optional content displayed below the title
* - `description`: Optional descriptive text below the subtitle
* - `propagateEvents`: When true, wraps content in semantic label for form control interaction
*/
export declare class CellComponent {
/** Controls the hover state of the component externally, useful for keyboard navigation */
hovered: import("@angular/core").InputSignal<boolean>;
/** Allows for multiline content without truncation */
multiline: import("@angular/core").InputSignal<boolean>;
/** Interactive animation type */
interactiveAnimation: import("@angular/core").InputSignal<"opacity" | "background">;
/** Readonly state */
readonly: import("@angular/core").InputSignal<boolean>;
/** Disabled state */
disabled: import("@angular/core").InputSignal<boolean>;
/** When true, wraps content in semantic label for form control interaction */
propagateEvents: import("@angular/core").InputSignal<boolean>;
/** Content displayed above the main content as a subheading */
subhead: import("@angular/core").InputSignal<string | undefined>;
/** Main content displayed as a header */
title: import("@angular/core").InputSignal<string | undefined>;
/** Content displayed alongside the header as a hint */
hint: import("@angular/core").InputSignal<string | undefined>;
/** Content displayed below the header as a subtitle */
subtitle: import("@angular/core").InputSignal<string | undefined>;
/** Additional description displayed below the subtitle */
description: import("@angular/core").InputSignal<string | undefined>;
/** Badge component to be displayed next to the title */
titleBadge: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template displayed on the left side of the cell */
beforeTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Template displayed on the right side of the cell */
afterTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/** Platform service injection */
protected platformService: PlatformService;
/** Typography service for component selection */
protected typographyCellService: TypographyCellService;
/** Is the platform iOS */
get isIOS(): boolean;
/** Add iOS specific class */
get isiOS(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<CellComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CellComponent, "tgui-cell", never, { "hovered": { "alias": "hovered"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "interactiveAnimation": { "alias": "interactiveAnimation"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "propagateEvents": { "alias": "propagateEvents"; "required": false; "isSignal": true; }; "subhead": { "alias": "subhead"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "titleBadge": { "alias": "titleBadge"; "required": false; "isSignal": true; }; "beforeTemplate": { "alias": "beforeTemplate"; "required": false; "isSignal": true; }; "afterTemplate": { "alias": "afterTemplate"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}