Creates a FontSelect component inside the given element.
The host element that will contain the font picker.
Optional display and behaviour configuration.
ProtectedhostProtectedconfigProtectedselectedProtectedtriggerProtectedtriggerProtectedmenuGets the currently selected font family.
Sets the currently selected font family.
Releases DOM/event resources owned by the control.
Sets the available font options and optionally selects a font.
An array of font family names.
OptionalselectedFont: stringThe font to select. Defaults to the first font in the array.
Protected ReadonlyonHandles the click event on the trigger button. Toggles the open/closed state of the dropdown menu.
Protected ReadonlyonHandles the click event on the document to close the menu when clicking outside.
Protected ReadonlyonHandles the click event on a font option. Selects the clicked font and closes the menu.
The click event.
ProtectedrebuildReplaces the current option list with a new set of font families.
The font family strings to render.
ProtectedbuildBuilds a single option button with an optional font-preview span.
The CSS font-family string for this option.
The constructed option button element.
ProtectedselectUpdates the internal selection state, syncs the trigger and option list, and optionally emits 'fontchange'.
The new font family to select.
Whether to dispatch the change event. Defaults to true.
ProtectedsyncUpdates the trigger button's preview text to the current font family.
ProtectedsyncToggles the selected CSS class and aria-selected attribute on all font option buttons.
ProtectedopenAdds the open CSS class and updates aria-expanded on the trigger button.
ProtectedcloseRemoves the open CSS class and updates aria-expanded on the trigger button.
A dropdown control for selecting font families. Emits a 'fontchange' event when the selected font changes. Example usage: const fontSelect = new FontSelect(document.getElementById('font-select'), { fonts: ['Arial', 'Verdana', 'Tahoma'], showPreview: true, });