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
91 lines (90 loc) • 3.52 kB
TypeScript
import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
/**
* This component serves as an accordion container with built-in summary and content sections.
* It uses a signal-based approach to manage its state.
*
* ## Usage
* ```html
* <!-- With string summary -->
* <tgui-accordion
* summary="Simple string title"
* [(expanded)]="isExpanded">
* Accordion content here
* </tgui-accordion>
*
* <!-- With template summary -->
* <tgui-accordion
* [summary]="summaryTemplate"
* [afterTemplate]="afterTemplate"
* [(expanded)]="isExpanded">
* Accordion content here
* </tgui-accordion>
* ```
*/
export declare class AccordionComponent implements AfterViewInit, OnDestroy {
/**
* Optional ID for the accordion element
*/
readonly id: import("@angular/core").InputSignal<string>;
/**
* Summary content - can be either a string or a template
*/
readonly summary: import("@angular/core").InputSignal<string | TemplateRef<any>>;
/**
* Template displayed on the right side of the summary (replaces the default chevron)
*/
readonly afterTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
/**
* Model value for expanded state with two-way binding support
*/
readonly expanded: import("@angular/core").ModelSignal<boolean>;
/**
* @deprecated Use expanded() instead
* Internal signal for expansion state, kept for backward compatibility
*/
readonly _expanded: import("@angular/core").WritableSignal<boolean>;
/** Signal for dynamically setting max-height */
protected maxHeight: import("@angular/core").WritableSignal<string>;
/** Track when component is initialized */
private initialized;
private bodyElement;
private defaultChevronTemplate;
private defaultStringTemplate;
private ngZone;
/** Computed ID for the label element */
readonly labelId: import("@angular/core").Signal<string>;
/** Computed ID for the content element */
readonly contentId: import("@angular/core").Signal<string>;
private mutationObserver;
private resizeObserver;
constructor();
/** Get appropriate template based on summary type */
getSummaryTemplate(): TemplateRef<any>;
/** Get the template to display in the after slot */
getAfterTemplate(): TemplateRef<any> | null;
/**
* Toggle the expanded state of the accordion
*/
toggleExpanded(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Set up observers to detect changes in content size
*/
private setupContentObservers;
/**
* Disconnect all observers during component destruction
*/
private disconnectObservers;
/**
* Update height based on current content
*/
private updateContentHeight;
/**
* Calculates and sets the appropriate max-height based on content
*/
private updateMaxHeight;
static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "tgui-accordion", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": true; "isSignal": true; }; "afterTemplate": { "alias": "afterTemplate"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
}