import { IEventEmitter } from '@breadstone/mosaik-elements'; import type { IFontChangedEventDetail, IFontSelectedEventDetail } from '../../../events'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IFontEditorElementProps } from './IFontEditorElementProps'; import type { FontCategory, IFont } from './Types/IFont'; import type { IFontCollection } from './Types/IFontCollection'; import type { IFontProvider } from './Types/IFontProvider'; declare const FontEditorElement_base: import("../../../../Index").ControlBehaviorReturn<(abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor, import("../../../Behaviors/Disableable").IDisableableProps>; /** * A font editor component that allows users to browse, search, and select fonts * from various providers with filtering by alphabet, category, and search text. * * @name FontEditor * @element mosaik-font-editor * * @description * The FontEditor component provides a comprehensive font selection experience: * - Alphabet buttons (A-Z) for quick filtering * - Category chips for filtering by font type * - Search input for finding fonts by name * - Preview text with selected font * - Font list with visual samples * - Support for multiple font providers (local, Google, Adobe, custom) * * @category Media * * @fires fontSelected {FontSelectedEvent} - Fired when a font is selected * @fires fontChanged {FontChangedEvent} - Fired when the selected font changes * * @csspart root - The root container * @csspart preview - The preview section * @csspart preview-text - The preview text * @csspart search - The search input * @csspart filters - The filters container * @csspart categories - The category filter container * @csspart alphabet - The alphabet filter container * @csspart alphabet-button - An alphabet filter button * @csspart list-container - The font list container * @csspart font-item - A font list item * @csspart font-name - The font name in a list item * @csspart font-category - The font category in a list item * @csspart loading - The loading indicator * @csspart empty - The empty state message * * @example * ```html * * * * * * * * * ``` * * @public */ export declare class FontEditorElement extends FontEditorElement_base implements IFontEditorElementProps { private readonly _selected; private readonly _fontChanged; private _selectedFont; private _previewText; private _searchText; private _selectedCategory; private _selectedLetter; private _showPreview; private _showAlphabetFilter; private _showCategoryFilter; private _showSearch; private _showCollections; private _providers; private _collections; private _allFonts; private _fonts; private _loading; private _availableLetters; /** * Constructs a new instance of the FontEditorElement class. * * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the currently selected font. * * @public */ get selectedFont(): IFont | null; set selectedFont(value: IFont | null); /** * Gets or sets the text to display in the preview. * * @public * @attr */ get previewText(): string; set previewText(value: string); /** * Gets or sets the current search text. * * @public * @attr */ get searchText(): string; set searchText(value: string); /** * Gets or sets the selected category filter. * * @public * @attr */ get selectedCategory(): FontCategory | null; set selectedCategory(value: FontCategory | null); /** * Gets or sets the selected starting letter filter. * * @public * @attr */ get selectedLetter(): string | null; set selectedLetter(value: string | null); /** * Gets or sets whether to show the preview section. * * @public */ get showPreview(): boolean; set showPreview(value: boolean); /** * Gets or sets whether to show the alphabet filter. * * @public */ get showAlphabetFilter(): boolean; set showAlphabetFilter(value: boolean); /** * Gets or sets whether to show the category filter. * * @public */ get showCategoryFilter(): boolean; set showCategoryFilter(value: boolean); /** * Gets or sets whether to show the search input. * * @public */ get showSearch(): boolean; set showSearch(value: boolean); /** * Gets or sets whether to show the collections panel. * * @public */ get showCollections(): boolean; set showCollections(value: boolean); /** * Gets or sets the available font providers. * * @public */ get providers(): Array; set providers(value: Array); /** * Gets or sets the font collections. * * @public */ get collections(): Array; set collections(value: Array); /** * Called when a font is selected. * Provides reference to `IFontSelectedEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get selected(): IEventEmitter; /** * Called when the selected font changes. * Provides reference to `IFontChangedEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get fontChanged(): IEventEmitter; /** * Gets the fonts currently displayed. * * @public * @readonly */ get fonts(): ReadonlyArray; /** * Gets whether the component is loading. * * @public * @readonly */ get loading(): boolean; /** * Gets the available letters for filtering. * * @public * @readonly */ get availableLetters(): ReadonlyArray; /** * @inheritdoc */ connectedCallback(): void; /** * Adds a font provider. * * @param provider - The provider to add. */ addProvider(provider: IFontProvider): void; /** * Removes a font provider. * * @param providerId - The ID of the provider to remove. */ removeProvider(providerId: string): void; /** * Loads fonts from all providers. */ loadFonts(): Promise; /** * Computes the available letters based on loaded fonts. */ private computeAvailableLetters; /** * Filters fonts by letter. * * @param letter - The letter to filter by, or null for all. */ filterByLetter(letter: string | null): void; /** * Filters fonts by category. * * @param category - The category to filter by, or null for all. */ filterByCategory(category: FontCategory | null): void; /** * Filters fonts by search text. * * @param text - The search text. */ filterBySearch(text: string): void; /** * Applies all active filters. */ private applyFilters; /** * Selects a font. * * @param font - The font to select. */ selectFont(font: IFont): void; /** * Loads a font for preview. * * @param font - The font to load. */ loadFont(font: IFont): void; /** * Emits the select event. * * @private */ private emitSelect; /** * Emits the change event. * * @private */ private emitChange; } /** * @public */ export declare namespace FontEditorElement { type Props = IFontEditorElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-font-editor': FontEditorElement; } } export {}; //# sourceMappingURL=FontEditorElement.d.ts.map