import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';Single button inside of a toggle group.
@Component({ selector: 'kbq-button-toggle', exportAs: 'kbqButtonToggle' }) class KbqButtonToggle { checked = input<boolean | undefined>(); value = input<NonNullable<unknown> | null | undefined>(); readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' }); readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' }); disabled = input<boolean | undefined>(); readonly change = output<KbqButtonToggleChange>(); get type(): ToggleType; get iconType(): string; focus(): void; focusViaKeyboard(): void; onToggleClick(): void; markForCheck(): void; }
checkedboolean | undefined Whether the button is checked.
valueNonNullable<unknown> | null | undefined Value of the toggle. The value of a selected toggle is the value of its group.
aria-labelstring | null Accessible name of the toggle. Required when the toggle projects nothing but icons.
aria-labelledbystring | null Id of the element that labels the toggle.
disabledboolean | undefined Whether the toggle is disabled. A toggle inside a disabled group is disabled as well.
changeKbqButtonToggleChange Event emitted when the group value changes.
typeToggleType Whether the toggle acts as a radio button (a single-selection group) or as a checkbox (a multiple-selection group, or a standalone toggle).
iconTypestring Whether the toggle holds icons only (-icon), icons beside a label (-icon-text) or no icon
at all (''). Rendered as the .kbq-button-toggle-icon/.kbq-button-toggle-icon-text host
class, which is the only signal a stylesheet gets: CSS cannot see text nodes, so a selector can
never tell an icon-only toggle from a label that happens to contain an icon.
focus()void Focuses the button.
focusViaKeyboard()void Focuses the button as if the user had reached it with the keyboard, showing the focus ring.
onToggleClick()void Checks the button toggle due to an interaction with the underlying native button.
markForCheck()void Marks the button toggle as needing checking for change detection.
Kept for back-compatibility. A toggle now derives checked and disabled from signals owned
by its group, so it re-renders on its own and nothing in the library calls this any more.
Selection group for KbqButtonToggle.
By default it behaves like a radio-button group — one toggle at a time, announced as a
radiogroup and walked with the arrow keys. With multiple the toggles become independent
toggle buttons and the group is announced as a plain group.
Name it with a plain aria-label/aria-labelledby attribute. The host is the very element the
consumer writes, so an input aliased to the same name would only write back what is already
there — and would wipe an [attr.aria-label] binding, which never reaches the input.
@Directive({ selector: 'kbq-button-toggle-group', exportAs: 'kbqButtonToggleGroup' }) class KbqButtonToggleGroup implements ControlValueAccessor { readonly vertical = input<boolean>(false); readonly stretched = input<boolean>(false); readonly multiple = input<boolean>(false); value = model<NonNullable<unknown> | null | undefined>(); disabled = input<boolean | undefined>(); readonly change = output<KbqButtonToggleChange>(); get selected(): KbqButtonToggle | KbqButtonToggle[] | null; readonly buttonToggles: Signal<readonly KbqButtonToggle[]>; emitChangeEvent(source: KbqButtonToggle): void; syncButtonToggle( toggle: KbqButtonToggle, select: boolean, isUserInput?: boolean ): void; isSelected(toggle: KbqButtonToggle): boolean; isPrechecked(toggle: KbqButtonToggle): boolean; }
verticalboolean Whether the toggle group is vertical.
stretchedboolean Whether the toggle group stretches to fill its container width, with toggles sharing equal space.
multipleboolean Whether multiple button toggles can be selected.
valueNonNullable<unknown> | null | undefined Value of the toggle group: an array in multiple-selection mode, a single value otherwise.
An accessor rather than a model(): writing it walks the toggles to find the ones that match,
and reading it reports the selection. [(value)] works all the same.
An assigned value that corresponds to no toggle is kept and reported as is, so that it applies
to a toggle rendered later — the same contract as KbqRadioGroup. It follows that value can
name a toggle selected does not hold: selected only ever reports toggles that exist.
disabledboolean | undefined Whether the whole button toggle group is disabled.
changeKbqButtonToggleChange Event emitted when the group's value changes.
selectedKbqButtonToggle | KbqButtonToggle[] | null Selected button toggles in the group: an array in multiple-selection mode, one toggle otherwise.
Only toggles that exist, so a value waiting for its toggle is not represented here.
buttonTogglesSignal<readonly KbqButtonToggle[]> Child button toggle buttons.
emitChangeEvent()void Dispatches a change event for the group value.
sourceKbqButtonToggle Toggle the change originated from. Taken from the interaction rather than from the selection, which is empty whenever the last selected toggle of a multiple-selection group is unchecked — there is no "last selected" toggle left to report then.
syncButtonToggle()void Syncs a button toggle's selected state with the model value.
toggleKbqButtonToggle Toggle to be synced.
selectboolean Whether the toggle should be selected.
isUserInput?boolean Whether the change was a result of a user interaction.
isSelected()boolean Checks whether a button toggle is selected.
isPrechecked()boolean Determines whether a button toggle should be checked on init, from the value waiting for it.
Change event object emitted by KbqButtonToggle.
class KbqButtonToggleChange { source: KbqButtonToggle; value: any; constructor(source: KbqButtonToggle, value: any); }
sourceKbqButtonToggle The KbqButtonToggle that emits the event.
valueany The value assigned to the KbqButtonToggle.
constructor()sourceKbqButtonToggle The KbqButtonToggle that emits the event.
valueany The value assigned to the KbqButtonToggle.
Acceptable types for a button toggle.
type ToggleType = 'checkbox' | 'radio';