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. * * @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) * * @name FontEditor * @element mosaik-font-editor * @category Media * * @csspart alphabet - The alphabet filter container * @csspart alphabet-button - An alphabet filter button * @csspart categories - The category filter container * @csspart empty - The empty state message * @csspart filters - The filters container * @csspart font-category - The font category in a list item * @csspart font-item - A font list item * @csspart font-name - The font name in a list item * @csspart list-container - The font list container * @csspart loading - The loading indicator * @csspart preview - The preview section * @csspart preview-text - The preview text * @csspart root - The root container * @csspart search - The search input * * @cssprop {String} --font-editor-alphabet-button-background-color - The editor alphabet button background color CSS custom property. * @cssprop {String} --font-editor-alphabet-button-background-color-active - The editor alphabet button background color active CSS custom property. * @cssprop {String} --font-editor-alphabet-button-background-color-hover - The editor alphabet button background color hover CSS custom property. * @cssprop {String} --font-editor-alphabet-button-border-radius - The editor alphabet button border radius CSS custom property. * @cssprop {String} --font-editor-alphabet-button-foreground-color - The editor alphabet button foreground color CSS custom property. * @cssprop {String} --font-editor-alphabet-button-foreground-color-active - The editor alphabet button foreground color active CSS custom property. * @cssprop {String} --font-editor-alphabet-button-foreground-color-disabled - The editor alphabet button foreground color disabled CSS custom property. * @cssprop {String} --font-editor-alphabet-button-foreground-color-hover - The editor alphabet button foreground color hover CSS custom property. * @cssprop {String} --font-editor-alphabet-button-size - The editor alphabet button size CSS custom property. * @cssprop {String} --font-editor-background-color - The editor background color CSS custom property. * @cssprop {String} --font-editor-border-color - The editor border color CSS custom property. * @cssprop {String} --font-editor-border-radius - The editor border radius CSS custom property. * @cssprop {String} --font-editor-border-style - The editor border style CSS custom property. * @cssprop {String} --font-editor-border-width - The editor border width CSS custom property. * @cssprop {String} --font-editor-focus-ring-active-width - The editor focus ring active width CSS custom property. * @cssprop {String} --font-editor-focus-ring-color - The editor focus ring color CSS custom property. * @cssprop {String} --font-editor-focus-ring-inward-offset - The editor focus ring inward offset CSS custom property. * @cssprop {String} --font-editor-focus-ring-outward-offset - The editor focus ring outward offset CSS custom property. * @cssprop {String} --font-editor-font-category-font-size - The editor font category font size CSS custom property. * @cssprop {String} --font-editor-font-category-foreground-color - The editor font category foreground color CSS custom property. * @cssprop {String} --font-editor-font-family - The editor font family CSS custom property. * @cssprop {String} --font-editor-font-item-background-color - The editor font item background color CSS custom property. * @cssprop {String} --font-editor-font-item-background-color-hover - The editor font item background color hover CSS custom property. * @cssprop {String} --font-editor-font-item-background-color-selected - The editor font item background color selected CSS custom property. * @cssprop {String} --font-editor-font-item-border-radius - The editor font item border radius CSS custom property. * @cssprop {String} --font-editor-font-item-padding - The editor font item padding CSS custom property. * @cssprop {String} --font-editor-font-letter-spacing - The editor font letter spacing CSS custom property. * @cssprop {String} --font-editor-font-line-height - The editor font line height CSS custom property. * @cssprop {String} --font-editor-font-name-font-size - The editor font name font size CSS custom property. * @cssprop {String} --font-editor-font-size - The editor font size CSS custom property. * @cssprop {String} --font-editor-font-text-decoration - The editor font text decoration CSS custom property. * @cssprop {String} --font-editor-font-text-transform - The editor font text transform CSS custom property. * @cssprop {String} --font-editor-font-weight - The editor font weight CSS custom property. * @cssprop {String} --font-editor-foreground-color - The editor foreground color CSS custom property. * @cssprop {String} --font-editor-gap - The editor gap CSS custom property. * @cssprop {String} --font-editor-height - The editor height CSS custom property. * @cssprop {String} --font-editor-list-height - The editor list height CSS custom property. * @cssprop {String} --font-editor-padding-bottom - The editor padding bottom CSS custom property. * @cssprop {String} --font-editor-padding-left - The editor padding left CSS custom property. * @cssprop {String} --font-editor-padding-right - The editor padding right CSS custom property. * @cssprop {String} --font-editor-padding-top - The editor padding top CSS custom property. * @cssprop {String} --font-editor-preview-background-color - The editor preview background color CSS custom property. * @cssprop {String} --font-editor-preview-border-radius - The editor preview border radius CSS custom property. * @cssprop {String} --font-editor-preview-font-size - The editor preview font size CSS custom property. * @cssprop {String} --font-editor-preview-min-height - The editor preview min height CSS custom property. * @cssprop {String} --font-editor-shadow - The editor shadow CSS custom property. * @cssprop {String} --font-editor-shadow-blur - The editor shadow blur CSS custom property. * @cssprop {String} --font-editor-shadow-color - The editor shadow color CSS custom property. * @cssprop {String} --font-editor-shadow-offset-x - The editor shadow offset x CSS custom property. * @cssprop {String} --font-editor-shadow-offset-y - The editor shadow offset y CSS custom property. * @cssprop {String} --font-editor-shadow-spread - The editor shadow spread CSS custom property. * @cssprop {String} --font-editor-transition-duration - The editor transition duration CSS custom property. * @cssprop {String} --font-editor-transition-mode - The editor transition mode CSS custom property. * @cssprop {String} --font-editor-transition-property - The editor transition property CSS custom property. * @cssprop {String} --font-editor-translate - The editor translate CSS custom property. * @cssprop {String} --font-editor-width - The editor width CSS custom property. * * @fires fontSelected {FontSelectedEvent} - Fired when a font is selected * @fires fontChanged {FontChangedEvent} - Fired when the selected font changes * * @dependency mosaik-button - The Button element. * @dependency mosaik-chip - The Chip element. * @dependency mosaik-spinner - The Spinner element. * @dependency mosaik-textbox - The Textbox element. * * @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