import { TextAlignment } from '../../../Types/TextAlignment'; import type { TextFormatter } from '../../../Types/TextFormatter'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ITextElementProps } from './ITextElementProps'; declare const TextElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Text - A fundamental typography component for displaying formatted text content with comprehensive styling options. * * @description * The Text component is a foundational typography element that provides flexible text rendering with * built-in formatting capabilities, semantic variant support, and extensive customization options. * It serves as the primary text display component across the design system, supporting semantic text * roles through variants (headline, title, body, caption), horizontal text alignment (left, center, * right, justify), text formatting functions for currency, dates, and custom transformations, and * advanced features like truncation, line clamping, and text marking/highlighting. The component * integrates deeply with the Variantable, Disableable, TextFormattable, and Themeable behaviors to * provide consistent typography across different contexts while maintaining accessibility through * proper ARIA roles and semantic HTML structure. * * @name Text * @element mosaik-text * @category Primitives * * @slot text - Primary text content area for displaying formatted text * @slot - Default content slot for text and inline elements * * @csspart text - The paragraph element containing the text content * @csspart marker - The highlighted/marked portion of text when marker property is used * * @cssprop {String} --text-background-color - The background color of the text container * @cssprop {String} --text-border-color - The border color of the text container * @cssprop {String} --text-border-radius - The border radius for text container styling * @cssprop {String} --text-border-style - The border style for text container * @cssprop {String} --text-border-width - The border width for text container * @cssprop {String} --text-font-decoration - The text decoration style (underline, line-through, etc.) * @cssprop {String} --text-font-family - The font family for text content * @cssprop {String} --text-font-letter-spacing - The letter spacing for text content * @cssprop {String} --text-font-line-height - The line height for text content * @cssprop {String} --text-font-size - The font size for text content * @cssprop {String} --text-font-transform - The text transformation (uppercase, lowercase, capitalize) * @cssprop {String} --text-font-weight - The font weight for text content * @cssprop {String} --text-foreground-color - The text color for primary content * @cssprop {String} --text-gap - The gap between text elements when multiple * @cssprop {String} --text-padding-bottom - The bottom padding for text container * @cssprop {String} --text-padding-left - The left padding for text container * @cssprop {String} --text-padding-right - The right padding for text container * @cssprop {String} --text-padding-top - The top padding for text container * @cssprop {String} --text-shadow - The text shadow effect for enhanced visibility * @cssprop {String} --text-transition-duration - The animation duration for text changes * @cssprop {String} --text-transition-mode - The animation easing mode for text transitions * @cssprop {String} --text-transition-property - The CSS properties to animate during transitions * * @example * Basic text content: * ```html * Welcome to our application * ``` * * @example * Text with alignment and variant: * ```html * * Centered primary text * * ``` * * @public */ export declare class TextElement extends TextElement_base implements ITextElementProps { private readonly _text; private _truncate; private _wrap; private _maxLength; private _maxLines; private _readonly; private _alignment; private _marker; /** * Constructs a new instance of the `TextElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `text` property. * * @public */ get text(): string | null | undefined; set text(value: string | null | undefined); /** * Gets or sets the `truncate` property. * * @public * @attr */ get truncate(): boolean; set truncate(value: boolean); /** * Gets or sets the `wrap` property. * * @public * @attr */ get wrap(): boolean; set wrap(value: boolean); /** * Gets or sets the `maxLength` property. * * @public * @attr */ get maxLength(): number | null; set maxLength(value: number | null); /** * Gets or sets the `maxLines` property. * * @public * @attr */ get maxLines(): number | null; set maxLines(value: number | null); /** * Gets or sets the `readonly` property. * * @public * @attr */ get readonly(): boolean; set readonly(value: boolean); /** * Gets or sets the `alignment` property. * * Possible values are: * * `center` - centers the text horizontally within the element * * `justify` - stretches the text to fill the width of the element, adjusting spacing as needed * * `left` - aligns the text to the left edge of the element (default) * * `right` - aligns the text to the right edge of the element * * @public * @attr */ get alignment(): TextAlignment; set alignment(value: TextAlignment); /** * Gets or sets the `marker` property. * * @public * @attr */ get marker(): string | boolean | null | undefined; set marker(value: string | boolean | null | undefined); /** * Mark the `text` by the given `value`. If the value is a boolean `true`, the text will be marked completely. * * @public */ mark(value: string | boolean): void; /** * Trim the `text` by the given `maxLength`. * * @template * @private */ tryTrim(): string; /** * @protected */ protected onTextPropertyChanged(_prev?: string, _next?: string): void; /** * @protected */ protected onFormatterPropertyChanged(_prev?: TextFormatter, next?: TextFormatter): void; /** * @protected */ protected onMarkerPropertyChanged(_prev?: string | boolean | null, next?: string | boolean | null): void; } /** * @public */ export declare namespace TextElement { type Props = ITextElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-text': TextElement; } } export {}; //# sourceMappingURL=TextElement.d.ts.map