@ogs-gmbh/ngx-utils/directives/text-clamp/text-clamp.directive.d.ts

A lightweight collection of utility functions and helpers for Angular applications

import { AfterViewInit, InputSignal } from '@angular/core';
import * as i0 from "@angular/core";
/**
 * Clamps text to its available space and appends a custom ellipsis.
 *
 * @remarks
 * Limits content automatically to the available size of the parent container.
 * Takes Line height into account as well as preserving whole words.
 * Works with changing input in form of signals as well as static input.
 *
 * @example **Template (HTML)**
 * ```html
 * <p
 *   textClamp
 *   [text]="myText()"
 *   [ellipsis]="'… more'"></p>
 * ```
 *
 * @example **Component (TypeScript)**
 * ```ts
 * @Component({
 *   standalone: true,
 *   selector: 'app-foo',
 *   imports: [TextClampDirective]
 * })
 * export class ArticleCardComponent {
 *   protected myText: WritableSignal<string> = signal<string>("...");
 *
 *   protected onMyEvent(): void {
 *    this.myText.set("something else...")
 *   }
 * }
 * ```
 */
export declare class TextClampDirective implements AfterViewInit {
    private _isTextInitialized;
    private readonly _renderer;
    private _htmlElement;
    private get _nativeElement();
    text: InputSignal<string | undefined>;
    ellipsis: InputSignal<string>;
    private _textChange$;
    private _canvasMeasureService;
    private _words;
    ngAfterViewInit(): void;
    setText(text: string): void;
    /**
     * Schedules the ellipsis calculation by waiting for the font to be fully loaded so it can be measured correctly
     */
    private scheduleEllipsis;
    /**
     * Calculates the multiline ellipsis by measuring word widths
     * against the available space and line count.
     *
     * @returns clamped text or undefined if measurement went wrong
     */
    getClampedText(): string | undefined;
    static ɵfac: i0.ɵɵFactoryDeclaration<TextClampDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TextClampDirective, "[textClamp]", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
//# sourceMappingURL=text-clamp.directive.d.ts.map